ExceptionsCard

public/locales/en/translations.json

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

public/locales/ro/translations.json

@@ -58,7 +58,8 @@
         "Tooltip": "KeyOverwrite poate fi utilizat pentru a înlocui orice cheie din toate răspunsurile http ale unei redirecționări.",
         "Origin": "Înlocuit",
         "Substitute": "Înlocuitor"
-      }
+      },
+      "Exceptions": "Excepții"
     }
   },
   "ReleaseNotes": {

src/components/common/ExpandableCard.js

@@ -15,7 +15,15 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 
 const useStyles = makeStyles(styles);
 
-const ExpandableCard = ({ Icon, title, subtitle, Summary, Content }) => {
+const ExpandableCard = ({
+  Icon,
+  iconVariant,
+  title,
+  subtitle,
+  smallHeader,
+  Summary,
+  Content
+}) => {
   const [expanded, setExpanded] = useState(false);
 
   const classes = useStyles();
@@ -28,7 +36,11 @@ const ExpandableCard = ({ Icon, title, subtitle, Summary, Content }) => {
     <Card>
       <CardHeader
         avatar={
-          <Avatar aria-label="recipe" className={classes.avatar}>
+          <Avatar
+            aria-label="recipe"
+            className={smallHeader ? classes.avatarSmall : classes.avatar}
+            variant={iconVariant || "circle"}
+          >
             {Icon}
           </Avatar>
         }
@@ -40,6 +52,7 @@ const ExpandableCard = ({ Icon, title, subtitle, Summary, Content }) => {
             onClick={handleExpandClick}
             aria-expanded={expanded}
             aria-label="show more"
+            size={smallHeader ? "small" : "medium"}
           >
             <ExpandMoreIcon />
           </IconButton>
@@ -57,8 +70,10 @@ const ExpandableCard = ({ Icon, title, subtitle, Summary, Content }) => {
 
 ExpandableCard.propTypes = {
   Icon: PropTypes.node.isRequired,
+  iconVariant: PropTypes.oneOf("circle", "circular", "rounded", "square"),
   title: PropTypes.string.isRequired,
   subtitle: PropTypes.string,
+  smallHeader: PropTypes.bool,
   Summary: PropTypes.node,
   Content: PropTypes.node.isRequired
 };

src/components/common/styles/expandableCardStyles.js

@@ -1,4 +1,4 @@
-const styles = (theme) => ({
+const styles = theme => ({
   expand: {
     transform: "rotate(0deg)",
     marginLeft: "auto",
@@ -11,6 +11,11 @@ const styles = (theme) => ({
   },
   avatar: {
     backgroundColor: theme.palette.primary.main
+  },
+  avatarSmall: {
+    backgroundColor: theme.palette.primary.main,
+    width: theme.spacing(3),
+    height: theme.spacing(3)
   }
 });
 

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

@@ -5,14 +5,22 @@ import PropTypes from "prop-types";
 import { loadForwardOptions } from "../../actionCreators";
 import ForwardOptionsAdvancedComponent from "./ForwardOptionsAdvancedComponent";
 import Spinner from "../../../../../components/common/Spinner";
+import { useTranslation } from "react-i18next";
 
 const ForwardOptionsAdvancedContainer = ({ actions, optionsId, options }) => {
+  const { t } = useTranslation();
+
   if (!options) {
     actions.loadForwardOptions(optionsId);
     return <Spinner />;
   }
 
-  return <ForwardOptionsAdvancedComponent options={options} />;
+  return (
+    <>
+      <h4>{t("Forward.Options.Title")}</h4>
+      <ForwardOptionsAdvancedComponent options={options} />
+    </>
+  );
 };
 
 ForwardOptionsAdvancedContainer.propTypes = {

src/features/forwards/options/components/advanced/advancedSettings/AdvancedSettingsComponent.js

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ExceptionsCard from "../exceptions/ExceptionsCard";
+
+const AdvancedSettingsComponent = ({ data }) => {
+  return (
+    <>
+      {data && data.exceptions && (
+        <ExceptionsCard exceptions={data.exceptions} />
+      )}
+    </>
+  );
+};
+
+AdvancedSettingsComponent.propTypes = {
+  data: PropTypes.object
+};
+
+export default AdvancedSettingsComponent;

src/features/forwards/options/components/advanced/pathInjection/PathInjectionCard.js

@@ -4,6 +4,7 @@ import ExpandableCard from "../../../../../../components/common/ExpandableCard";
 import { useTranslation } from "react-i18next";
 import InputIcon from "@material-ui/icons/Input";
 import PathInjectionSummary from "./PathInjectionSummary";
+import AdvancedSettingsComponent from "../advancedSettings/AdvancedSettingsComponent";
 
 const PathInjectionCard = ({ data }) => {
   const { t } = useTranslation();
@@ -14,7 +15,7 @@ const PathInjectionCard = ({ data }) => {
       title={t("Forward.Options.PathInjection.Label")}
       subtitle={t("Forward.Options.PathInjection.Tooltip")}
       Summary={<PathInjectionSummary data={data} />}
-      Content={<div>CONTENT...</div>}
+      Content={<AdvancedSettingsComponent data={data.advancedSettings} />}
     />
   );
 };