Update nhs sde about page

philreekshdr · philreekshdr · commit b818fb9cb805 · 2026-08-05T11:13:14.000+01:00
diff --git a/src/app/[locale]/account/profile/cohort-discovery-request/components/CohortAccessStepper/CohortAccessStepper.tsx b/src/app/[locale]/account/profile/cohort-discovery-request/components/CohortAccessStepper/CohortAccessStepper.tsx
@@ -17,8 +17,11 @@ import useAuth from "@/hooks/useAuth";
 import { useCohortStatus } from "@/hooks/useCohortStatus";
 import useDialog from "@/hooks/useDialog";
 import { colors } from "@/config/theme";
-import { statusMapping, STEP_STATE } from "@/consts/cohortDiscovery";
-import { RouteName } from "@/consts/routeName";
+import {
+    COHORT_ABOUT_HREF,
+    statusMapping,
+    STEP_STATE,
+} from "@/consts/cohortDiscovery";
 import { differenceInDays } from "@/utils/date";
 import { capitalise } from "@/utils/general";
 import ProfileForm from "@/app/[locale]/account/profile/components/ProfileForm";
@@ -29,7 +32,6 @@ import { CircleState, StepNode, StepTitle } from "../Stepper";
 const TRANSLATION_PATH = "pages.account.profile.cohortDiscovery.stepper";
 const RESOLVED_STATUSES = ["APPROVED", "REJECTED", "EXPIRED", "BANNED"];
 
-const INFO_HREF = `/${RouteName.ABOUT}/${RouteName.COHORT_DISCOVERY}`;
 const TERMS_HREF =
     "https://digital.nhs.uk/data-and-information/research-powered-by-data/registration-service";
 
