VACMS-15791 next preview functionality

envs/.env.example

@@ -2,11 +2,14 @@
 NEXT_PUBLIC_DRUPAL_BASE_URL=https://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov
 NEXT_IMAGE_DOMAIN=https://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov
 
+# If running va.gov-cms locally
+# NEXT_PUBLIC_DRUPAL_BASE_URL=https://va-gov-cms.ddev.site
+# NEXT_IMAGE_DOMAIN=https://va-gov-cms.ddev.site
+
 # for Drupal preview
-DRUPAL_SITE_ID=
-DRUPAL_PREVIEW_SECRET=
-DRUPAL_CLIENT_ID=
-DRUPAL_CLIENT_SECRET=
+DRUPAL_PREVIEW_SECRET=secret
+DRUPAL_CLIENT_ID=Retrieve this from AWS SSM /cms/consumers/next-build/client_id
+DRUPAL_CLIENT_SECRET=Retrieve this from AWS SSM /cms/consumers/next-build/client_secret
 
 # for local sitemap generation
 SITE_URL=http://localhost:8001

envs/.env.test

@@ -1,10 +1,9 @@
 # This is the standard lower environment for Content API.
 NEXT_PUBLIC_DRUPAL_BASE_URL=https://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov
 NEXT_IMAGE_DOMAIN=https://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov
-DRUPAL_SITE_ID=
-DRUPAL_PREVIEW_SECRET=
-DRUPAL_CLIENT_ID=
-DRUPAL_CLIENT_SECRET=
+DRUPAL_PREVIEW_SECRET=secret
+DRUPAL_CLIENT_ID=foo
+DRUPAL_CLIENT_SECRET=bar
 GOOGLE_TAG_MANAGER_AUTH=
 GOOGLE_TAG_MANAGER_PREVIEW=
 GOOGLE_TAG_MANAGER_ID=

envs/.env.tugboat

@@ -12,3 +12,7 @@ NEXT_PUBLIC_ASSETS_URL=/generated/
 GOOGLE_TAG_MANAGER_AUTH=
 GOOGLE_TAG_MANAGER_PREVIEW=
 GOOGLE_TAG_MANAGER_ID=
+
+# For Drupal preview
+DRUPAL_PREVIEW_SECRET=secret
+# DRUPAL_CLIENT_ID & DRUPAL_CLIENT_SECRET are made available through Tugboat UI settings.

src/data/queries/newsStory.ts

@@ -8,6 +8,7 @@ import { drupalClient } from '@/lib/drupal/drupalClient'
 import { queries } from '.'
 import { NodeNewsStory } from '@/types/dataTypes/drupal/node'
 import { NewsStoryType } from '@/types/index'
