Add profile support to IP filtering components and update translations

public/locales/en/translations.json

@@ -116,10 +116,12 @@
         "Tooltip": "IPFiltering is used to filter the IP addresses that can access the forward. It can be used to allow or deny access to specific IP addresses or ranges of IP addresses.",
         "Mode": "Mode",
         "RulesCount": "Rules count",
+        "Profiles": "Profiles",
         "Rules": {
           "Title": "Rules",
           "IpAddress": "IP address",
-          "Description": "Description"
+          "Description": "Description",
+          "Profile": "Profile"
         }
       }
     }

public/locales/ro/translations.json

@@ -107,10 +107,12 @@
         "Tooltip": "Filtrarea IP este utilizată pentru a filtra adresele IP care pot accesa redirecționarea. Poate fi utilizată pentru a permite sau a refuza accesul la anumite adrese IP sau intervale de adrese IP.",
         "Mode": "Mod",
         "RulesCount": "Număr reguli",
+        "Profiles": "Profiluri",
         "Rules": {
           "Title": "Reguli",
           "IpAddress": "Adresă IP",
-          "Description": "Descriere"
+          "Description": "Descriere",
+          "Profile": "Profil"
         }
       }
     }

src/components/common/chips/SlimChips.js

@@ -11,11 +11,11 @@ const SlimChips = ({ elements }) => {
 
   return (
     <>
-      {elements.map(protocol => (
+      {elements.map(item => (
         <Chip
-          key={elements.indexOf(protocol)}
+          key={elements.indexOf(item)}
           size="small"
-          label={protocol}
+          label={item}
           className={classes.smallChip}
         />
       ))}

src/features/forwards/options/components/advanced/ipFiltering/IpFilteringCard.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import ExpandableCard from "../../../../../../components/common/ExpandableCard";
 import { useTranslation } from "react-i18next";
-import BlockIcon from "@material-ui/icons/Block";
+import FilterTiltShiftIcon from "@material-ui/icons/FilterTiltShift";
 import IpFilteringSummary from "./IpFilteringSummary";
 
 const IpFilteringCard = ({ data }) => {
@@ -10,7 +10,7 @@ const IpFilteringCard = ({ data }) => {
 
   return (
     <ExpandableCard
-      Icon={<BlockIcon />}
+      Icon={<FilterTiltShiftIcon />}
       title={t("Forward.Options.IpFiltering.Label")}
       subtitle={t("Forward.Options.IpFiltering.Tooltip")}
       expandable={false}

src/features/forwards/options/components/advanced/ipFiltering/IpFilteringRules.js

@@ -10,7 +10,8 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  Paper
+  Paper,
+  Chip
 } from "@material-ui/core";
 import styles from "../../../../../../components/common/styles/tableStyles";
 import {
@@ -19,6 +20,7 @@ import {
 } from "../../../../../../components/common/MaterialTable";
 import InputIcon from "@material-ui/icons/Input";
 import BlockIcon from "@material-ui/icons/Block";
+import BrokenImageIcon from "@material-ui/icons/BrokenImage";
 
 const useStyles = makeStyles(styles);
 
@@ -48,6 +50,9 @@ const IpFilteringRules = ({ mode, rules }) => {
                 <StyledTableCell>
                   {t("Forward.Options.IpFiltering.Rules.Description")}
                 </StyledTableCell>
+                <StyledTableCell>
+                  {t("Forward.Options.IpFiltering.Rules.Profile")}
+                </StyledTableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -70,6 +75,16 @@ const IpFilteringRules = ({ mode, rules }) => {
                         {rule.ipAddress}
                       </StyledTableCell>
                       <StyledTableCell>{rule.description}</StyledTableCell>
+                      <StyledTableCell>
+                        {rule.profileReference && (
+                          <Chip
+                            icon={<BrokenImageIcon />}
+                            size="small"
+                            label={rule.profileReference}
+                            style={{ maxHeight: 20 }}
+                          />
+                        )}
+                      </StyledTableCell>
                     </StyledTableRow>
                   );
                 })}

src/features/forwards/options/components/advanced/ipFiltering/IpFilteringSummary.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import { Grid } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
@@ -6,12 +6,21 @@ import ActiveIcon from "../../../../../../components/common/ActiveIcon";
 import { makeStyles } from "@material-ui/core/styles";
 import styles from "../../../../../../components/common/styles/gridStyles";
 import IpFilteringRules from "./IpFilteringRules";
+import SlimChips from "../../../../../../components/common/chips/SlimChips";
 
 const useStyles = makeStyles(styles);
 
 const IpFilteringSummary = ({ data }) => {
   const { t } = useTranslation();
   const classes = useStyles();
+  const profileCodes = useMemo(() => {
+    if (!data.rules) return null;
+    const codes = data.rules
+      .map(r => r.profileReference)
+      .filter(code => !!code);
+    return Array.from(new Set(codes));
+  }, [data.rules]);
+
   return (
     <>
       <Grid container>
@@ -27,6 +36,12 @@ const IpFilteringSummary = ({ data }) => {
           {`${t("Forward.Options.IpFiltering.RulesCount")}: `}
           <span className={classes.value}>{data.rules?.length || 0}</span>
         </Grid>
+        {profileCodes && (
+          <Grid item xs={6} sm={3} md={3}>
+            {`${t("Forward.Options.IpFiltering.Profiles")}: `}
+            <SlimChips elements={profileCodes} />
+          </Grid>
+        )}
       </Grid>
       <br />
       <IpFilteringRules mode={data.mode} rules={data.rules} />