feat: add "TEMPLATES" feature flag and skeleton UI (#4227)

theopensystemslab · Jan 30, 2025 · 1dfd446 · 1dfd446
1 parent 16a0361
commit 1dfd446
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 4 deletions.
diff --git a/editor.planx.uk/src/lib/featureFlags.ts b/editor.planx.uk/src/lib/featureFlags.ts
@@ -1,5 +1,9 @@
 // add/edit/remove feature flags in array below
-const AVAILABLE_FEATURE_FLAGS = ["FEE_BREAKDOWN", "SORT_FLOWS"] as const;
+const AVAILABLE_FEATURE_FLAGS = [
+  "FEE_BREAKDOWN",
+  "SORT_FLOWS",
+  "TEMPLATES",
+] as const;
 
 type FeatureFlag = (typeof AVAILABLE_FEATURE_FLAGS)[number];
 

diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx
@@ -9,15 +9,17 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
+import MenuItem from "@mui/material/MenuItem";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { hasFeatureFlag } from "lib/featureFlags";
 import React, { useCallback, useEffect, useState } from "react";
 import { Link, useNavigation } from "react-navi";
-import { FONT_WEIGHT_SEMI_BOLD } from "theme";
-import { borderedFocusStyle } from "theme";
+import { borderedFocusStyle, FONT_WEIGHT_SEMI_BOLD } from "theme";
 import { AddButton } from "ui/editor/AddButton";
+import SelectInput from "ui/editor/SelectInput/SelectInput";
 import { SortableFields, SortControl } from "ui/editor/SortControl";
+import InputLabel from "ui/public/InputLabel";
 import { slugify } from "utils";
 
 import { client } from "../lib/graphql";
@@ -302,6 +304,78 @@ const AddFlowButton: React.FC<{ flows: FlowSummary[] }> = ({ flows }) => {
   return <AddButton onClick={addFlow}>Add a new service</AddButton>;
 };
 
+const StartFromTemplateButton: React.FC<{}> = () => {
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  // TODO fetch flows marked as "source templates"
+  const mockTemplateOptions = [
+    {
+      id: "123-456",
+      name: "Apply for planning permission",
+      slug: "apply-for-planning-permission",
+    },
+    {
+      id: "789-123",
+      name: "Apply for a lawful development certificate",
+      slug: "apply-for-a-lawful-development-certificate",
+    },
+  ];
+
+  return (
+    <Box mt={1}>
+      <AddButton onClick={() => setDialogOpen(true)}>
+        Start from a template
+      </AddButton>
+      <Dialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+        maxWidth="md"
+      >
+        <DialogTitle variant="h3" component="h1">
+          {`Start from a template`}
+        </DialogTitle>
+        <DialogContent>
+          {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum interdum tellus laoreet faucibus. Aliquam ultricies vitae nunc non efficitur. Mauris leo nulla, luctus sit amet ullamcorper a, porta at mauris. Integer nec elit a magna dapibus bibendum.`}
+          <Box mt={2}>
+            <InputLabel
+              label="Available templates"
+              id={`select-label-templates`}
+            >
+              <SelectInput
+                bordered
+                required={true}
+                title={"Available templates"}
+                labelId={`select-label-templates`}
+                value={mockTemplateOptions[0].slug}
+                onChange={() => console.log("TODO formik?")}
+                name={"templates"}
+              >
+                {mockTemplateOptions.map((option) => (
+                  <MenuItem key={option.id} value={option.slug}>
+                    {option.name}
+                  </MenuItem>
+                ))}
+              </SelectInput>
+            </InputLabel>
+          </Box>
+        </DialogContent>
+        <DialogActions sx={{ paddingX: 2 }}>
+          <Button onClick={() => setDialogOpen(false)}>BACK</Button>
+          <Button
+            color="primary"
+            variant="contained"
+            onClick={() => console.log("TODO create template")}
+          >
+            CREATE TEMPLATE
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+};
+
 const Team: React.FC = () => {
   const [{ id: teamId, slug }, canUserEditTeam, getFlows] = useStore(
     (state) => [state.getTeam(), state.canUserEditTeam, state.getFlows],
@@ -367,7 +441,18 @@ const Team: React.FC = () => {
           </Typography>
           {canUserEditTeam(slug) ? <Edit /> : <Visibility />}
         </Box>
-        {showAddFlowButton && <AddFlowButton flows={flows} />}
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-end",
+          }}
+        >
+          {showAddFlowButton && <AddFlowButton flows={flows} />}
+          {showAddFlowButton && hasFeatureFlag("TEMPLATES") && (
+            <StartFromTemplateButton />
+          )}
+        </Box>
       </Box>
       {hasFeatureFlag("SORT_FLOWS") && flows && (
         <SortControl<FlowSummary>