Merge pull request #35725 from overleaf/ds-unable-to-sync-modal

[WEB] adds unable-to-sync modal for intermittent connection improvements

GitOrigin-RevId: 4cd85cf742cb3f36cc0c97f83bdeab09bb6f7c53

services/web/frontend/js/features/ide-react/context/modals-context.tsx

@@ -12,6 +12,9 @@ import GenericMessageModal, {
 import OutOfSyncModal, {
   OutOfSyncModalProps,
 } from '@/features/ide-react/components/modals/out-of-sync-modal'
+import UnableToSyncModal, {
+  UnableToSyncModalProps,
+} from '@/features/ide-react/components/modals/unable-to-sync-modal'
 import GenericConfirmModal, {
   GenericConfirmModalOwnProps,
 } from '../components/modals/generic-confirm-modal'
@@ -26,6 +29,10 @@ type ModalsContextValue = {
   showOutOfSyncModal: (
     editorContent: OutOfSyncModalProps['editorContent']
   ) => void
+  showUnableToSyncModal: (
+    editorContent: UnableToSyncModalProps['editorContent'],
+    docName: UnableToSyncModalProps['docName']
+  ) => void
 }
 
 const ModalsContext = createContext<ModalsContextValue | undefined>(undefined)
@@ -50,6 +57,16 @@ export const ModalsContextProvider: FC<React.PropsWithChildren> = ({
     editorContent: '',
   })
 
+  const [shouldShowUnableToSyncModal, setShouldShowUnableToSyncModal] =
+    useState(false)
+  const [unableToSyncModalData, setUnableToSyncModalData] = useState<{
+    editorContent: string
+    docName: string | null
+  }>({
+    editorContent: '',
+    docName: null,
+  })
+
   const handleHideGenericModal = useCallback(() => {
     setShowGenericModal(false)
   }, [])
@@ -91,18 +108,32 @@ export const ModalsContextProvider: FC<React.PropsWithChildren> = ({
     setShouldShowOutOfSyncModal(true)
   }, [])
 
+  const handleHideUnableToSyncModal = useCallback(() => {
+    setShouldShowUnableToSyncModal(false)
+  }, [])
+
+  const showUnableToSyncModal = useCallback(
+    (editorContent: string, docName: string | null) => {
+      setUnableToSyncModalData({ editorContent, docName })
+      setShouldShowUnableToSyncModal(true)
+    },
+    []
+  )
+
   const value = useMemo<ModalsContextValue>(
     () => ({
       showGenericMessageModal,
       showGenericConfirmModal,
       genericModalVisible: showGenericModal,
       showOutOfSyncModal,
+      showUnableToSyncModal,
     }),
     [
       showGenericMessageModal,
       showGenericConfirmModal,
       showGenericModal,
       showOutOfSyncModal,
+      showUnableToSyncModal,
     ]
   )
 
@@ -125,6 +156,11 @@ export const ModalsContextProvider: FC<React.PropsWithChildren> = ({
         show={shouldShowOutOfSyncModal}
         onHide={handleHideOutOfSyncModal}
       />
+      <UnableToSyncModal
+        {...unableToSyncModalData}
+        show={shouldShowUnableToSyncModal}
+        onHide={handleHideUnableToSyncModal}
+      />
     </ModalsContext.Provider>
   )
 }