From 36a59d088eca61b834191dacea009677a96c052f Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 19 May 2022 07:33:21 +0000
Subject: Add latest changes from gitlab-org/gitlab@15-0-stable-ee

---
 .../components/commit/commit_form.vue              | 26 +++----
 .../components/commit/commit_section.vue           | 13 ++--
 .../components/editor/ci_config_merged_preview.vue |  4 +-
 .../file_nav/pipeline_editor_file_nav.vue          | 48 +++++++++++++
 .../components/file_tree/container.vue             | 78 ++++++++++++++++++++
 .../components/file_tree/file_item.vue             | 45 ++++++++++++
 .../header/pipeline_editor_mini_graph.vue          | 22 ++++--
 .../components/pipeline_editor_tabs.vue            |  2 +-
 .../components/popovers/file_tree_popover.vue      | 59 +++++++++++++++
 .../components/popovers/walkthrough_popover.vue    | 83 ++++++++++++++++++++++
 .../components/walkthrough_popover.vue             | 83 ----------------------
 .../javascripts/pipeline_editor/constants.js       |  4 ++
 .../graphql/queries/ci_config.query.graphql        |  6 ++
 app/assets/javascripts/pipeline_editor/index.js    |  4 +-
 .../pipeline_editor/pipeline_editor_app.vue        |  3 +-
 .../pipeline_editor/pipeline_editor_home.vue       | 67 ++++++++++++-----
 16 files changed, 414 insertions(+), 133 deletions(-)
 create mode 100644 app/assets/javascripts/pipeline_editor/components/file_tree/container.vue
 create mode 100644 app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue
 create mode 100644 app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue
 create mode 100644 app/assets/javascripts/pipeline_editor/components/popovers/walkthrough_popover.vue
 delete mode 100644 app/assets/javascripts/pipeline_editor/components/walkthrough_popover.vue

(limited to 'app/assets/javascripts/pipeline_editor')

