Add latest changes from gitlab-org/gitlab@master

1 files changed, 36 insertions, 18 deletions

diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
index 23e3ce10d5a..ffe275cba68 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
@@ -1,9 +1,11 @@
 <script>
 import { GlModal } from '@gitlab/ui';
 import { __ } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import CommitSection from './components/commit/commit_section.vue';
 import PipelineEditorDrawer from './components/drawer/pipeline_editor_drawer.vue';
 import PipelineEditorFileNav from './components/file_nav/pipeline_editor_file_nav.vue';
+import PipelineEditorFileTree from './components/file_tree/container.vue';
 import PipelineEditorHeader from './components/header/pipeline_editor_header.vue';
 import PipelineEditorTabs from './components/pipeline_editor_tabs.vue';
 import { CREATE_TAB } from './constants';
@@ -28,9 +30,11 @@ export default {
     GlModal,
     PipelineEditorDrawer,
     PipelineEditorFileNav,
+    PipelineEditorFileTree,
     PipelineEditorHeader,
     PipelineEditorTabs,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     ciConfigData: {
       type: Object,
@@ -61,6 +65,7 @@ export default {
       scrollToCommitForm: false,
       shouldLoadNewBranch: false,
       showDrawer: false,
+      showFileTree: false,
       showSwitchBranchModal: false,
     };
   },
@@ -68,6 +73,9 @@ export default {
     showCommitForm() {
       return this.currentTab === CREATE_TAB;
     },
+    isFileTreeVisible() {
+      return this.showFileTree && this.glFeatures.pipelineEditorFileTree;
+    },
   },
   methods: {
     closeBranchModal() {
@@ -82,6 +90,9 @@ export default {
     openDrawer() {
       this.showDrawer = true;
     },
+    toggleFileTree() {
+      this.showFileTree = !this.showFileTree;
+    },
     switchBranch() {
       this.showSwitchBranchModal = false;
       this.shouldLoadNewBranch = true;
@@ -114,28 +125,35 @@ export default {
     </gl-modal>
     <pipeline-editor-file-nav
       :has-unsaved-changes="hasUnsavedChanges"
+      :is-new-ci-config-file="isNewCiConfigFile"
       :should-load-new-branch="shouldLoadNewBranch"
       @select-branch="handleConfirmSwitchBranch"
+      @toggle-file-tree="toggleFileTree"
       v-on="$listeners"
     />
-    <pipeline-editor-header
-      :ci-config-data="ciConfigData"
-      :commit-sha="commitSha"
-      :is-new-ci-config-file="isNewCiConfigFile"
-      v-on="$listeners"
-    />
-    <pipeline-editor-tabs
-      :ci-config-data="ciConfigData"
-      :ci-file-content="ciFileContent"
-      :commit-sha="commitSha"
-      :is-new-ci-config-file="isNewCiConfigFile"
-      :show-drawer="showDrawer"
-      v-on="$listeners"
-      @open-drawer="openDrawer"
-      @close-drawer="closeDrawer"
-      @set-current-tab="setCurrentTab"
-      @walkthrough-popover-cta-clicked="setScrollToCommitForm"
-    />
+    <div class="gl-display-flex gl-w-full gl-sm-flex-direction-column">
+      <pipeline-editor-file-tree v-if="isFileTreeVisible" class="gl-flex-shrink-0" />
+      <div class="gl-flex-grow-1 gl-min-w-0">
+        <pipeline-editor-header
+          :ci-config-data="ciConfigData"
+          :commit-sha="commitSha"
+          :is-new-ci-config-file="isNewCiConfigFile"
+          v-on="$listeners"
+        />
+        <pipeline-editor-tabs
+          :ci-config-data="ciConfigData"
+          :ci-file-content="ciFileContent"
+          :commit-sha="commitSha"
+          :is-new-ci-config-file="isNewCiConfigFile"
+          :show-drawer="showDrawer"
+          v-on="$listeners"
+          @open-drawer="openDrawer"
+          @close-drawer="closeDrawer"
+          @set-current-tab="setCurrentTab"
+          @walkthrough-popover-cta-clicked="setScrollToCommitForm"
+        />
+      </div>
+    </div>
     <commit-section
       v-if="showCommitForm"
       :ref="$options.commitSectionRef"