agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-14 22:23:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Davinder Singh <davibaweja@gmail.com>
GitOrigin-RevId: 9e169f3591cfff2fdae63b461b946fde4611f2d7
This commit is contained in:
Mathias Jakobsen
2026-09-17 11:25:49 +00:00
committed by Copybot
co-authored by Davinder Singh
parent 8741846df8
commit 1acb00407e
21 changed files with 351 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/test/frontend/features/file-tree/components/file-tree-doc.spec.tsx
+44
View File
@@ -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
+36
View File
@@ -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')
})
})
})
services/web/test/frontend/features/ide-react/components/toolbar/offline-indicator.spec.tsx
+1
View File
@@ -20,6 +20,7 @@ const defaultIdeReactContextValue = {
const defaultUnsavedDocsContextValue = {
unsavedDocs: new Map<string, number>(),
isLocked: false,
isSavingStalled: false,
}
const mount = ({
services/web/test/frontend/features/ide-react/components/unsaved-docs/unsaved-docs.spec.tsx
+1
View File
@@ -8,6 +8,7 @@ import { SplitTestProvider } from '@/shared/context/split-test-context'
const defaultUnsavedDocsContextValue = {
unsavedDocs: new Map<string, number>([['doc1', 16]]),
isLocked: false,
isSavingStalled: false,
}
const mockSocket = {
services/web/test/frontend/features/ide-react/context/unsaved-docs-context.spec.tsx
+1
View File
@@ -48,6 +48,7 @@ function mount(
projectJoined: true,
permissionsLevel: 'owner' as PermissionsLevel,
setPermissionsLevel: onSetPermissionsLevel,
outOfSync: false,
setOutOfSync: () => {},
}))
services/web/test/frontend/features/ide-react/helpers/editor-manager-provider-with-stale-docs.tsx
+54
View File
@@ -0,0 +1,54 @@
import React, { type FC, type PropsWithChildren } from 'react'
import {
EditorManager,
EditorManagerContext,
} from '@/features/ide-react/context/editor-manager-context'
export function makeEditorManagerProviderWithStaleDocs(
pendingAt: number,
stubs?: {
openDocWithId?: any
openDoc?: any
openFileWithId?: any
}
) {
const staleDocs = [
{
doc_id: 'stale-doc',
getInflightOpCreatedAt: () => undefined,
getPendingOpCreatedAt: () => pendingAt,
},
]
const EditorManagerProviderWithStaleDocs: FC<PropsWithChildren> = ({
children,
}) => {
const value = {
getEditorType: () => null,
getCurrentDocValue: () => null,
getCurrentDocumentId: () => null,
setIgnoringExternalUpdates: () => {},
openDocWithId: stubs?.openDocWithId ?? cy.stub().resolves(),
openDoc: stubs?.openDoc ?? cy.stub().resolves(),
openDocs: {
awaitBufferedOps: cy.stub().resolves(),
unsavedDocs: () => staleDocs,
hasUnsavedChanges: () => true,
getUnsavedOpsSize: () => ({
pendingOpsLength: 0,
inflightOpsLength: 0,
}),
} as any,
openFileWithId: stubs?.openFileWithId ?? cy.stub(),
openInitialDoc: cy.stub().resolves(),
isLoading: false,
jumpToLine: () => {},
debugTimers: { current: {} },
} as unknown as EditorManager
return (
<EditorManagerContext.Provider value={value}>
{children}
</EditorManagerContext.Provider>
)
}
return EditorManagerProviderWithStaleDocs
}
services/web/test/frontend/features/source-editor/components/tabs.spec.tsx
+74
View File
@@ -1,5 +1,6 @@
import React, { FC, useEffect, useRef, useState } from 'react'
import { EditorProviders } from '../../../helpers/editor-providers'
import { makeEditorManagerProviderWithStaleDocs } from '../../ide-react/helpers/editor-manager-provider-with-stale-docs'
import { TabsContainer } from '../../../../../frontend/js/features/source-editor/components/tabs/tabs-container'
import {
FileTreeDocumentFindResult,
@@ -1177,6 +1178,79 @@ describe('File Tabs', function () {
})
})
describe('Network stall', function () {
function mountWithStaleDocs() {
cy.then(() => {
const now = performance.now()
const openDocWithId = cy.stub().as('openDocWithId').resolves()
const openDoc = cy.stub().as('openDoc').resolves()
const openFileWithId = cy.stub().as('openFileWithId')
cy.mount(
<EditorProviders
rootFolder={defaultRootFolder as any}
rootDocId={DOC_IDS.main}
providers={{
EditorManagerProvider: makeEditorManagerProviderWithStaleDocs(
now - 11_000,
{ openDocWithId, openDoc, openFileWithId }
),
EditorViewProvider: makeEditorViewProvider(),
}}
>
<FileTree />
<TabsContainer />
</EditorProviders>
)
})
}
beforeEach(function () {
cy.clock()
cy.window().then(win => {
win.metaAttributesCache.set('ol-splitTestVariants', {
'editor-tabs': 'enabled',
'intermittent-connection-improvements': 'enabled',
})
})
mountWithStaleDocs()
})
it('disables tabs when saving is stalled', function () {
cy.then(() => selectDoc(DOC_IDS.main))
cy.tick(1000)
cy.findByRole('tab', { name: /main\.tex/ }).should(
'have.attr',
'aria-disabled',
'true'
)
})
it('does not switch the active tab when clicking a disabled tab', function () {
cy.then(() => selectDoc(DOC_IDS.main))
cy.then(() => selectDoc(DOC_IDS.intro))
cy.tick(1000)
cy.get('@openDocWithId').invoke('resetHistory')
cy.findByRole('tab', { name: /main\.tex/ }).click()
cy.get('@openDocWithId').should('not.have.been.called')
})
it('does not disable tabs when the feature flag is off', function () {
cy.window().then(win => {
win.metaAttributesCache.set('ol-splitTestVariants', {
'editor-tabs': 'enabled',
})
})
mountWithStaleDocs()
cy.then(() => selectDoc(DOC_IDS.main))
cy.tick(1000)
cy.findByRole('tab', { name: /main\.tex/ }).should(
'not.have.attr',
'aria-disabled',
'true'
)
})
})
describe('SplitTestBadge', function () {
it('renders the labs badge icon in the tabs container', function () {
cy.window().then(win => {
services/web/test/frontend/helpers/editor-providers.tsx
+1
View File
@@ -393,6 +393,7 @@ const makeIdeReactProvider = (
projectJoined: true,
permissionsLevel: scope.permissionsLevel as PermissionsLevel,
setPermissionsLevel: () => {},
outOfSync: false,
setOutOfSync: () => {},
}))