refactor: remove fixture-loader and related types, integrate DocumentOutline for mapping review

Author: harikakondur

apps/google-docs/src/fixtures/googleDocsReview/fixture-loader.ts

@@ -10,6 +10,7 @@ import { MainPageView } from './components/mainpage/MainPageView';
 import { PreviewPageView } from './components/mainpage/PreviewPageView';
 import { MappingReviewSuspendPayload, PreviewPayload } from '@types';
 import { isMappingReviewSuspendPayload } from '../../utils/utils';
+import fixtureReviewPayload from '../../fixtures/googleDocsReview/fixture.json';
 
 const Page = () => {
   const sdk = useSDK<PageAppSDK>();
@@ -38,8 +39,6 @@ const Page = () => {
   };
 
   const handlePreviewReady = (payload: PreviewPayload) => {
-    setIsMappingPrototypeVisible(false);
-    setMappingReviewPayload(null);
     setPreviewPayload(payload);
   };
 
@@ -48,8 +47,6 @@ const Page = () => {
   };
 
   const handleReturnToMainPage = () => {
-    setIsMappingPrototypeVisible(false);
-    setMappingReviewPayload(null);
     setPreviewPayload(null);
   };
 
@@ -66,8 +63,6 @@ const Page = () => {
     }
   };
 
-  console.log('previewPayload', previewPayload);
-
   return (
     <>
       <Layout withBoxShadow={true} offsetTop={10}>
@@ -87,7 +82,9 @@ const Page = () => {
             onOauthTokenChange={handleOauthTokenChange}
             onLoadingStateChange={handleOAuthLoadingStateChange}
             onSelectFile={handleSelectFile}
-            onUseFixturePreview={() => setIsMappingPrototypeVisible(true)}
+            onUseFixturePreview={() =>
+              setPreviewPayload(fixtureReviewPayload as MappingReviewSuspendPayload)
+            }
             sdk={sdk}
           />
         )}

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

@@ -1,14 +1,9 @@
-import { useEffect, useMemo, useState } from 'react';
-import { PageAppSDK } from '@contentful/app-sdk';
-import { Button, Flex, Heading, Layout, Note, Paragraph } from '@contentful/f36-components';
+import { useState } from 'react';
+import { Button, Flex, Heading, Layout, Paragraph } from '@contentful/f36-components';
+import type { MappingReviewSuspendPayload, PreviewPayload } from '@types';
 import Splitter from './Splitter';
-import { MappingReviewSuspendPayload, PreviewPayload } from '@types';
 import { ConfirmCancelModal } from '../modals/ConfirmCancelModal';
