Display SpecificHeaders feature data

private/Notes.txt

@@ -1,5 +1,6 @@
 ****************************************************************
 Material UI v4: https://v4.mui.com/components/lists/
+                https://v4.mui.com/components/material-icons/
 ****************************************************************
 
 withTranslation()(LegacyComponentClass)

public/locales/en/translations.json

@@ -74,6 +74,15 @@
         "Substitute": "Substitute",
         "Conditions": "Conditions"
       },
+      "SpecificHeaders": {
+        "Label": "Specific headers",
+        "Tooltip": "SpecificHeaders can be used to add, replace or delete headers on all http requests or responses of a forward.",
+        "Rules": "Rules",
+        "Header": "Header",
+        "Value": "Value",
+        "Direction": "Direction",
+        "Action": "Action"
+      },
       "Exceptions": {
         "Label": "Exceptions",
         "Definition": "Exceptions are used to inform the system to not replace the key in some sequences.",

public/locales/ro/translations.json

@@ -65,6 +65,15 @@
         "Substitute": "Înlocuitor",
         "Conditions": "Condiții"
       },
+      "SpecificHeaders": {
+        "Label": "Specific headers",
+        "Tooltip": "SpecificHeaders poate fi utilizat pentru a adăuga, înlocui sau șterge headere de pe toate solicitările sau răspunsurile http ale unei redirecționări.",
+        "Rules": "Reguli",
+        "Header": "Antet",
+        "Value": "Valoare",
+        "Direction": "Direcție",
+        "Action": "Acțiune"
+      },
       "Exceptions": {
         "Label": "Excepții",
         "Definition": "Excepțiile sunt folosite pentru a informa sistemul să nu înlocuiască cheia în unele secvențe.",

src/components/common/ExpandableCard.js

@@ -76,7 +76,8 @@ const ExpandableCard = ({
 };
 
 ExpandableCard.defaultProps = {
-  expandable: true
+  expandable: true,
+  Content: <div>...</div>
 };
 
 ExpandableCard.propTypes = {
@@ -87,7 +88,7 @@ ExpandableCard.propTypes = {
   smallHeader: PropTypes.bool,
   expandable: PropTypes.bool,
   Summary: PropTypes.node,
-  Content: PropTypes.node.isRequired
+  Content: PropTypes.node
 };
 
 export default ExpandableCard;

src/features/forwards/options/components/advanced/ForwardOptionsAdvancedComponent.js

@@ -4,6 +4,7 @@ import TrailingSlashCard from "./trailingSlash/TrailingSlashCard";
 import PathOverwriteCard from "./pathOverwrite/PathOverwriteCard";
 import PathInjectionCard from "./pathInjection/PathInjectionCard";
 import KeyOverwriteCard from "./keyOverwrite/KeyOverwriteCard";
+import SpecificHeadersCard from "./specificHeaders/SpecificHeadersCard";
 
 const ForwardOptionsAdvancedComponent = ({ options }) => {
   return (
@@ -32,6 +33,12 @@ const ForwardOptionsAdvancedComponent = ({ options }) => {
           <br />
         </>
       )}
+      {options.specificHeaders && (
+        <>
+          <SpecificHeadersCard data={options.specificHeaders} />
+          <br />
+        </>
+      )}
     </>
   );
 };

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

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Grid, Box } from "@material-ui/core";
+import { Grid } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useTranslation } from "react-i18next";
 import styles from "../../../../../../components/common/styles/gridStyles";

src/features/forwards/options/components/advanced/specificHeaders/SpecificHeaderRules.js

@@ -0,0 +1,80 @@
+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 SpecificHeaderRules = ({ rules }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+  return (
+    <ExpandableCard
+      Icon={<List />}
+      iconVariant="rounded"
+      title={t("Forward.Options.SpecificHeaders.Rules")}
+      smallHeader
+      Content={
+        <TableContainer component={Paper}>
+          <Table
+            className={classes.narrowTable}
+            size="small"
+            aria-label="customized table"
+          >
+            <TableHead>
+              <TableRow>
+                <StyledTableCell>
+                  {t("Forward.Options.SpecificHeaders.Header")}
+                </StyledTableCell>
+                <StyledTableCell>
+                  {t("Forward.Options.SpecificHeaders.Value")}
+                </StyledTableCell>
+                <StyledTableCell>
+                  {t("Forward.Options.SpecificHeaders.Direction")}
+                </StyledTableCell>
+                <StyledTableCell>
+                  {t("Forward.Options.SpecificHeaders.Action")}
+                </StyledTableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <>
+                {rules.map(rule => {
+                  return (
+                    <StyledTableRow key={rules.indexOf(rule)}>
+                      <StyledTableCell>{rule.header}</StyledTableCell>
+                      <StyledTableCell>{rule.value}</StyledTableCell>
+                      <StyledTableCell>{rule.direction}</StyledTableCell>
+                      <StyledTableCell>{rule.action}</StyledTableCell>
+                    </StyledTableRow>
+                  );
+                })}
+              </>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      }
+    />
+  );
+};
+
+SpecificHeaderRules.propTypes = {
+  rules: PropTypes.array.isRequired
+};
+
+export default SpecificHeaderRules;

src/features/forwards/options/components/advanced/specificHeaders/SpecificHeadersCard.js

@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ExpandableCard from "../../../../../../components/common/ExpandableCard";
+import { useTranslation } from "react-i18next";
+import FolderSpecialIcon from "@material-ui/icons/FolderSpecial";
+import SpecificHeadersSummary from "./SpecificHeadersSummary";
+
+const SpecificHeadersCard = ({ data }) => {
+  const { t } = useTranslation();
+
+  return (
+    <ExpandableCard
+      Icon={<FolderSpecialIcon />}
+      title={t("Forward.Options.SpecificHeaders.Label")}
+      subtitle={t("Forward.Options.SpecificHeaders.Tooltip")}
+      expandable={false}
+      Summary={<SpecificHeadersSummary data={data} />}
+    />
+  );
+};
+
+SpecificHeadersCard.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
+export default SpecificHeadersCard;

src/features/forwards/options/components/advanced/specificHeaders/SpecificHeadersSummary.js

@@ -0,0 +1,28 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+import ActiveIcon from "../../../../../../components/common/ActiveIcon";
+import SpecificHeaderRules from "./SpecificHeaderRules";
+
+const SpecificHeadersSummary = ({ data }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Grid container>
+        <Grid item xs={6} sm={3} md={3}>
+          {`${t("General.Enabled")}: `}
+          <ActiveIcon active={data.on} />
+        </Grid>
+      </Grid>
+      <br />
+      <SpecificHeaderRules rules={data.rules} />
+    </>
+  );
+};
+
+SpecificHeadersSummary.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
+export default SpecificHeadersSummary;

src/features/forwards/options/components/simple/ForwardOptionsComponent.js

@@ -48,6 +48,11 @@ const ForwardOptionsComponent = ({ title, options }) => {
         label: "Forward.Options.KeyOverwrite.Label",
         tooltip: "Forward.Options.KeyOverwrite.Tooltip",
         active: options.keyOverwrite?.on
+      },
+      {
+        label: "Forward.Options.SpecificHeaders.Label",
+        tooltip: "Forward.Options.SpecificHeaders.Tooltip",
+        active: options.specificHeaders?.on
       }
     ],
     [options]