[web] Disable various editor buttons during network stall (#34247)

Co-authored-by: Davinder Singh <davibaweja@gmail.com>
GitOrigin-RevId: 9e169f3591cfff2fdae63b461b946fde4611f2d7

services/web/test/frontend/features/file-tree/components/file-tree-doc.spec.tsx

@@ -1,5 +1,6 @@
 import FileTreeDoc from '../../../../../frontend/js/features/file-tree/components/file-tree-doc'
 import { EditorProviders } from '../../../helpers/editor-providers'
+import { makeEditorManagerProviderWithStaleDocs } from '../../ide-react/helpers/editor-manager-provider-with-stale-docs'
 import { FileTreeProvider } from '../helpers/file-tree-provider'
 
 describe('<FileTreeDoc/>', function () {
@@ -74,4 +75,47 @@ describe('<FileTreeDoc/>', function () {
     cy.findByRole('treeitem').click({ ctrlKey: true, cmdKey: true })
     cy.findByRole('treeitem', { selected: true })
   })
+
+  describe('Network stall', function () {
+    const rootFolder = [
+      {
+        _id: 'root-folder-id',
+        name: 'rootFolder',
+        docs: [{ _id: '123abc' }],
+        fileRefs: [],
+        folders: [],
+      },
+    ]
+
+    beforeEach(function () {
+      cy.clock()
+      cy.window().then(win => {
+        win.metaAttributesCache.set('ol-splitTestVariants', {
+          'intermittent-connection-improvements': 'enabled',
+        })
+      })
+      cy.then(() => {
+        const now = performance.now()
+        cy.mount(
+          <EditorProviders
+            rootFolder={rootFolder as any}
+            providers={{
+              EditorManagerProvider: makeEditorManagerProviderWithStaleDocs(
+                now - 11_000
+              ),
+            }}
+          >
+            <FileTreeProvider>
+              <FileTreeDoc name="foo.tex" id="123abc" />
+            </FileTreeProvider>
+          </EditorProviders>
+        )
+      })
+    })
+
+    it('disables doc when saving is stalled', function () {
+      cy.tick(1000)
+      cy.findByRole('treeitem').should('have.attr', 'aria-disabled', 'true')
+    })
+  })
 })

services/web/test/frontend/features/file-tree/components/file-tree-toolbar.spec.tsx

@@ -1,5 +1,6 @@
 import FileTreeToolbar from '../../../../../frontend/js/features/file-tree/components/file-tree-toolbar'
 import { EditorProviders } from '../../../helpers/editor-providers'
+import { makeEditorManagerProviderWithStaleDocs } from '../../ide-react/helpers/editor-manager-provider-with-stale-docs'
 import { FileTreeProvider } from '../helpers/file-tree-provider'
 
 describe('<FileTreeToolbar/>', function () {
@@ -55,4 +56,39 @@ describe('<FileTreeToolbar/>', function () {
     cy.findAllByRole('button', { name: 'Upload' })
     cy.findAllByRole('button', { name: 'Close' })
   })
+
+  describe('Network stall', function () {
+    beforeEach(function () {
+      cy.clock()
+      cy.window().then(win => {
+        win.metaAttributesCache.set('ol-splitTestVariants', {
+          'intermittent-connection-improvements': 'enabled',
+        })
+      })
+      cy.then(() => {
+        const now = performance.now()
+        cy.mount(
+          <EditorProviders
+            rootDocId=""
+            providers={{
+              EditorManagerProvider: makeEditorManagerProviderWithStaleDocs(
+                now - 11_000
+              ),
+            }}
+          >
+            <FileTreeProvider>
+              <FileTreeToolbar />
+            </FileTreeProvider>
+          </EditorProviders>
+        )
+      })
+    })
+
+    it('disables action buttons when saving is stalled', function () {
+      cy.tick(1000)
+      cy.findByRole('button', { name: 'New file' }).should('be.disabled')
+      cy.findByRole('button', { name: 'New folder' }).should('be.disabled')
+      cy.findByRole('button', { name: 'Upload' }).should('be.disabled')
+    })
+  })
 })