-import { loadGoogleDocsReviewData } from '../../../../fixtures/googleDocsReview';
-import { GoogleDocsMappingReviewScreen } from '../review-prototype/GoogleDocsMappingReviewScreen';
-import OverviewSection from '../overview/OverviewSection';
-import { useSDK } from '@contentful/react-apps-toolkit';
-import { PageAppSDK } from '@contentful/app-sdk';
+import { DocumentOutline } from '../review/DocumentOutline';
 import { isMappingReviewSuspendPayload } from '../../../../utils/utils';
 
 interface PreviewPageViewProps {
@@ -18,18 +13,19 @@ interface PreviewPageViewProps {
   onResumeMappingReview?: () => Promise<void>;
 }
 
-export const PreviewPageView = ({
-  payload,
-  oauthToken,
-  onLeavePreview,
-  onResumeMappingReview,
-}: PreviewPageViewProps) => {
-  const sdk = useSDK<PageAppSDK>();
+function hasEntryBlockGraph(
+  payload: PreviewPayload | MappingReviewSuspendPayload
+): payload is
+  | MappingReviewSuspendPayload
+  | (PreviewPayload & { entryBlockGraph: NonNullable<PreviewPayload['entryBlockGraph']> }) {
+  return Boolean(payload.entryBlockGraph);
+}
+
+export const PreviewPageView = ({ payload, onLeavePreview }: PreviewPageViewProps) => {
   const [isConfirmCancelModalOpen, setIsConfirmCancelModalOpen] = useState(false);
-  const mappingReviewPayload = isMappingReviewSuspendPayload(payload) ? payload : null;
-  const rawTitle = payload.normalizedDocument?.title;
-  const docTitle = typeof rawTitle === 'string' ? rawTitle : undefined;
-  const title = docTitle && docTitle.trim().length > 0 ? docTitle : 'Selected document';
+  const isMappingReviewMode = isMappingReviewSuspendPayload(payload);
+
+  const title = `Create from document "${payload.normalizedDocument.title ?? 'Selected document'}"`;
 
   return (
     <>
@@ -47,24 +43,19 @@ export const PreviewPageView = ({
       </Layout.Header>
       <Splitter marginTop="spacingS" />
       <Layout.Body>
-        {fixture ? <GoogleDocsMappingReviewScreen fixture={fixture} /> : null}
-        <Flex flexDirection="column" gap="spacing2Xl">
-          <OverviewSection
-            sdk={sdk}
-            payload={payload || fixture}
-            payload={payload}
-            oauthToken={oauthToken}
-            onReturnToMainPage={onLeavePreview}
-            onCreateSelected={mappingReviewPayload ? onResumeMappingReview : undefined}
-          />
-          <Heading as="h2" marginBottom="none">
-            Document outline
-          </Heading>
-        </Flex>
+        {/* TODO: Restore OverviewSection once it is compatible with EntryBlockGraph-based preview payloads. */}
+        {hasEntryBlockGraph(payload) ? (
+          <DocumentOutline payload={payload} showChrome={false} />
+        ) : (
+          <Paragraph marginBottom="none">
+            Preview overview is temporarily unavailable until the preview payload is compatible with
+            EntryBlockGraph.
+          </Paragraph>
+        )}
       </Layout.Body>
       <ConfirmCancelModal
         isOpen={isConfirmCancelModalOpen}
-        onConfirm={props.onCancel}
+        onConfirm={onLeavePreview}
         onCancel={() => setIsConfirmCancelModalOpen(false)}
       />
     </>

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

@@ -4,7 +4,6 @@ import { Box, Button, Flex, Heading, Note, Paragraph } from '@contentful/f36-com
 import type { MappingReviewSuspendPayload, PreviewPayload } from '@types';
 import {
   buildCheckboxEntryList,
-  buildCheckboxEntryListFromMappingReviewPayload,
   collectCheckboxEntryListRowIds,
   type ContentTypeDisplayInfoMap,
 } from '../../../../utils/checkboxEntryList';
@@ -16,13 +15,13 @@ import type { EntryProps } from 'contentful-management';
 import { SummaryModal } from '../modals/SummaryModal';
 import { isPreviewPayload } from '../../../../utils/utils';
 
-type CreateOverviewSectionProps = {
+type OverviewSectionProps = {
   sdk: PageAppSDK;
   payload: PreviewPayload | MappingReviewSuspendPayload;
   oauthToken: string;
   onReturnToMainPage: () => void;
   onCreateSelected?: () => Promise<void>;
-}
+};
 
 const OverviewSection = ({
   sdk,
@@ -66,11 +65,6 @@ const OverviewSection = ({
   }, [payload]);
 
   useEffect(() => {
-    if (isMappingReviewMode || !sdk) {
-      setContentTypeDisplayInfoMap(undefined);
-      return;
-    }
-
     const fetchContentTypesInfo = async () => {
       const contentTypeIds = [
         ...new Set(overviewPayload.entries.map((entry) => entry.contentTypeId)),
@@ -130,9 +124,7 @@ const OverviewSection = ({
 
   const handleSummaryDone = () => {
     setSummaryEntries(null);
-    if ('onReturnToMainPage' in props) {
-      props.onReturnToMainPage();
-    }
+    onReturnToMainPage();
   };
 
   return (
@@ -149,9 +141,8 @@ const OverviewSection = ({
               Overview
             </Heading>
             <Paragraph marginBottom="none">
-              {isMappingReviewMode
-                ? 'Review the entry structure produced for the mapping step. Entry creation continues after mapping review is complete.'
-                : 'Review your content and associated entries below. Select which entries you&apos;d like to create.'}
+              Review your content and associated entries below. Select which entries you&apos;d like
+              to create.
             </Paragraph>
           </Flex>
           <Button
@@ -165,9 +156,8 @@ const OverviewSection = ({
 
         {checkboxEntryRows.length === 0 ? (
           <Note variant="neutral">
-            {isMappingReviewMode
-              ? 'No entry mappings are available yet. Once the mapping review payload is generated, the planned entries will appear here.'
-              : 'No entries were found in this preview. When the document is parsed successfully, entries to create will appear here.'}
+            No entries were found in this preview. When the document is parsed successfully, entries
+            to create will appear here.
           </Note>
         ) : (
           <CheckboxEntryList
@@ -178,7 +168,7 @@ const OverviewSection = ({
         )}
       </Flex>
 
-      {!isMappingReviewMode && sdk ? (
+      {sdk ? (
         <SummaryModal
           isOpen={summaryEntries !== null}
           sdk={sdk}