1 files changed, 48 insertions, 0 deletions

diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
index 83b074dd55c..58df98d0fb7 100644
--- a/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
+++ b/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
@@ -1,26 +1,74 @@
 <script>
+import { GlButton } from '@gitlab/ui';
+import getAppStatus from '~/pipeline_editor/graphql/queries/client/app_status.query.graphql';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { EDITOR_APP_STATUS_EMPTY, EDITOR_APP_STATUS_LOADING } from '../../constants';
+import FileTreePopover from '../popovers/file_tree_popover.vue';
 import BranchSwitcher from './branch_switcher.vue';
 
 export default {
   components: {
     BranchSwitcher,
+    FileTreePopover,
+    GlButton,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     hasUnsavedChanges: {
       type: Boolean,
       required: false,
       default: false,
     },
+    isNewCiConfigFile: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     shouldLoadNewBranch: {
       type: Boolean,
       required: false,
       default: false,
     },
   },
+  apollo: {
+    appStatus: {
+      query: getAppStatus,
+      update(data) {
+        return data.app.status;
+      },
+    },
+  },
+  computed: {
+    isAppLoading() {
+      return this.appStatus === EDITOR_APP_STATUS_LOADING;
+    },
+    showFileTreeToggle() {
+      return (
+        this.glFeatures.pipelineEditorFileTree &&
+        !this.isNewCiConfigFile &&
+        this.appStatus !== EDITOR_APP_STATUS_EMPTY
+      );
+    },
+  },
+  methods: {
+    onFileTreeBtnClick() {
+      this.$emit('toggle-file-tree');
+    },
+  },
 };
 </script>
 <template>
   <div class="gl-mb-4">
+    <gl-button
+      v-if="showFileTreeToggle"
+      id="file-tree-toggle"
+      icon="file-tree"
+      data-testid="file-tree-toggle"
+      :aria-label="__('File Tree')"
+      :loading="isAppLoading"
+      @click="onFileTreeBtnClick"
+    />
+    <file-tree-popover v-if="showFileTreeToggle" />
     <branch-switcher
       :has-unsaved-changes="hasUnsavedChanges"
       :should-load-new-branch="shouldLoadNewBranch"