Merge branch 'main' into VACMS-16432-banner-updates

README.md

@@ -71,6 +71,22 @@ NEXT_IMAGE_DOMAIN=https://va-gov-cms.ddev.site
 
 Now you can run `yarn dev` and data will be coming from your local CMS environment instead.
 
+### Local CMS Preview
+
+To test the preview API route locally, you will also need to add public and private OAuth keys to your local clone of the va.gov-cms root directory at `public.key` and `private.key` respectively. These files are gitignored in the va.gov-cms repo.
+
+```
+-----BEGIN PUBLIC KEY-----
+Retrieve this value from AWS SSM @ /cms/staging/drupal_api_users/next_build_api/public.key
+-----END PUBLIC KEY-----
+```
+
+```
+-----BEGIN RSA PRIVATE KEY-----
+Retrieve this value from AWS SSM @ /cms/staging/drupal_api_users/next_build_api/private.key
+-----END RSA PRIVATE KEY-----
+```
+
 ## Generating the static site
 
 To generate the static pages for https://va.gov, run `yarn export`. This command will generate static pages for all paths that next-build is aware of.

src/data/queries/newsStory.ts

@@ -58,6 +58,7 @@ export const formatter: QueryFormatter<NodeNewsStory, NewsStory> = (
     entityPath: entity.path.alias,
     type: entity.type,
     published: entity.status,
+    moderationState: entity.moderation_state,
     title: entity.title,
     metatags: entity.metatag,
     image: queries.formatData('media--image', {

src/data/queries/storyListing.ts

@@ -123,6 +123,7 @@ export const formatter: QueryFormatter<StoryListingData, StoryListing> = ({
     entityPath: entity.path.alias,
     type: entity.type,
     published: entity.status,
+    moderationState: entity.moderation_state,
     title: entity.title,
     metatags: entity.metatag,
     introText: entity.field_intro_text,

src/data/queries/tests/__snapshots__/newsStory.test.tsx.snap

@@ -463,6 +463,7 @@ exports[`node--news_story formatData outputs formatted data 1`] = `
       "tag": "meta",
     },
   ],
+  "moderationState": "published",
   "published": true,
   "socialLinks": {
     "path": "/pittsburgh-health-care/stories/we-honor-outstanding-doctors",

src/pages/[[...slug]].tsx

@@ -25,6 +25,7 @@ import { NewsStory as FormattedNewsStory } from '@/types/dataTypes/formatted/new
 import { StoryListing as FormattedStoryListing } from '@/types/dataTypes/formatted/storyListing'
 import { Event as FormattedEvent } from '@/types/dataTypes/formatted/event'
 import { Meta } from '@/templates/globals/meta'
+import { PreviewCrumb } from '@/templates/common/preview'
 
 const RESOURCE_TYPES_TO_BUILD = [
   RESOURCE_TYPES.STORY_LISTING,
@@ -56,25 +57,16 @@ export default function ResourcePage({
     `
 
   return (
-    <Wrapper bannerData={bannerData} headerFooterData={headerFooterData}>
+    <Wrapper
+      bannerData={bannerData}
+      headerFooterData={headerFooterData}
+      preview={preview}
+      resource={resource}
+    >
       <Meta resource={resource} />
       <HTMLComment position="head" content={comment} />
 
-      {preview && (
-        <div className="usa-grid-full">
-          <div className="usa-width-one-whole">
-            <div className="vads-u-margin-top--2">
-              <a
-                data-same-tab=""
-                href={`${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/node/${resource?.entityId}/edit`}
-              >
-                « Edit this page in the CMS (requires a CMS account with
-                appropriate permissions)
-              </a>
-            </div>
-          </div>
-        </div>
-      )}
+      {preview && <PreviewCrumb entityId={resource.entityId} />}
 
       <Breadcrumbs
         breadcrumbs={resource.breadcrumbs}

src/templates/common/preview/index.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react'
+import { PreviewCrumb, UnpublishedBanner } from './index'
+
+const resource = {
+  published: false,
+  moderationState: 'draft',
+  entityPath:
+    '/oklahoma-city-health-care/stories/el-reno-high-school-continues-78-year-tradition-of-giving-gifts-to-veterans',
+  entityId: '500',
+}
+
+describe('Preview renders with accurate data', () => {
+  test('renders PreviewCrumb component', () => {
+    render(<PreviewCrumb entityId={resource.entityId} />)
+
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/node/500/edit`
+    )
+  })
+
+  test('UnpublishedBanner renders with draft content', () => {
+    render(<UnpublishedBanner resource={resource} />)
+
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/node/500/edit`
+    )
+  })
+
+  test('UnpublishedBanner renders with archived content', () => {
+    const modResource = {
+      ...resource,
+      moderationState: 'archived',
+    }
+    render(<UnpublishedBanner resource={modResource} />)
+
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/node/500/edit`
+    )
+  })
+
+  test('UnpublishedBanner does not render with a published revision', () => {
+    const modResource = {
+      ...resource,
+      published: true,
+    }
+    render(<UnpublishedBanner resource={modResource} />)
+
+    expect(
+      screen.queryByText('You are viewing a draft revision')
+    ).not.toBeInTheDocument()
+  })
+})

src/templates/common/preview/index.tsx

@@ -0,0 +1,53 @@
+/* These two components appear when viewing a page through the /api/preview route
+ * using the Drupal CMS preview.
+ */
+
+// In preview mode, this appears just above the page's breadcrumbs.
+export const PreviewCrumb = ({ entityId }) => {
+  return (
+    <div className="usa-grid-full">
+      <div className="usa-width-one-whole">
+        <div className="vads-u-margin-top--2">
+          <a
+            data-same-tab=""
+            href={`${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/node/${entityId}/edit`}
+          >
+            « Edit this page in the CMS (requires a CMS account with appropriate
+            permissions)
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// In preview mode, this appears as a small banner at the very top of the page when viewing draft or archived revisions.
+export const UnpublishedBanner = ({ resource }) => {
+  if (resource.published) return null
+
+  let modState
+  switch (resource.moderationState) {
+    case 'archived':
+      modState = 'an archived'
+      break
+    case 'draft':
+    case 'review':
+    default:
+      modState = 'a draft'
+  }
+
+  return (
+    <div className="vads-u-background-color--primary-alt-lightest vads-u-padding--1">
+      <div className="vads-l-grid-container medium-screen:vads-u-padding-x--0">
+        You are viewing {modState} revision of {resource?.entityPath}.
+        <a
+          data-same-tab=""
+          href={`${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/node/${resource?.entityId}/edit`}
+          style={{ display: 'block' }}
+        >
+          Edit this page in the CMS.
+        </a>
+      </div>
+    </div>
+  )
+}

src/templates/common/preview/preview.stories.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { PreviewCrumb } from './index'
+
+const meta: Meta<typeof PreviewCrumb> = {
+  title: 'Common/Preview',
+  component: PreviewCrumb,
+}
+export default meta
+
+type Story = StoryObj<typeof PreviewCrumb>
+
+export const PreviewBreadcrumbLink: Story = {
+  args: {
+    entityId: 500,
+  },
+}

src/templates/common/preview/unpublishedPreview.stories.ts

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { UnpublishedBanner } from './index'
+
+const meta: Meta<typeof UnpublishedBanner> = {
+  title: 'Common/Preview',
+  component: UnpublishedBanner,
+}
+export default meta
+
+type Story = StoryObj<typeof UnpublishedBanner>
+
+export const Draft: Story = {
+  args: {
+    resource: {
+      published: false,
+      moderationState: 'draft',
+      entityPath:
+        '/oklahoma-city-health-care/stories/el-reno-high-school-continues-78-year-tradition-of-giving-gifts-to-veterans',
+      entityId: '500',
+    },
+  },
+}
+
+export const Archived: Story = {
+  args: {
+    resource: {
+      published: false,
+      moderationState: 'archived',
+      entityPath:
+        '/oklahoma-city-health-care/stories/el-reno-high-school-continues-78-year-tradition-of-giving-gifts-to-veterans',
+      entityId: '500',
+    },
+  },
+}

src/templates/globals/wrapper/index.tsx

@@ -15,6 +15,9 @@ import { BannerDisplayType, BannerTypeMapping } from '@/data/queries/banners'
 import { Header } from '../header'
 import { Footer } from '../footer/index'
 import { handleSkipLink } from '@/lib/utils/handleSkipLink'
+import { UnpublishedBanner } from '@/templates/common/preview'
+import { StaticPropsResource } from '@/lib/drupal/staticProps'
+import { FormattedResource } from '@/data/queries'
 
 // Allows additions to window object without overwriting global type
 interface customWindow extends Window {
@@ -33,6 +36,8 @@ export interface LayoutProps {
     | FormattedFacilityBanner
   >
   headerFooterData?: HeaderFooterData
+  preview?: boolean
+  resource?: StaticPropsResource<FormattedResource>
 }
 
 export const formatBannerType = (bannerData) => {
@@ -51,6 +56,8 @@ export const formatBannerType = (bannerData) => {
 export function Wrapper({
   bannerData,
   headerFooterData,
+  preview,
+  resource,
   children,
 }: LayoutProps) {
   const [showBanners, setShowBanners] = useState(false)
@@ -74,6 +81,7 @@ export function Wrapper({
       <a href="#content" onClick={handleSkipLink} className="show-on-focus">
         Skip to Content
       </a>
+      {preview ? <UnpublishedBanner resource={resource} /> : null}
       <Header />
       {showBanners ? banners : null}
       {children}