KeyOverwriteDetailsComponent

public/locales/en/translations.json

@@ -64,6 +64,7 @@
       },
       "KeyOverwrite": {
         "Label": "Key overwrite",
+        "Details": "Keys",
         "Tooltip": "KeyOverwrite can be used to replace any key from all http responses of a forward.",
         "Origin": "Origin",
         "Substitute": "Substitute"

public/locales/ro/translations.json

@@ -55,6 +55,7 @@
       },
       "KeyOverwrite": {
         "Label": "Key overwrite",
+        "Details": "Chei",
         "Tooltip": "KeyOverwrite poate fi utilizat pentru a înlocui orice cheie din toate răspunsurile http ale unei redirecționări.",
         "Origin": "Înlocuit",
         "Substitute": "Înlocuitor"

src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteDetailsComponent.js

@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ExpandableCard from "../../../../../../components/common/ExpandableCard";
+import { useTranslation } from "react-i18next";
+import { List } from "@material-ui/icons";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper
+} from "@material-ui/core";
+import styles from "../../../../../../components/common/styles/tableStyles";
+import {
+  StyledTableCell,
+  StyledTableRow
+} from "../../../../../../components/common/MaterialTable";
+
+const useStyles = makeStyles(styles);
+
+const KeyOverwriteDetailsComponent = ({ details }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <ExpandableCard
+      Icon={<List />}
+      iconVariant="rounded"
+      title={t("Forward.Options.KeyOverwrite.Details")}
+      smallHeader
+      Content={
+        <TableContainer component={Paper}>
+          <Table
+            className={classes.narrowTable}
+            size="small"
+            aria-label="customized table"
+          >
+            <TableHead>
+              <TableRow>
+                <StyledTableCell>
+                  {t("Forward.Options.KeyOverwrite.Origin")}
+                </StyledTableCell>
+                <StyledTableCell>
+                  {t("Forward.Options.KeyOverwrite.Substitute")}
+                </StyledTableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <>
+                {details.map(detail => {
+                  return (
+                    <StyledTableRow key={details.indexOf(detail)}>
+                      <StyledTableCell>{detail.origin}</StyledTableCell>
+                      <StyledTableCell>{detail.substitute}</StyledTableCell>
+                    </StyledTableRow>
+                  );
+                })}
+              </>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      }
+    />
+  );
+};
+
+KeyOverwriteDetailsComponent.propTypes = {
+  details: PropTypes.array.isRequired
+};
+
+export default KeyOverwriteDetailsComponent;

src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteSummary.js

@@ -5,30 +5,45 @@ import { makeStyles } from "@material-ui/core/styles";
 import { useTranslation } from "react-i18next";
 import styles from "../../../../../../components/common/styles/gridStyles";
 import ActiveIcon from "../../../../../../components/common/ActiveIcon";
+import KeyOverwriteDetailsComponent from "./KeyOverwriteDetailsComponent";
 
 const useStyles = makeStyles(styles);
 
 const KeyOverwriteSummary = ({ data }) => {
   const classes = useStyles();
   const { t } = useTranslation();
+  const singleKey = data.details.length === 1;
 
   return (
-    <Grid container>
-      <Grid item xs={6} sm={3} md={3}>
-        {`${t("General.Enabled")}: `}
-        <ActiveIcon active={data.on} />
-      </Grid>
+    <>
+      <Grid container>
+        <Grid item xs={6} sm={3} md={3}>
+          {`${t("General.Enabled")}: `}
+          <ActiveIcon active={data.on} />
+        </Grid>
+        {singleKey && (
+          <>
+            <Grid item xs={6} sm={3} md={3}>
+              {`${t("Forward.Options.KeyOverwrite.Origin")}: `}
+              <span className={classes.value}>{data.details[0].origin}</span>
+            </Grid>
 
-      <Grid item xs={6} sm={3} md={3}>
-        {`${t("Forward.Options.KeyOverwrite.Origin")}: `}
-        <span className={classes.value}>{data.origin}</span>
+            <Grid item xs={6} sm={3} md={3}>
+              {`${t("Forward.Options.KeyOverwrite.Substitute")}: `}
+              <span className={classes.value}>
+                {data.details[0].substitute}
+              </span>
+            </Grid>
+          </>
+        )}
       </Grid>
-
-      <Grid item xs={6} sm={3} md={3}>
-        {`${t("Forward.Options.KeyOverwrite.Substitute")}: `}
-        <span className={classes.value}>{data.substitute}</span>
-      </Grid>
-    </Grid>
+      {!singleKey && (
+        <>
+          <br />
+          <KeyOverwriteDetailsComponent details={data.details} />
+        </>
+      )}
+    </>
   );
 };