diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index ba00b6b..7275270 100644
--- a/public/locales/en/translations.json
+++ b/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"
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index 91305b1..4f86fb1 100644
--- a/public/locales/ro/translations.json
+++ b/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"
diff --git a/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteDetailsComponent.js b/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteDetailsComponent.js
new file mode 100644
index 0000000..85315fe
--- /dev/null
+++ b/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 (
+ }
+ iconVariant="rounded"
+ title={t("Forward.Options.KeyOverwrite.Details")}
+ smallHeader
+ Content={
+
+
+
+
+
+ {t("Forward.Options.KeyOverwrite.Origin")}
+
+
+ {t("Forward.Options.KeyOverwrite.Substitute")}
+
+
+
+
+ <>
+ {details.map(detail => {
+ return (
+
+ {detail.origin}
+ {detail.substitute}
+
+ );
+ })}
+ >
+
+
+
+ }
+ />
+ );
+};
+
+KeyOverwriteDetailsComponent.propTypes = {
+ details: PropTypes.array.isRequired
+};
+
+export default KeyOverwriteDetailsComponent;
diff --git a/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteSummary.js b/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteSummary.js
index 5c7996f..e26a5c3 100644
--- a/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteSummary.js
+++ b/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 (
-
-
- {`${t("General.Enabled")}: `}
-
-
+ <>
+
+
+ {`${t("General.Enabled")}: `}
+
+
+ {singleKey && (
+ <>
+
+ {`${t("Forward.Options.KeyOverwrite.Origin")}: `}
+ {data.details[0].origin}
+
-
- {`${t("Forward.Options.KeyOverwrite.Origin")}: `}
- {data.origin}
+
+ {`${t("Forward.Options.KeyOverwrite.Substitute")}: `}
+
+ {data.details[0].substitute}
+
+
+ >
+ )}
-
-
- {`${t("Forward.Options.KeyOverwrite.Substitute")}: `}
- {data.substitute}
-
-
+ {!singleKey && (
+ <>
+
+
+ >
+ )}
+ >
);
};