From de446adad0c5ed28f2c44fde0abe611d87fa31bb Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Sun, 16 May 2021 14:07:09 +0300
Subject: [PATCH] PathInjectionCard

---
 public/locales/en/translations.json           |  3 +-
 public/locales/ro/translations.json           |  3 +-
 .../core/components/ForwardSummary.js         |  2 +-
 .../ForwardOptionsAdvancedComponent.js        | 10 +++---
 .../advanced/PathInjectionComponent.js        | 12 -------
 .../advanced/TrailingSlashComponent.js        |  5 ---
 .../pathInjection/PathInjectionCard.js        | 26 ++++++++++++++
 .../pathInjection/PathInjectionSummary.js     | 34 +++++++++++++++++++
 .../trailingSlash/TrailingSlashCard.js        | 25 ++++++++++++++
 .../trailingSlash/TrailingSlashSummary.js     | 24 +++++++++++++
 10 files changed, 120 insertions(+), 24 deletions(-)
 delete mode 100644 src/features/forwards/options/components/advanced/PathInjectionComponent.js
 delete mode 100644 src/features/forwards/options/components/advanced/TrailingSlashComponent.js
 create mode 100644 src/features/forwards/options/components/advanced/pathInjection/PathInjectionCard.js
 create mode 100644 src/features/forwards/options/components/advanced/pathInjection/PathInjectionSummary.js
 create mode 100644 src/features/forwards/options/components/advanced/trailingSlash/TrailingSlashCard.js
 create mode 100644 src/features/forwards/options/components/advanced/trailingSlash/TrailingSlashSummary.js

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index 265d6fc..e9e12ba 100644
--- a/public/locales/en/translations.json
+++ b/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",
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index 4c8327b..f99f4aa 100644
--- a/public/locales/ro/translations.json
+++ b/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",
diff --git a/src/features/forwards/core/components/ForwardSummary.js b/src/features/forwards/core/components/ForwardSummary.js
index b291366..40ae43f 100644
--- a/src/features/forwards/core/components/ForwardSummary.js
+++ b/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)}>
diff --git a/src/features/forwards/options/components/advanced/ForwardOptionsAdvancedComponent.js b/src/features/forwards/options/components/advanced/ForwardOptionsAdvancedComponent.js
index 78e7f1a..a4f0562 100644
--- a/src/features/forwards/options/components/advanced/ForwardOptionsAdvancedComponent.js
+++ b/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} />}
     </>
diff --git a/src/features/forwards/options/components/advanced/PathInjectionComponent.js b/src/features/forwards/options/components/advanced/PathInjectionComponent.js
deleted file mode 100644
index 352748f..0000000
--- a/src/features/forwards/options/components/advanced/PathInjectionComponent.js
+++ /dev/null
@@ -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;
diff --git a/src/features/forwards/options/components/advanced/TrailingSlashComponent.js b/src/features/forwards/options/components/advanced/TrailingSlashComponent.js
deleted file mode 100644
index 68474f0..0000000
--- a/src/features/forwards/options/components/advanced/TrailingSlashComponent.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const TrailingSlashComponent = () => {
-  return "";
-};
-
-export default TrailingSlashComponent;
diff --git a/src/features/forwards/options/components/advanced/pathInjection/PathInjectionCard.js b/src/features/forwards/options/components/advanced/pathInjection/PathInjectionCard.js
new file mode 100644
index 0000000..26f2f9c
--- /dev/null
+++ b/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;
diff --git a/src/features/forwards/options/components/advanced/pathInjection/PathInjectionSummary.js b/src/features/forwards/options/components/advanced/pathInjection/PathInjectionSummary.js
new file mode 100644
index 0000000..6788c06
--- /dev/null
+++ b/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;
diff --git a/src/features/forwards/options/components/advanced/trailingSlash/TrailingSlashCard.js b/src/features/forwards/options/components/advanced/trailingSlash/TrailingSlashCard.js
new file mode 100644
index 0000000..fbc7671
--- /dev/null
+++ b/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;
diff --git a/src/features/forwards/options/components/advanced/trailingSlash/TrailingSlashSummary.js b/src/features/forwards/options/components/advanced/trailingSlash/TrailingSlashSummary.js
new file mode 100644
index 0000000..618a5af
--- /dev/null
+++ b/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;