Add latest changes from gitlab-org/gitlab@master

6 files changed, 80 insertions, 11 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 998db653e0c..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
@@ -2,7 +2,7 @@
 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 } from '../../constants';
+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';
 
@@ -39,6 +39,9 @@ export default {
     },
   },
   computed: {
+    isAppLoading() {
+      return this.appStatus === EDITOR_APP_STATUS_LOADING;
+    },
     showFileTreeToggle() {
       return (
         this.glFeatures.pipelineEditorFileTree &&
@@ -62,6 +65,7 @@ export default {
       icon="file-tree"
       data-testid="file-tree-toggle"
       :aria-label="__('File Tree')"
+      :loading="isAppLoading"
       @click="onFileTreeBtnClick"
     />
     <file-tree-popover v-if="showFileTreeToggle" />
diff --git a/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue
index d1ff70ad518..8bffb281211 100644
--- a/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue
+++ b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue
@@ -1,6 +1,8 @@
 <script>
-import { GlAlert } from '@gitlab/ui';
+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 = {
@@ -15,27 +17,55 @@ export default {
   i18n,
   name: 'PipelineEditorFileTreeContainer',
   components: {
+    FileIcon,
     FileItem,
     GlAlert,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: ['ciConfigPath'],
+  props: {
+    includes: {
+      type: Array,
+      required: true,
+    },
+  },
   data() {
     return {
-      showTip: true,
+      canShowTip: localStorage.getItem(FILE_TREE_TIP_DISMISSED_KEY) !== 'true',
     };
   },
+  computed: {
+    showTip() {
+      return this.includes.length === 0 && this.canShowTip;
+    },
+  },
   methods: {
     dismissTip() {
-      this.showTip = false;
+      this.canShowTip = false;
+      localStorage.setItem(FILE_TREE_TIP_DISMISSED_KEY, 'true');
     },
   },
 };
 </script>
 <template>
   <aside class="file-tree-container gl-mr-5 gl-mb-5">
-    <file-item class="gl-mb-3 gl-bg-gray-50" :file-name="ciConfigPath" />
+    <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" @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
index d51a2874c9e..786d483b5b9 100644
--- a/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue
+++ b/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue
@@ -1,24 +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: {
-    fileName: {
-      type: String,
+    file: {
+      type: Object,
       required: true,
     },
   },
+  computed: {
+    fileName() {
+      return this.file.location;
+    },
+    filePath() {
+      return this.file.blob || this.file.raw;
+    },
+  },
 };
 </script>
 <template>
-  <div class="gl-py-2 gl-px-3 gl-rounded-base">
-    <span class="file-row-name" :title="fileName">
+  <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>
-  </div>
+    <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/constants.js b/app/assets/javascripts/pipeline_editor/constants.js
index 0484da8641d..ff7c742f588 100644
--- a/app/assets/javascripts/pipeline_editor/constants.js
+++ b/app/assets/javascripts/pipeline_editor/constants.js
@@ -51,6 +51,7 @@ 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';
 
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/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
index f5277fdbcca..59022a91322 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
@@ -73,6 +73,9 @@ export default {
     showCommitForm() {
       return this.currentTab === CREATE_TAB;
     },
+    includesFiles() {
+      return this.ciConfigData?.includes || [];
+    },
     isFileTreeVisible() {
       return this.showFileTree && this.glFeatures.pipelineEditorFileTree;
     },
@@ -136,7 +139,11 @@ export default {
       v-on="$listeners"
     />
     <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" />
+      <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"