diff --git a/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue b/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue
index 8536db78dfb..d9da238358f 100644
--- a/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue
+++ b/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue
@@ -54,15 +54,15 @@ export default {
     return {
       message: this.defaultMessage,
       openMergeRequest: false,
-      targetBranch: this.currentBranch,
+      sourceBranch: this.currentBranch,
     };
   },
   computed: {
     isCommitFormFilledOut() {
-      return this.message && this.targetBranch;
+      return this.message && this.sourceBranch;
     },
-    isCurrentBranchTarget() {
-      return this.targetBranch === this.currentBranch;
+    isCurrentBranchSourceBranch() {
+      return this.sourceBranch === this.currentBranch;
     },
     isSubmitDisabled() {
       return !this.isCommitFormFilledOut || (!this.hasUnsavedChanges && !this.isNewCiConfigFile);
@@ -79,7 +79,7 @@ export default {
     onSubmit() {
       this.$emit('submit', {
         message: this.message,
-        targetBranch: this.targetBranch,
+        sourceBranch: this.sourceBranch,
         openMergeRequest: this.openMergeRequest,
       });
     },
@@ -93,7 +93,7 @@ export default {
   },
   i18n: {
     commitMessage: __('Commit message'),
-    targetBranch: __('Target Branch'),
+    sourceBranch: __('Branch'),
     startMergeRequest: __('Start a %{new_merge_request} with these changes'),
     newMergeRequest: __('new merge request'),
     commitChanges: __('Commit changes'),
@@ -120,20 +120,20 @@ export default {
         />
       </gl-form-group>
       <gl-form-group
-        id="target-branch-group"
-        :label="$options.i18n.targetBranch"
+        id="source-branch-group"
+        :label="$options.i18n.sourceBranch"
         label-cols-sm="2"
-        label-for="target-branch-field"
+        label-for="source-branch-field"
       >
         <gl-form-input
-          id="target-branch-field"
-          v-model="targetBranch"
+          id="source-branch-field"
+          v-model="sourceBranch"
           class="gl-font-monospace!"
           required
-          data-qa-selector="target_branch_field"
+          data-qa-selector="source_branch_field"
         />
         <gl-form-checkbox
-          v-if="!isCurrentBranchTarget"
+          v-if="!isCurrentBranchSourceBranch"
           v-model="openMergeRequest"
           data-testid="new-mr-checkbox"
           data-qa-selector="new_mr_checkbox"
diff --git a/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue b/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue
index 4ef598d6ff3..9cbf60b1c8f 100644
--- a/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue
+++ b/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue
@@ -75,7 +75,7 @@ export default {
     },
   },
   methods: {
-    async onCommitSubmit({ message, targetBranch, openMergeRequest }) {
+    async onCommitSubmit({ message, sourceBranch, openMergeRequest }) {
       this.isSaving = true;
 
       try {
@@ -88,7 +88,7 @@ export default {
           variables: {
             action: this.action,
             projectPath: this.projectFullPath,
-            branch: targetBranch,
+            branch: sourceBranch,
             startBranch: this.currentBranch,
             message,
             filePath: this.ciConfigPath,
@@ -104,12 +104,11 @@ export default {
         if (errors?.length) {
           this.$emit('showError', { type: COMMIT_FAILURE, reasons: errors });
         } else {
-          const commitBranch = targetBranch;
           const params = openMergeRequest
             ? {
                 type: COMMIT_SUCCESS_WITH_REDIRECT,
                 params: {
-                  sourceBranch: commitBranch,
+                  sourceBranch,
                   targetBranch: this.currentBranch,
                 },
               }
@@ -119,10 +118,10 @@ export default {
             ...params,
           });
 
-          this.updateLastCommitBranch(targetBranch);
-          this.updateCurrentBranch(targetBranch);
+          this.updateLastCommitBranch(sourceBranch);
+          this.updateCurrentBranch(sourceBranch);
 
-          if (this.currentBranch === targetBranch) {
+          if (this.currentBranch === sourceBranch) {
             this.$emit('updateCommitSha');
           }
         }
diff --git a/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue b/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue
index 853e839a7ab..42e2d34fa3a 100644
--- a/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue
+++ b/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue
@@ -46,7 +46,9 @@ export default {
         :value="mergedYaml"
         :file-name="ciConfigPath"
         :file-global-id="fileGlobalId"
-        :editor-options="{ readOnly: true }"
+        :editor-options="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ {
+          readOnly: true,
+        } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
         v-on="$listeners"
       />
     </div>
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"
diff --git a/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue
new file mode 100644
index 00000000000..280cd729a43
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue
@@ -0,0 +1,78 @@
+<script>
+import { GlAlert, GlTooltipDirective } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
+import { FILE_TREE_TIP_DISMISSED_KEY } from '../../constants';
+import FileItem from './file_item.vue';
+
+const i18n = {
+  tipBtn: __('Learn more'),
+  tipDescription: s__(
+    'PipelineEditorFileTree|When you use the include keyword to add pipeline configuration from files in the project, those files will be listed here.',
+  ),
+  tipTitle: s__('PipelineEditorFileTree|Configuration files added with the include keyword'),
+};
+
+export default {
+  i18n,
+  name: 'PipelineEditorFileTreeContainer',
+  components: {
+    FileIcon,
+    FileItem,
+    GlAlert,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: ['ciConfigPath', 'includesHelpPagePath'],
+  props: {
+    includes: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      canShowTip: localStorage.getItem(FILE_TREE_TIP_DISMISSED_KEY) !== 'true',
+    };
+  },
+  computed: {
+    showTip() {
+      return this.includes.length === 0 && this.canShowTip;
+    },
+  },
+  methods: {
+    dismissTip() {
+      this.canShowTip = false;
+      localStorage.setItem(FILE_TREE_TIP_DISMISSED_KEY, 'true');
+    },
+  },
+};
+</script>
+<template>
+  <aside class="file-tree-container gl-mr-5 gl-mb-5">
+    <div
+      v-gl-tooltip
+      :title="ciConfigPath"
+      class="gl-bg-gray-50 gl-py-2 gl-px-3 gl-mb-3 gl-rounded-base"
+    >
+      <span class="file-row-name gl-str-truncated" :title="ciConfigPath">
+        <file-icon class="file-row-icon" :file-name="ciConfigPath" />
+        <span data-testid="current-config-filename">{{ ciConfigPath }}</span>
+      </span>
+    </div>
+    <gl-alert
+      v-if="showTip"
+      variant="tip"
+      :title="$options.i18n.tipTitle"
+      :secondary-button-text="$options.i18n.tipBtn"
+      :secondary-button-link="includesHelpPagePath"
+      @dismiss="dismissTip"
+    >
+      {{ $options.i18n.tipDescription }}
+    </gl-alert>
+    <div class="gl-overflow-y-auto">
+      <file-item v-for="file in includes" :key="file.location" :file="file" />
+    </div>
+  </aside>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue b/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue
new file mode 100644
index 00000000000..786d483b5b9
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue
@@ -0,0 +1,45 @@
+<script>
+import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
+
+export default {
+  name: 'PipelineEditorFileItem',
+  components: {
+    FileIcon,
+    GlIcon,
+    GlLink,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    fileName() {
+      return this.file.location;
+    },
+    filePath() {
+      return this.file.blob || this.file.raw;
+    },
+  },
+};
+</script>
+<template>
+  <gl-link
+    v-gl-tooltip
+    :href="filePath"
+    :title="fileName"
+    target="_blank"
+    class="file-tree-includes-link gl-display-flex gl-justify-content-space-between gl-hover-bg-gray-50 gl-text-body gl-hover-text-gray-900 gl-hover-text-decoration-none gl-py-2 gl-px-3 gl-rounded-base"
+  >
+    <span class="file-row-name gl-str-truncated" :title="fileName">
+      <file-icon class="file-row-icon" :file-name="fileName" />
+      <span>{{ fileName }}</span>
+    </span>
+    <gl-icon class="gl-display-none gl-relative gl-text-gray-500" name="external-link" />
+  </gl-link>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue
index 25a78aab933..7beabcfe403 100644
--- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue
+++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue
@@ -47,6 +47,12 @@ export default {
     downstreamPipelines() {
       return this.linkedPipelines?.downstream?.nodes || [];
     },
+    hasDownstreamPipelines() {
+      return this.downstreamPipelines.length > 0;
+    },
+    hasPipelineStages() {
+      return this.pipelineStages.length > 0;
+    },
     pipelinePath() {
       return this.pipeline.detailedStatus?.detailsPath || '';
     },
@@ -73,9 +79,6 @@ export default {
         };
       });
     },
-    showDownstreamPipelines() {
-      return this.downstreamPipelines.length > 0;
-    },
     upstreamPipeline() {
       return this.linkedPipelines?.upstream;
     },
@@ -84,15 +87,20 @@ export default {
 </script>
 
 <template>
-  <div v-if="pipelineStages.length > 0" class="stage-cell gl-mr-5">
+  <div
+    v-if="hasPipelineStages"
+    class="gl-align-items-center gl-display-inline-flex gl-flex-wrap stage-cell gl-mr-5"
+  >
     <linked-pipelines-mini-list
       v-if="upstreamPipeline"
-      :triggered-by="[upstreamPipeline]"
+      :triggered-by="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [
+        upstreamPipeline,
+      ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
       data-testid="pipeline-editor-mini-graph-upstream"
     />
-    <pipeline-mini-graph class="gl-display-inline" :stages="pipelineStages" />
+    <pipeline-mini-graph :stages="pipelineStages" />
     <linked-pipelines-mini-list
-      v-if="showDownstreamPipelines"
+      v-if="hasDownstreamPipelines"
       :triggered="downstreamPipelines"
       :pipeline-path="pipelinePath"
       data-testid="pipeline-editor-mini-graph-downstream"
diff --git a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
index d50e6f9a623..da31fc62d09 100644
--- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
+++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
@@ -23,7 +23,7 @@ import CiEditorHeader from './editor/ci_editor_header.vue';
 import TextEditor from './editor/text_editor.vue';
 import CiLint from './lint/ci_lint.vue';
 import EditorTab from './ui/editor_tab.vue';
-import WalkthroughPopover from './walkthrough_popover.vue';
+import WalkthroughPopover from './popovers/walkthrough_popover.vue';
 
 export default {
   i18n: {
diff --git a/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue b/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue
new file mode 100644
index 00000000000..6270429535d
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue
@@ -0,0 +1,59 @@
+<script>
+import { GlLink, GlPopover, GlOutsideDirective as Outside, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { FILE_TREE_POPOVER_DISMISSED_KEY } from '../../constants';
+
+export default {
+  name: 'PipelineEditorFileTreePopover',
+  directives: { Outside },
+  i18n: {
+    description: s__(
+      'pipelineEditorWalkthrough|You can use the file tree to view your pipeline configuration files. %{linkStart}Learn more%{linkEnd}',
+    ),
+  },
+  components: {
+    GlLink,
+    GlPopover,
+    GlSprintf,
+  },
+  inject: ['includesHelpPagePath'],
+  data() {
+    return {
+      showPopover: false,
+    };
+  },
+  mounted() {
+    this.showPopover = localStorage.getItem(FILE_TREE_POPOVER_DISMISSED_KEY) !== 'true';
+  },
+  methods: {
+    closePopover() {
+      this.showPopover = false;
+    },
+    dismissPermanently() {
+      this.closePopover();
+      localStorage.setItem(FILE_TREE_POPOVER_DISMISSED_KEY, 'true');
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-popover
+    v-if="showPopover"
+    show
+    show-close-button
+    target="file-tree-toggle"
+    triggers="manual"
+    placement="right"
+    data-qa-selector="file_tree_popover"
+    @close-button-clicked="dismissPermanently"
+  >
+    <div v-outside="closePopover" class="gl-font-base gl-mb-3">
+      <gl-sprintf :message="$options.i18n.description">
+        <template #link="{ content }">
+          <gl-link :href="includesHelpPagePath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </div>
+  </gl-popover>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/components/popovers/walkthrough_popover.vue b/app/assets/javascripts/pipeline_editor/components/popovers/walkthrough_popover.vue
new file mode 100644
index 00000000000..c636d8b8e34
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/popovers/walkthrough_popover.vue
@@ -0,0 +1,83 @@
+<script>
+import { GlButton, GlPopover, GlSprintf, GlOutsideDirective as Outside } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  directives: { Outside },
+  i18n: {
+    title: s__('pipelineEditorWalkthrough|See how GitLab pipelines work'),
+    description: s__(
+      'pipelineEditorWalkthrough|This %{codeStart}.gitlab-ci.yml%{codeEnd} file creates a simple test pipeline.',
+    ),
+    instruction: s__(
+      'pipelineEditorWalkthrough|Use the %{boldStart}commit changes%{boldEnd} button at the bottom of the page to run the pipeline.',
+    ),
+    ctaText: s__("pipelineEditorWalkthrough|Let's do this!"),
+  },
+  components: {
+    GlButton,
+    GlPopover,
+    GlSprintf,
+  },
+  data() {
+    return {
+      show: true,
+    };
+  },
+  computed: {
+    targetElement() {
+      return document.querySelector('.js-walkthrough-popover-target');
+    },
+  },
+  methods: {
+    close() {
+      this.show = false;
+    },
+    handleClickCta() {
+      this.close();
+      this.$emit('walkthrough-popover-cta-clicked');
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-popover
+    :show.sync="show"
+    :title="$options.i18n.title"
+    :target="targetElement"
+    placement="right"
+    triggers="focus"
+  >
+    <div v-outside="close" class="gl-display-flex gl-flex-direction-column">
+      <p>
+        <gl-sprintf :message="$options.i18n.description">
+          <template #code="{ content }">
+            <code>{{ content }}</code>
+          </template>
+        </gl-sprintf>
+      </p>
+
+      <p>
+        <gl-sprintf :message="$options.i18n.instruction">
+          <template #bold="{ content }">
+            <strong>
+              {{ content }}
+            </strong>
+          </template>
+        </gl-sprintf>
+      </p>
+
+      <gl-button
+        class="gl-align-self-end"
+        category="tertiary"
+        data-testid="ctaBtn"
+        variant="confirm"
+        @click="handleClickCta"
+      >
+        <gl-emoji data-name="rocket" />
+        {{ $options.i18n.ctaText }}
+      </gl-button>
+    </div>
+  </gl-popover>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/components/walkthrough_popover.vue b/app/assets/javascripts/pipeline_editor/components/walkthrough_popover.vue
deleted file mode 100644
index 5742b11b841..00000000000
--- a/app/assets/javascripts/pipeline_editor/components/walkthrough_popover.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script>
-import { GlButton, GlPopover, GlSprintf, GlOutsideDirective as Outside } from '@gitlab/ui';
-import { s__ } from '~/locale';
-
-export default {
-  directives: { Outside },
-  i18n: {
-    title: s__('pipelineEditorWalkthrough|See how GitLab pipelines work'),
-    description: s__(
-      'pipelineEditorWalkthrough|This %{codeStart}.gitlab-ci.yml%{codeEnd} file creates a simple test pipeline.',
-    ),
-    instruction: s__(
-      'pipelineEditorWalkthrough|Use the %{boldStart}commit changes%{boldEnd} button at the bottom of the page to run the pipeline.',
-    ),
-    ctaText: s__("pipelineEditorWalkthrough|Let's do this!"),
-  },
-  components: {
-    GlButton,
-    GlPopover,
-    GlSprintf,
-  },
-  data() {
-    return {
-      show: true,
-    };
-  },
-  computed: {
-    targetElement() {
-      return document.querySelector('.js-walkthrough-popover-target');
-    },
-  },
-  methods: {
-    close() {
-      this.show = false;
-    },
-    handleClickCta() {
-      this.close();
-      this.$emit('walkthrough-popover-cta-clicked');
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-popover
-    :show.sync="show"
-    :title="$options.i18n.title"
-    :target="targetElement"
-    placement="right"
-    triggers="focus"
-  >
-    <div v-outside="close" class="gl-display-flex gl-flex-direction-column">
-      <p>
-        <gl-sprintf :message="$options.i18n.description">
-          <template #code="{ content }">
-            <code>{{ content }}</code>
-          </template>
-        </gl-sprintf>
-      </p>
-
-      <p>
-        <gl-sprintf :message="$options.i18n.instruction">
-          <template #bold="{ content }">
-            <strong>
-              {{ content }}
-            </strong>
-          </template>
-        </gl-sprintf>
-      </p>
-
-      <gl-button
-        class="gl-align-self-end"
-        category="tertiary"
-        data-testid="ctaBtn"
-        variant="confirm"
-        @click="handleClickCta"
-      >
-        <gl-emoji data-name="rocket" />
-        {{ this.$options.i18n.ctaText }}
-      </gl-button>
-    </div>
-  </gl-popover>
-</template>
diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js
index 9b4732b26d2..ff7c742f588 100644
--- a/app/assets/javascripts/pipeline_editor/constants.js
+++ b/app/assets/javascripts/pipeline_editor/constants.js
@@ -49,6 +49,10 @@ export const BRANCH_PAGINATION_LIMIT = 20;
 export const BRANCH_SEARCH_DEBOUNCE = '500';
 export const SOURCE_EDITOR_DEBOUNCE = 500;
 
+export const FILE_TREE_DISPLAY_KEY = 'pipeline_editor_file_tree_display';
+export const FILE_TREE_POPOVER_DISMISSED_KEY = 'pipeline_editor_file_tree_popover_dismissed';
+export const FILE_TREE_TIP_DISMISSED_KEY = 'pipeline_editor_file_tree_tip_dismissed';
+
 export const STARTER_TEMPLATE_NAME = 'Getting-Started';
 
 export const pipelineEditorTrackingOptions = {
diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.query.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.query.graphql
index df7de6a1f54..5354ed7c2d5 100644
--- a/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.query.graphql
+++ b/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.query.graphql
@@ -3,6 +3,12 @@
 query getCiConfigData($projectPath: ID!, $sha: String, $content: String!) {
   ciConfig(projectPath: $projectPath, sha: $sha, content: $content) {
     errors
+    includes {
+      location
+      type
+      blob
+      raw
+    }
     mergedYaml
     status
     stages {
diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js
index 732fc665c9e..e13d9cf9df0 100644
--- a/app/assets/javascripts/pipeline_editor/index.js
+++ b/app/assets/javascripts/pipeline_editor/index.js
@@ -30,6 +30,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     defaultBranch,
     emptyStateIllustrationPath,
     helpPaths,
+    includesHelpPagePath,
     lintHelpPagePath,
     lintUnavailableHelpPagePath,
     needsHelpPagePath,
@@ -41,7 +42,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     runnerHelpPagePath,
     totalBranches,
     ymlHelpPagePath,
-  } = el?.dataset;
+  } = el.dataset;
 
   const configurationPaths = Object.fromEntries(
     Object.entries(CODE_SNIPPET_SOURCE_SETTINGS).map(([source, { datasetKey }]) => [
@@ -118,6 +119,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
       defaultBranch,
       emptyStateIllustrationPath,
       helpPaths,
+      includesHelpPagePath,
       lintHelpPagePath,
       lintUnavailableHelpPagePath,
       needsHelpPagePath,
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
index 4e6a4ffa6d2..3fd31edec2c 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
@@ -104,6 +104,7 @@ export default {
             this.setAppStatus(EDITOR_APP_STATUS_EMPTY);
           }
 
+          this.isNewCiConfigFile = false;
           if (!hasCIFile) {
             if (this.shouldSkipStartScreen) {
               this.setNewEmptyCiConfigFile();
@@ -381,7 +382,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-mt-4 gl-relative">
+  <div class="gl-mt-4 gl-relative" data-qa-selector="pipeline_editor_app">
     <gl-loading-icon v-if="isBlobContentLoading" size="lg" class="gl-m-3" />
     <pipeline-editor-empty-state
       v-else-if="showStartScreen"
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
index 23e3ce10d5a..59022a91322 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
@@ -1,12 +1,14 @@
 <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';
+import { CREATE_TAB, FILE_TREE_DISPLAY_KEY } from './constants';
 
 export default {
   commitSectionRef: 'commitSectionRef',
@@ -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,15 @@ export default {
     showCommitForm() {
       return this.currentTab === CREATE_TAB;
     },
+    includesFiles() {
+      return this.ciConfigData?.includes || [];
+    },
+    isFileTreeVisible() {
+      return this.showFileTree && this.glFeatures.pipelineEditorFileTree;
+    },
+  },
+  mounted() {
+    this.showFileTree = JSON.parse(localStorage.getItem(FILE_TREE_DISPLAY_KEY)) || false;
   },
   methods: {
     closeBranchModal() {
@@ -82,6 +96,10 @@ export default {
     openDrawer() {
       this.showDrawer = true;
     },
+    toggleFileTree() {
+      this.showFileTree = !this.showFileTree;
+      localStorage.setItem(FILE_TREE_DISPLAY_KEY, this.showFileTree);
+    },
     switchBranch() {
       this.showSwitchBranchModal = false;
       this.shouldLoadNewBranch = true;
@@ -114,28 +132,39 @@ 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"
+        :includes="includesFiles"
+      />
+      <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"
-- 
cgit v1.2.3