@@ -140,7 +142,7 @@ const CohortAccessStepper = ({
                     <Typography color={colors.grey700}>
                         {t.rich("moreInfo", {
                             link: chunks => (
-                                <Link href={INFO_HREF}>{chunks}</Link>
+                                <Link href={COHORT_ABOUT_HREF}>{chunks}</Link>
                             ),
                         })}
                     </Typography>
diff --git a/src/app/[locale]/account/profile/cohort-discovery-request/components/NhsSdeAccessStepper/NhsSdeAccessStepper.tsx b/src/app/[locale]/account/profile/cohort-discovery-request/components/NhsSdeAccessStepper/NhsSdeAccessStepper.tsx
@@ -19,22 +19,21 @@ import usePost from "@/hooks/usePost";
 import apis from "@/config/apis";
 import { colors } from "@/config/theme";
 import {
+    COHORT_ABOUT_HREF,
     COHORT_STATUS,
     NHS_SDE_FINAL_STATUSES,
     NHS_SDE_NEGATIVE_STATUSES,
     NHS_SDE_STATUS,
     STEP_STATE,
 } from "@/consts/cohortDiscovery";
-import { RouteName } from "@/consts/routeName";
 import { capitalise } from "@/utils/general";
 import { revalidateCacheAction } from "@/app/actions/revalidateCacheAction";
 import { useFeatures } from "@/providers/FeatureProvider";
 import { CircleState, StepNode, StepTitle } from "../Stepper";
 
 const TRANSLATION_PATH = "pages.account.profile.cohortDiscovery.nhsStepper";
-const ABOUT_HREF = `/${RouteName.ABOUT}/${RouteName.COHORT_DISCOVERY}`;
-const MORE_INFO_HREF = `${ABOUT_HREF}?tab=nhs-sde-network`;
-const HOW_TO_HREF = `${ABOUT_HREF}?tab=how-to-request-access`;
+const MORE_INFO_HREF = `${COHORT_ABOUT_HREF}?tab=nhs-sde-network`;
+const HOW_TO_HREF = `${COHORT_ABOUT_HREF}?tab=how-to-request-access`;
 const REGISTRATION_INFO_URL =
     "https://digital.nhs.uk/data-and-information/research-powered-by-data/sde-network";
 
diff --git a/src/components/CohortDiscoveryInfo/CohortAccessButtons.tsx b/src/components/CohortDiscoveryInfo/CohortAccessButtons.tsx
diff --git a/src/components/CohortDiscoveryInfo/CohortDiscoveryInfo.tsx b/src/components/CohortDiscoveryInfo/CohortDiscoveryInfo.tsx
@@ -166,7 +166,7 @@ const CohortDiscoveryInfo = async ({
                                             content={
                                                 cohortDiscovery?.template
                                                     ?.newCohortDiscoveryFieldGroup
-                                                    .thirdPageText
+                                                    .thirdPageText ?? ""
                                             }
                                         />
                                     </Box>
@@ -197,7 +197,7 @@ const CohortDiscoveryInfo = async ({
                                             content={
                                                 cohortDiscovery?.template
                                                     ?.newCohortDiscoveryFieldGroup
-                                                    .thirdPageTextPartTwo
+                                                    .thirdPageTextPartTwo ?? ""
                                             }
                                         />
                                     </Box>
diff --git a/src/components/CohortDiscoveryInfo/HTMLVideoEmbed.test.tsx b/src/components/CohortDiscoveryInfo/HTMLVideoEmbed.test.tsx
@@ -0,0 +1,36 @@
+import HTMLVideoEmbed from "./HTMLVideoEmbed";
+import { render } from "@/utils/testUtils";
+
+const IFRAME = '<iframe src="https://www.youtube.com/embed/abc123"></iframe>';
+
+describe("HTMLVideoEmbed", () => {
+    it.each([
+        ["undefined", undefined],
+        ["an empty string", ""],
+    ])("renders nothing when content is %s", (_label, content) => {
+        const { container } = render(<HTMLVideoEmbed content={content} />);
+
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    it("renders the embed inside a responsive wrapper", () => {
+        const { container } = render(<HTMLVideoEmbed content={IFRAME} />);
+
+        const iframe = container.querySelector("iframe");
+
+        expect(iframe).toBeInTheDocument();
+        expect(iframe).toHaveAttribute(
+            "src",
+            "https://www.youtube.com/embed/abc123"
+        );
+    });
+
+    it("strips unsafe markup from CMS content", () => {
+        const { container } = render(
+            <HTMLVideoEmbed content={`${IFRAME}<script>alert(1)</script>`} />
+        );
+
+        expect(container.querySelector("script")).not.toBeInTheDocument();
+        expect(container.querySelector("iframe")).toBeInTheDocument();
+    });
+});
diff --git a/src/components/CohortDiscoveryInfo/StepList.test.tsx b/src/components/CohortDiscoveryInfo/StepList.test.tsx
@@ -0,0 +1,124 @@
+import { CmsStep } from "@/interfaces/Cms";
+import StepList from "./StepList";
+import { render, screen } from "@/utils/testUtils";
+
+jest.mock("./ViewCohortDatasetsButton", () => ({
+    __esModule: true,
+    default: ({ nhsSdeOnly }: { nhsSdeOnly?: boolean }) => (
+        <button type="button">
+            {nhsSdeOnly ? "view datasets nhs" : "view datasets"}
+        </button>
+    ),
+}));
+
+jest.mock("../CohortDiscoveryButton", () => ({
+    __esModule: true,
+    default: () => <button type="button">apply</button>,
+}));
+
+const step = (overrides: Partial<CmsStep> = {}): CmsStep => ({
+    stepTitle: "A step",
+    stepText: "<p>Step body</p>",
+    ...overrides,
+});
+
+describe("StepList", () => {
+    it("numbers every step when no markers are set", () => {
+        render(
+            <StepList
+                steps={[
+                    step({ stepTitle: "First" }),
+                    step({ stepTitle: "Second" }),
+                    step({ stepTitle: "Third" }),
+                ]}
+            />
+        );
+
+        expect(screen.getByText("1")).toBeInTheDocument();
+        expect(screen.getByText("2")).toBeInTheDocument();
+        expect(screen.getByText("3")).toBeInTheDocument();
+    });
+
+    it("skips email markers when numbering, so numbers stay sequential", () => {
+        render(
+            <StepList
+                steps={[
+                    step({ stepTitle: "First" }),
+                    step({ stepTitle: "Notification", marker: "email" }),
+                    step({ stepTitle: "Second" }),
+                ]}
+            />
+        );
+
+        expect(screen.getByText("1")).toBeInTheDocument();
+        expect(screen.getByText("2")).toBeInTheDocument();
+        expect(screen.queryByText("3")).not.toBeInTheDocument();
+    });
+
+    it("renders an icon instead of a number for an email marker", () => {
+        render(
+            <StepList
+                steps={[step({ stepTitle: "Notification", marker: "email" })]}
+            />
+        );
+
+        expect(screen.getByTestId("MailOutlineIcon")).toBeInTheDocument();
+        expect(screen.queryByText("1")).not.toBeInTheDocument();
+    });
+
+    it("treats a single-element array marker the same as a scalar", () => {
+        render(
+            <StepList
+                steps={[step({ stepTitle: "Notification", marker: ["email"] })]}
+            />
+        );
+
+        expect(screen.getByTestId("MailOutlineIcon")).toBeInTheDocument();
+    });
+
+    it("renders step titles and sanitised body content", () => {
+        render(
+            <StepList
+                steps={[
+                    step({
+                        stepTitle: "Define your cohort",
+                        stepText: "<p>Use the query builder</p>",
+                    }),
+                ]}
+            />
+        );
+
+        expect(screen.getByText("Define your cohort")).toBeInTheDocument();
+        expect(screen.getByText("Use the query builder")).toBeInTheDocument();
+    });
+
+    it.each([
+        ["viewDatasets", "view datasets"],
+        ["viewDatasetsNhs", "view datasets nhs"],
+        ["apply", "apply"],
+    ])("renders the %s button", (buttonKey, label) => {
+        render(<StepList steps={[step({ buttonKey })]} />);
+
+        expect(
+            screen.getByRole("button", { name: label })
+        ).toBeInTheDocument();
+    });
+
+    it("renders no button when buttonKey is omitted", () => {
+        render(<StepList steps={[step()]} />);
+
+        expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+
+    it("renders no button for an unknown buttonKey", () => {
+        render(<StepList steps={[step({ buttonKey: "viewDatasetsNHS" })]} />);
+
+        expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+
+    it("renders an empty list without throwing", () => {
+        render(<StepList steps={[]} />);
+
+        expect(screen.getByRole("list")).toBeEmptyDOMElement();
+    });
+});
diff --git a/src/config/messages/en.json b/src/config/messages/en.json
@@ -2013,12 +2013,8 @@
         "CohortDiscoveryInfo": {
             "title": "Cohort Discovery",
             "whatCanIDo": "What can I do in Cohort Discovery?",
-            "step1": "Firstly, request access through the NHS website",
-            "step2": "Once approved, select this button",
             "learnAbout": "Learn about Cohort Discovery and gain access to the service",
-            "accessButton": "Access Cohort Discovery",
-            "nhsNetwork": "NHS Research SDE Network",
-            "nhsNetworkInfo": "The following additional NHS Research SDE datasets are available in Cohort Discovery, but require you go to through a separate approval process by the NHS Research SDE Network."
+            "accessButton": "Access Cohort Discovery"
         }
     },
     "modules": {
diff --git a/src/consts/cohortDiscovery.tsx b/src/consts/cohortDiscovery.tsx
@@ -1,3 +1,5 @@
+import { RouteName } from "@/consts/routeName";
+
 const COHORT_STATUS = {
     APPROVED: "APPROVED",
     REJECTED: "REJECTED",
@@ -61,6 +63,8 @@ const STEP_STATE = {
     PENDING: "pending",
 } as const;
 
+const COHORT_ABOUT_HREF = `/${RouteName.ACCOUNT}/${RouteName.PROFILE}/${RouteName.COHORT_DISCOVERY_ABOUT}`;
+
 export {
     statusMapping,
     NHSSDEStatusMapping,
@@ -72,4 +76,5 @@ export {
     COHORT_DISCOVERY_SDE_EXPIRY_WARNING_DAYS,
     NHS_SDE_FILTER,
     STEP_STATE,
+    COHORT_ABOUT_HREF,
 };
diff --git a/src/interfaces/Cms.ts b/src/interfaces/Cms.ts
@@ -39,13 +39,13 @@ interface CtaLink {
     title: string;
 }
 
-type CmsStepMarker = "number" | "email" | "none";
+type CmsStepMarker = "number" | "email";
 
 interface CmsStep {
     stepTitle: string;
     stepText: string;
-    marker?: CmsStepMarker;
-    buttonKey?: string;
+    marker?: CmsStepMarker | CmsStepMarker[];
+    buttonKey?: string | string[];
 }
 
 interface PageTemplatePromo {

Original file line number	Diff line number	Diff line change
`@@ -39,13 +39,13 @@ interface CtaLink {`
`39`	`39`	`title: string;`
`40`	`40`	`}`
`41`	`41`
`42`		`-type CmsStepMarker = "number" \| "email" \| "none";`
	`42`	`+type CmsStepMarker = "number" \| "email";`
`43`	`43`
`44`	`44`	`interface CmsStep {`
`45`	`45`	`stepTitle: string;`
`46`	`46`	`stepText: string;`
`47`		`- marker?: CmsStepMarker;`
`48`		`- buttonKey?: string;`
	`47`	`+ marker?: CmsStepMarker \| CmsStepMarker[];`
	`48`	`+ buttonKey?: string \| string[];`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`interface PageTemplatePromo {`