[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/file-tree/components/file-tree-action-button.tsx

@@ -9,11 +9,13 @@ export default function FileTreeActionButton({
   description,
   onClick,
   iconType,
+  disabled,
 }: {
   id: string
   description: string
   onClick: () => void
   iconType: AvailableUnfilledIcon
+  disabled?: boolean
 }) {
   return (
     <OLTooltip
@@ -21,7 +23,11 @@ export default function FileTreeActionButton({
       description={description}
       overlayProps={{ placement: 'bottom' }}
     >
-      <button className="btn file-tree-toolbar-action-button" onClick={onClick}>
+      <button
+        className="btn file-tree-toolbar-action-button"
+        onClick={onClick}
+        disabled={disabled}
+      >
         <MaterialIcon
           unfilled
           type={iconType}

services/web/frontend/js/features/file-tree/components/file-tree-action-buttons.tsx

@@ -7,6 +7,7 @@ import { useCommandProvider } from '@/features/ide-react/hooks/use-command-provi
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 import FileTreeActionButton from './file-tree-action-button'
 import { useRailContext } from '../../ide-react/context/rail-context'
+import useIsNetworkStalled from '@/features/ide-react/hooks/use-is-network-stalled'
 
 export default function FileTreeActionButtons({
   fileTreeExpanded,
@@ -17,6 +18,7 @@ export default function FileTreeActionButtons({
   const { fileTreeReadOnly } = useFileTreeData()
   const { write } = usePermissionsContext()
   const { handlePaneCollapse } = useRailContext()
+  const isDisabledDueToNetworkStall = useIsNetworkStalled()
 
   const {
     canCreate,
@@ -37,11 +39,13 @@ export default function FileTreeActionButtons({
           eventTracking.sendMB('new-file-click', { location })
           startCreatingDocOrFile()
         },
+        disabled: isDisabledDueToNetworkStall,
       },
       {
         label: t('new_folder'),
         id: 'new_folder',
         handler: startCreatingFolder,
+        disabled: isDisabledDueToNetworkStall,
       },
       {
         label: t('upload_file'),
@@ -50,6 +54,7 @@ export default function FileTreeActionButtons({
           eventTracking.sendMB('upload-click', { location })
           startUploadingDocOrFile()
         },
+        disabled: isDisabledDueToNetworkStall,
       },
     ]
   }, [
@@ -60,6 +65,7 @@ export default function FileTreeActionButtons({
     startCreatingFolder,
     startUploadingDocOrFile,
     write,
+    isDisabledDueToNetworkStall,
   ])
 
   if (fileTreeReadOnly) return null
@@ -84,6 +90,7 @@ export default function FileTreeActionButtons({
               description={t('new_file')}
               onClick={createWithAnalytics}
               iconType="note_add"
+              disabled={isDisabledDueToNetworkStall}
             />
           )}
           {canCreate && (
@@ -92,6 +99,7 @@ export default function FileTreeActionButtons({
               description={t('new_folder')}
               onClick={startCreatingFolder}
               iconType="create_new_folder"
+              disabled={isDisabledDueToNetworkStall}
             />
           )}
           {canCreate && (
@@ -100,6 +108,7 @@ export default function FileTreeActionButtons({
               description={t('upload')}
               onClick={uploadWithAnalytics}
               iconType="upload"
+              disabled={isDisabledDueToNetworkStall}
             />
           )}
           {canBulkDelete && (

services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu-items.tsx

@@ -8,6 +8,7 @@ import {
   OLDropdownItem,
 } from '@/shared/components/ol/ol-dropdown-menu'
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
+import useIsNetworkStalled from '@/features/ide-react/hooks/use-is-network-stalled'
 
 function FileTreeItemMenuItems() {
   const { t } = useTranslation()
@@ -47,11 +48,18 @@ function FileTreeItemMenuItems() {
     startUploadingDocOrFile()
   }, [startUploadingDocOrFile])
 
+  const isDisabledDueToNetworkStall = useIsNetworkStalled()
+
   return (
     <>
       {canRename ? (
         <li role="none">
-          <OLDropdownItem onClick={startRenaming}>{t('rename')}</OLDropdownItem>
+          <OLDropdownItem
+            onClick={startRenaming}
+            disabled={isDisabledDueToNetworkStall}
+          >
+            {t('rename')}
+          </OLDropdownItem>
         </li>
       ) : null}
       {downloadPath ? (
@@ -60,6 +68,7 @@ function FileTreeItemMenuItems() {
             href={downloadPath}
             onClick={downloadWithAnalytics}
             download={selectedFileName ?? undefined}
+            disabled={isDisabledDueToNetworkStall}
           >
             {t('download')}
           </OLDropdownItem>
@@ -69,7 +78,10 @@ function FileTreeItemMenuItems() {
         <>
           <OLDropdownDivider />
           <li role="none">
-            <OLDropdownItem onClick={setRootDocId}>
+            <OLDropdownItem
+              onClick={setRootDocId}
+              disabled={isDisabledDueToNetworkStall}
+            >
               {t('set_as_main_document')}
             </OLDropdownItem>
           </li>
@@ -79,7 +91,10 @@ function FileTreeItemMenuItems() {
         <>
           <OLDropdownDivider />
           <li role="none">
-            <OLDropdownItem onClick={startDeleting}>
+            <OLDropdownItem
+              onClick={startDeleting}
+              disabled={isDisabledDueToNetworkStall}
+            >
               {t('delete')}
             </OLDropdownItem>
           </li>
@@ -89,17 +104,26 @@ function FileTreeItemMenuItems() {
         <>
           <OLDropdownDivider />
           <li role="none">
-            <OLDropdownItem onClick={createWithAnalytics}>
+            <OLDropdownItem
+              onClick={createWithAnalytics}
+              disabled={isDisabledDueToNetworkStall}
+            >
               {t('new_file')}
             </OLDropdownItem>
           </li>
           <li role="none">
-            <OLDropdownItem onClick={startCreatingFolder}>
+            <OLDropdownItem
+              onClick={startCreatingFolder}
+              disabled={isDisabledDueToNetworkStall}
+            >
               {t('new_folder')}
             </OLDropdownItem>
           </li>
           <li role="none">
-            <OLDropdownItem onClick={uploadWithAnalytics}>
+            <OLDropdownItem
+              onClick={uploadWithAnalytics}
+              disabled={isDisabledDueToNetworkStall}
+            >
               {t('upload')}
             </OLDropdownItem>
           </li>