feat(google-docs): add cell-level mapping review to document outline [INTEG-3572]

apps/google-docs/package.json

@@ -6,6 +6,7 @@
     "@ai-sdk/openai": "^2.0.56",
     "@contentful/app-sdk": "^4.51.3",
     "@contentful/f36-components": "^5.6.0",
+    "@contentful/f36-icons": "^6.7.1",
     "@contentful/f36-tokens": "^5.1.0",
     "@contentful/field-editor-json": "^3.3.38",
     "@contentful/node-apps-toolkit": "^3.13.0",

apps/google-docs/src/fixtures/googleDocsReview/loadFixtureReviewPayload.ts

@@ -0,0 +1,33 @@
+import type { MappingReviewSuspendPayload } from '@types';
+
+type FixtureReviewPayloadModule =
+  | MappingReviewSuspendPayload
+  | {
+      default: MappingReviewSuspendPayload;
+    };
+
+type FixtureReviewPayloadImporter = () => Promise<FixtureReviewPayloadModule>;
+
+export async function resolveFixtureReviewPayload(
+  importers: Record<string, FixtureReviewPayloadImporter>
+): Promise<MappingReviewSuspendPayload | null> {
+  const importer = Object.values(importers)[0];
+
+  if (!importer) {
+    return null;
+  }
+
+  const module = await importer();
+
+  if ('default' in module) {
+    return module.default;
+  }
+
+  return module;
+}
+
+export async function loadFixtureReviewPayload(): Promise<MappingReviewSuspendPayload | null> {
+  return resolveFixtureReviewPayload(
+    import.meta.glob<FixtureReviewPayloadModule>('./fixture.json')
+  );
+}

apps/google-docs/src/locations/Page/Page.tsx

@@ -1,25 +1,47 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { PageAppSDK } from '@contentful/app-sdk';
 import { useSDK } from '@contentful/react-apps-toolkit';
-import { Layout } from '@contentful/f36-components';
+import { Button, Layout } from '@contentful/f36-components';
 import {
   ModalOrchestrator,
   ModalOrchestratorHandle,
 } from './components/mainpage/ModalOrchestrator';
 import { MainPageView } from './components/mainpage/MainPageView';
-import { PreviewPageView } from './components/mainpage/PreviewPageView';
-import { MappingReviewSuspendPayload, PreviewPayload } from '@types';
-import { isMappingReviewSuspendPayload } from '../../utils/utils';
+import { MappingReviewPage } from './components/mainpage/MappingReviewPage';
+import { loadFixtureReviewPayload } from '../../fixtures/googleDocsReview/loadFixtureReviewPayload';
+import type { MappingReviewSuspendPayload, PreviewPayload } from '@types';
 
 const Page = () => {
   const sdk = useSDK<PageAppSDK>();
   const modalOrchestratorRef = useRef<ModalOrchestratorHandle>(null);
   const [oauthToken, setOauthToken] = useState<string>('');
   const [isOAuthConnected, setIsOAuthConnected] = useState(false);
   const [isOAuthLoading, setIsOAuthLoading] = useState(true);
-  const [previewPayload, setPreviewPayload] = useState<
-    PreviewPayload | MappingReviewSuspendPayload | null
-  >(null);
+  const [previewPayload, setPreviewPayload] = useState<PreviewPayload | null>(null);
+  const [mappingReviewPayload, setMappingReviewPayload] =
+    useState<MappingReviewSuspendPayload | null>(null);
+  const [fixtureReviewPayload, setFixtureReviewPayload] =
+    useState<MappingReviewSuspendPayload | null>(null);
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    void loadFixtureReviewPayload()
+      .then((payload) => {
+        if (!isCancelled) {
+          setFixtureReviewPayload(payload);
+        }
+      })
+      .catch(() => {
+        if (!isCancelled) {
+          setFixtureReviewPayload(null);
+        }
+      });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, []);
 
   const handleOauthTokenChange = (token: string) => {
     setOauthToken(token);
@@ -42,51 +64,42 @@ const Page = () => {
   };
 
   const handleMappingReviewReady = (payload: MappingReviewSuspendPayload) => {
-    setPreviewPayload(payload);
+    setMappingReviewPayload(payload);
   };
 
   const handleReturnToMainPage = () => {
-    modalOrchestratorRef.current?.resetFlowState();
     setPreviewPayload(null);
+    setMappingReviewPayload(null);
   };
 
-  const handleResumeMappingReview = async () => {
-    if (!previewPayload || !isMappingReviewSuspendPayload(previewPayload)) {
-      return;
-    }
-
-    try {
-      await modalOrchestratorRef.current?.resumeMappingReview(previewPayload);
-    } catch (error) {
-      console.error('Failed to resume mapping review:', error);
-      sdk.notifier.error('Unable to resume preview. Please try again.');
-    }
-  };
-
-  console.log('previewPayload', previewPayload);
+  const activePreviewPayload = mappingReviewPayload;
 
   return (
     <>
       <Layout withBoxShadow={true} offsetTop={10}>
-        {previewPayload ? (
-          <PreviewPageView
-            payload={previewPayload}
-            oauthToken={oauthToken}
-            onLeavePreview={handleReturnToMainPage}
-            onResumeMappingReview={handleResumeMappingReview}
+        {activePreviewPayload ? (
+          <MappingReviewPage
+            payload={activePreviewPayload}
+            onLeaveReview={handleReturnToMainPage}
           />
         ) : (
-          <MainPageView
-            oauthToken={oauthToken}
-            isOAuthConnected={isOAuthConnected}
-            isOAuthLoading={isOAuthLoading}
-            onOAuthConnectedChange={handleOAuthConnectedChange}
-            onOauthTokenChange={handleOauthTokenChange}
-            onLoadingStateChange={handleOAuthLoadingStateChange}
-            onSelectFile={handleSelectFile}
-            onUseFixturePreview={handleUseFixturePreview}
-            sdk={sdk}
-          />
+          <>
+            {fixtureReviewPayload ? (
+              <Button onClick={() => setMappingReviewPayload(fixtureReviewPayload)}>
+                Mock from fixture
+              </Button>
+            ) : null}
+            <MainPageView
+              oauthToken={oauthToken}
+              isOAuthConnected={isOAuthConnected}
+              isOAuthLoading={isOAuthLoading}
+              onOAuthConnectedChange={handleOAuthConnectedChange}
+              onOauthTokenChange={handleOauthTokenChange}
+              onLoadingStateChange={handleOAuthLoadingStateChange}
+              onSelectFile={handleSelectFile}
+              sdk={sdk}
+            />
+          </>
         )}
       </Layout>