fix(google-docs): create entries button resumes workflow [INTEG-3791] (#10884)

* refactor: resume workflow on create entries, update OverviewSection to use entryBlockGraph from mappingReviewSuspendPayload

* chore: remove console logs

* test: remove normalized doc from tests using PreviewPayload type

* chore: remove selectedEntryTempIds from createEntries() in entry service

* fix: rename PreviewPayload -> CompletedWorkflowPayload

* fix: rename entryList component to overviewEntryList

* fix: add error modal if create entries fails in review page

* refactor: move create entries logic to ReviewPage and pass runId as prop

* fix: rename previewPayload file -> createEntries and entryList->overviewEntryList

Author: harikakondur

apps/google-docs/src/hooks/useWorkflowAgent.ts

@@ -5,7 +5,7 @@ import {
   MappingReviewSuspendPayload,
   ResumePayload,
   TabsImagesSuspendPayload,
-  PreviewPayload,
+  CompletedWorkflowPayload,
   WorkflowRunResult,
   RunStatus,
 } from '@types';
@@ -16,7 +16,7 @@ import {
   resumeWorkflowRun,
   startAgentRun,
 } from '../services/agents-api';
-import { validatePayloadShape } from '../utils/previewPayload';
+import { validatePayloadShape } from '../utils/createEntries';
 
 interface UseWorkflowParams {
   sdk: PageAppSDK;
@@ -56,7 +56,7 @@ const getAgentPayload = (runData: AgentRunData): string | null => {
   return textPart?.text || null;
 };
 
-const previewPayloadFromCompletedRun = (runData: AgentRunData): PreviewPayload => {
+const previewPayloadFromCompletedRun = (runData: AgentRunData): CompletedWorkflowPayload => {
   const googleDocPayload = runData.metadata?.googleDocPayload;
   if (googleDocPayload == null) {
     throw new Error('Workflow completed but result payload was missing.');
@@ -84,12 +84,6 @@ const previewPayloadFromCompletedRun = (runData: AgentRunData): PreviewPayload =
       entries: [],
       assets: [],
       referenceGraph: {},
-      normalizedDocument: {
-        documentId,
-        title,
-        contentBlocks: [],
-        tables: [],
-      },
     };
   }
 

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

@@ -97,8 +97,11 @@ const Page = () => {
       <Layout withBoxShadow={true} offsetTop={10}>
         {mappingReviewState ? (
           <ReviewPage
+            sdk={sdk}
             payload={mappingReviewState.payload}
+            runId={mappingReviewState.runId}
             onCancelReview={handleCancelMappingReview}
+            onReturnToMainPage={handleReturnToMainPage}
           />
         ) : (
           <>

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

@@ -12,7 +12,7 @@ import { SelectTabsModal } from '../modals/step_3/SelectTabsModal';
 import {
   DocumentTabProps,
   MappingReviewSuspendPayload,
-  PreviewPayload,
+  CompletedWorkflowPayload,
   ResumePayload,
   TabsImagesSuspendPayload,
   RunStatus,

apps/google-docs/src/locations/Page/components/modals/SummaryModal.tsx

@@ -2,7 +2,7 @@ import { Button, EntryCard, Flex, Modal, Paragraph } from '@contentful/f36-compo
 import { PageAppSDK } from '@contentful/app-sdk';
 import type { EntryProps } from 'contentful-management';
 import { getEntryDisplayTitle } from '../../../../utils/getEntryDisplayTitle';
-import type { ContentTypeDisplayInfoMap } from '../../../../utils/checkboxEntryList';
+import type { ContentTypeDisplayInfoMap } from '../../../../utils/overviewEntryList';
 
 export interface SummaryModalProps {
   isOpen: boolean;

apps/google-docs/src/locations/Page/components/overview/CheckboxEntryList.tsx

@@ -0,0 +1,109 @@
+import { Box, Card, Flex, Paragraph, Text } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { cx } from '@emotion/css';
+import type { EntryListRow as OverviewEntryListRow } from '../../../../utils/overviewEntryList';
+import {
+  treeChildRowBase,
+  treeChildRowLast,
+  treeChildRowNotLast,
+  treeChildrenList,
+} from './OverviewEntryList.styles';
+import { truncateLabel } from '../../../../utils/utils';
+
+export interface OverviewEntryListProps {
+  rows: OverviewEntryListRow[];
+  selectedEntryIndex: number;
+  onSelect: (entryIndex: number) => void;
+}
+
+interface OverviewEntryRowCardProps {
+  row: OverviewEntryListRow;
+  selectedEntryIndex: number;
+  onSelect: (entryIndex: number) => void;
+  showTreeLines: boolean;
+  isLastRow?: boolean;
+}
+
+function OverviewEntryRowCard({
+  row,
+  selectedEntryIndex,
+  onSelect,
+  showTreeLines,
+  isLastRow = true,
+}: OverviewEntryRowCardProps) {
+  const isSelected = row.entryIndex === selectedEntryIndex;
+
+  const treeLineClass =
+    showTreeLines && cx(treeChildRowBase, isLastRow ? treeChildRowLast : treeChildRowNotLast);
+
+  const rowContent = (
+    <>
+      <Card
+        padding="default"
+        as="button"
+        type="button"
+        onClick={() => {
+          if (!isSelected) onSelect(row.entryIndex);
+        }}
+        style={{
+          border: `2px solid ${isSelected ? tokens.blue500 : tokens.gray300}`,
+          backgroundColor: tokens.colorWhite,
+          cursor: isSelected ? 'default' : 'pointer',
+          textAlign: 'left',
+          width: '100%',
+        }}>
+        <Paragraph marginBottom="none">
+          <Text as="span" fontWeight="fontWeightDemiBold">
+            {row.contentTypeName || 'Untitled'}
+          </Text>
+          {row.contentTypeName && row.entryTitle ? (
+            <Text as="span" fontColor="gray600">
+              {' '}
+              ({truncateLabel(row.entryTitle, 150)})
+            </Text>
+          ) : null}
+        </Paragraph>
+      </Card>
+      {row.children.length > 0 ? (
+        <Box className={treeChildrenList}>
+          {row.children.map((child, index) => (
+            <OverviewEntryRowCard
+              key={child.id}
+              row={child}
+              selectedEntryIndex={selectedEntryIndex}
+              onSelect={onSelect}
+              showTreeLines
+              isLastRow={index === row.children.length - 1}
+            />
+          ))}
+        </Box>
+      ) : null}
+    </>
+  );
+
+  if (treeLineClass) {
+    return <Box className={treeLineClass}>{rowContent}</Box>;
+  }
+
+  return (
+    <Flex flexDirection="column" gap="spacingS">
+      {rowContent}
+    </Flex>
+  );
+}
+
+export function OverviewEntryList({ rows, selectedEntryIndex, onSelect }: OverviewEntryListProps) {
+  return (
+    <Flex flexDirection="column" gap="spacingS">
+      {rows.map((row) => (
+        <OverviewEntryRowCard
+          key={row.id}
+          row={row}
+          selectedEntryIndex={selectedEntryIndex}
+          onSelect={onSelect}
+          showTreeLines={false}
+        />
+      ))}
+    </Flex>
+  );
+}

…nts/overview/CheckboxEntryList.styles.ts …nts/overview/OverviewEntryList.styles.tsapps/google-docs/src/locations/Page/components/overview/CheckboxEntryList.styles.ts renamed to apps/google-docs/src/locations/Page/components/overview/OverviewEntryList.styles.ts apps/google-docs/src/locations/Page/components/overview/CheckboxEntryList.styles.ts renamed to apps/google-docs/src/locations/Page/components/overview/OverviewEntryList.styles.ts

@@ -8,6 +8,6 @@ export const overviewSectionBox = css({
 });
 
 export const overviewSectionBoxScrollable = css({
-  maxHeight: '300px',
-  overflowY: 'auto',
+  maxHeight: '348px',
+  overflow: 'scroll',
 });