From b3d77911534106278773e16f3288bce434f34b4b Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Thu, 14 Nov 2024 12:59:27 +0000 Subject: [PATCH 1/7] add new service description section --- editor.planx.uk/package.json | 2 +- editor.planx.uk/pnpm-lock.yaml | 2 + .../FlowDescription/FlowDescription.tsx | 78 +++++++++++++++++++ .../ServiceSettings/FlowStatus/index.tsx | 4 +- .../Settings/ServiceSettings/index.tsx | 2 + .../pages/FlowEditor/lib/store/settings.ts | 17 ++++ .../src/routes/serviceSettings.tsx | 5 +- 7 files changed, 105 insertions(+), 5 deletions(-) create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowDescription/FlowDescription.tsx diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json index 839432be7c..f10aa9bc36 100644 --- a/editor.planx.uk/package.json +++ b/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#d9fc4a0", "@tiptap/core": "^2.4.0", "@tiptap/extension-bold": "^2.0.3", "@tiptap/extension-bubble-menu": "^2.1.13", diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml index 716ed3832e..19a723a0c3 100644 --- a/editor.planx.uk/pnpm-lock.yaml +++ b/editor.planx.uk/pnpm-lock.yaml @@ -49,6 +49,8 @@ dependencies: '@opensystemslab/planx-core': specifier: git+https://github.com/theopensystemslab/planx-core#706410d version: github.com/theopensystemslab/planx-core/706410d(@types/react@18.2.45) + specifier: git+https://github.com/theopensystemslab/planx-core#d9fc4a0 + version: github.com/theopensystemslab/planx-core/d9fc4a0(@types/react@18.2.45) '@tiptap/core': specifier: ^2.4.0 version: 2.4.0(@tiptap/pm@2.0.3) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowDescription/FlowDescription.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowDescription/FlowDescription.tsx new file mode 100644 index 0000000000..2c9e4df3a3 --- /dev/null +++ b/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 ( + + + + Service Information + + + Useful information about this service. + + + + A short blurb on what this service is, how it should be used, and if + there are any dependencies related to this service. + + } + input={ + <> + + { + formik.setFieldValue("description", event.target.value); + }} + value={formik.values.description ?? ""} + errorMessage={formik.errors.description} + id="description" + /> + + + } + /> + + ); +}; + +export default FlowDescription; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowStatus/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowStatus/index.tsx index 89fff855f4..404de65fe3 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowStatus/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowStatus/index.tsx @@ -1,6 +1,5 @@ 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"; @@ -8,7 +7,6 @@ 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 ( - + Status diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/index.tsx index dde243b1b3..70a630ac02 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/index.tsx @@ -1,6 +1,7 @@ import Container from "@mui/material/Container"; import React from "react"; +import FlowDescription from "./FlowDescription/FlowDescription"; import FlowStatus from "./FlowStatus"; import { FooterLinksAndLegalDisclaimer } from "./FooterLinksAndLegalDisclaimer"; @@ -8,6 +9,7 @@ const ServiceSettings: React.FC = () => ( + ); diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/settings.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/settings.ts index 74ef341a0e..874d9cf33b 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/settings.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/settings.ts @@ -19,6 +19,9 @@ export interface SettingsStore { flowStatus?: FlowStatus; setFlowStatus: (flowStatus: FlowStatus) => void; updateFlowStatus: (newStatus: FlowStatus) => Promise; + flowDescription?: string; + setFlowDescription: (flowDescription: string) => void; + updateFlowDescription: (newDescription: string) => Promise; globalSettings?: GlobalSettings; setGlobalSettings: (globalSettings: GlobalSettings) => void; updateFlowSettings: (newSettings: FlowSettings) => Promise; @@ -51,6 +54,20 @@ 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); + }, + globalSettings: undefined, setGlobalSettings: (globalSettings) => { diff --git a/editor.planx.uk/src/routes/serviceSettings.tsx b/editor.planx.uk/src/routes/serviceSettings.tsx index fb8f223999..f22753826d 100644 --- a/editor.planx.uk/src/routes/serviceSettings.tsx +++ b/editor.planx.uk/src/routes/serviceSettings.tsx @@ -13,13 +13,14 @@ interface GetFlowSettings { id: string; settings: FlowSettings; status: FlowStatus; + description: string; }[]; } export const getFlowSettings = async (req: NaviRequest) => { const { data: { - flows: [{ settings, status }], + flows: [{ settings, status, description }], }, } = await client.query({ query: gql` @@ -30,6 +31,7 @@ export const getFlowSettings = async (req: NaviRequest) => { ) { id settings + description status } } @@ -42,6 +44,7 @@ export const getFlowSettings = async (req: NaviRequest) => { useStore.getState().setFlowSettings(settings); useStore.getState().setFlowStatus(status); + useStore.getState().setFlowDescription(description); }; const serviceSettingsRoutes = compose( From dd9bbbe5e4ae3fe1dd7dccd10ef402ff7ce48a1a Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Thu, 14 Nov 2024 13:45:18 +0000 Subject: [PATCH 2/7] bump planx-core --- api.planx.uk/package.json | 2 +- api.planx.uk/pnpm-lock.yaml | 4 ++-- e2e/tests/api-driven/package.json | 2 +- e2e/tests/api-driven/pnpm-lock.yaml | 4 ++-- e2e/tests/ui-driven/package.json | 2 +- e2e/tests/ui-driven/pnpm-lock.yaml | 4 ++-- editor.planx.uk/package.json | 2 +- editor.planx.uk/pnpm-lock.yaml | 6 ++---- 8 files changed, 12 insertions(+), 14 deletions(-) diff --git a/api.planx.uk/package.json b/api.planx.uk/package.json index 88de652132..603a4117b8 100644 --- a/api.planx.uk/package.json +++ b/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", diff --git a/api.planx.uk/pnpm-lock.yaml b/api.planx.uk/pnpm-lock.yaml index 88901bf52a..5d7bd649f5 100644 --- a/api.planx.uk/pnpm-lock.yaml +++ b/api.planx.uk/pnpm-lock.yaml @@ -14,8 +14,8 @@ dependencies: specifier: ^2.1.8 version: 2.1.8 '@opensystemslab/planx-core': - specifier: git+https://github.com/theopensystemslab/planx-core#706410d - version: github.com/theopensystemslab/planx-core/706410d + specifier: git+https://github.com/theopensystemslab/planx-core#ccf9ac3 + version: github.com/theopensystemslab/planx-core/ccf9ac3 '@types/isomorphic-fetch': specifier: ^0.0.36 version: 0.0.36 diff --git a/e2e/tests/api-driven/package.json b/e2e/tests/api-driven/package.json index 41bd559f89..074c8c301b 100644 --- a/e2e/tests/api-driven/package.json +++ b/e2e/tests/api-driven/package.json @@ -7,7 +7,7 @@ "packageManager": "pnpm@8.6.6", "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", diff --git a/e2e/tests/api-driven/pnpm-lock.yaml b/e2e/tests/api-driven/pnpm-lock.yaml index 5d97ed77fc..b371af488a 100644 --- a/e2e/tests/api-driven/pnpm-lock.yaml +++ b/e2e/tests/api-driven/pnpm-lock.yaml @@ -9,8 +9,8 @@ dependencies: specifier: ^9.3.0 version: 9.3.0 '@opensystemslab/planx-core': - specifier: git+https://github.com/theopensystemslab/planx-core#706410d - version: github.com/theopensystemslab/planx-core/706410d + specifier: git+https://github.com/theopensystemslab/planx-core#ccf9ac3 + version: github.com/theopensystemslab/planx-core/ccf9ac3 axios: specifier: ^1.7.4 version: 1.7.4 diff --git a/e2e/tests/ui-driven/package.json b/e2e/tests/ui-driven/package.json index 99a7d2545b..03e2203caf 100644 --- a/e2e/tests/ui-driven/package.json +++ b/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", diff --git a/e2e/tests/ui-driven/pnpm-lock.yaml b/e2e/tests/ui-driven/pnpm-lock.yaml index bb2dfab4e6..541a3ec100 100644 --- a/e2e/tests/ui-driven/pnpm-lock.yaml +++ b/e2e/tests/ui-driven/pnpm-lock.yaml @@ -6,8 +6,8 @@ settings: dependencies: '@opensystemslab/planx-core': - specifier: git+https://github.com/theopensystemslab/planx-core#706410d - version: github.com/theopensystemslab/planx-core/706410d + specifier: git+https://github.com/theopensystemslab/planx-core#ccf9ac3 + version: github.com/theopensystemslab/planx-core/ccf9ac3 axios: specifier: ^1.7.4 version: 1.7.4 diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json index f10aa9bc36..0cecf5714c 100644 --- a/editor.planx.uk/package.json +++ b/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#d9fc4a0", + "@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", diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml index 19a723a0c3..5862027dc8 100644 --- a/editor.planx.uk/pnpm-lock.yaml +++ b/editor.planx.uk/pnpm-lock.yaml @@ -47,10 +47,8 @@ dependencies: specifier: 1.0.0-alpha.4 version: 1.0.0-alpha.4 '@opensystemslab/planx-core': - specifier: git+https://github.com/theopensystemslab/planx-core#706410d - version: github.com/theopensystemslab/planx-core/706410d(@types/react@18.2.45) - specifier: git+https://github.com/theopensystemslab/planx-core#d9fc4a0 - version: github.com/theopensystemslab/planx-core/d9fc4a0(@types/react@18.2.45) + specifier: git+https://github.com/theopensystemslab/planx-core#ccf9ac3 + version: github.com/theopensystemslab/planx-core/ccf9ac3(@types/react@18.2.45) '@tiptap/core': specifier: ^2.4.0 version: 2.4.0(@tiptap/pm@2.0.3) From da12459361a8558926424bb21a1931e606ae4b98 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Thu, 14 Nov 2024 13:51:39 +0000 Subject: [PATCH 3/7] fix lock file --- api.planx.uk/pnpm-lock.yaml | 4 ++-- e2e/tests/api-driven/pnpm-lock.yaml | 4 ++-- e2e/tests/ui-driven/pnpm-lock.yaml | 4 ++-- editor.planx.uk/pnpm-lock.yaml | 6 +++--- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/api.planx.uk/pnpm-lock.yaml b/api.planx.uk/pnpm-lock.yaml index 5d7bd649f5..a15a671b66 100644 --- a/api.planx.uk/pnpm-lock.yaml +++ b/api.planx.uk/pnpm-lock.yaml @@ -6308,8 +6308,8 @@ packages: resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==} dev: false - github.com/theopensystemslab/planx-core/706410d: - resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/706410d} + github.com/theopensystemslab/planx-core/ccf9ac3: + resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/ccf9ac3} name: '@opensystemslab/planx-core' version: 1.0.0 prepare: true diff --git a/e2e/tests/api-driven/pnpm-lock.yaml b/e2e/tests/api-driven/pnpm-lock.yaml index b371af488a..734fbe02ee 100644 --- a/e2e/tests/api-driven/pnpm-lock.yaml +++ b/e2e/tests/api-driven/pnpm-lock.yaml @@ -2877,8 +2877,8 @@ packages: resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==} dev: false - github.com/theopensystemslab/planx-core/706410d: - resolution: {commit: 706410d, repo: git+ssh://git@github.com/theopensystemslab/planx-core.git, type: git} + github.com/theopensystemslab/planx-core/ccf9ac3: + resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/ccf9ac3} name: '@opensystemslab/planx-core' version: 1.0.0 prepare: true diff --git a/e2e/tests/ui-driven/pnpm-lock.yaml b/e2e/tests/ui-driven/pnpm-lock.yaml index 541a3ec100..136d2446e3 100644 --- a/e2e/tests/ui-driven/pnpm-lock.yaml +++ b/e2e/tests/ui-driven/pnpm-lock.yaml @@ -2652,8 +2652,8 @@ packages: resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==} dev: false - github.com/theopensystemslab/planx-core/706410d: - resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/706410d} + github.com/theopensystemslab/planx-core/ccf9ac3: + resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/ccf9ac3} name: '@opensystemslab/planx-core' version: 1.0.0 prepare: true diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml index 5862027dc8..ea740f4b84 100644 --- a/editor.planx.uk/pnpm-lock.yaml +++ b/editor.planx.uk/pnpm-lock.yaml @@ -15433,9 +15433,9 @@ packages: use-sync-external-store: 1.2.0(react@18.2.0) dev: false - github.com/theopensystemslab/planx-core/706410d(@types/react@18.2.45): - resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/706410d} - id: github.com/theopensystemslab/planx-core/706410d + github.com/theopensystemslab/planx-core/ccf9ac3(@types/react@18.2.45): + resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/ccf9ac3} + id: github.com/theopensystemslab/planx-core/ccf9ac3 name: '@opensystemslab/planx-core' version: 1.0.0 prepare: true From e3c6a1bd6960f9925dc3e6f81ee662893adabb60 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 18 Nov 2024 11:11:00 +0000 Subject: [PATCH 4/7] refine graphql query and add multiline --- .../FlowDescription/FlowDescription.tsx | 5 ++ .../Settings/ServiceSettings/index.tsx | 32 +++++++++---- .../pages/FlowEditor/lib/store/settings.ts | 40 ++++++++++++++++ editor.planx.uk/src/pages/FlowEditor/utils.ts | 13 +++++ .../src/routes/serviceSettings.tsx | 47 +------------------ 5 files changed, 83 insertions(+), 54 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowDescription/FlowDescription.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowDescription/FlowDescription.tsx index 2c9e4df3a3..8bd43f5c0a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowDescription/FlowDescription.tsx +++ b/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 = () => { <> { formik.setFieldValue("description", event.target.value); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/index.tsx index 70a630ac02..6b452950ef 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/index.tsx +++ b/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 = () => ( - - - - - -); +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 ( + + + + + + ); +}; export default ServiceSettings; diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/settings.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/settings.ts index 874d9cf33b..1050c833c0 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/settings.ts +++ b/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; 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({ + 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) => { diff --git a/editor.planx.uk/src/pages/FlowEditor/utils.ts b/editor.planx.uk/src/pages/FlowEditor/utils.ts index a9f28b54ee..84df742087 100644 --- a/editor.planx.uk/src/pages/FlowEditor/utils.ts +++ b/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), { diff --git a/editor.planx.uk/src/routes/serviceSettings.tsx b/editor.planx.uk/src/routes/serviceSettings.tsx index f22753826d..acc745448c 100644 --- a/editor.planx.uk/src/routes/serviceSettings.tsx +++ b/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({ - 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("/"), ), From 8e6b4b56a6b6f536762db1168838f79a4707d043 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 18 Nov 2024 11:47:56 +0000 Subject: [PATCH 5/7] revert moving state to ensure all get update --- .../FooterLinksAndLegalDisclaimer.tsx | 7 ++-- .../Settings/ServiceSettings/index.tsx | 32 +++++-------------- .../src/routes/serviceSettings.tsx | 4 +++ 3 files changed, 16 insertions(+), 27 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FooterLinksAndLegalDisclaimer.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FooterLinksAndLegalDisclaimer.tsx index 1eee43ae02..cd2c249fe6 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FooterLinksAndLegalDisclaimer.tsx +++ b/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"; @@ -86,6 +85,8 @@ export const FooterLinksAndLegalDisclaimer = () => { ]); const toast = useToast(); + console.log(flowSettings); + const elementsForm = useFormik({ initialValues: { elements: { @@ -112,7 +113,7 @@ export const FooterLinksAndLegalDisclaimer = () => { }, validate: () => {}, }); - + console.log(elementsForm.values.elements); return ( diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/index.tsx index 6b452950ef..70a630ac02 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/index.tsx @@ -1,32 +1,16 @@ import Container from "@mui/material/Container"; -import { useStore } from "pages/FlowEditor/lib/store"; -import React, { useEffect } from "react"; +import React from "react"; import FlowDescription from "./FlowDescription/FlowDescription"; import FlowStatus from "./FlowStatus"; import { FooterLinksAndLegalDisclaimer } from "./FooterLinksAndLegalDisclaimer"; -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 ( - - - - - - ); -}; +const ServiceSettings: React.FC = () => ( + + + + + +); export default ServiceSettings; diff --git a/editor.planx.uk/src/routes/serviceSettings.tsx b/editor.planx.uk/src/routes/serviceSettings.tsx index acc745448c..b520741dcf 100644 --- a/editor.planx.uk/src/routes/serviceSettings.tsx +++ b/editor.planx.uk/src/routes/serviceSettings.tsx @@ -1,8 +1,11 @@ import { compose, mount, route, withData } from "navi"; import ServiceSettings from "pages/FlowEditor/components/Settings/ServiceSettings"; +import { useStore } from "pages/FlowEditor/lib/store"; import { makeTitle } from "./utils"; +const { flowSlug, teamSlug, getFlowSettings } = useStore.getState(); + const serviceSettingsRoutes = compose( withData((req) => ({ mountpath: req.mountpath, @@ -12,6 +15,7 @@ const serviceSettingsRoutes = compose( mount({ "/": compose( route(async (req) => ({ + getData: await getFlowSettings(flowSlug, teamSlug), title: makeTitle( [req.params.team, req.params.flow, "service"].join("/"), ), From 7d021942269891ed55f7ef9ee97357d36a31e0a8 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 18 Nov 2024 11:49:07 +0000 Subject: [PATCH 6/7] remove console.log --- .../Settings/ServiceSettings/FooterLinksAndLegalDisclaimer.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FooterLinksAndLegalDisclaimer.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FooterLinksAndLegalDisclaimer.tsx index cd2c249fe6..268e05aaeb 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FooterLinksAndLegalDisclaimer.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FooterLinksAndLegalDisclaimer.tsx @@ -85,8 +85,6 @@ export const FooterLinksAndLegalDisclaimer = () => { ]); const toast = useToast(); - console.log(flowSettings); - const elementsForm = useFormik({ initialValues: { elements: { @@ -113,7 +111,6 @@ export const FooterLinksAndLegalDisclaimer = () => { }, validate: () => {}, }); - console.log(elementsForm.values.elements); return ( From ec1124c7f42741d0f1a30e3123d118ea70967040 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 18 Nov 2024 16:41:39 +0000 Subject: [PATCH 7/7] update naming and pattern --- .../src/pages/FlowEditor/lib/store/settings.ts | 10 +++++----- editor.planx.uk/src/pages/FlowEditor/utils.ts | 4 ++-- editor.planx.uk/src/routes/serviceSettings.tsx | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/settings.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/settings.ts index 1050c833c0..2013856b67 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/settings.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/settings.ts @@ -2,7 +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 { FlowInformation, GetFlowInformation } from "pages/FlowEditor/utils"; import { AdminPanelData, FlowSettings, @@ -15,7 +15,7 @@ import { SharedStore } from "./shared"; import { TeamStore } from "./team"; export interface SettingsStore { - getFlowSettings: ( + getFlowInformation: ( flowSlug: string, teamSlug: string, ) => Promise; @@ -73,12 +73,12 @@ export const settingsStore: StateCreator< return Boolean(result?.id); }, - getFlowSettings: async (flowSlug, teamSlug) => { + getFlowInformation: async (flowSlug, teamSlug) => { const { data: { flows: [{ settings, status, description }], }, - } = await client.query({ + } = await client.query({ query: gql` query GetFlow($slug: String!, $team_slug: String!) { flows( @@ -96,7 +96,7 @@ export const settingsStore: StateCreator< slug: flowSlug, team_slug: teamSlug, }, - fetchPolicy: "network-only", + fetchPolicy: "no-cache", }); set({ diff --git a/editor.planx.uk/src/pages/FlowEditor/utils.ts b/editor.planx.uk/src/pages/FlowEditor/utils.ts index 84df742087..99282fc212 100644 --- a/editor.planx.uk/src/pages/FlowEditor/utils.ts +++ b/editor.planx.uk/src/pages/FlowEditor/utils.ts @@ -3,13 +3,13 @@ import { formatDistanceToNow } from "date-fns"; import { FlowSettings } from "types"; export interface FlowInformation { - id?: string; settings: FlowSettings; status: FlowStatus; description: string; } -export interface GetFlowSettings { +export interface GetFlowInformation { + id: string; flows: FlowInformation[]; } diff --git a/editor.planx.uk/src/routes/serviceSettings.tsx b/editor.planx.uk/src/routes/serviceSettings.tsx index b520741dcf..b691bc8a89 100644 --- a/editor.planx.uk/src/routes/serviceSettings.tsx +++ b/editor.planx.uk/src/routes/serviceSettings.tsx @@ -4,7 +4,7 @@ import { useStore } from "pages/FlowEditor/lib/store"; import { makeTitle } from "./utils"; -const { flowSlug, teamSlug, getFlowSettings } = useStore.getState(); +const getFlowInformation = useStore.getState().getFlowInformation; const serviceSettingsRoutes = compose( withData((req) => ({ @@ -15,7 +15,7 @@ const serviceSettingsRoutes = compose( mount({ "/": compose( route(async (req) => ({ - getData: await getFlowSettings(flowSlug, teamSlug), + getData: await getFlowInformation(req.params.flow, req.params.team), title: makeTitle( [req.params.team, req.params.flow, "service"].join("/"), ),