refine graphql query and add multiline

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

@@ -15,6 +15,7 @@ const FlowDescription = () => {
     state.flowDescription,
     state.updateFlowDescription,
   ]);
+
   const toast = useToast();
 
   const formik = useFormik<{ description: string }>({
@@ -34,6 +35,9 @@ const FlowDescription = () => {
         );
       }
     },
+    validateOnBlur: false,
+    validateOnChange: false,
+    enableReinitialize: true,
   });
 
   return (
@@ -59,6 +63,7 @@ const FlowDescription = () => {
           <>
             <InputLabel label="Description" htmlFor="description">
               <Input
+                multiline
                 name="description"
                 onChange={(event) => {
                   formik.setFieldValue("description", event.target.value);

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

@@ -1,16 +1,32 @@
 import Container from "@mui/material/Container";
-import React from "react";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React, { useEffect } 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>
-);
+const ServiceSettings: React.FC = () => {
+  const [flowSlug, teamSlug, getFlowSettings] = useStore((state) => [
+    state.flowSlug,
+    state.teamSlug,
+    state.getFlowSettings,
+  ]);
+
+  useEffect(() => {
+    const fetchFlowSettings = async () => {
+      await getFlowSettings(flowSlug, teamSlug);
+    };
+    fetchFlowSettings();
+  }, [flowSlug, teamSlug, getFlowSettings]);
+
+  return (
+    <Container maxWidth="formWrap">
+      <FooterLinksAndLegalDisclaimer />
+      <FlowStatus />
+      <FlowDescription />
+    </Container>
+  );
+};
 
 export default ServiceSettings;

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,6 +15,10 @@ 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;
@@ -68,6 +73,41 @@ export const settingsStore: StateCreator<
     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), {

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

@@ -1,52 +1,8 @@
-import { gql } from "@apollo/client";
-import { FlowStatus } from "@opensystemslab/planx-core/types";
-import { compose, mount, NaviRequest, route, withData } from "navi";
+import { compose, mount, route, withData } from "navi";
 import ServiceSettings from "pages/FlowEditor/components/Settings/ServiceSettings";
 
-import { client } from "../lib/graphql";
-import { useStore } from "../pages/FlowEditor/lib/store";
-import type { FlowSettings } from "../types";
 import { makeTitle } from "./utils";
 
-interface GetFlowSettings {
-  flows: {
-    id: string;
-    settings: FlowSettings;
-    status: FlowStatus;
-    description: string;
-  }[];
-}
-
-export const getFlowSettings = async (req: NaviRequest) => {
-  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: req.params.flow,
-      team_slug: req.params.team,
-    },
-  });
-
-  useStore.getState().setFlowSettings(settings);
-  useStore.getState().setFlowStatus(status);
-  useStore.getState().setFlowDescription(description);
-};
-
 const serviceSettingsRoutes = compose(
   withData((req) => ({
     mountpath: req.mountpath,
@@ -56,7 +12,6 @@ const serviceSettingsRoutes = compose(
   mount({
     "/": compose(
       route(async (req) => ({
-        getData: await getFlowSettings(req),
         title: makeTitle(
           [req.params.team, req.params.flow, "service"].join("/"),
         ),