From 2387aeef0e30f33480f200f71a2daf7b04a3b270 Mon Sep 17 00:00:00 2001
From: Alexandre Bourdin <abourdin@users.noreply.github.com>
Date: Tue, 29 Jul 2025 10:09:26 +0200
Subject: [PATCH] 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
---
 .../file-tree/file-tree-action-buttons.tsx    | 72 ++++++++++---------
 .../file-tree/file-tree-toolbar.tsx           |  2 +-
 2 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/services/web/frontend/js/features/ide-redesign/components/file-tree/file-tree-action-buttons.tsx b/services/web/frontend/js/features/ide-redesign/components/file-tree/file-tree-action-buttons.tsx
index bcac7c4ba9..d72e77bb08 100644
--- a/services/web/frontend/js/features/ide-redesign/components/file-tree/file-tree-action-buttons.tsx
+++ b/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"
diff --git a/services/web/frontend/js/features/ide-redesign/components/file-tree/file-tree-toolbar.tsx b/services/web/frontend/js/features/ide-redesign/components/file-tree/file-tree-toolbar.tsx
index 231f98e7d7..f8dab55c4c 100644
--- a/services/web/frontend/js/features/ide-redesign/components/file-tree/file-tree-toolbar.tsx
+++ b/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>
   )
 }