add new service description section

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#134b20d",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#d9fc4a0",
     "@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,78 @@
+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",
+        );
+      }
+    },
+  });
+
+  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
+                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