exceptions screen

public/locales/en/translations.json

@@ -68,7 +68,12 @@
         "Origin": "Origin",
         "Substitute": "Substitute"
       },
-      "Exceptions": "Exceptions"
+      "Exceptions": {
+        "Label": "Exceptions",
+        "Definition": "Exceptions are used to inform the system to not replace the key in some sequences.",
+        "Keys": "Keys",
+        "Match": "Match"
+      }
     }
   },
   "ReleaseNotes": {

public/locales/ro/translations.json

@@ -59,7 +59,12 @@
         "Origin": "Înlocuit",
         "Substitute": "Înlocuitor"
       },
-      "Exceptions": "Excepții"
+      "Exceptions": {
+        "Label": "Excepții",
+        "Definition": "Excepțiile sunt folosite pentru a informa sistemul să nu înlocuiască cheia în unele secvențe.",
+        "Keys": "Chei",
+        "Match": "Potrivire"
+      }
     }
   },
   "ReleaseNotes": {

src/features/forwards/options/components/advanced/exceptions/ExceptionsCard.js

@@ -3,17 +3,98 @@ import PropTypes from "prop-types";
 import ExpandableCard from "../../../../../../components/common/ExpandableCard";
 import { useTranslation } from "react-i18next";
 import PriorityHighIcon from "@material-ui/icons/PriorityHigh";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Typography,
+  Chip
+} from "@material-ui/core";
+import styles from "../../../../../../components/common/styles/tableStyles";
+import {
+  StyledTableCell,
+  StyledTableRow
+} from "../../../../../../components/common/MaterialTable";
+import PanToolIcon from "@material-ui/icons/PanTool";
+
+const useStyles = makeStyles(styles);
 
 const ExceptionsCard = ({ exceptions }) => {
+  const classes = useStyles();
   const { t } = useTranslation();
 
+  const exceptionsInternal = exceptions.map(z => {
+    const result = { match: z.match };
+    const keys = [...z.keys];
+    if (z.key) {
+      keys.unshift(z.key);
+    }
+    result.keys = keys;
+    return result;
+  });
+
   return (
     <ExpandableCard
       Icon={<PriorityHighIcon />}
       iconVariant="rounded"
-      title={t("Forward.Options.Exceptions")}
+      title={t("Forward.Options.Exceptions.Label")}
       smallHeader
-      Content={<div>CONTENT...</div>}
+      Content={
+        <>
+          <Typography variant="caption" display="block" gutterBottom>
+            {t("Forward.Options.Exceptions.Definition")}
+          </Typography>
+          <TableContainer component={Paper}>
+            <Table
+              className={classes.narrowTable}
+              size="small"
+              aria-label="customized table"
+            >
+              <TableHead>
+                <TableRow>
+                  <StyledTableCell>
+                    {t("Forward.Options.Exceptions.Keys")}
+                  </StyledTableCell>
+                  <StyledTableCell align="right">
+                    {t("Forward.Options.Exceptions.Match")}
+                  </StyledTableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                <>
+                  {exceptionsInternal.map(exception => {
+                    return (
+                      <StyledTableRow
+                        key={exceptionsInternal.indexOf(exception)}
+                      >
+                        <StyledTableCell>
+                          {exception.keys.map(key => {
+                            return (
+                              <Chip
+                                key={exception.keys.indexOf(key)}
+                                icon={<PanToolIcon />}
+                                size="small"
+                                label={key}
+                              />
+                            );
+                          })}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {exception.match}
+                        </StyledTableCell>
+                      </StyledTableRow>
+                    );
+                  })}
+                </>
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </>
+      }
     />
   );
 };