feat: add a flow description settings section

api.planx.uk/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@airbrake/node": "^2.1.8",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#706410d",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#ccf9ac3",
     "@types/isomorphic-fetch": "^0.0.36",
     "adm-zip": "^0.5.10",
     "aws-sdk": "^2.1467.0",

e2e/tests/api-driven/package.json

@@ -7,7 +7,7 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "@cucumber/cucumber": "^9.3.0",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#706410d",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#ccf9ac3",
     "axios": "^1.7.4",
     "dotenv": "^16.3.1",
     "dotenv-expand": "^10.0.0",

e2e/tests/ui-driven/package.json

@@ -8,7 +8,7 @@
     "postinstall": "./install-dependencies.sh"
   },
   "dependencies": {
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#706410d",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#ccf9ac3",
     "axios": "^1.7.4",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",

editor.planx.uk/package.json

@@ -15,7 +15,7 @@
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "1.0.0-alpha.4",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#706410d",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#ccf9ac3",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowDescription/FlowDescription.tsx

@@ -0,0 +1,83 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { useFormik } from "formik";
+import { useToast } from "hooks/useToast";
+import React from "react";
+import InputLabel from "ui/editor/InputLabel";
+import SettingsSection from "ui/editor/SettingsSection";
+import Input from "ui/shared/Input/Input";
+
+import { useStore } from "../../../../lib/store";
+import { SettingsForm } from "../../shared/SettingsForm";
+
+const FlowDescription = () => {
+  const [flowDescription, updateFlowDescription] = useStore((state) => [
+    state.flowDescription,
+    state.updateFlowDescription,
+  ]);
+
+  const toast = useToast();
+
+  const formik = useFormik<{ description: string }>({
+    initialValues: {
+      description: flowDescription || "",
+    },
+    onSubmit: async (values, { resetForm }) => {
+      const isSuccess = await updateFlowDescription(values.description);
+      if (isSuccess) {
+        toast.success("Description updated successfully");
+        resetForm({ values });
+      }
+      if (!isSuccess) {
+        formik.setFieldError(
+          "description",
+          "We are unable to update the service description, check your internet connection and try again",
+        );
+      }
+    },
+    validateOnBlur: false,
+    validateOnChange: false,
+    enableReinitialize: true,
+  });
+
+  return (
+    <Box mb={2}>
+      <SettingsSection>
+        <Typography variant="h2" component="h3" gutterBottom>
+          Service Information
+        </Typography>
+        <Typography variant="body1">
+          Useful information about this service.
+        </Typography>
+      </SettingsSection>
+      <SettingsForm
+        legend="Service Description"
+        formik={formik}
+        description={
+          <>
+            A short blurb on what this service is, how it should be used, and if
+            there are any dependencies related to this service.
+          </>
+        }
+        input={
+          <>
+            <InputLabel label="Description" htmlFor="description">
+              <Input
+                multiline
+                name="description"
+                onChange={(event) => {
+                  formik.setFieldValue("description", event.target.value);
+                }}
+                value={formik.values.description ?? ""}
+                errorMessage={formik.errors.description}
+                id="description"
+              />
+            </InputLabel>
+          </>
+        }
+      />
+    </Box>
+  );
+};
+
+export default FlowDescription;

editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowStatus/index.tsx

@@ -1,14 +1,12 @@
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import { formControlLabelClasses } from "@mui/material/FormControlLabel";
 import Typography from "@mui/material/Typography";
 import type { FlowStatus } from "@opensystemslab/planx-core/types";
 import axios from "axios";
 import { useFormik } from "formik";
 import { useToast } from "hooks/useToast";
 import React from "react";
 import { rootFlowPath } from "routes/utils";
-import { FONT_WEIGHT_BOLD } from "theme";
 import SettingsDescription from "ui/editor/SettingsDescription";
 import SettingsSection from "ui/editor/SettingsSection";
 import { Switch } from "ui/shared/Switch";
@@ -92,7 +90,7 @@ const FlowStatus = () => {
   };
 
   return (
-    <Box component="form" onSubmit={statusForm.handleSubmit}>
+    <Box component="form" onSubmit={statusForm.handleSubmit} mb={2}>
       <SettingsSection>
         <Typography variant="h2" component="h3" gutterBottom>
           Status

editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FooterLinksAndLegalDisclaimer.tsx

@@ -1,12 +1,11 @@
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import { formControlLabelClasses } from "@mui/material/FormControlLabel";
+// eslint-disable-next-line no-restricted-imports
 import { SwitchProps } from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
 import { useFormik } from "formik";
 import { useToast } from "hooks/useToast";
 import React from "react";
-import { FONT_WEIGHT_BOLD } from "theme";
 import InputGroup from "ui/editor/InputGroup";
 import InputLegend from "ui/editor/InputLegend";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
@@ -112,7 +111,6 @@ export const FooterLinksAndLegalDisclaimer = () => {
     },
     validate: () => {},
   });
