demo: Council resources in the editor prototype

editor.planx.uk/src/@planx/components/SetValue/Editor.tsx

@@ -1,11 +1,15 @@
+import Box from "@mui/material/Box";
 import FormControl from "@mui/material/FormControl";
 import RadioGroup from "@mui/material/RadioGroup";
+import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import BasicRadio from "@planx/components/shared/Radio/BasicRadio";
 import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
-import React from "react";
+import { TabList } from "pages/FlowEditor/components/Sidebar";
+import StyledTab from "pages/FlowEditor/components/Sidebar/StyledTab";
+import React, { useState } from "react";
 import { ModalFooter } from "ui/editor/ModalFooter";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
@@ -17,8 +21,6 @@ import { parseSetValue, SetValue } from "./model";
 
 type Props = EditorProps<TYPES.SetValue, SetValue>;
 
-export default SetValueComponent;
-
 interface Option {
   value: SetValue["operation"];
   label: string;
@@ -77,7 +79,9 @@ const DescriptionText: React.FC<SetValue> = ({ fn, val, operation }) => {
   }
 };
 
-function SetValueComponent(props: Props) {
+const SetValueComponent: React.FC<Props> = (props) => {
+  const [activeTab, setActiveTab] = useState(0);
+
   const formik = useFormik({
     initialValues: parseSetValue(props.node?.data),
     onSubmit: (newValues) => {
@@ -93,49 +97,99 @@ function SetValueComponent(props: Props) {
     formik.setFieldValue("operation", target.value);
   };
 
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setActiveTab(newValue);
+  };
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
-      <ModalSection>
-        <ModalSectionContent title="Passport field name">
-          <DataFieldAutocomplete
-            required
-            value={formik.values.fn}
-            onChange={(value) => formik.setFieldValue("fn", value)}
-          />
-        </ModalSectionContent>
-        {formik.values.operation !== "removeAll" && (
-          <ModalSectionContent title="Field value">
-            <InputRow>
-              <Input
-                required
-                format="data"
-                name="val"
-                value={formik.values.val}
-                placeholder="value"
-                onChange={formik.handleChange}
-              />
-            </InputRow>
+      <TabList sx={{ marginLeft: "-24px", width: "calc(100% + 48px)" }}>
+        <Tabs value={activeTab} onChange={handleTabChange}>
+          <StyledTab label="Component settings" />
+          <StyledTab label="How to use this component" />
+        </Tabs>
+      </TabList>
+      <Box
+        style={{
+          display: activeTab === 0 ? "flex" : "none",
+          flexDirection: "column",
+          flex: 1,
+          overflow: "auto",
+        }}
+      >
+        <ModalSection>
+          <ModalSectionContent title="Passport field name">
+            <DataFieldAutocomplete
+              required
+              value={formik.values.fn}
+              onChange={(value) => formik.setFieldValue("fn", value)}
+            />
           </ModalSectionContent>
-        )}
-        <ModalSectionContent title="Operation">
-          <DescriptionText {...formik.values} />
-          <FormControl component="fieldset">
-            <RadioGroup defaultValue="replace" value={formik.values.operation}>
-              {options.map((option) => (
-                <BasicRadio
-                  key={option.value}
-                  id={option.value}
-                  title={option.label}
-                  variant="compact"
-                  value={option.value}
-                  onChange={handleRadioChange}
+          {formik.values.operation !== "removeAll" && (
+            <ModalSectionContent title="Field value">
+              <InputRow>
+                <Input
+                  required
+                  format="data"
+                  name="val"
+                  value={formik.values.val}
+                  placeholder="value"
+                  onChange={formik.handleChange}
                 />
-              ))}
-            </RadioGroup>
-          </FormControl>
-        </ModalSectionContent>
-      </ModalSection>
-      <ModalFooter formik={formik} showMoreInformation={false} />
+              </InputRow>
+            </ModalSectionContent>
+          )}
+          <ModalSectionContent title="Operation">
+            <DescriptionText {...formik.values} />
+            <FormControl component="fieldset">
+              <RadioGroup
+                defaultValue="replace"
+                value={formik.values.operation}
+              >
+                {options.map((option) => (
+                  <BasicRadio
+                    key={option.value}
+                    id={option.value}
+                    title={option.label}
+                    variant="compact"
+                    value={option.value}
+                    onChange={handleRadioChange}
+                  />
+                ))}
+              </RadioGroup>
+            </FormControl>
+          </ModalSectionContent>
+        </ModalSection>
+        <ModalFooter formik={formik} showMoreInformation={false} />
+      </Box>
+      <Box
+        sx={{
+          display: activeTab === 1 ? "flex" : "none",
+          flexDirection: "column",
+          flex: 1,
+          padding: "16px",
+          overflow: "auto",
+        }}
+      >
+        <Typography variant="body1" mt={2}>
+          The Set Value component allows you to modify the values of a specific
+          field in the Passport. You can choose an operation (e.g., replace,
+          append, remove) and specify the field name and value. Ensure you have
+          configured the appropriate field names and operations before saving
+          changes.
+        </Typography>
+        <Box mt={4}>
+          <iframe
+            width="680"
+            height="383"
+            src="https://www.youtube.com/embed/r3nXC0jgVIg"
+            title="10 Using the set component"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          ></iframe>
+        </Box>
+      </Box>
     </form>
   );
-}
+};
+
+export default SetValueComponent;

editor.planx.uk/src/components/EditorNavMenu.test.tsx

@@ -42,15 +42,15 @@ describe("globalLayoutRoutes", () => {
 
     const { queryAllByRole } = setup(<EditorNavMenu />);
     const menuItems = queryAllByRole("listitem");
-    expect(menuItems).toHaveLength(0);
+    expect(menuItems).toHaveLength(2);
   });
 
   it("displays for platformAdmins", () => {
     mockGetUserRoleForCurrentTeam.mockReturnValue("platformAdmin");
 
     const { getAllByRole } = setup(<EditorNavMenu />);
     const menuItems = getAllByRole("listitem");
-    expect(menuItems).toHaveLength(3);
+    expect(menuItems).toHaveLength(4);
     expect(within(menuItems[0]).getByText("Select a team")).toBeInTheDocument();
   });
 });

