displayed the conditions of the KeyOverwrite feature

private/Notes.txt

@@ -1,3 +1,6 @@
+****************************************************************
+Material UI v4: https://v4.mui.com/components/lists/
+****************************************************************
 
 withTranslation()(LegacyComponentClass)
 const { t } = this.props;

public/locales/en/translations.json

@@ -71,7 +71,8 @@
         "Details": "Keys",
         "Tooltip": "KeyOverwrite can be used to replace any key from all http responses of a forward.",
         "Origin": "Origin",
-        "Substitute": "Substitute"
+        "Substitute": "Substitute",
+        "Conditions": "Conditions"
       },
       "Exceptions": {
         "Label": "Exceptions",

public/locales/ro/translations.json

@@ -62,7 +62,8 @@
         "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"
+        "Substitute": "Înlocuitor",
+        "Conditions": "Condiții"
       },
       "Exceptions": {
         "Label": "Excepții",

src/components/common/chips/SlimChips.js

@@ -2,18 +2,18 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Chip } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
-import styles from "../../../../components/common/styles/elementStyles";
+import styles from "./styles";
 
 const useStyles = makeStyles(styles);
 
-const ForwardProtocols = ({ protocols }) => {
+const SlimChips = ({ elements }) => {
   const classes = useStyles();
 
   return (
     <>
-      {protocols.map(protocol => (
+      {elements.map(protocol => (
         <Chip
-          key={protocols.indexOf(protocol)}
+          key={elements.indexOf(protocol)}
           size="small"
           label={protocol}
           className={classes.smallChip}
@@ -23,8 +23,8 @@ const ForwardProtocols = ({ protocols }) => {
   );
 };
 
-ForwardProtocols.propTypes = {
+SlimChips.propTypes = {
-  protocols: PropTypes.array.isRequired
+  elements: PropTypes.arrayOf(PropTypes.string).isRequired
 };
 
-export default ForwardProtocols;
+export default SlimChips;

src/features/forwards/core/components/ForwardSummary.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { Grid, Link } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useTranslation } from "react-i18next";
-import ForwardProtocols from "./ForwardProtocols";
+import SlimChips from "../../../../components/common/chips/SlimChips";
 import styles from "../../../../components/common/styles/gridStyles";
 
 const useStyles = makeStyles(styles);
@@ -14,7 +14,7 @@ const ForwardSummary = ({ forward, handleForwardClick }) => {
 
   return (
     <Grid container>
-      <Grid item xs={4} sm={3}>
+      <Grid item xs={12} sm={6} md={3}>
         {`${t("Forward.From")}: `}
         <span className={classes.value}>
           <Link href="#" onClick={handleForwardClick(forward)}>
@@ -23,14 +23,14 @@ const ForwardSummary = ({ forward, handleForwardClick }) => {
         </span>
       </Grid>
 
-      <Grid item xs={4}>
+      <Grid item xs={12} sm={6} md={3}>
         {`${t("Forward.To")}: `}
         <span className={classes.value}>{forward.to}</span>
       </Grid>
       {forward.protocols && (
-        <Grid item xs={4}>
+        <Grid item xs={12} sm={6} md={3}>
           {`${t("Forward.Protocols")}: `}
-          <ForwardProtocols protocols={forward.protocols} />
+          <SlimChips elements={forward.protocols} />
         </Grid>
       )}
     </Grid>

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

@@ -17,6 +17,7 @@ import {
   StyledTableCell,
   StyledTableRow
 } from "../../../../../../components/common/MaterialTable";
+import SlimChips from "../../../../../../components/common/chips/SlimChips";
 
 const useStyles = makeStyles(styles);
 
@@ -24,6 +25,8 @@ const KeyOverwriteDetailsComponent = ({ details }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
+  const displayConditions = details.some(z => z.conditions);
+
   return (
     <ExpandableCard
       Icon={<List />}
@@ -45,6 +48,11 @@ const KeyOverwriteDetailsComponent = ({ details }) => {
                 <StyledTableCell>
                   {t("Forward.Options.KeyOverwrite.Substitute")}
                 </StyledTableCell>
+                {displayConditions && (
+                  <StyledTableCell>
+                    {t("Forward.Options.KeyOverwrite.Conditions")}
+                  </StyledTableCell>
+                )}
               </TableRow>
             </TableHead>
             <TableBody>
@@ -54,6 +62,13 @@ const KeyOverwriteDetailsComponent = ({ details }) => {
                     <StyledTableRow key={details.indexOf(detail)}>
                       <StyledTableCell>{detail.origin}</StyledTableCell>
                       <StyledTableCell>{detail.substitute}</StyledTableCell>
+                      {displayConditions && (
+                        <StyledTableCell>
+                          {detail.conditions && (
+                            <SlimChips elements={detail.conditions} />
+                          )}
+                        </StyledTableCell>
+                      )}
                     </StyledTableRow>
                   );
                 })}

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

@@ -1,11 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Grid } from "@material-ui/core";
+import { Grid, Box } from "@material-ui/core";
 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";
+import SlimChips from "../../../../../../components/common/chips/SlimChips";
 
 const useStyles = makeStyles(styles);
 
@@ -23,17 +24,23 @@ const KeyOverwriteSummary = ({ data }) => {
         </Grid>
         {singleKey && (
           <>
-            <Grid item xs={6} sm={3} md={3}>
+            <Grid item xs={12} sm={6} 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}>
+            <Grid item xs={12} sm={6} md={3}>
               {`${t("Forward.Options.KeyOverwrite.Substitute")}: `}
               <span className={classes.value}>
                 {data.details[0].substitute}
               </span>
             </Grid>
+            {data.details[0].conditions && (
+              <Grid item xs={12} sm={6} md={3}>
+                {`${t("Forward.Options.KeyOverwrite.Conditions")}: `}
+                <SlimChips elements={data.details[0].conditions} />
+              </Grid>
+            )}
           </>
         )}
       </Grid>

src/features/session/components/SessionForwardsComponent.js

@@ -17,7 +17,7 @@ import {
 import Spinner from "../../../components/common/Spinner";
 import DonutLargeRoundedIcon from "@material-ui/icons/DonutLargeRounded";
 import SessionForwardsHeaderComponent from "./SessionForwardsHeaderComponent";
-import ForwardProtocols from "../../forwards/core/components/ForwardProtocols";
+import SlimChips from "../../../components/common/chips/SlimChips";
 import { useTranslation } from "react-i18next";
 import styles from "../../../components/common/styles/tableStyles";
 import {
@@ -82,7 +82,7 @@ const SessionForwardsComponent = ({
                       <StyledTableCell>{row.to}</StyledTableCell>
                       <StyledTableCell>
                         {row.protocols ? (
-                          <ForwardProtocols protocols={row.protocols} />
+                          <SlimChips elements={row.protocols} />
                         ) : (
                           ""
                         )}