fix: removing section based document rendering

Author: harikakondur

apps/google-docs/package-lock.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/package.json

@@ -1,26 +1,25 @@
 import { 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 fixtureReviewPayload from '../../fixtures/googleDocsReview/fixture.json';
+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 handleOauthTokenChange = (token: string) => {
     setOauthToken(token);
@@ -43,50 +42,53 @@ const Page = () => {
   };
 
   const handleMappingReviewReady = (payload: MappingReviewSuspendPayload) => {
-    setPreviewPayload(payload);
+    setMappingReviewPayload(payload);
   };
 
   const handleReturnToMainPage = () => {
     setPreviewPayload(null);
+    setMappingReviewPayload(null);
   };
 
   const handleResumeMappingReview = async () => {
-    if (!previewPayload || !isMappingReviewSuspendPayload(previewPayload)) {
+    if (!mappingReviewPayload) {
       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.');
-    }
+    await modalOrchestratorRef.current?.resumeMappingReview(mappingReviewPayload);
   };
 
+  const activePreviewPayload = mappingReviewPayload ?? previewPayload;
+
   return (
     <>
       <Layout withBoxShadow={true} offsetTop={10}>
-        {previewPayload ? (
-          <PreviewPageView
-            payload={previewPayload}
+        {activePreviewPayload ? (
+          <MappingReviewPage
+            payload={activePreviewPayload}
             oauthToken={oauthToken}
-            onLeavePreview={handleReturnToMainPage}
+            onLeaveReview={handleReturnToMainPage}
             onResumeMappingReview={handleResumeMappingReview}
           />
         ) : (
-          <MainPageView
-            oauthToken={oauthToken}
-            isOAuthConnected={isOAuthConnected}
-            isOAuthLoading={isOAuthLoading}
-            onOAuthConnectedChange={handleOAuthConnectedChange}
-            onOauthTokenChange={handleOauthTokenChange}
-            onLoadingStateChange={handleOAuthLoadingStateChange}
-            onSelectFile={handleSelectFile}
-            onUseFixturePreview={() =>
-              setPreviewPayload(fixtureReviewPayload as MappingReviewSuspendPayload)
-            }
-            sdk={sdk}
-          />
+          <>
+            <Button
+              onClick={() =>
+                setMappingReviewPayload(fixtureReviewPayload as MappingReviewSuspendPayload)
+              }>
+              Mock from fixture
+            </Button>
+            <MainPageView
+              oauthToken={oauthToken}
+              isOAuthConnected={isOAuthConnected}
+              isOAuthLoading={isOAuthLoading}
+              onOAuthConnectedChange={handleOAuthConnectedChange}
+              onOauthTokenChange={handleOauthTokenChange}
+              onLoadingStateChange={handleOAuthLoadingStateChange}
+              onSelectFile={handleSelectFile}
+              sdk={sdk}
+            />
+          </>
         )}
       </Layout>
 

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

@@ -5,7 +5,6 @@ import { OAuthConnector } from './OAuthConnector';
 import { createEntriesFromPreviewPayload } from '../../../../services/entryService';
 import { creationPayloadMock } from '../../../../mocks/previewPayloadSample';
 import { PageAppSDK } from '@contentful/app-sdk';
-
 const enableMockEntryCreation = import.meta.env.VITE_ENABLE_MOCK_ENTRY_CREATION === 'true';
 
 interface MainPageViewProps {
@@ -16,7 +15,6 @@ interface MainPageViewProps {
   onOauthTokenChange: (token: string) => void;
   onLoadingStateChange: (isLoading: boolean) => void;
   onSelectFile: () => void;
-  onUseFixturePreview: () => void;
   sdk: PageAppSDK;
 }
 
@@ -28,7 +26,6 @@ export const MainPageView = ({
   onOauthTokenChange,
   onLoadingStateChange,
   onSelectFile,
-  onUseFixturePreview,
   sdk,
 }: MainPageViewProps) => {
   return (
@@ -75,9 +72,7 @@ export const MainPageView = ({
                 endIcon={<ArrowRightIcon />}>
                 Select your file
               </Button>
-              <Button variant="secondary" onClick={onUseFixturePreview}>
-                Mock from fixture
-              </Button>
+
               {enableMockEntryCreation ? (
                 <Button
                   variant="secondary"

apps/google-docs/src/locations/Page/components/mainpage/MainPageView.tsx

@@ -6,26 +6,26 @@ import { ConfirmCancelModal } from '../modals/ConfirmCancelModal';
 import { DocumentOutline } from '../review/DocumentOutline';
 import { isMappingReviewSuspendPayload } from '../../../../utils/utils';
 
-interface PreviewPageViewProps {
-  payload: PreviewPayload | MappingReviewSuspendPayload;
+interface MappingReviewPageProps {
+  payload: MappingReviewSuspendPayload | PreviewPayload;
   oauthToken: string;
-  onLeavePreview: () => void;
+  onLeaveReview: () => void;
   onResumeMappingReview?: () => Promise<void>;
 }
 
-function hasEntryBlockGraph(
-  payload: PreviewPayload | MappingReviewSuspendPayload
-): payload is
-  | MappingReviewSuspendPayload
-  | (PreviewPayload & { entryBlockGraph: NonNullable<PreviewPayload['entryBlockGraph']> }) {
-  return Boolean(payload.entryBlockGraph);
-}
-
-export const PreviewPageView = ({ payload, onLeavePreview }: PreviewPageViewProps) => {
+export const MappingReviewPage = ({
+  payload,
+  onLeaveReview: onLeavePreview,
+}: MappingReviewPageProps) => {
   const [isConfirmCancelModalOpen, setIsConfirmCancelModalOpen] = useState(false);
-  const isMappingReviewMode = isMappingReviewSuspendPayload(payload);
 
-  const title = `Create from document "${payload.normalizedDocument.title ?? 'Selected document'}"`;
+  const isMappingReview = isMappingReviewSuspendPayload(payload);
+  const documentTitle = isMappingReview
+    ? payload.documentTitle ?? payload.normalizedDocument.title
+    : payload.normalizedDocument.title;
+  const title = `${isMappingReview ? 'Review' : 'Create from'} document "${
+    documentTitle ?? 'Selected document'
+  }"`;
 
   return (
     <>
@@ -43,13 +43,11 @@ export const PreviewPageView = ({ payload, onLeavePreview }: PreviewPageViewProp
       </Layout.Header>
       <Splitter marginTop="spacingS" />
       <Layout.Body>
-        {/* TODO: Restore OverviewSection once it is compatible with EntryBlockGraph-based preview payloads. */}
-        {hasEntryBlockGraph(payload) ? (
-          <DocumentOutline payload={payload} showChrome={false} />
+        {isMappingReview ? (
+          <DocumentOutline payload={payload} />
         ) : (
           <Paragraph marginBottom="none">
-            Preview overview is temporarily unavailable until the preview payload is compatible with
-            EntryBlockGraph.
+            Standard preview is not available in this context.
           </Paragraph>
         )}
       </Layout.Body>

…/components/mainpage/PreviewPageView.tsx …omponents/mainpage/MappingReviewPage.tsxapps/google-docs/src/locations/Page/components/mainpage/PreviewPageView.tsx renamed to apps/google-docs/src/locations/Page/components/mainpage/MappingReviewPage.tsx apps/google-docs/src/locations/Page/components/mainpage/PreviewPageView.tsx renamed to apps/google-docs/src/locations/Page/components/mainpage/MappingReviewPage.tsx

@@ -12,9 +12,9 @@ import { SelectTabsModal } from '../modals/step_3/SelectTabsModal';
 import {
   DocumentTabProps,
   MappingReviewSuspendPayload,
+  PreviewPayload,
   ResumePayload,
   TabsImagesSuspendPayload,
-  PreviewPayload,
   RunStatus,
   WorkflowRunResult,
 } from '@types';
@@ -24,8 +24,8 @@ import { useWorkflowAgent } from '@hooks/useWorkflowAgent';
 
 export interface ModalOrchestratorHandle {
   startFlow: () => void;
-  /** Clears in-progress flow state without calling `onResetToMain` (parent clears preview separately). */
-  resetFlowState: () => void;
+  /** Clears in-progress flow state and returns the page to the main state. */
+  resetFlowFromPreviewCancel: () => void;
   resumeMappingReview: (payload: MappingReviewSuspendPayload) => Promise<void>;
 }
 
@@ -68,7 +68,7 @@ export const ModalOrchestrator = forwardRef<ModalOrchestratorHandle, ModalOrches
 
     useImperativeHandle(ref, () => ({
       startFlow: () => setIsUploadModalOpen(true),
-      resetFlowState: () => {
+      resetFlowFromPreviewCancel: () => {
         resetProgress();
         onResetToMain();
       },
@@ -173,7 +173,6 @@ export const ModalOrchestrator = forwardRef<ModalOrchestratorHandle, ModalOrches
       }
 
       onPreviewReady(workflowRun.googleDocPayload);
-      setFlowStep(null);
     };
 
     const continueWorkflow = async (resumePayloadOverrides?: Partial<ResumePayload>) => {