+import { GetServerSidePropsContext } from 'next'
 
 // Define the query params for fetching node--news_story.
 export const params: QueryParams<null> = () => {
@@ -25,19 +26,30 @@ export const params: QueryParams<null> = () => {
 // Define the option types for the data loader.
 export type NewsStoryDataOpts = QueryOpts<{
   id: string
+  context?: GetServerSidePropsContext
 }>
 
 // Implement the data loader.
 export const data: QueryData<NewsStoryDataOpts, NodeNewsStory> = async (
   opts
 ): Promise<NodeNewsStory> => {
-  const entity = await drupalClient.getResource<NodeNewsStory>(
-    'node--news_story',
-    opts?.id,
-    {
-      params: params().getQueryObject(),
-    }
-  )
+  const entity = opts?.context?.preview
+    ? // need to use getResourceFromContext for unpublished revisions
+      await drupalClient.getResourceFromContext<NodeNewsStory>(
+        'node--news_story',
+        opts.context,
+        {
+          params: params().getQueryObject(),
+        }
+      )
+    : // otherwise just lookup by uuid
+      await drupalClient.getResource<NodeNewsStory>(
+        'node--news_story',
+        opts.id,
+        {
+          params: params().getQueryObject(),
+        }
+      )
 
   return entity
 }

src/data/queries/storyListing.ts

@@ -41,13 +41,23 @@ type StoryListingData = {
 export const data: QueryData<ListingPageDataOpts, StoryListingData> = async (
   opts
 ) => {
-  const entity = await drupalClient.getResource<NodeStoryListing>(
-    'node--story_listing',
-    opts?.id,
-    {
-      params: params().getQueryObject(),
-    }
-  )
+  const entity = opts?.context?.preview
+    ? // need to use getResourceFromContext for unpublished revisions
+      await drupalClient.getResourceFromContext<NodeStoryListing>(
+        'node--story_listing',
+        opts.context,
+        {
+          params: params().getQueryObject(),
+        }
+      )
+    : // otherwise just lookup by uuid
+      await drupalClient.getResource<NodeStoryListing>(
+        'node--story_listing',
+        opts.id,
+        {
+          params: params().getQueryObject(),
+        }
+      )
 
   // Fetch list of stories related to this listing
   const {

src/lib/drupal/drupalClient.ts

@@ -62,4 +62,10 @@ export const drupalClient = new DrupalClient(baseUrl, {
   fetcher,
   useDefaultResourceTypeEntry: true,
   throwJsonApiErrors: false,
+  auth: {
+    clientId: process.env.DRUPAL_CLIENT_ID,
+    clientSecret: process.env.DRUPAL_CLIENT_SECRET,
+  },
+  previewSecret: process.env.DRUPAL_PREVIEW_SECRET,
+  forceIframeSameSiteCookie: process.env.NODE_ENV === 'development',
 })

src/lib/drupal/listingPages.ts

@@ -2,7 +2,7 @@ import { drupalClient } from '@/lib/drupal/drupalClient'
 import { QUERIES_MAP, queries } from '@/data/queries'
 import { RESOURCE_TYPES, ResourceTypeType } from '@/lib/constants/resourceTypes'
 import { StaticPathResourceType } from '@/types/index'
-import { GetStaticPropsContext } from 'next'
+import { GetServerSidePropsContext, GetStaticPropsContext } from 'next'
 import { QueryOpts } from 'next-drupal-query'
 import { LovellStaticPropsContextProps } from '@/lib/drupal/lovell/types'
 import { isLovellChildVariantResource } from '@/lib/drupal/lovell/utils'
@@ -30,6 +30,7 @@ export type ListingPageDataOpts = QueryOpts<{
   id: string
   page?: number
   lovell?: LovellStaticPropsContextProps
+  context?: GetServerSidePropsContext
 }>
 
 type ListingPageCounts = {

src/lib/drupal/staticProps.ts

@@ -83,22 +83,21 @@ export function getStaticPropsQueryOpts(
   id: string,
   context: ExpandedStaticPropsContext
 ): StaticPropsQueryOpts {
-  if (resourceType === RESOURCE_TYPES.STORY) {
-    return {
-      id,
-    }
+  // most types will simply need an ID, preview mode needs context
+  const defaultQueryOpts = {
+    id,
+    context: context.preview ? context : null,
   }
 
+  // Listing Page types need to know what page # to query for
   if (resourceType === RESOURCE_TYPES.STORY_LISTING) {
     return {
-      id,
+      ...defaultQueryOpts,
       page: context.listing.page,
     }
   }
 
-  return {
-    id,
-  }
+  return defaultQueryOpts
 }
 
 export async function fetchSingleStaticPropsResource(

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

@@ -32,6 +32,7 @@ export default function ResourcePage({
   resource,
   bannerData,
   headerFooterData,
+  preview,
 }) {
   if (!resource) return null
 
@@ -52,6 +53,23 @@ export default function ResourcePage({
         {/* todo: do all meta tags correctly, currently this fixes an error on news story */}
         <meta property="og:url" content="foo" />
       </Head>
+
+      {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>
+      )}
+
       <Breadcrumbs
         breadcrumbs={resource.breadcrumbs}
         entityPath={resource.entityPath}
@@ -105,9 +123,14 @@ export async function getStaticProps(context: GetStaticPropsContext) {
     const expandedContext = getExpandedStaticPropsContext(context)
 
     // Now that we have a path, translate for resource endpoint
-    const pathInfo = await drupalClient.translatePath(
-      expandedContext.drupalPath
-    )
+    let pathInfo
+    // need to use translatePathFromContext for previewing unpublished revisions
+    if (expandedContext.preview) {
+      pathInfo = await drupalClient.translatePathFromContext(expandedContext)
+    } else {
+      pathInfo = await drupalClient.translatePath(expandedContext.drupalPath)
+    }
+
     if (!pathInfo) {
       return {
         notFound: true,
@@ -130,7 +153,7 @@ export async function getStaticProps(context: GetStaticPropsContext) {
 
     // If we're not in preview mode and the resource is not published,
     // Return page not found.
-    if (!context.preview && resource?.published === false) {
+    if (!expandedContext.preview && !resource?.published) {
       return {
         notFound: true,
       }
@@ -145,6 +168,7 @@ export async function getStaticProps(context: GetStaticPropsContext) {
 
     return {
       props: {
+        preview: expandedContext.preview || false,
         resource,
         bannerData,
         headerFooterData,

src/pages/api/exit-preview.tsx

@@ -1,6 +1,6 @@
 import { NextApiResponse } from 'next'
 
-export default async function exit(_, response: NextApiResponse) {
+export default function exit(_, response: NextApiResponse) {
   response.clearPreviewData()
   response.writeHead(307, { Location: '/' })
   response.end()

src/pages/api/preview.tsx

@@ -1,3 +1,9 @@
-import { DrupalPreview } from 'next-drupal'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { drupalClient } from '@/lib/drupal/drupalClient'
 
-export default DrupalPreview()
+export default async function handler(
+  request: NextApiRequest,
+  response: NextApiResponse
+) {
+  await drupalClient.preview(request, response)
+}