🎨 Fix presentation tool #3755 (#3811)

* 🎨 presentation tool

* 🎨 presentation tool

* 🎨 cleanup

* 🎨 frame ancestor for dev

Author: BorghildSelle

web/app/[locale]/(pages)/[...slug]/page.tsx

@@ -1,6 +1,8 @@
 import { magazineSlug, newsSlug } from '@energyvision/shared/satelliteConfig'
+import { stegaClean } from '@sanity/client/stega'
 import type { Metadata } from 'next'
 import dynamic from 'next/dynamic'
+import { cookies, draftMode } from 'next/headers'
 import { notFound } from 'next/navigation'
 import { setRequestLocale } from 'next-intl/server'
 import { getValidLanguagesLocales } from '@/languageConfig'
@@ -20,7 +22,7 @@ import Header from '@/sections/Header/Header'
 
 type Props = {
   params: Promise<{ slug: string[]; locale: string }>
-  searchParams: Promise<{ [key: string]: string[] | undefined }>
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
 }
 const MagazinePage = dynamic(() => import('@/templates/magazine/MagazinePage'))
 const EventPage = dynamic(() => import('@/templates/event/Event'))
@@ -74,11 +76,14 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
 export default async function Page({ params }: Props) {
   const { slug, locale } = await params
+  /*   const isInPresentationToolContext =
+    (await cookies()).get('preview-fetch-dest')?.value === 'iframe' */
+  const { isEnabled: isDraftMode } = await draftMode()
 
   if (!getValidLanguagesLocales().includes(locale)) notFound()
 
   setRequestLocale(locale)
-
+  let pageContent = null
   const [siteMenuResult, pageResults] = await Promise.all([
     routeSanityFetch({
       query: Flags.HAS_FANCY_MENU ? globalMenuQuery : simpleMenuQuery,
@@ -91,8 +96,15 @@ export default async function Page({ params }: Props) {
       locale,
     }),
   ])
+  pageContent = pageResults
+
+  if (isDraftMode) {
+    //Later when inside presentation tool, cant clean as it doesnt work with visual editing, must filter props together with visual editing,
+    console.log('Clean page data for stega')
+    pageContent = stegaClean(pageResults)
+  }
 
-  const { headerData, pageData } = pageResults
+  const { headerData, pageData } = pageContent
   const { data: siteMenuData } = siteMenuResult || {}
   if (Object.keys(pageData).length === 0) notFound()
 

web/app/[locale]/ConditionalVisualEditing.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import { useIsPresentationTool } from 'next-sanity/hooks'
+
+const VisualEditing = dynamic(() =>
+  import('next-sanity/visual-editing').then(mod => mod.VisualEditing),
+)
+
+export function ConditionalVisualEditing() {
+  /** The webpage is inside an iframe, meaning its in the studio presentation tool tab and visual editing should be enabled */
+  const isInsidePresentationTool = useIsPresentationTool()
+  return isInsidePresentationTool ? <VisualEditing /> : null
+}

web/app/[locale]/layout.tsx

@@ -9,6 +9,7 @@ import { hasLocale, NextIntlClientProvider } from 'next-intl'
 import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { PageProvider } from '@/contexts/pageContext'
 import { getLocaleFromIso, getNameFromIso } from '@/sanity/helpers/localization'
+import { dataset } from '@/sanity/lib/api'
 import { routeSanityFetch, SanityLive } from '@/sanity/lib/live'
 import { footerAndErrorImageQuery } from '@/sanity/queries/footer'
 import Footer from '@/sections/Footer/Footer'
@@ -25,6 +26,10 @@ const equinor = localFont({
   ],
 })
 
+const DraftModeToolbar = dynamic(
+  () => import('@/sections/DraftMode/DraftModeToolbar'),
+)
+
 type Params = Promise<{ locale: string }>
 
 /* export const metadata: Metadata = {
@@ -63,23 +68,7 @@ export default async function LocaleLayout({
     })
 
   const { errorImage, ...footerData } = footerAndErrorImageData || {}
-
-  async function loadVisualEditing() {
-    if ((await draftMode()).isEnabled) {
-      const DraftModeToolbar = dynamic(
-        () => import('@/sections/DraftMode/DraftModeToolbar'),
-      )
-      const VisualEditing = dynamic(() =>
-        import('next-sanity/visual-editing').then(mod => mod.VisualEditing),
-      )
-      return (
-        <>
-          <DraftModeToolbar />
-          <VisualEditing />
-        </>
-      )
-    }
-  }
+  const isPreview = (await draftMode()).isEnabled
 
   return (
     <html lang={locale} className={`${equinor.className} `}>
@@ -91,15 +80,21 @@ export default async function LocaleLayout({
           {t('skipToContent') ?? 'Skip to main content'}
         </NextLink>
         <SanityLive />
-        {loadVisualEditing()}
+        {isPreview && (
+          <>
+            <DraftModeToolbar />
+            {/*          Must first filter all conditional rendering props in the page content, otherwise the visual editing will not work correctly inside presentation tool. This is a big job and will be done later. For now, we will not render the visual editing inside the presentation tool.   
+            <ConditionalVisualEditing /> */}
+          </>
+        )}
         <NextIntlClientProvider>
           <PageProvider initialErrorImage={errorImage}>{children}</PageProvider>
           <Footer {...footerData} />
           <GoToTopButton />
         </NextIntlClientProvider>
       </body>
       {/** TODO look into scripts */}
