Merge pull request #27365 from overleaf/dp-hide-file-tree-buttons

Hide new editor file tree action buttons when file tree is collapsed

GitOrigin-RevId: 1f75593c8e1b1f6ed0d6054a2987b8fa46edd067

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

@@ -8,7 +8,11 @@ import { usePermissionsContext } from '@/features/ide-react/context/permissions-
 import FileTreeActionButton from './file-tree-action-button'
 import { useRailContext } from '../../contexts/rail-context'
 
-export default function FileTreeActionButtons() {
+export default function FileTreeActionButtons({
+  fileTreeExpanded,
+}: {
+  fileTreeExpanded: boolean
+}) {
   const { t } = useTranslation()
   const { fileTreeReadOnly } = useFileTreeData()
   const { write } = usePermissionsContext()
@@ -72,37 +76,41 @@ export default function FileTreeActionButtons() {
 
   return (
     <div className="file-tree-toolbar-action-buttons">
-      {canCreate && (
-        <FileTreeActionButton
-          id="new-file"
-          description={t('new_file')}
-          onClick={createWithAnalytics}
-          iconType="note_add"
-        />
-      )}
-      {canCreate && (
-        <FileTreeActionButton
-          id="new-folder"
-          description={t('new_folder')}
-          onClick={startCreatingFolder}
-          iconType="create_new_folder"
-        />
-      )}
-      {canCreate && (
-        <FileTreeActionButton
-          id="upload"
-          description={t('upload')}
-          onClick={uploadWithAnalytics}
-          iconType="upload"
-        />
-      )}
-      {canBulkDelete && (
-        <FileTreeActionButton
-          id="delete"
-          description={t('delete')}
-          onClick={startDeleting}
-          iconType="delete"
-        />
+      {fileTreeExpanded && (
+        <>
+          {canCreate && (
+            <FileTreeActionButton
+              id="new-file"
+              description={t('new_file')}
+              onClick={createWithAnalytics}
+              iconType="note_add"
+            />
+          )}
+          {canCreate && (
+            <FileTreeActionButton
+              id="new-folder"
+              description={t('new_folder')}
+              onClick={startCreatingFolder}
+              iconType="create_new_folder"
+            />
+          )}
+          {canCreate && (
+            <FileTreeActionButton
+              id="upload"
+              description={t('upload')}
+              onClick={uploadWithAnalytics}
+              iconType="upload"
+            />
+          )}
+          {canBulkDelete && (
+            <FileTreeActionButton
+              id="delete"
+              description={t('delete')}
+              onClick={startDeleting}
+              iconType="delete"
+            />
+          )}
+        </>
       )}
       <FileTreeActionButton
         id="close"

services/web/frontend/js/features/ide-redesign/components/file-tree/file-tree-toolbar.tsx

@@ -24,7 +24,7 @@ function FileTreeToolbar() {
         />
         <h4>{t('file_tree')}</h4>
       </button>
-      <FileTreeActionButtons />
+      <FileTreeActionButtons fileTreeExpanded={fileTreeExpanded} />
     </div>
   )
 }