-
   return (
     <Box component="form" onSubmit={elementsForm.handleSubmit} mb={2}>
       <SettingsSection>

editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/index.tsx

@@ -1,13 +1,15 @@
 import Container from "@mui/material/Container";
 import React from "react";
 
+import FlowDescription from "./FlowDescription/FlowDescription";
 import FlowStatus from "./FlowStatus";
 import { FooterLinksAndLegalDisclaimer } from "./FooterLinksAndLegalDisclaimer";
 
 const ServiceSettings: React.FC = () => (
   <Container maxWidth="formWrap">
     <FooterLinksAndLegalDisclaimer />
     <FlowStatus />
+    <FlowDescription />
   </Container>
 );
 

editor.planx.uk/src/pages/FlowEditor/lib/store/settings.ts

@@ -2,6 +2,7 @@ import { gql } from "@apollo/client";
 import { FlowStatus } from "@opensystemslab/planx-core/types";
 import camelcaseKeys from "camelcase-keys";
 import { client } from "lib/graphql";
+import { FlowInformation, GetFlowSettings } from "pages/FlowEditor/utils";
 import {
   AdminPanelData,
   FlowSettings,
@@ -14,11 +15,18 @@ import { SharedStore } from "./shared";
 import { TeamStore } from "./team";
 
 export interface SettingsStore {
+  getFlowSettings: (
+    flowSlug: string,
+    teamSlug: string,
+  ) => Promise<FlowInformation>;
   flowSettings?: FlowSettings;
   setFlowSettings: (flowSettings?: FlowSettings) => void;
   flowStatus?: FlowStatus;
   setFlowStatus: (flowStatus: FlowStatus) => void;
   updateFlowStatus: (newStatus: FlowStatus) => Promise<boolean>;
+  flowDescription?: string;
+  setFlowDescription: (flowDescription: string) => void;
+  updateFlowDescription: (newDescription: string) => Promise<boolean>;
   globalSettings?: GlobalSettings;
   setGlobalSettings: (globalSettings: GlobalSettings) => void;
   updateFlowSettings: (newSettings: FlowSettings) => Promise<number>;
@@ -51,6 +59,55 @@ export const settingsStore: StateCreator<
     return Boolean(result?.id);
   },
 
+  flowDescription: "",
+
+  setFlowDescription: (flowDescription: string) => set({ flowDescription }),
+
+  updateFlowDescription: async (newDescription: string) => {
+    const { id, $client } = get();
+    const result = await $client.flow.setDescription({
+      flow: { id },
+      description: newDescription,
+    });
+    set({ flowDescription: newDescription });
+    return Boolean(result?.id);
+  },
+
+  getFlowSettings: async (flowSlug, teamSlug) => {
+    const {
+      data: {
+        flows: [{ settings, status, description }],
+      },
+    } = await client.query<GetFlowSettings>({
+      query: gql`
+        query GetFlow($slug: String!, $team_slug: String!) {
+          flows(
+            limit: 1
+            where: { slug: { _eq: $slug }, team: { slug: { _eq: $team_slug } } }
+          ) {
+            id
+            settings
+            description
+            status
+          }
+        }
+      `,
+      variables: {
+        slug: flowSlug,
+        team_slug: teamSlug,
+      },
+      fetchPolicy: "network-only",
+    });
+
+    set({
+      flowSettings: settings,
+      flowStatus: status,
+      flowDescription: description,
+    });
+
+    return { settings, status, description };
+  },
+
   globalSettings: undefined,
 
   setGlobalSettings: (globalSettings) => {

editor.planx.uk/src/pages/FlowEditor/utils.ts

@@ -1,4 +1,17 @@
+import { FlowStatus } from "@opensystemslab/planx-core/types";
 import { formatDistanceToNow } from "date-fns";
+import { FlowSettings } from "types";
+
+export interface FlowInformation {
+  id?: string;
+  settings: FlowSettings;
+  status: FlowStatus;
+  description: string;
+}
+
+export interface GetFlowSettings {
+  flows: FlowInformation[];
+}
 
 export const formatLastEditDate = (date: string): string => {
   return formatDistanceToNow(new Date(date), {