-      {
+      {!(isPreview || dataset === 'global-development') && (
         <Script
           src='https://consent.cookiebot.com/uc.js'
           id='Cookiebot'
@@ -108,7 +103,7 @@ export default async function LocaleLayout({
           data-blockingmode='auto'
           data-culture={locale === 'nb-NO' ? 'nb' : getLocaleFromIso(locale)}
         />
-      }
+      )}
       <GoogleTagManagerHead />
       <SiteImprove />
     </html>

web/app/[locale]/page.tsx

@@ -1,4 +1,6 @@
+import { stegaClean } from '@sanity/client/stega'
 import type { Metadata } from 'next'
+import { draftMode } from 'next/headers'
 import { notFound } from 'next/navigation'
 import { setRequestLocale } from 'next-intl/server'
 import { OrganizationJsonLd } from 'next-seo'
@@ -16,13 +18,9 @@ import { FriendlyCaptchaSdkWrapper } from './FriendlyCaptchaWrapper'
 
 type Props = {
   params: Promise<{ slug: string; locale: string }>
-  searchParams: Promise<{ [key: string]: string[] | undefined }>
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
 }
 
-/*export async function generateStaticParams() {
-  return languages.map(language => ({ locale: language.iso }))
-}*/
-
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { locale } = await params
   const { data: metaData }: { data: any } = await routeSanityFetch({
@@ -39,11 +37,14 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
 export default async function Home({ params }: Props) {
   const { locale, slug } = await params
+  //const isInPresentationToolContext =
+  //  (await cookies()).get('preview-fetch-dest')?.value === 'iframe'
   // Enable static rendering
   setRequestLocale(locale)
+  const { isEnabled: isDraftMode } = await draftMode()
 
   if (!languages.map(it => it.iso).includes(locale)) notFound()
-
+  let pageContent = null
   const [siteMenuResult, homePageData] = await Promise.all([
     routeSanityFetch({
       query: Flags.HAS_FANCY_MENU ? globalMenuQuery : simpleMenuQuery,
@@ -57,8 +58,13 @@ export default async function Home({ params }: Props) {
       tags: ['homePage'],
     }),
   ])
+  pageContent = homePageData
+  if (isDraftMode) {
+    //Later when inside presentation tool, cant clean as it doesnt work with visual editing, must filter props together with visual editing,
+    pageContent = stegaClean(homePageData)
+  }
 
-  const { headerData, pageData } = homePageData
+  const { headerData, pageData } = pageContent
   const { data: siteMenuData } = siteMenuResult || {}
 
   if (!pageData) notFound()

web/app/api/draft/route.ts

@@ -4,25 +4,42 @@ import { redirect } from 'next/navigation'
 import type { NextRequest } from 'next/server'
 import { client } from '@/sanity/lib/client'
 
-export async function GET(request: NextRequest, context: any) {
+export async function GET(request: NextRequest, _context: any) {
+  //const secFetchDest = request.headers.get('sec-fetch-dest')
+  //const referer = request.headers.get('referer')
   const { isValid, redirectTo = '/' } = await validatePreviewUrl(
     client,
     request.url,
   )
 
+  if (!isValid) {
+    return new Response('Missing or invalid token', { status: 401 })
+  }
+
   let previewUrl = redirectTo
   if (redirectTo?.includes('/api/draft')) {
     const urlParts = redirectTo.split('/')
     previewUrl = `/${urlParts.at(-2)}/${urlParts.at(-1)}`
   }
 
-  if (!isValid) {
-    return new Response('Missing or invalid token', { status: 401 })
-  }
-
   const draft = await draftMode()
   draft.enable()
 
+  /*   
+  Must stega filter page content props used for conditional rendering in the presentation tool, otherwise the page will not render correctly in the presentation tool.
+  Something to do later as this will be a big job.
+  setting a cookie for sec fetch dest to identify the request as coming from the presentation tool and the web is previewed inside it. Works SSR. 
+  const cookieStore = await cookies()
+  if (secFetchDest) {
+    cookieStore.set('preview-fetch-dest', secFetchDest, {
+      path: '/',
+      httpOnly: true,
+      sameSite: 'lax',
+      maxAge: 60,
+    })
+  } else {
+    cookieStore.delete('preview-fetch-dest')
+  } */
+
   redirect(previewUrl)
-  //redirect(`/preview/${id}`)
 }

web/sanity/lib/client.ts

@@ -10,8 +10,9 @@ const sanityConfig: ClientConfig = {
   projectId,
   dataset,
   apiVersion,
-  perspective: dataset === 'global-development' ? 'drafts' : 'published',
-  useCdn: dataset !== 'global-development',
+  //handled by definelive?
+  //perspective: dataset === 'global-development' ? 'drafts' : 'published',
+  useCdn: true,
   ignoreBrowserTokenWarning: dataset === 'global-development',
   requestTagPrefix: 'website', // to track usage on web in sanity console
   stega: {

web/sanity/lib/live.ts

@@ -5,9 +5,7 @@ import type {
   QueryParams,
 } from 'next-sanity'
 import { type DefinedFetchType, defineLive } from 'next-sanity/live'
-//import { dataset } from '@/languageConfig'
 import { client } from './client'
-//import { tempSanityFetch } from './tempSanityFetch'
 import { token } from './token'
 
 export const { sanityFetch, SanityLive } = defineLive({
@@ -56,16 +54,5 @@ export type DefinedSanityFetchType = <
 }>
 
 export const routeSanityFetch: DefinedFetchType = async query => {
-  //const { tags, ...restQuery } = query
-
-  /*if (dataset === 'global-development') {
-    //Dont use tags, use automated next tags
-    //sanityFetch automatically sets fetch.next.tags for you using opaque tags generated by our backend, prefixed with sanity
-    return sanityFetch(restQuery)
-  }*/
   return sanityFetch(query)
-  /* tempSanityFetch uses cache components which is not fully supported with next-intl
-   https://aurorascharff.no/posts/implementing-nextjs-16-use-cache-with-next-intl-internationalization/
-  return tempSanityFetch(query)
-  */
 }

web/sections/DraftMode/DraftModeToolbar.tsx

@@ -1,16 +1,15 @@
 'use client'
-import { useIsPresentationTool } from 'next-sanity/hooks'
-import { useMemo, useTransition } from 'react'
+import { useEffect, useState, useTransition } from 'react'
 import { disableDraftMode } from '@/app/_actions/disableDraftMode'
 import { commonButtonStyling } from '@/core/Button'
 
 export default function DraftModeToolbar() {
   const [pending, startTransition] = useTransition()
-  const isPresentationTool = useIsPresentationTool()
+  const [isInsideTool, setIsInsideTool] = useState(false)
 
-  const isInsideTool = useMemo(() => {
-    return isPresentationTool
-  }, [isPresentationTool])
+  useEffect(() => {
+    setIsInsideTool(window.self !== window.top)
+  }, [])
   // Only show the disable draft mode button when outside of Presentation Tool
 
   const disable = () => startTransition(() => disableDraftMode())

web/securityHeaders.ts

@@ -9,7 +9,7 @@ import { dataset } from './languageConfig'
 
 const isProduction = process.env.NODE_ENV === 'production'
 
-const envs = ['preprod', 'prod', 'preprodv2']
+const envs = ['dev', 'preprod', 'prod', 'preprodv2']
 const localUrl =
   process.env.NODE_ENV === 'development' ? 'http://localhost:3333' : ''
 const globalUrl = dataset === 'global' ? 'https://equinor.sanity.studio' : ''
@@ -19,15 +19,11 @@ const studioUrls = envs.map(
   env =>
     `https://studio-${dataset}${env === 'preprodv2' ? `-upgrade` : ''}-equinor-web-sites-${env}.c2.radix.equinor.com`,
 )
-const studioV3Urls = [
-  'http://studiov3-global-development-equinor-web-sites-dev.c2.radix.equinor.com',
-  'http://studiov3-global-development-upgrade-equinor-web-sites-dev.c2.radix.equinor.com',
-  'https://studio-global-development-upgrade-equinor-web-sites-dev.c2.radix.equinor.com/',
-]
+const localStudioUrl = ['http://localhost:3333']
 const xFrameUrls = [
   localUrl,
   ...studioUrls,
-  ...studioV3Urls,
+  ...localStudioUrl,
   globalUrl,
   secretUrl,
 ]