Merge pull request #524 from UKHSA-Internal/feature/CDD-2245-index-page

Feature/CDD-2245: Index page

src/api/models/cms/Page/Body.ts

@@ -131,6 +131,21 @@ export const CompositeBody = z.array(
       }),
       id: z.string(),
     }),
+    z.object({
+      type: z.literal('internal_page_links'),
+      value: z.array(
+        z.object({
+          type: z.literal('page_link'),
+          value: z.object({
+            title: z.string(),
+            sub_title: z.string(),
+            page: z.string(),
+          }),
+          id: z.string(),
+        })
+      ),
+      id: z.string(),
+    }),
   ])
 )
 

src/api/requests/cms/getPage.ts

@@ -65,6 +65,8 @@ const WithCompositeData = SharedPageData.extend({
     type: z.literal('composite.CompositePage'),
   }),
   date_posted: z.string(),
+  //TODO: Look into page description on all composite pages
+  page_description: z.optional(z.string()),
 })
 
 const WithWhatsNewParentData = SharedPageData.extend({

src/app/__snapshots__/sitemap.spec.ts.snap

@@ -50,6 +50,12 @@ exports[`Sitemap displays correctly 1`] = `
     "priority": 0.5,
     "url": "http://localhost:3000/access-our-data",
   },
+  {
+    "changeFrequency": "monthly",
+    "lastModified": 2020-01-01T00:00:00.000Z,
+    "priority": 0.5,
+    "url": "http://localhost:3000/respiratory-viruses/",
+  },
   {
     "changeFrequency": "monthly",
     "lastModified": 2020-01-01T00:00:00.000Z,
@@ -704,6 +710,12 @@ exports[`Sitemap displays correctly 1`] = `
     "priority": 0.5,
     "url": "http://localhost:3000/access-our-data",
   },
+  {
+    "changeFrequency": "monthly",
+    "lastModified": 2020-01-01T00:00:00.000Z,
+    "priority": 0.5,
+    "url": "http://localhost:3000/respiratory-viruses/",
+  },
   {
     "changeFrequency": "monthly",
     "lastModified": 2020-01-01T00:00:00.000Z,
@@ -1358,6 +1370,12 @@ exports[`Sitemap displays correctly 1`] = `
     "priority": 0.5,
     "url": "http://localhost:3000/access-our-data",
   },
+  {
+    "changeFrequency": "monthly",
+    "lastModified": 2020-01-01T00:00:00.000Z,
+    "priority": 0.5,
+    "url": "http://localhost:3000/respiratory-viruses/",
+  },
   {
     "changeFrequency": "monthly",
     "lastModified": 2020-01-01T00:00:00.000Z,
@@ -2012,6 +2030,12 @@ exports[`Sitemap displays correctly 1`] = `
     "priority": 0.5,
     "url": "http://localhost:3000/access-our-data",
   },
+  {
+    "changeFrequency": "monthly",
+    "lastModified": 2020-01-01T00:00:00.000Z,
+    "priority": 0.5,
+    "url": "http://localhost:3000/respiratory-viruses/",
+  },
   {
     "changeFrequency": "monthly",
     "lastModified": 2020-01-01T00:00:00.000Z,
@@ -2666,6 +2690,12 @@ exports[`Sitemap displays correctly 1`] = `
     "priority": 0.5,
     "url": "http://localhost:3000/access-our-data",
   },
+  {
+    "changeFrequency": "monthly",
+    "lastModified": 2020-01-01T00:00:00.000Z,
+    "priority": 0.5,
+    "url": "http://localhost:3000/respiratory-viruses/",
+  },
   {
     "changeFrequency": "monthly",
     "lastModified": 2020-01-01T00:00:00.000Z,
@@ -3320,6 +3350,12 @@ exports[`Sitemap displays correctly 1`] = `
     "priority": 0.5,
     "url": "http://localhost:3000/access-our-data",
   },
+  {
+    "changeFrequency": "monthly",
+    "lastModified": 2020-01-01T00:00:00.000Z,
+    "priority": 0.5,
+    "url": "http://localhost:3000/respiratory-viruses/",
+  },
   {
     "changeFrequency": "monthly",
     "lastModified": 2020-01-01T00:00:00.000Z,
@@ -3974,6 +4010,12 @@ exports[`Sitemap displays correctly 1`] = `
     "priority": 0.5,
     "url": "http://localhost:3000/access-our-data",
   },
+  {
+    "changeFrequency": "monthly",
+    "lastModified": 2020-01-01T00:00:00.000Z,
+    "priority": 0.5,
+    "url": "http://localhost:3000/respiratory-viruses/",
+  },
   {
     "changeFrequency": "monthly",
     "lastModified": 2020-01-01T00:00:00.000Z,
@@ -4628,6 +4670,12 @@ exports[`Sitemap displays correctly 1`] = `
     "priority": 0.5,
     "url": "http://localhost:3000/access-our-data",
   },
+  {
+    "changeFrequency": "monthly",
+    "lastModified": 2020-01-01T00:00:00.000Z,
+    "priority": 0.5,
+    "url": "http://localhost:3000/respiratory-viruses/",
+  },
   {
     "changeFrequency": "monthly",
     "lastModified": 2020-01-01T00:00:00.000Z,

src/app/components/cms/pages/Composite.tsx

@@ -1,11 +1,11 @@
 import { PageType } from '@/api/requests/cms/getPages'
 import { getPageBySlug } from '@/api/requests/getPageBySlug'
-import { RichTextAutoHeadings } from '@/app/components/cms/RichText/RichTextAutoHeadings'
 import { View } from '@/app/components/ui/ukhsa'
 import { PageComponentBaseProps } from '@/app/types'
 import { renderCompositeBlock } from '@/app/utils/cms.utils'
 
 import { RelatedLinksWrapper } from '../../ui/ukhsa/RelatedLinks/RelatedLinksWrapper'
+import { RichTextAutoHeadings } from '../RichText/RichTextAutoHeadings'
 
 export default async function CompositePage({ slug }: PageComponentBaseProps) {
   const {

src/app/components/ui/ukhsa/List/ListItemArrow.tsx

@@ -27,7 +27,7 @@ export const ListItemArrowLink = ({ asChild, href, children, className }: ListIt
   const Component = asChild ? Slot : 'h2'
 
   return (
-    <Component className={clsx('govuk-heading-m', className)}>
+    <Component className={clsx('govuk-heading-m govuk-!-margin-bottom-2', className)}>
       <Link
         className="govuk-link govuk-link--no-visited-state before:absolute before:inset-0 before:bg-list_item_arrow before:bg-right before:bg-no-repeat after:absolute after:inset-0 hover:before:bg-list_item_arrow_hover"
         href={href}

src/app/utils/cms.utils.spec.tsx

@@ -285,4 +285,26 @@ describe('Composite block', () => {
     )
     expect(screen.getByText('Mocked code block')).toBeInTheDocument()
   })
+
+  test('Internal page links', () => {
+    render(
+      renderCompositeBlock({
+        type: 'internal_page_links',
+        value: [
+          {
+            type: 'page_link',
+            value: {
+              title: 'COVID-19',
+              sub_title: 'COVID-19 is a respiratory infection caused by the SARS-CoV-2-virus.',
+              page: 'http://localhost:3000/topics/covid-19/',
+            },
+            id: 'c36d19c1-3a5e-4fcf-b696-91468c609369',
+          },
+        ],
+        id: '99c01f1d-0280-4cf4-bd96-39543a6c1ac9',
+      })
+    )
+    expect(screen.getByRole('link', { name: 'COVID-19' })).toBeInTheDocument()
+    expect(screen.getByText('COVID-19 is a respiratory infection caused by the SARS-CoV-2-virus.')).toBeInTheDocument()
+  })
 })

src/app/utils/cms.utils.tsx

@@ -7,6 +7,8 @@ import { z } from 'zod'
 import { Body, CardTypes, CompositeBody } from '@/api/models/cms/Page'
 import { Blocks } from '@/api/models/cms/Page/Blocks'
 import { Card, Tabs, TabsContent, TabsList, TabsTrigger } from '@/app/components/ui/ukhsa'
+import { List } from '@/app/components/ui/ukhsa/List/List'
+import { ListItemArrow, ListItemArrowLink, ListItemArrowParagraph } from '@/app/components/ui/ukhsa/List/ListItemArrow'
 
 import {
   AreaSelectorLoader,
@@ -24,6 +26,7 @@ import {
   Timestamp,
   Trend,
 } from '../components/cms'
+import { ListItem } from '../components/ui/ukhsa/List/ListItem'
 
 // TODO: Move this file into cms folder
 export const renderSection = ({ id, value: { heading, content } }: z.infer<typeof Body>[number]) => (
@@ -193,5 +196,19 @@ export const renderCompositeBlock = ({ id, type, value }: CompositeBody[number])
     {type === 'code_block' && (
       <CodeBlock language={value.content[0].value.language}>{value.content[0].value.code}</CodeBlock>
     )}
+
+    {type === 'internal_page_links' && value && value.length > 0 && (
+      <List>
+        <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
+        {value.map(({ id, value }) => (
+          <ListItem key={id} spacing="m">
+            <ListItemArrow>
+              <ListItemArrowLink href={value.page}>{value.title}</ListItemArrowLink>
+              <ListItemArrowParagraph>{value.sub_title}</ListItemArrowParagraph>
+            </ListItemArrow>
+          </ListItem>
+        ))}
+      </List>
+    )}
   </Fragment>
 )

src/mock-server/handlers/cms/pages/[id].ts

@@ -20,6 +20,7 @@ import {
   metricsChildMocks,
   metricsParentMock,
   otherRespiratoryVirusesPageMock,
+  respiratoryVirusesMock,
   weatherHealthAlertsChildMocks,
   weatherHealthAlertsParentMock,
   whatsNewChildMocks,
@@ -42,6 +43,7 @@ export const mockedPageMap: Record<number, PageResponse<PageType>> = {
   [metricsParentMock.id]: metricsParentMock,
   [accessOurDataParentMock.id]: accessOurDataParentMock,
   [weatherHealthAlertsParentMock.id]: weatherHealthAlertsParentMock,
+  [respiratoryVirusesMock.id]: respiratoryVirusesMock,
   ...Object.fromEntries(whatsNewChildMocks.map((mock) => [mock.id, mock])),
   ...Object.fromEntries(metricsChildMocks.map((mock) => [mock.id, mock])),
   ...Object.fromEntries(accessOurDataChildMocks.map((mock) => [mock.id, mock])),

src/mock-server/handlers/cms/pages/fixtures/page/index.ts

@@ -10,5 +10,6 @@ export { dashboardMock } from './dashboard'
 export { influenzaPageMock } from './influenza'
 export { metricsChildMocks, metricsParentMock } from './metrics'
 export { otherRespiratoryVirusesPageMock } from './other-respiratory-viruses'
+export { respiratoryVirusesMock } from './respiratory-viruses'
 export { weatherHealthAlertsChildMocks, weatherHealthAlertsParentMock } from './weather-health-alerts'
 export { whatsNewChildMocks, whatsNewParentMock } from './whats-new'

src/mock-server/handlers/cms/pages/fixtures/page/respiratory-viruses.ts

@@ -0,0 +1,66 @@
+import { PageResponse } from '@/api/requests/cms/getPage'
+import { PageType } from '@/api/requests/cms/getPages'
+
+export const respiratoryVirusesMock: PageResponse<PageType.Composite> = {
+  id: 80,
+  meta: {
+    seo_title: 'Respiratory viruses | UKHSA data dashboard',
+    search_description: 'Respiratory viruses index page',
+    type: 'composite.CompositePage',
+    detail_url: 'http:/api/pages/80/',
+    html_url: 'http://localhost:3000/respiratory-viruses/',
+    slug: 'respiratory-viruses',
+    show_in_menus: false,
+    first_published_at: '2024-09-29T20:51:56.451450+01:00',
+    alias_of: null,
+    parent: {
+      id: 3,
+      meta: { type: 'home.UKHSARootPage', detail_url: 'http:/api/pages/3/', html_url: null },
+      title: 'UKHSA Dashboard Root',
+    },
+  },
+  title: 'Respiratory viruses',
+  seo_change_frequency: 5,
+  seo_priority: 0.5,
+  last_updated_at: '2024-09-29T20:51:56.451450+01:00',
+  date_posted: '2024-09-29',
+  body: [
+    {
+      type: 'internal_page_links',
+      value: [
+        {
+          type: 'page_link',
+          value: {
+            title: 'COVID-19',
+            sub_title: 'COVID-19 is a respiratory infection caused by the SARS-CoV-2-virus.',
+            page: 'http://localhost:3000/topics/covid-19/',
+          },
+          id: 'c36d19c1-3a5e-4fcf-b696-91468c609369',
+        },
+        {
+          type: 'page_link',
+          value: {
+            title: 'Influenza',
+            sub_title: 'Influenza (commonly known as flu) is a respiratory infection.',
+            page: 'http://localhost:3000/topics/influenza/',
+          },
+          id: 'b3375764-0829-494e-9060-a65df5dd53bd',
+        },
+        {
+          type: 'page_link',
+          value: {
+            title: 'Other respiratory viruses',
+            sub_title: 'RSV is one of the common viruses that cause coughs and colds in winter.',
+            page: 'http://localhost:3000/topics/other-respiratory-viruses/',
+          },
+          id: 'd7104a96-3066-4139-80b4-9a4dfb2ed2f9',
+        },
+      ],
+      id: '99c01f1d-0280-4cf4-bd96-39543a6c1ac9',
+    },
+  ],
+  last_published_at: '2024-09-29T20:51:56.451450+01:00',
+  related_links: [],
+  related_links_layout: 'Sidebar',
+  page_description: '',
+}

src/mock-server/handlers/cms/pages/fixtures/pages.ts

@@ -13,6 +13,7 @@ import {
   metricsChildMocks,
   metricsParentMock,
   otherRespiratoryVirusesPageMock,
+  respiratoryVirusesMock,
   whatsNewChildMocks,
   whatsNewParentMock,
 } from './page'
@@ -112,7 +113,7 @@ export const pagesWithCommonTypeMock: PagesResponse = {
 
 export const pagesWithCompositeTypeMock: PagesResponse = {
   meta: {
-    total_count: 3 + accessOurDataChildMocks.length,
+    total_count: 4 + accessOurDataChildMocks.length,
   },
   items: [
     {
@@ -160,6 +161,21 @@ export const pagesWithCompositeTypeMock: PagesResponse = {
       seo_priority: accessOurDataParentMock.seo_priority,
       title: accessOurDataParentMock.title,
     },
+    {
+      id: respiratoryVirusesMock.id,
+      meta: {
+        type: respiratoryVirusesMock.meta.type,
+        detail_url: respiratoryVirusesMock.meta.detail_url,
+        html_url: respiratoryVirusesMock.meta.html_url,
+        slug: respiratoryVirusesMock.meta.slug,
+        search_description: respiratoryVirusesMock.meta.search_description,
+        show_in_menus: respiratoryVirusesMock.meta.show_in_menus,
+        first_published_at: respiratoryVirusesMock.meta.first_published_at,
+      },
+      seo_change_frequency: respiratoryVirusesMock.seo_change_frequency,
+      seo_priority: respiratoryVirusesMock.seo_priority,
+      title: respiratoryVirusesMock.title,
+    },
     ...accessOurDataChildMocks.map(
       ({
         id,