Google Docs: Adding select tabs step [INTEG-3534]

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

@@ -5,13 +5,15 @@ export enum ModalType {
   CONTENT_TYPE_PICKER = 'contentTypePicker',
   CONFIRM_CANCEL = 'confirmCancel',
   ERROR_PREVIEW = 'errorPreview',
+  SELECT_TABS = 'selectTabs',
 }
 
 export const useModalManagement = () => {
   const [isUploadModalOpen, setIsUploadModalOpen] = useState<boolean>(false);
   const [isContentTypePickerOpen, setIsContentTypePickerOpen] = useState<boolean>(false);
   const [isConfirmCancelModalOpen, setIsConfirmCancelModalOpen] = useState<boolean>(false);
   const [isErrorPreviewModalOpen, setIsErrorPreviewModalOpen] = useState<boolean>(false);
+  const [isSelectTabsModalOpen, setIsSelectTabsModalOpen] = useState<boolean>(false);
 
   const openModal = (modalType: ModalType) => {
     switch (modalType) {
@@ -27,6 +29,9 @@ export const useModalManagement = () => {
       case ModalType.ERROR_PREVIEW:
         setIsErrorPreviewModalOpen(true);
         break;
+      case ModalType.SELECT_TABS:
+        setIsSelectTabsModalOpen(true);
+        break;
     }
   };
 
@@ -44,6 +49,9 @@ export const useModalManagement = () => {
       case ModalType.ERROR_PREVIEW:
         setIsErrorPreviewModalOpen(false);
         break;
+      case ModalType.SELECT_TABS:
+        setIsSelectTabsModalOpen(false);
+        break;
     }
   };
 
@@ -53,6 +61,7 @@ export const useModalManagement = () => {
       isContentTypePickerOpen,
       isConfirmCancelModalOpen,
       isErrorPreviewModalOpen,
+      isSelectTabsModalOpen,
     },
     openModal,
     closeModal,

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

@@ -0,0 +1,23 @@
+import { useEffect, useRef, type RefObject } from 'react';
+
+export const useMultiselectScrollReflow = <T>(selection: T[]): RefObject<HTMLUListElement> => {
+  const listRef = useRef<HTMLUListElement>(null);
+
+  useEffect(() => {
+    if (listRef.current) {
+      const element = listRef.current;
+      const currentScroll = element.scrollTop;
+      const maxScroll = element.scrollHeight - element.clientHeight;
+
+      if (currentScroll >= maxScroll) {
+        element.scrollTop = currentScroll - 1;
+      } else {
+        element.scrollTop = currentScroll + 1;
+      }
+
+      element.scrollTop = currentScroll;
+    }
+  }, [selection]);
+
+  return listRef;
+};

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

@@ -1,23 +1,32 @@
 import { useState, useCallback } from 'react';
 import { ContentTypeProps } from 'contentful-management';
+import { DocumentTabProps } from '../utils/types';
 
 export const useProgressTracking = () => {
   const [documentId, setDocumentId] = useState<string>('');
   const [selectedContentTypes, setSelectedContentTypes] = useState<ContentTypeProps[]>([]);
   const [pendingCloseAction, setPendingCloseAction] = useState<(() => void) | null>(null);
+  const [availableTabs, setAvailableTabs] = useState<DocumentTabProps[]>([]);
+  const [selectedTabs, setSelectedTabs] = useState<DocumentTabProps[]>([]);
 
   const hasProgress = documentId.trim().length > 0;
 
   const resetProgress = useCallback(() => {
     setDocumentId('');
     setSelectedContentTypes([]);
+    setAvailableTabs([]);
+    setSelectedTabs([]);
   }, []);
 
   return {
     documentId,
     setDocumentId,
     selectedContentTypes,
     setSelectedContentTypes,
+    availableTabs,
+    setAvailableTabs,
+    selectedTabs,
+    setSelectedTabs,
     hasProgress,
     resetProgress,
     pendingCloseAction,

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

@@ -5,9 +5,11 @@ import { useModalManagement, ModalType } from '../../../../hooks/useModalManagem
 import { useProgressTracking } from '../../../../hooks/useProgressTracking';
 import { ErrorModal } from '../modals/ErrorModal';
 import SelectDocumentModal from '../modals/step_1/SelectDocumentModal';
-import { ContentTypePickerModal } from '../modals/step_2/SelectContentTypeModal';
 import { LoadingModal } from '../modals/LoadingModal';
 import { ERROR_MESSAGES } from '../../../../utils/constants/messages';
+import { SelectTabsModal } from '../modals/step_3/SelectTabsModal';
+import { DocumentTabProps } from '../../../../utils/types';
+import { ContentTypePickerModal } from '../modals/step_2/ContentTypePickerModal';
 
 export interface ModalOrchestratorHandle {
   startFlow: () => void;
@@ -26,6 +28,10 @@ export const ModalOrchestrator = forwardRef<ModalOrchestratorHandle, ModalOrches
       setDocumentId,
       selectedContentTypes,
       setSelectedContentTypes,
+      availableTabs,
+      setAvailableTabs,
+      selectedTabs,
+      setSelectedTabs,
       hasProgress,
       resetProgress: resetProgressTracking,
       pendingCloseAction,
@@ -41,6 +47,7 @@ export const ModalOrchestrator = forwardRef<ModalOrchestratorHandle, ModalOrches
       resetProgressTracking();
       closeModal(ModalType.UPLOAD);
       closeModal(ModalType.CONTENT_TYPE_PICKER);
+      closeModal(ModalType.SELECT_TABS);
     };
 
     const handleUploadModalCloseRequest = (docId?: string) => {
@@ -74,6 +81,18 @@ export const ModalOrchestrator = forwardRef<ModalOrchestratorHandle, ModalOrches
       }
     };
 
+    const handleSelectTabsCloseRequest = () => {
+      if (hasProgress) {
+        closeModal(ModalType.SELECT_TABS);
+        setPendingCloseAction(() => () => {
+          resetProgress();
+        });
+        openModal(ModalType.CONFIRM_CANCEL);
+      } else {
+        closeModal(ModalType.SELECT_TABS);
+      }
+    };
+
     const handleConfirmCancel = () => {
       closeModal(ModalType.CONFIRM_CANCEL);
       if (pendingCloseAction) {
@@ -94,7 +113,13 @@ export const ModalOrchestrator = forwardRef<ModalOrchestratorHandle, ModalOrches
       // The modal already updates `selectedContentTypes` via `setSelectedContentTypes`, so we don't need to set it here.
       void contentTypeIdsCsv;
       // setSelectedContentTypes(contentTypes);
-      // TODO : open content tabs step
+      openModal(ModalType.SELECT_TABS);
+    };
+
+    const handleSelectTabsContinue = (tabs: DocumentTabProps[]) => {
+      setSelectedTabs(tabs);
+      closeModal(ModalType.SELECT_TABS);
+      // TODO: add preview step and redirect to it, using selectedTabs
     };
 
     const handleErrorPreviewModalClose = () => {
@@ -124,6 +149,16 @@ export const ModalOrchestrator = forwardRef<ModalOrchestratorHandle, ModalOrches
           setSelectedContentTypes={setSelectedContentTypes}
         />
 
+        <SelectTabsModal
+          isOpen={modalStates.isSelectTabsModalOpen}
+          onContinue={handleSelectTabsContinue}
+          onClose={handleSelectTabsCloseRequest}
+          availableTabs={availableTabs}
+          setAvailableTabs={setAvailableTabs}
+          selectedTabs={selectedTabs}
+          setSelectedTabs={setSelectedTabs}
+        />
+
         <ConfirmCancelModal
           isOpen={modalStates.isConfirmCancelModalOpen}
           onConfirm={handleConfirmCancel}

apps/google-docs/src/locations/Page/components/modals/step_2/ContentTypePickerModal.styles.ts

@@ -0,0 +1,20 @@
+import { css } from '@emotion/css';
+import tokens from '@contentful/f36-tokens';
+
+export const multiselect = css({
+  maxWidth: '74%',
+});
+
+export const pillsContainer = css({
+  marginRight: tokens.spacingXl,
+  maxHeight: '100px',
+  overflowY: 'scroll',
+  '&::-webkit-scrollbar': {
+    width: tokens.spacingXs,
+    height: tokens.spacingXs,
+  },
+  '&::-webkit-scrollbar-thumb': {
+    background: tokens.gray400,
+    borderRadius: tokens.borderRadiusSmall,
+  },
+});

apps/google-docs/src/locations/Page/components/modals/step_2/SelectContentTypeModal.tsx → apps/google-docs/src/locations/Page/components/modals/step_2/ContentTypePickerModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo, useRef } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import {
   Button,
   Flex,
@@ -11,6 +11,9 @@ import {
 import { PageAppSDK } from '@contentful/app-sdk';
 import { ContentTypeProps } from 'contentful-management';
 import { css } from '@emotion/css';
+import { useMultiselectScrollReflow } from '../../../../../hooks/useMultiselectReflow';
+import { multiselect, pillsContainer } from './ContentTypePickerModal.styles';
+import { truncateLabel } from '../../../../../utils/utils';
 
 interface ContentTypePickerModalProps {
   sdk: PageAppSDK;
@@ -41,7 +44,7 @@ export const ContentTypePickerModal = ({
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState<boolean>(false);
   const [hasFetchError, setHasFetchError] = useState<boolean>(false);
-  const multiselectListRef = useRef<HTMLUListElement>(null);
+  const multiselectListRef = useMultiselectScrollReflow(selectedContentTypes);
 
   const isInvalidSelection = useMemo(
     () => selectedContentTypes.length === 0,
@@ -110,23 +113,6 @@ export const ContentTypePickerModal = ({
     }
   }, [isOpen, setSelectedContentTypes]);
 
-  useEffect(() => {
-    // Recalculate the Multiselect dropdown position when selection changes
-    if (multiselectListRef.current) {
-      const element = multiselectListRef.current;
-      const currentScroll = element.scrollTop;
-      const maxScroll = element.scrollHeight - element.clientHeight;
-
-      if (currentScroll >= maxScroll) {
-        element.scrollTop = currentScroll - 1;
-      } else {
-        element.scrollTop = currentScroll + 1;
-      }
-
-      element.scrollTop = currentScroll;
-    }
-  }, [selectedContentTypes]);
-
   const onSearchValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const searchTerm = e.target.value.toLowerCase().trim();
     setFilteredContentTypes(
@@ -170,24 +156,29 @@ export const ContentTypePickerModal = ({
   };
 
   return (
-    <Modal title="Select content type(s)" isShown={isOpen} onClose={handleClose} size="medium">
+    <Modal title="Select content type(s)" isShown={isOpen} onClose={handleClose} size="large">
       {() => (
         <>
           <Modal.Header title="Select content type(s)" onClose={handleClose} />
-          <Modal.Content className={css({ minHeight: '300px' })}>
+          <Modal.Content>
             <Paragraph marginBottom="spacingM" color="gray700">
               Select the content type(s) you would like to use with this document.
             </Paragraph>
-            <FormControl isRequired isInvalid={isInvalidSelectionError || showFetchError}>
+            <FormControl
+              isRequired
+              isInvalid={isInvalidSelectionError || showFetchError}
+              marginBottom="none">
               <FormControl.Label>Content type</FormControl.Label>
               <Multiselect
+                className={multiselect}
                 searchProps={{
                   searchPlaceholder: 'Search content types',
                   onSearchValueChange,
                 }}
                 currentSelection={selectedContentTypes.map((ct) => ct.name)}
                 placeholder={getPlaceholderText()}
                 popoverProps={{
+                  listMaxHeight: 300,
                   listRef: multiselectListRef,
                 }}>
                 {filteredContentTypes.map((ct) => (
@@ -218,11 +209,11 @@ export const ContentTypePickerModal = ({
             </FormControl>
 
             {selectedContentTypes.length > 0 && (
-              <Flex flexWrap="wrap" gap="spacingXs" marginTop="spacingS">
+              <Flex flexWrap="wrap" gap="spacingXs" marginTop="spacingS" className={pillsContainer}>
                 {selectedContentTypes.map((ct) => (
                   <Pill
                     key={ct.sys.id}
-                    label={ct.name}
+                    label={truncateLabel(ct.name)}
                     onClose={
                       isSubmitting
                         ? undefined

apps/google-docs/src/locations/Page/components/modals/step_3/SelectTabsModal.styles.ts

@@ -0,0 +1,28 @@
+import { css } from '@emotion/css';
+import tokens from '@contentful/f36-tokens';
+
+export const multiselect = css({
+  maxWidth: '68%',
+});
+
+export const multiselectOption = css({
+  padding: tokens.spacing2Xs,
+});
+
+export const pillsContainer = css({
+  marginRight: tokens.spacingXl,
+  maxHeight: '100px',
+  overflowY: 'scroll',
+  '&::-webkit-scrollbar': {
+    width: tokens.spacingXs,
+    height: tokens.spacingXs,
+  },
+  '&::-webkit-scrollbar-thumb': {
+    background: tokens.gray400,
+    borderRadius: tokens.borderRadiusSmall,
+  },
+});
+
+export const modalControls = css({
+  paddingTop: '0',
+});