Replace flowslug to fix axe test

theopensystemslab · Jan 29, 2025 · 2b600df · 2b600df
1 parent d159f8b
commit 2b600df
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 12 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/ReadMePage/ReadMePage.stories.tsx b/editor.planx.uk/src/pages/FlowEditor/ReadMePage/ReadMePage.stories.tsx
@@ -14,6 +14,7 @@ type Story = StoryObj<typeof meta>;
 export const Basic = {
   args: {
     teamSlug: "barnet",
+    flowSlug: "Apply for prior permission",
     flowInformation: {
       status: "online",
       description: "A long description of a service",

diff --git a/editor.planx.uk/src/pages/FlowEditor/ReadMePage/ReadMePage.tsx b/editor.planx.uk/src/pages/FlowEditor/ReadMePage/ReadMePage.tsx
@@ -5,6 +5,7 @@ import Typography from "@mui/material/Typography";
 import { TextInputType } from "@planx/components/TextInput/model";
 import { useFormik } from "formik";
 import { useToast } from "hooks/useToast";
+import capitalize from "lodash/capitalize";
 import React, { useState } from "react";
 import FlowTag from "ui/editor/FlowTag/FlowTag";
 import { FlowTagType, StatusVariant } from "ui/editor/FlowTag/types";
@@ -26,6 +27,7 @@ import { ReadMePageForm, ReadMePageProps } from "./types";
 export const ReadMePage: React.FC<ReadMePageProps> = ({
   flowInformation,
   teamSlug,
+  flowSlug,
 }) => {
   const { status: flowStatus } = flowInformation;
   const [
@@ -63,14 +65,14 @@ export const ReadMePage: React.FC<ReadMePageProps> = ({
     onSubmit: async (values, { setSubmitting, setFieldError }) => {
       try {
         const updateFlowDescriptionPromise = updateFlowDescription(
-          values.serviceDescription
+          values.serviceDescription,
         );
         const updateFlowSummaryPromise = updateFlowSummary(
-          values.serviceSummary
+          values.serviceSummary,
         );
 
         const updateFlowLimitationsPromise = updateFlowLimitations(
-          values.serviceLimitations
+          values.serviceLimitations,
         );
 
         const [descriptionResult, summaryResult, limitationsResult] =
@@ -86,27 +88,27 @@ export const ReadMePage: React.FC<ReadMePageProps> = ({
           if (!descriptionResult) {
             setFieldError(
               "serviceDescription",
-              "Unable to update the flow description. Please try again."
+              "Unable to update the flow description. Please try again.",
             );
           }
           if (!summaryResult) {
             setFieldError(
               "serviceSummary",
-              "Unable to update the service summary. Please try again."
+              "Unable to update the service summary. Please try again.",
             );
           }
           if (!limitationsResult) {
             setFieldError(
               "serviceLimitations",
-              "Unable to update the service limitations. Please try again."
+              "Unable to update the service limitations. Please try again.",
             );
           }
           throw new Error("One or more updates failed");
         }
       } catch (error) {
         console.error("Error updating descriptions:", error);
         toast.error(
-          "An error occurred while updating descriptions. Please try again."
+          "An error occurred while updating descriptions. Please try again.",
         );
       } finally {
         setSubmitting(false);
@@ -117,7 +119,7 @@ export const ReadMePage: React.FC<ReadMePageProps> = ({
     validationSchema: object({
       serviceSummary: string().max(
         120,
-        "Service description must be 120 characters or less"
+        "Service description must be 120 characters or less",
       ),
     }),
   });
@@ -126,7 +128,8 @@ export const ReadMePage: React.FC<ReadMePageProps> = ({
     <Container maxWidth="formWrap">
       <SettingsSection>
         <Typography variant="h2" component="h3" gutterBottom>
-          {flowName}
+          {/* fallback from request params if store not populated with flowName */}
+          {flowName || capitalize(flowSlug.replaceAll("-", " "))}
         </Typography>
 
         <Box display={"flex"}>

diff --git a/editor.planx.uk/src/pages/FlowEditor/ReadMePage/tests/helpers.ts b/editor.planx.uk/src/pages/FlowEditor/ReadMePage/tests/helpers.ts
@@ -11,6 +11,8 @@ export const platformAdminUser = {
 };
 
 export const defaultProps = {
+  flowSlug: "apply-for-planning-permission",
+  teamSlug: "barnet",
   flowInformation: {
     status: "online",
     description: "A long description of a service",

diff --git a/editor.planx.uk/src/pages/FlowEditor/ReadMePage/types.ts b/editor.planx.uk/src/pages/FlowEditor/ReadMePage/types.ts
@@ -3,6 +3,7 @@ import { FlowInformation } from "../utils";
 export interface ReadMePageProps {
   flowInformation: FlowInformation;
   teamSlug: string;
+  flowSlug: string;
 }
 
 export interface ReadMePageForm {

diff --git a/editor.planx.uk/src/routes/readMePage.tsx b/editor.planx.uk/src/routes/readMePage.tsx
@@ -15,16 +15,22 @@ const readMePageRoutes = compose(
 
   mount({
     "/": route(async (req) => {
-      const { team: teamSlug } = req.params;
+      const { team: teamSlug, flow: flowSlug } = req.params;
 
       const data = await getFlowInformation(req.params.flow, req.params.team);
 
       return {
         title: makeTitle("About this page"),
-        view: <ReadMePage teamSlug={teamSlug} flowInformation={data} />,
+        view: (
+          <ReadMePage
+            teamSlug={teamSlug}
+            flowSlug={flowSlug}
+            flowInformation={data}
+          />
+        ),
       };
     }),
-  })
+  }),
 );
 
 export default readMePageRoutes;