From 34cf4a20ecb1c5d0fd282997a63595af5d4d849f Mon Sep 17 00:00:00 2001 From: Raphaelle Cantin <110461050+rcantin-w@users.noreply.github.com> Date: Thu, 11 Apr 2024 11:25:36 +0100 Subject: [PATCH] Revert "Trial Prismic's next preview tool, part II" --- common/koa-middleware/withCachedValues.ts | 4 +++ .../withPrismicPreviewStatus.ts | 27 +++++++++++++++++++ common/views/components/CivicUK/index.tsx | 2 +- common/views/pages/_app.tsx | 6 ++--- content/webapp/app.ts | 10 ++++++- 5 files changed, 44 insertions(+), 5 deletions(-) create mode 100644 common/koa-middleware/withPrismicPreviewStatus.ts diff --git a/common/koa-middleware/withCachedValues.ts b/common/koa-middleware/withCachedValues.ts index e6761ef44d..a515f3e88e 100644 --- a/common/koa-middleware/withCachedValues.ts +++ b/common/koa-middleware/withCachedValues.ts @@ -1,8 +1,12 @@ +import compose from 'koa-compose'; +import { withPrismicPreviewStatus } from './withPrismicPreviewStatus'; import { IncomingMessage, ServerResponse } from 'http'; import Router from 'koa-router'; import { NextServer } from 'next/dist/server/next'; import { parse, UrlWithParsedQuery } from 'url'; // eslint-disable-line n/no-deprecated-api +export const withCachedValues = compose([withPrismicPreviewStatus]); + export async function route( path: string, page: string, diff --git a/common/koa-middleware/withPrismicPreviewStatus.ts b/common/koa-middleware/withPrismicPreviewStatus.ts new file mode 100644 index 0000000000..b726cbfb41 --- /dev/null +++ b/common/koa-middleware/withPrismicPreviewStatus.ts @@ -0,0 +1,27 @@ +import Koa from 'koa'; + +export function withPrismicPreviewStatus( + ctx: Koa.DefaultContext, + next: Koa.Next + /* eslint-disable @typescript-eslint/no-explicit-any */ +): Promise<any> { + /* eslint-enable @typescript-eslint/no-explicit-any */ + + // for previews on localhost we use /preview to determine whether the 'isPreview' cookie should be set + // this kinda works for live too, but not for shared preview links, as they never hit /preview + // we therefore look for the subdomain .preview to determine if it's a preview + const previewCookieName = 'isPreview'; + const isPreviewDomain = Boolean(ctx.request.host.startsWith('preview.')); + const previewCookieMatch = ctx.headers.cookie + ? ctx.headers.cookie.match(`(^|;) ?${previewCookieName}=([^;]*)(;|$)`) + : undefined; + + const previewCookie = previewCookieMatch ? previewCookieMatch[2] : undefined; + + if (isPreviewDomain && !previewCookie) { + ctx.cookies.set('isPreview', 'true', { + httpOnly: false, + }); + } + return next(); +} diff --git a/common/views/components/CivicUK/index.tsx b/common/views/components/CivicUK/index.tsx index 21b927a21a..63128b94f0 100644 --- a/common/views/components/CivicUK/index.tsx +++ b/common/views/components/CivicUK/index.tsx @@ -41,7 +41,7 @@ const necessaryCookies = () => { const wcCookies = Object.values(cookies).map(c => c); // Allows Prismic previews - const prismicPreview = ['io.prismic.preview']; + const prismicPreview = ['io.prismic.preview', 'isPreview']; // See @weco/toggles/webapp/toggles for details on each const featureFlags = ['toggle_*']; diff --git a/common/views/pages/_app.tsx b/common/views/pages/_app.tsx index 5b80cd9efa..7c62ed8c03 100644 --- a/common/views/pages/_app.tsx +++ b/common/views/pages/_app.tsx @@ -2,7 +2,6 @@ import { NextPage } from 'next'; import { AppProps } from 'next/app'; import React, { useEffect, FunctionComponent, ReactElement } from 'react'; import { ThemeProvider } from 'styled-components'; -import { PrismicPreview } from '@prismicio/next'; import theme, { GlobalStyle } from '@weco/common/views/themes/default'; import LoadingIndicator from '@weco/common/views/components/LoadingIndicator/LoadingIndicator'; import { AppContextProvider } from '@weco/common/views/components/AppContext/AppContext'; @@ -21,6 +20,7 @@ import { ServerDataContext } from '@weco/common/server-data/Context'; import UserProvider from '@weco/common/views/components/UserProvider/UserProvider'; import { ApmContextProvider } from '@weco/common/views/components/ApmContext/ApmContext'; import { AppErrorProps } from '@weco/common/services/app'; +import usePrismicPreview from '@weco/common/services/app/usePrismicPreview'; import useMaintainPageHeight from '@weco/common/services/app/useMaintainPageHeight'; import { GaDimensions } from '@weco/common/services/app/google-analytics'; import { deserialiseProps } from '@weco/common/utils/json'; @@ -126,6 +126,8 @@ const WecoApp: FunctionComponent<WecoAppProps> = ({ // or when requested client-side through next/link or next/router // i.e. everything that we consider to be a page view + usePrismicPreview(() => Boolean(document.cookie.match('isPreview=true'))); + const getLayout = Component.getLayout || (page => <>{page}</>); return ( @@ -155,8 +157,6 @@ const WecoApp: FunctionComponent<WecoAppProps> = ({ title={pageProps.err.message} /> )} - - <PrismicPreview repositoryName="wellcomecollection" /> </ThemeProvider> </SearchContextProvider> </AppContextProvider> diff --git a/content/webapp/app.ts b/content/webapp/app.ts index dabf12a674..ca7da7fff1 100644 --- a/content/webapp/app.ts +++ b/content/webapp/app.ts @@ -6,7 +6,10 @@ import Router from 'koa-router'; import next from 'next'; import { apmErrorMiddleware } from '@weco/common/services/apm/errorMiddleware'; import { init as initServerData } from '@weco/common/server-data'; -import { handleAllRoute } from '@weco/common/koa-middleware/withCachedValues'; +import { + withCachedValues, + handleAllRoute, +} from '@weco/common/koa-middleware/withCachedValues'; import linkResolver from '@weco/common/services/prismic/link-resolver'; import { createClient as createPrismicClient } from '@weco/common/services/prismic/fetch'; import * as prismic from '@prismicio/client'; @@ -41,6 +44,7 @@ const appPromise = nextApp }); koaApp.use(apmErrorMiddleware); + koaApp.use(withCachedValues); // Add a naive healthcheck endpoint for the load balancer router.get('/management/healthcheck', async ctx => { @@ -68,6 +72,10 @@ const appPromise = nextApp defaultURL: '/', }); + ctx.cookies.set('isPreview', 'true', { + httpOnly: false, + }); + ctx.redirect(url); });