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..a15a671b66 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 @@ -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/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..734fbe02ee 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 @@ -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/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..136d2446e3 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 @@ -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/package.json b/editor.planx.uk/package.json index 839432be7c..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#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", diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml index 716ed3832e..ea740f4b84 100644 --- a/editor.planx.uk/pnpm-lock.yaml +++ b/editor.planx.uk/pnpm-lock.yaml @@ -47,8 +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#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) @@ -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 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..8bd43f5c0a --- /dev/null +++ b/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 ( + + + + 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/FooterLinksAndLegalDisclaimer.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FooterLinksAndLegalDisclaimer.tsx index 1eee43ae02..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 @@ -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 ( 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..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,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, GetFlowInformation } from "pages/FlowEditor/utils"; import { AdminPanelData, FlowSettings, @@ -14,11 +15,18 @@ import { SharedStore } from "./shared"; import { TeamStore } from "./team"; export interface SettingsStore { + getFlowInformation: ( + flowSlug: string, + teamSlug: string, + ) => Promise; flowSettings?: FlowSettings; setFlowSettings: (flowSettings?: FlowSettings) => void; 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 +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); + }, + + getFlowInformation: 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: "no-cache", + }); + + 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..99282fc212 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 { + settings: FlowSettings; + status: FlowStatus; + description: string; +} + +export interface GetFlowInformation { + id: string; + 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 fb8f223999..b691bc8a89 100644 --- a/editor.planx.uk/src/routes/serviceSettings.tsx +++ b/editor.planx.uk/src/routes/serviceSettings.tsx @@ -1,48 +1,10 @@ -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 { useStore } from "pages/FlowEditor/lib/store"; -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; - }[]; -} - -export const getFlowSettings = async (req: NaviRequest) => { - const { - data: { - flows: [{ settings, status }], - }, - } = 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 - status - } - } - `, - variables: { - slug: req.params.flow, - team_slug: req.params.team, - }, - }); - - useStore.getState().setFlowSettings(settings); - useStore.getState().setFlowStatus(status); -}; +const getFlowInformation = useStore.getState().getFlowInformation; const serviceSettingsRoutes = compose( withData((req) => ({ @@ -53,7 +15,7 @@ const serviceSettingsRoutes = compose( mount({ "/": compose( route(async (req) => ({ - getData: await getFlowSettings(req), + getData: await getFlowInformation(req.params.flow, req.params.team), title: makeTitle( [req.params.team, req.params.flow, "service"].join("/"), ),