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

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

services/web/frontend/js/features/ide-react/components/toolbar/menu-bar.tsx

@@ -17,6 +17,7 @@ import CommandDropdown, {
   MenuStructure,
 } from './command-dropdown'
 import { useRailContext } from '../../context/rail-context'
+import useIsNetworkStalled from '@/features/ide-react/hooks/use-is-network-stalled'
 import WordCountModal from '@/features/word-count-modal/components/word-count-modal'
 import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
@@ -44,6 +45,7 @@ export const ToolbarMenuBar = () => {
   const { setView, view } = useLayoutContext()
   const { pdfUrl } = useCompileContext()
   const wordCountEnabled = pdfUrl || isSplitTestEnabled('word-count-client')
+  const isDisabledDueToNetworkStall = useIsNetworkStalled()
   const [showWordCountModal, setShowWordCountModal] = useState(false)
   const [showCloneProjectModal, setShowCloneProjectModal] = useState(false)
   const openProject = useOpenProject()
@@ -59,6 +61,7 @@ export const ToolbarMenuBar = () => {
       {
         type: 'command',
         label: t('show_version_history'),
+        disabled: isDisabledDueToNetworkStall,
         handler: () => {
           setView(view === 'history' ? 'editor' : 'history')
         },
@@ -76,14 +79,14 @@ export const ToolbarMenuBar = () => {
       {
         type: 'command',
         label: t('make_a_copy'),
-        disabled: anonymous,
+        disabled: anonymous || isDisabledDueToNetworkStall,
         handler: () => {
           setShowCloneProjectModal(true)
         },
         id: 'copy_project',
       },
     ],
-    [t, setView, view, wordCountEnabled, anonymous]
+    [t, setView, view, wordCountEnabled, anonymous, isDisabledDueToNetworkStall]
   )
   const fileMenuStructure: MenuStructure = useMemo(
     () => [

services/web/frontend/js/features/ide-react/components/toolbar/show-history-button.tsx

@@ -4,11 +4,13 @@ import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import { useCallback } from 'react'
 import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
+import useIsNetworkStalled from '@/features/ide-react/hooks/use-is-network-stalled'
 
 export default function ShowHistoryButton() {
   const { t } = useTranslation()
   const { view, setView, restoreView } = useLayoutContext()
   const { sendEvent } = useEditorAnalytics()
+  const isDisabledDueToNetworkStall = useIsNetworkStalled()
 
   const toggleHistoryOpen = useCallback(() => {
     const action = view === 'history' ? 'close' : 'open'
@@ -32,6 +34,7 @@ export default function ShowHistoryButton() {
           className="ide-redesign-toolbar-button-subdued ide-redesign-toolbar-button-icon"
           onClick={toggleHistoryOpen}
           accessibilityLabel={t('history')}
+          disabled={isDisabledDueToNetworkStall}
         />
       </OLTooltip>
     </div>

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

@@ -34,6 +34,7 @@ type IdeReactContextValue = {
   projectJoined: boolean
   permissionsLevel: PermissionsLevel
   setPermissionsLevel: (permissionsLevel: PermissionsLevel) => void
+  outOfSync: boolean
   setOutOfSync: (value: boolean) => void
 }
 
@@ -143,6 +144,7 @@ export const IdeReactProvider: FC<React.PropsWithChildren> = ({ children }) => {
       setStartedFreeTrial,
       permissionsLevel: outOfSync ? 'readOnly' : permissionsLevel,
       setPermissionsLevel,
+      outOfSync,
       setOutOfSync,
       projectId,
       reportError,

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

@@ -18,11 +18,14 @@ const intermittentConnectionImprovementsEnabled = isSplitTestEnabled(
   'intermittent-connection-improvements'
 )
 
+const STALL_AFTER_SECONDS = 10 // treat saving as stalled after this time
+
 // lock the editor after this time if unsaved
 const MAX_UNSAVED_SECONDS = intermittentConnectionImprovementsEnabled ? 600 : 30
 
 type UnsavedDocsContextValue = {
   unsavedDocs: Map<string, number>
+  isSavingStalled: boolean
   isLocked: boolean
 }
 
@@ -94,6 +97,7 @@ export const UnsavedDocsProvider: FC<React.PropsWithChildren> = ({
   }, [openDocs, debugTimers])
 
   const maxUnsavedSeconds = Math.max(0, ...unsavedDocs.values())
+  const isSavingStalled = maxUnsavedSeconds > STALL_AFTER_SECONDS
 
   // lock the editor if at least one doc has been unsaved for too long
   useEffect(() => {
@@ -123,8 +127,8 @@ export const UnsavedDocsProvider: FC<React.PropsWithChildren> = ({
   }, [unsavedDocs])
 
   const value = useMemo(
-    () => ({ unsavedDocs, isLocked }),
-    [unsavedDocs, isLocked]
+    () => ({ unsavedDocs, isSavingStalled, isLocked }),
+    [unsavedDocs, isSavingStalled, isLocked]
   )
 
   return (

services/web/frontend/js/features/ide-react/hooks/use-is-network-stalled.ts

@@ -0,0 +1,10 @@
+import { useFeatureFlag } from '@/shared/context/split-test-context'
+import { useUnsavedDocsContext } from '@/features/ide-react/context/unsaved-docs-context'
+import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
+
+export default function useIsNetworkStalled(): boolean {
+  const enabled = useFeatureFlag('intermittent-connection-improvements')
+  const { isSavingStalled } = useUnsavedDocsContext()
+  const { outOfSync } = useIdeReactContext()
+  return enabled && (isSavingStalled || outOfSync)
+}