PathOverwriteCard

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

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

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

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

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

src/features/forwards/options/components/advanced/pathOverwrite/PathOverwriteSummary.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 PathOverwriteSummary = ({ data }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Grid container>
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("General.Enabled")}: `}
+        <ActiveIcon active={data.on} />
+      </Grid>
+    </Grid>
+  );
+};
+
+PathOverwriteSummary.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
+export default PathOverwriteSummary;