PathInjectionCard

public/locales/en/translations.json

@@ -59,7 +59,8 @@
       },
       "PathInjection": {
         "Label": "Path injection",
-        "Tooltip": "PathInjection is useful for applications that doesn't have a configuration for base path. With this option, the reverse proxy server will try to inject the base path in each link from each reasponse content."
+        "Tooltip": "PathInjection is useful for applications that doesn't have a configuration for base path. With this option, the reverse proxy server will try to inject the base path in each link from each reasponse content.",
+        "Mode": "Mode"
       },
       "KeyOverwrite": {
         "Label": "Key overwrite",

public/locales/ro/translations.json

@@ -50,7 +50,8 @@
       },
       "PathInjection": {
         "Label": "Path injection",
-        "Tooltip": "PathInjection este util pentru aplicațiile care nu au o configurație pentru calea de bază. Cu această opțiune, serverul proxy invers va încerca să injecteze calea de bază în fiecare link din fiecare conținut de răspuns."
+        "Tooltip": "PathInjection este util pentru aplicațiile care nu au o configurație pentru calea de bază. Cu această opțiune, serverul proxy invers va încerca să injecteze calea de bază în fiecare link din fiecare conținut de răspuns.",
+        "Mode": "Mod"
       },
       "KeyOverwrite": {
         "Label": "Key overwrite",

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

@@ -13,7 +13,7 @@ const ForwardSummary = ({ forward, handleForwardClick }) => {
 
   return (
     <Grid container>
-      <Grid item xs={6} sm={4} md={4}>
+      <Grid item xs={6} sm={3}>
         {`${t("Forward.From")}: `}
         <span className={classes.value}>
           <Link href="#" onClick={handleForwardClick(forward)}>

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

@@ -1,19 +1,21 @@
 import React from "react";
 import PropTypes from "prop-types";
-import TrailingSlashComponent from "./TrailingSlashComponent";
+import TrailingSlashCard from "./trailingSlash/TrailingSlashCard";
 import PathOverwriteComponent from "./PathOverwriteComponent";
-import PathInjectionComponent from "./PathInjectionComponent";
+import PathInjectionCard from "./pathInjection/PathInjectionCard";
 import KeyOverwriteCard from "./keyOverwrite/KeyOverwriteCard";
 
 const ForwardOptionsAdvancedComponent = ({ options }) => {
   return (
     <>
-      {options.trailingSlash && <TrailingSlashComponent />}
+      {options.trailingSlash && (
+        <TrailingSlashCard enabled={options.trailingSlash} />
+      )}
       {options.pathOverwrite && (
         <PathOverwriteComponent data={options.pathOverwrite} />
       )}
       {options.pathInjection && (
-        <PathInjectionComponent data={options.pathInjection} />
+        <PathInjectionCard data={options.pathInjection} />
       )}
       {options.keyOverwrite && <KeyOverwriteCard data={options.keyOverwrite} />}
     </>

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

@@ -1,12 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const PathInjectionComponent = ({ data }) => {
-  return "";
-};
-
-PathInjectionComponent.propTypes = {
-  data: PropTypes.object.isRequired
-};
-
-export default PathInjectionComponent;

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

@@ -1,5 +0,0 @@
-const TrailingSlashComponent = () => {
-  return "";
-};
-
-export default TrailingSlashComponent;

src/features/forwards/options/components/advanced/pathInjection/PathInjectionCard.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 InputIcon from "@material-ui/icons/Input";
+import PathInjectionSummary from "./PathInjectionSummary";
+
+const PathInjectionCard = ({ data }) => {
+  const { t } = useTranslation();
+
+  return (
+    <ExpandableCard
+      Icon={<InputIcon />}
+      title={t("Forward.Options.PathInjection.Label")}
+      subtitle={t("Forward.Options.PathInjection.Tooltip")}
+      Summary={<PathInjectionSummary data={data} />}
+      Content={<div>CONTENT...</div>}
+    />
+  );
+};
+
+PathInjectionCard.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
+export default PathInjectionCard;

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

@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+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";
+import ActiveIcon from "../../../../../../components/common/ActiveIcon";
+
+const useStyles = makeStyles(styles);
+
+const PathInjectionSummary = ({ data }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <Grid container>
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("General.Enabled")}: `}
+        <ActiveIcon active={data.on} />
+      </Grid>
+
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("Forward.Options.PathInjection.Mode")}: `}
+        <span className={classes.value}>{data.mode}</span>
+      </Grid>
+    </Grid>
+  );
+};
+
+PathInjectionSummary.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
+export default PathInjectionSummary;

src/features/forwards/options/components/advanced/trailingSlash/TrailingSlashCard.js

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ExpandableCard from "../../../../../../components/common/ExpandableCard";
+import { useTranslation } from "react-i18next";
+import TrailingSlashSummary from "./TrailingSlashSummary";
+
+const TrailingSlashCard = ({ enabled }) => {
+  const { t } = useTranslation();
+
+  return (
+    <ExpandableCard
+      Icon={<div>/</div>}
+      title={t("Forward.Options.TrailingSlash.Label")}
+      subtitle={t("Forward.Options.TrailingSlash.Tooltip")}
+      Summary={<TrailingSlashSummary enabled={enabled} />}
+      Content={<div>...</div>}
+    />
+  );
+};
+
+TrailingSlashCard.propTypes = {
+  enabled: PropTypes.bool.isRequired
+};
+
+export default TrailingSlashCard;

src/features/forwards/options/components/advanced/trailingSlash/TrailingSlashSummary.js

@@ -0,0 +1,24 @@
+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";
+
+const TrailingSlashSummary = ({ enabled }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Grid container>
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("General.Enabled")}: `}
+        <ActiveIcon active={enabled} />
+      </Grid>
+    </Grid>
+  );
+};
+
+TrailingSlashSummary.propTypes = {
+  enabled: PropTypes.bool.isRequired
+};
+
+export default TrailingSlashSummary;