From 040ccec968457c01bd60211d584207e18564b02c Mon Sep 17 00:00:00 2001
From: JoFletcher <jfletcher@gitlab.com>
Date: Wed, 8 Oct 2025 19:36:02 -0400
Subject: [PATCH 1/3] Add close button to FTB

---
 .../file_tree_browser/file_tree_browser.vue      | 16 +++++++++++++++-
 locale/gitlab.pot                                |  3 +++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/repository/file_tree_browser/file_tree_browser.vue b/app/assets/javascripts/repository/file_tree_browser/file_tree_browser.vue
index 27059cb7d239c7..169eedeb72381f 100644
--- a/app/assets/javascripts/repository/file_tree_browser/file_tree_browser.vue
+++ b/app/assets/javascripts/repository/file_tree_browser/file_tree_browser.vue
@@ -1,5 +1,6 @@
 <script>
-import { mapState } from 'pinia';
+import { mapState, mapActions } from 'pinia';
+import { GlButton } from '@gitlab/ui';
 import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
 import FileBrowserHeight from '~/diffs/components/file_browser_height.vue';
 import { useFileTreeBrowserVisibility } from '~/repository/stores/file_tree_browser_visibility';
@@ -15,6 +16,7 @@ export default {
     TreeList,
     FileBrowserHeight,
     PanelResizer,
+    GlButton,
   },
   props: {
     projectPath: {
@@ -52,6 +54,7 @@ export default {
     this.restoreTreeWidthUserPreference();
   },
   methods: {
+    ...mapActions(useFileTreeBrowserVisibility, ['handleFileTreeBrowserToggleClick']),
     restoreTreeWidthUserPreference() {
       const userPreference = localStorage.getItem(FILE_TREE_BROWSER_STORAGE_KEY);
       if (!userPreference) return;
@@ -64,6 +67,9 @@ export default {
       localStorage.setItem(FILE_TREE_BROWSER_STORAGE_KEY, size);
       this.treeWidth = size;
     },
+    handleClose() {
+      this.handleFileTreeBrowserToggleClick();
+    },
   },
   fileTreeBrowserStorageKey: FILE_TREE_BROWSER_STORAGE_KEY,
   minTreeWidth: MIN_TREE_WIDTH,
@@ -83,6 +89,14 @@ export default {
       class="file-tree-browser file-tree-browser-responsive gl-fixed gl-left-0 gl-flex-none gl-p-4"
       :class="visibilityClasses"
     >
+      <gl-button
+        icon="close"
+        category="tertiary"
+        size="small"
+        class="gl-z-index-1 gl-absolute gl-right-2 gl-top-2"
+        :aria-label="__('Close file tree browser')"
+        @click="handleClose"
+      />
       <panel-resizer
         class="max-@lg/panel:gl-hidden"
         :start-size="treeWidth"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index c38132d48051de..0812713fac7bce 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -14236,6 +14236,9 @@ msgstr ""
 msgid "Close design"
 msgstr ""
 
+msgid "Close file tree browser"
+msgstr ""
+
 msgid "Close milestone"
 msgstr ""
 
-- 
GitLab


From 4c58d48fe8b00a5097ad7b6eb9979cd1fca43bda Mon Sep 17 00:00:00 2001
From: JoFletcher <jfletcher@gitlab.com>
Date: Fri, 10 Oct 2025 15:42:01 -0400
Subject: [PATCH 2/3] Render in the full viewpoint height

---
 app/assets/stylesheets/page_bundles/tree.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/page_bundles/tree.scss b/app/assets/stylesheets/page_bundles/tree.scss
index 8cc11f45c742f3..11e3378513eb1e 100644
--- a/app/assets/stylesheets/page_bundles/tree.scss
+++ b/app/assets/stylesheets/page_bundles/tree.scss
@@ -47,7 +47,8 @@ $file-tree-browser-z-index: 500;
   &.file-tree-browser-peek {
     @apply gl-shadow;
     @apply gl-rounded-base;
-    top: calc( var(--system-header-height) + var(--performance-bar-height));
+    top: var(--application-header-height);;
+    bottom: 0;
   }
 }
 
-- 
GitLab


From 5539889ab81571b6d103234b116c141a0321d3c0 Mon Sep 17 00:00:00 2001
From: JoFletcher <jfletcher@gitlab.com>
Date: Wed, 15 Oct 2025 09:52:42 -0400
Subject: [PATCH 3/3] Add Tests

---
 .../file_tree_browser/file_tree_browser.vue   | 16 ++++++++++
 .../file_tree_browser_spec.js                 | 29 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/repository/file_tree_browser/file_tree_browser.vue b/app/assets/javascripts/repository/file_tree_browser/file_tree_browser.vue
index 169eedeb72381f..1de58819228fd4 100644
--- a/app/assets/javascripts/repository/file_tree_browser/file_tree_browser.vue
+++ b/app/assets/javascripts/repository/file_tree_browser/file_tree_browser.vue
@@ -1,9 +1,14 @@
 <script>
 import { mapState, mapActions } from 'pinia';
 import { GlButton } from '@gitlab/ui';
+import { InternalEvents } from '~/tracking';
 import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
 import FileBrowserHeight from '~/diffs/components/file_browser_height.vue';
 import { useFileTreeBrowserVisibility } from '~/repository/stores/file_tree_browser_visibility';
+import {
+  EVENT_COLLAPSE_FILE_TREE_BROWSER_ON_REPOSITORY_PAGE,
+  EVENT_EXPAND_FILE_TREE_BROWSER_ON_REPOSITORY_PAGE,
+} from '~/repository/constants';
 import TreeList from './components/tree_list.vue';
 
 export const TREE_WIDTH = 320;
@@ -18,6 +23,7 @@ export default {
     PanelResizer,
     GlButton,
   },
+  mixins: [InternalEvents.mixin()],
   props: {
     projectPath: {
       type: String,
@@ -69,6 +75,15 @@ export default {
     },
     handleClose() {
       this.handleFileTreeBrowserToggleClick();
+
+      this.trackEvent(
+        this.fileTreeBrowserIsExpanded || this.fileTreeBrowserIsPeekOn
+          ? EVENT_COLLAPSE_FILE_TREE_BROWSER_ON_REPOSITORY_PAGE
+          : EVENT_EXPAND_FILE_TREE_BROWSER_ON_REPOSITORY_PAGE,
+        {
+          label: 'close_button',
+        },
+      );
     },
   },
   fileTreeBrowserStorageKey: FILE_TREE_BROWSER_STORAGE_KEY,
@@ -94,6 +109,7 @@ export default {
         category="tertiary"
         size="small"
         class="gl-z-index-1 gl-absolute gl-right-2 gl-top-2"
+        data-testid="close-file-tree-browser"
         :aria-label="__('Close file tree browser')"
         @click="handleClose"
       />
diff --git a/spec/frontend/repository/file_tree_browser/file_tree_browser_spec.js b/spec/frontend/repository/file_tree_browser/file_tree_browser_spec.js
index 584cd2d3f874b2..4db48a74e68090 100644
--- a/spec/frontend/repository/file_tree_browser/file_tree_browser_spec.js
+++ b/spec/frontend/repository/file_tree_browser/file_tree_browser_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { createTestingPinia } from '@pinia/testing';
 import { PiniaVuePlugin } from 'pinia';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -23,6 +23,7 @@ describe('FileTreeBrowser', () => {
   const findFileBrowserHeight = () => wrapper.findComponent(FileBrowserHeight);
   const findPanelResizer = () => wrapper.findComponent(PanelResizer);
   const findOverlay = () => wrapper.findByTestId('overlay');
+  const findCloseButton = () => wrapper.findByTestId('close-file-tree-browser');
 
   afterEach(() => {
     localStorage.clear();
@@ -41,6 +42,9 @@ describe('FileTreeBrowser', () => {
         },
       },
       pinia,
+      stubs: {
+        GlButton: false,
+      },
     });
   };
 
@@ -132,5 +136,28 @@ describe('FileTreeBrowser', () => {
         expect(findFileBrowserHeight().attributes('style')).toBe(`--tree-width: ${TREE_WIDTH}px;`);
       });
     });
+
+    describe('Close button behavior', () => {
+      it('clicking close button toggles visibility state', async () => {
+        const closeButton = findCloseButton();
+        expect(closeButton.exists()).toBe(true);
+
+        await closeButton.vm.$emit('click');
+        await nextTick();
+
+        expect(fileTreeBrowserStore.handleFileTreeBrowserToggleClick).toHaveBeenCalledTimes(1);
+      });
+
+      it('close button works in peek mode', async () => {
+        fileTreeBrowserStore.setFileTreeBrowserIsPeekOn(true);
+        await nextTick();
+
+        const closeButton = findCloseButton();
+        await closeButton.vm.$emit('click');
+        await nextTick();
+
+        expect(fileTreeBrowserStore.handleFileTreeBrowserToggleClick).toHaveBeenCalled();
+      });
+    });
   });
 });
-- 
GitLab