feat: add tab for submissions view to flowSettings (#2884)

theopensystemslab · Mar 13, 2024 · 74ea05e · 74ea05e
1 parent da79ab9
commit 74ea05e
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 47 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DataManagerSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DataManagerSettings.tsx
@@ -5,19 +5,17 @@ import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
 
 const DataManagerSettings: React.FC = () => {
   return (
-    <>
-      <Box>
-        <Typography variant="h2" component="h3" gutterBottom>
-          Data Manager
-        </Typography>
-        <Typography variant="body1">
-          Manage the data that your service uses and makes available via its API
-        </Typography>
-        <Box py={5}>
-          <FeaturePlaceholder title="Feature in development" />
-        </Box>
+    <Box>
+      <Typography variant="h2" component="h3" gutterBottom>
+        Data Manager
+      </Typography>
+      <Typography variant="body1">
+        Manage the data that your service uses and makes available via its API
+      </Typography>
+      <Box py={5}>
+        <FeaturePlaceholder title="Feature in development" />
       </Box>
-    </>
+    </Box>
   );
 };
 export default DataManagerSettings;
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx
@@ -5,20 +5,18 @@ import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
 
 const ServiceFlags: React.FC = () => {
   return (
-    <>
-      <Box>
-        <Typography variant="h2" component="h3" gutterBottom>
-          Service flags
-        </Typography>
-        <Typography variant="body1">
-          Manage the flag sets that this service uses. Flags at the top of a set
-          override flags below.
-        </Typography>
-        <Box py={5}>
-          <FeaturePlaceholder title="Feature in development" />
-        </Box>
+    <Box>
+      <Typography variant="h2" component="h3" gutterBottom>
+        Service flags
+      </Typography>
+      <Typography variant="body1">
+        Manage the flag sets that this service uses. Flags at the top of a set
+        override flags below.
+      </Typography>
+      <Box py={5}>
+        <FeaturePlaceholder title="Feature in development" />
       </Box>
-    </>
+    </Box>
   );
 };
 export default ServiceFlags;
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx
@@ -0,0 +1,22 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
+
+const Submissions: React.FC = () => {
+  return (
+    <Box>
+      <Typography variant="h2" component="h3" gutterBottom>
+        Submissions
+      </Typography>
+      <Typography variant="body1">
+        View data on the user submitted applications for this service.
+      </Typography>
+      <Box py={5}>
+        <FeaturePlaceholder title="Feature in development" />
+      </Box>
+    </Box>
+  );
+};
+
+export default Submissions;
diff --git a/editor.planx.uk/src/routes/flowSettings.tsx b/editor.planx.uk/src/routes/flowSettings.tsx
@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { hasFeatureFlag } from "lib/featureFlags";
 import { publicClient } from "lib/graphql";
 import {
   compose,
@@ -12,13 +13,38 @@ import {
 import DataManagerSettings from "pages/FlowEditor/components/Settings/DataManagerSettings";
 import ServiceFlags from "pages/FlowEditor/components/Settings/ServiceFlags";
 import ServiceSettings from "pages/FlowEditor/components/Settings/ServiceSettings";
+import Submissions from "pages/FlowEditor/components/Settings/Submissions";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 
 import Settings from "../pages/FlowEditor/components/Settings";
 import type { FlowSettings } from "../types";
 import { makeTitle } from "./utils";
 
+const standardTabs = [
+  {
+    name: "Service",
+    route: "service",
+    Component: ServiceSettings,
+  },
+  {
+    name: "Service Flags",
+    route: "flags",
+    Component: ServiceFlags,
+  },
+  {
+    name: "Data",
+    route: "data-manager",
+    Component: DataManagerSettings,
+  },
+];
+
+const submissionsTab = {
+  name: "Submissions",
+  route: "submissions",
+  Component: Submissions,
+};
+
 const flowSettingsRoutes = compose(
   withData((req) => ({
     mountpath: req.mountpath,
@@ -58,32 +84,18 @@ const flowSettingsRoutes = compose(
         const settings: FlowSettings = data.flows[0].settings;
         useStore.getState().setFlowSettings(settings);
 
+        function getTabs() {
+          const isUsingFeatureFlag = hasFeatureFlag("SUBMISSION_VIEW");
+          return isUsingFeatureFlag
+            ? [...standardTabs, submissionsTab]
+            : standardTabs;
+        }
+
         return {
           title: makeTitle(
             [req.params.team, req.params.flow, "Flow Settings"].join("/"),
           ),
-          view: (
-            <Settings
-              currentTab={req.params.tab}
-              tabs={[
-                {
-                  name: "Service",
-                  route: "service",
-                  Component: ServiceSettings,
-                },
-                {
-                  name: "Service Flags",
-                  route: "flags",
-                  Component: ServiceFlags,
-                },
-                {
-                  name: "Data",
-                  route: "data-manager",
-                  Component: DataManagerSettings,
-                },
-              ]}
-            />
-          ),
+          view: <Settings currentTab={req.params.tab} tabs={getTabs()} />,
         };
       });
     }),