editor.planx.uk/src/components/EditorNavMenu.tsx

@@ -3,6 +3,7 @@ import FactCheckIcon from "@mui/icons-material/FactCheck";
 import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
 import GroupIcon from "@mui/icons-material/Group";
 import LeaderboardIcon from "@mui/icons-material/Leaderboard";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
 import PaletteIcon from "@mui/icons-material/Palette";
 import RateReviewIcon from "@mui/icons-material/RateReview";
 import TuneIcon from "@mui/icons-material/Tune";
@@ -134,6 +135,12 @@ function EditorNavMenu() {
       route: "admin-panel",
       accessibleBy: ["platformAdmin"],
     },
+    {
+      title: "Resources",
+      Icon: MenuBookIcon,
+      route: "resources",
+      accessibleBy: ["platformAdmin", "teamEditor", "demoUser", "teamViewer"],
+    },
   ];
 
   const teamLayoutRoutes: Route[] = [

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx

@@ -105,7 +105,7 @@ const ResetToggle = styled(Button)(({ theme }) => ({
   color: theme.palette.text.primary,
 }));
 
-const TabList = styled(Box)(({ theme }) => ({
+export const TabList = styled(Box)(({ theme }) => ({
   position: "relative",
   "&::after": {
     content: "''",

editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx

@@ -19,6 +19,9 @@ import { fromSlug, SLUGS } from "../../data/types";
 import { useStore } from "../../lib/store";
 
 const StyledDialog = styled(Dialog)(({ theme }) => ({
+  "& .MuiPaper-elevation": {
+    height: "100%",
+  },
   // Target all modal sections (the direct child is the backdrop, hence the double child selector)
   "& > * > *": {
     backgroundColor: theme.palette.background.paper,

editor.planx.uk/src/routes/authenticated.tsx

@@ -115,6 +115,19 @@ const editorRoutes = compose(
       });
     }),
 
+    "/resources": route(() => {
+      return {
+        title: makeTitle("Resources"),
+        view: (
+          <iframe
+            title="notion"
+            src="https://www.notioniframe.com/notion/23i4jzez4xn"
+            style={{ width: "100%", height: "100%", border: "0", padding: "0" }}
+          />
+        ),
+      };
+    }),
+
     "/:team": lazy(() => import("./team")),
   }),
 );