feat: Support published status for landing pages and preview of draft…

… pages (#1175)

* reword banner to line up with status

* add support for displaying draft landing to cms users

* update types so tests continue to pass

* show draft tag on landing page index

* hide unpublished pages from non-cms users

* support pages published in the future

* add long titled sample to storybook

* undoes hiding publish date and sets colors for different status tags

* sets default tag color to mars in case other statuses are addes later

* update tests for showing published tag

* hide status tag for landing pages for portal user

---------

Co-authored-by: Shauna Keating <shauna@truss.works>

src/__fixtures__/data/landingPage.ts

@@ -1,9 +1,13 @@
+import { DateTime } from 'luxon'
+
 export const mockLandingPage = {
   __typename: 'LandingPage',
   pageTitle: 'Test Landing Page',
   pageDescription:
     'em ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac odio ultrices, varius diam at, iaculis sapien. Integer risus quam, congue quis nibh in, iaculis ultrices justo. Sed viverra, massa in finibus vehicula, odio dui fringilla tellus, nec consequat arcu nulla eu augue. Maecenas at ornare orci. Aenean mattis et sapien at vulputate. Sed vel arcu at lorem consequat pulvinar quis ac ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo eros eget gravida hendrerit. Suspendisse facilisis odio vel lacus mollis condimentum. Proin in lectus et erat congue luctus non et ligula. Aenean elementum, risus quis tristique cursus, metus leo ornare sem, ut convallis dui velit sit amet mauris.',
   slug: 'a-page',
+  publishedDate: DateTime.now().toISO(),
+  status: 'Published',
   documents: [
     {
       __typename: 'DocumentSection',

src/__fixtures__/data/landingPages.ts

@@ -1,12 +1,25 @@
+import { DateTime } from 'luxon'
+
 export const mockLandingPages = [
   {
     pageDescription: 'This is a test landing page',
     pageTitle: 'Test Landing Page',
     slug: 'test-landing-page',
+    publishedDate: DateTime.now().toISO()!,
+    status: 'Published' as 'Draft' | 'Published' | 'Archived',
   },
   {
     pageDescription: 'Another landing page',
     pageTitle: 'Another Landing Page',
     slug: 'another-landing-page',
+    publishedDate: DateTime.now().toISO()!,
+    status: 'Published' as 'Draft' | 'Published' | 'Archived',
+  },
+  {
+    pageDescription: 'Draft landing page',
+    pageTitle: 'Another Landing Page',
+    slug: 'draft-landing-page',
+    publishedDate: '',
+    status: 'Draft' as 'Draft' | 'Published' | 'Archived',
   },
 ]

src/__tests__/pages/landing.test.tsx

@@ -2,32 +2,76 @@
  * @jest-environment jsdom
  */
 import { screen } from '@testing-library/react'
+import { GetServerSidePropsContext } from 'next'
 import { renderWithAuth } from '../../testHelpers'
+import { getSession } from 'lib/session'
 import Landing, { getServerSideProps } from 'pages/landing'
 import { mockLandingPages } from '__fixtures__/data/landingPages'
-import { testUser1 } from '__fixtures__/authUsers'
+import { cmsUser, testUser1 } from '__fixtures__/authUsers'
+import { PublishableItemType } from 'types'
+import { isPublished } from 'helpers/index'
 
 jest.mock('../../lib/keystoneClient', () => ({
   client: {
     query: () => {
       return {
-        data: {
-          landingPages: mockLandingPages,
-        },
+        data: { landingPages: mockLandingPages },
       }
     },
   },
 }))
 
+type LandingPage = {
+  pageTitle: string
+  slug: string
+} & PublishableItemType
+
+const testContext = {} as unknown as GetServerSidePropsContext
+
+jest.mock('lib/session', () => ({
+  getSession: jest.fn(),
+}))
+
+const mockedGetSession = getSession as jest.Mock
+
 describe('Landing page index', () => {
   describe('when logged in', () => {
-    test('returns correct props from getServerSideProps', async () => {
-      const response = await getServerSideProps()
+    describe('geServerSideProps', () => {
+      test('returns only published sorted landing pages for non-cms user', async () => {
+        mockedGetSession.mockImplementationOnce(() =>
+          Promise.resolve({ passport: { user: testUser1 } })
+        )
+        const response = await getServerSideProps(testContext)
+        const expectedSortedPages = mockLandingPages
+          .filter(isPublished)
+          .sort((a: LandingPage, b: LandingPage) =>
+            a.pageTitle.localeCompare(b.pageTitle)
+          )
+
+        expect(response).toEqual({
+          props: {
+            landingPages: expectedSortedPages,
+            showStatus: false,
+          },
+        })
+      })
+
+      test('returns all sorted landing pages for cms user', async () => {
+        mockedGetSession.mockImplementationOnce(() =>
+          Promise.resolve({ passport: { user: cmsUser } })
+        )
+        const response = await getServerSideProps(testContext)
+        const expectedSortedPages = mockLandingPages.sort(
+          (a: LandingPage, b: LandingPage) =>
+            a.pageTitle.localeCompare(b.pageTitle)
+        )
 
-      expect(response).toEqual({
-        props: {
-          landingPages: [...mockLandingPages],
-        },
+        expect(response).toEqual({
+          props: {
+            landingPages: expectedSortedPages,
+            showStatus: true,
+          },
+        })
       })
     })
 

src/components/LandingPageIndexTable/LandingPageIndexTable.module.scss

@@ -19,4 +19,17 @@
   > tbody > tr:nth-child(even) > td {
     background-color: var(--lp-even-row);
   }
+
+  .status {
+    color: $theme-spacebase-dark;
+    background: $theme-mars-light;
+    position: relative;
+    float: right;
+  }
+  :global(.usa-tag.Archived) {
+    @include u-bg('blue-cool-20');
+  }
+  :global(.usa-tag.Published) {
+    @include u-bg('green-cool-20');
+  }
 }

src/components/LandingPageIndexTable/LandingPageIndexTable.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Meta } from '@storybook/react'
+import { DateTime } from 'luxon'
 import LandingPageIndexTable from './LandingPageIndexTable'
 
 export default {
@@ -11,17 +12,46 @@ const testLandingPages = [
   {
     pageTitle: 'Test Landing Page 1',
     slug: 'test-landing-page-1',
+    publishedDate: DateTime.now().toISO()!,
+    status: 'Published' as 'Draft' | 'Published' | 'Archived',
+  },
+  {
+    pageTitle: 'Test Landing Page 4',
+    slug: 'test-landing-page-4',
+    publishedDate: DateTime.now().toISO()!,
+    status: 'Archived' as 'Draft' | 'Published' | 'Archived',
   },
   {
     pageTitle: 'Test Landing Page 2',
     slug: 'test-landing-page-2',
+    publishedDate: DateTime.now().toISO()!,
+    status: 'Published' as 'Draft' | 'Published' | 'Archived',
   },
   {
     pageTitle: 'Test Landing Page 3',
     slug: 'test-landing-page-3',
+    publishedDate: DateTime.now().toISO()!,
+    status: 'Draft' as 'Draft' | 'Published' | 'Archived',
+  },
+  {
+    pageTitle: 'Test Landing Page 5',
+    slug: 'test-landing-page-5',
+    publishedDate: DateTime.now().plus({ weeks: 2 }).toISO()!,
+    status: 'Published' as 'Draft' | 'Published' | 'Archived',
+  },
+  {
+    pageTitle:
+      'Test Landing Page 6 with a really long title to ensure that the table is responsive',
+    slug: 'test-landing-page-6',
+    publishedDate: DateTime.now().plus({ weeks: 3 }).toISO()!,
+    status: 'Published' as 'Draft' | 'Published' | 'Archived',
   },
 ]
 
-export const ExampleLandingPageIndexTable = () => (
-  <LandingPageIndexTable landingPages={testLandingPages} />
+export const ShowStatus = () => (
+  <LandingPageIndexTable landingPages={testLandingPages} showStatus={true} />
+)
+
+export const HideStatus = () => (
+  <LandingPageIndexTable landingPages={testLandingPages} showStatus={false} />
 )

src/components/LandingPageIndexTable/LandingPageIndexTable.test.tsx

@@ -3,33 +3,140 @@
  */
 import React from 'react'
 import { render } from '@testing-library/react'
+import { DateTime } from 'luxon'
 import LandingPageIndexTable from './LandingPageIndexTable'
 
+const expectedFutueDate = DateTime.now().plus({ weeks: 2 })
+const expectedPastDate = DateTime.now().minus({ weeks: 2 })
 const testLandingPages = [
   {
     pageTitle: 'Test Landing Page 1',
     slug: 'test-landing-page-1',
+    publishedDate: DateTime.now().toISO()!,
+    status: 'Published' as 'Draft' | 'Published' | 'Archived',
   },
   {
     pageTitle: 'Test Landing Page 2',
     slug: 'test-landing-page-2',
+    publishedDate: expectedPastDate.toISO()!,
+    status: 'Published' as 'Draft' | 'Published' | 'Archived',
   },
   {
     pageTitle: 'Test Landing Page 3',
     slug: 'test-landing-page-3',
+    publishedDate: DateTime.now().toISO()!,
+    status: 'Draft' as 'Draft' | 'Published' | 'Archived',
+  },
+  {
+    pageTitle: 'Test Landing Page 4',
+    slug: 'test-landing-page-4',
+    publishedDate: DateTime.now().toISO()!,
+    status: 'Archived' as 'Draft' | 'Published' | 'Archived',
+  },
+  {
+    pageTitle: 'Test Landing Page 5',
+    slug: 'test-landing-page-5',
+    publishedDate: expectedFutueDate.toISO()!,
+    status: 'Published' as 'Draft' | 'Published' | 'Archived',
   },
 ]
 
 describe('LandingPageIndexTable', () => {
   test('renders without error', () => {
-    render(<LandingPageIndexTable landingPages={testLandingPages} />)
+    render(
+      <LandingPageIndexTable
+        landingPages={testLandingPages}
+        showStatus={true}
+      />
+    )
 
     const table = document.querySelector('table')
     expect(table).toBeInTheDocument()
 
     expect(table).toHaveClass('usa-table--borderless')
 
     const rows = document.querySelectorAll('tr')
-    expect(rows.length).toEqual(3)
+    expect(rows.length).toEqual(5)
+  })
+
+  test('renders draft tag for draft page', () => {
+    render(
+      <LandingPageIndexTable
+        landingPages={testLandingPages}
+        showStatus={true}
+      />
+    )
+
+    const rows = document.querySelectorAll('tr')
+
+    // expect draft page to have a tag
+    const draftTag = rows[2].querySelector('td')?.querySelector('span')
+    expect(draftTag).toHaveTextContent('Draft')
+  })
+
+  test('renders tag for page published in past', () => {
+    render(
+      <LandingPageIndexTable
+        landingPages={testLandingPages}
+        showStatus={true}
+      />
+    )
+
+    const rows = document.querySelectorAll('tr')
+
+    // expect published page to have a tag
+    const published = rows[1].querySelector('td')?.querySelector('span')
+    expect(published).toHaveTextContent(
+      `Published on: ${expectedPastDate.toFormat('dd MMM yyyy HH:mm')}`
+    )
+  })
+
+  test('renders published tag for page published in the future', () => {
+    render(
+      <LandingPageIndexTable
+        landingPages={testLandingPages}
+        showStatus={true}
+      />
+    )
+
+    const rows = document.querySelectorAll('tr')
+
+    // expect published page to have a tag
+    const published = rows[4].querySelector('td')?.querySelector('span')
+    expect(published).toHaveTextContent(
+      `Publishing on: ${expectedFutueDate.toFormat('dd MMM yyyy HH:mm')}`
+    )
+  })
+
+  test('renders archived tag for archived page', () => {
+    render(
+      <LandingPageIndexTable
+        landingPages={testLandingPages}
+        showStatus={true}
+      />
+    )
+
+    const rows = document.querySelectorAll('tr')
+
+    // expect archived page to have a tag
+    const archivedTag = rows[3].querySelector('td')?.querySelector('span')
+    expect(archivedTag).toHaveTextContent('Archived')
+  })
+
+  test('renders no status tags if showStatus false', () => {
+    render(
+      <LandingPageIndexTable
+        landingPages={testLandingPages}
+        showStatus={false}
+      />
+    )
+
+    const rows = document.querySelectorAll('tr')
+
+    // expect all pages to not have a tag
+    rows.forEach((row) => {
+      const noTag = row.querySelector('td')?.querySelector('span')
+      expect(noTag).toBeNull()
+    })
   })
 })