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

[WEB] Adding improved version of the unable to sync modal

GitOrigin-RevId: 1cfe2b3a2e8417028339efddb18385a5224e50c3

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

@@ -119,6 +119,10 @@ export const EditorManagerProvider: FC<React.PropsWithChildren> = ({
   }, [wantTrackChanges])
 
   const { fileTreeData } = useFileTreeData()
+  const fileTreeDataRef = useRef(fileTreeData)
+  useEffect(() => {
+    fileTreeDataRef.current = fileTreeData
+  }, [fileTreeData])
 
   const [ignoringExternalUpdates, setIgnoringExternalUpdates] = useState(false)
 
@@ -583,11 +587,11 @@ export const EditorManagerProvider: FC<React.PropsWithChildren> = ({
         // A failure while there are recoverable offline edits is a failed sync,
         // so report it through the same event as the recovery path and let the
         // listener show the modal. Otherwise fall back to the out of sync modal.
-        const hasOfflineBackup = !!OfflineDocBackup.readRecoverable(
+        const backupRecord = OfflineDocBackup.readRecoverable(
           projectId,
           document.doc_id
         )
-        if (hasOfflineBackup) {
+        if (backupRecord) {
           if (!isConnected) {
             // Still offline, so nothing has been rejected yet: this is the
             // fatal op timeout running out while the outage is ongoing. Keep
@@ -598,6 +602,7 @@ export const EditorManagerProvider: FC<React.PropsWithChildren> = ({
           eventEmitter.emit('ide:unableToSyncOfflineChanges', {
             docId: document.doc_id,
             editorContent: editorContent || '',
+            baseContent: backupRecord.snapshot,
             docName: document.docName,
           })
           OfflineDocBackup.remove(projectId, document.doc_id)
@@ -637,9 +642,14 @@ export const EditorManagerProvider: FC<React.PropsWithChildren> = ({
 
   useEffect(() => {
     const handleUnableToSync = ({
-      detail: [{ editorContent, docName }],
+      detail: [{ editorContent, baseContent, docName }],
     }: CustomEvent<IdeEvents['ide:unableToSyncOfflineChanges']>) => {
-      showUnableToSyncModal(editorContent, docName)
+      showUnableToSyncModal({
+        baseContent,
+        targetContent: editorContent,
+        docName,
+        rootFolderId: fileTreeDataRef.current?._id,
+      })
     }
 
     eventEmitter.on('ide:unableToSyncOfflineChanges', handleUnableToSync)

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

@@ -30,8 +30,10 @@ type ModalsContextValue = {
     editorContent: OutOfSyncModalProps['editorContent']
   ) => void
   showUnableToSyncModal: (
-    editorContent: UnableToSyncModalProps['editorContent'],
-    docName: UnableToSyncModalProps['docName']
+    data: Pick<
+      UnableToSyncModalProps,
+      'baseContent' | 'targetContent' | 'docName' | 'rootFolderId'
+    >
   ) => void
 }
 
@@ -59,12 +61,16 @@ export const ModalsContextProvider: FC<React.PropsWithChildren> = ({
 
   const [shouldShowUnableToSyncModal, setShouldShowUnableToSyncModal] =
     useState(false)
-  const [unableToSyncModalData, setUnableToSyncModalData] = useState<{
-    editorContent: string
-    docName: string | null
-  }>({
-    editorContent: '',
+  const [unableToSyncModalData, setUnableToSyncModalData] = useState<
+    Pick<
+      UnableToSyncModalProps,
+      'baseContent' | 'targetContent' | 'docName' | 'rootFolderId'
+    >
+  >({
+    baseContent: '',
+    targetContent: '',
     docName: null,
+    rootFolderId: undefined,
   })
 
   const handleHideGenericModal = useCallback(() => {
@@ -113,8 +119,13 @@ export const ModalsContextProvider: FC<React.PropsWithChildren> = ({
   }, [])
 
   const showUnableToSyncModal = useCallback(
-    (editorContent: string, docName: string | null) => {
-      setUnableToSyncModalData({ editorContent, docName })
+    (
+      data: Pick<
+        UnableToSyncModalProps,
+        'baseContent' | 'targetContent' | 'docName' | 'rootFolderId'
+      >
+    ) => {
+      setUnableToSyncModalData(data)
       setShouldShowUnableToSyncModal(true)
     },
     []