Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42

6 files changed, 89 insertions, 46 deletions

diff --git a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue
index f2a0f474bc4..7b8e97b573e 100644
--- a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue
+++ b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue
@@ -9,15 +9,8 @@ export default {
     SourceEditor,
   },
   mixins: [glFeatureFlagMixin()],
-  inject: ['ciConfigPath', 'projectPath', 'projectNamespace', 'defaultBranch'],
+  inject: ['ciConfigPath'],
   inheritAttrs: false,
-  props: {
-    commitSha: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
   methods: {
     onCiConfigUpdate(content) {
       this.$emit('updateCiConfig', content);
@@ -27,11 +20,7 @@ export default {
         const editorInstance = this.$refs.editor.getEditor();
 
         editorInstance.use(new CiSchemaExtension({ instance: editorInstance }));
-        editorInstance.registerCiSchema({
-          projectPath: this.projectPath,
-          projectNamespace: this.projectNamespace,
-          ref: this.commitSha || this.defaultBranch,
-        });
+        editorInstance.registerCiSchema();
       }
     },
   },
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
new file mode 100644
index 00000000000..75b1398a3c2
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue
@@ -0,0 +1,49 @@
+<script>
+import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
+
+export default {
+  components: {
+    PipelineMiniGraph,
+  },
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    pipelinePath() {
+      return this.pipeline.detailedStatus?.detailsPath || '';
+    },
+    pipelineStages() {
+      const stages = this.pipeline.stages?.edges;
+      if (!stages) {
+        return [];
+      }
+
+      return stages.map(({ node }) => {
+        const { name, detailedStatus } = node;
+        return {
+          // TODO: fetch dropdown_path from graphql when available
+          // see https://gitlab.com/gitlab-org/gitlab/-/issues/342585
+          dropdown_path: `${this.pipelinePath}/stage.json?stage=${name}`,
+          name,
+          path: `${this.pipelinePath}#${name}`,
+          status: {
+            details_path: `${this.pipelinePath}#${name}`,
+            has_details: detailedStatus.hasDetails,
+            ...detailedStatus,
+          },
+          title: `${name}: ${detailedStatus.text}`,
+        };
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="pipelineStages.length > 0" class="stage-cell gl-mr-5">
+    <pipeline-mini-graph class="gl-display-inline" :stages="pipelineStages" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
index ec240854be5..a1fa2147994 100644
--- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
+++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
@@ -10,6 +10,8 @@ import {
   toggleQueryPollingByVisibility,
 } from '~/pipelines/components/graph/utils';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import PipelineEditorMiniGraph from './pipeline_editor_mini_graph.vue';
 
 const POLL_INTERVAL = 10000;
 export const i18n = {
@@ -30,7 +32,9 @@ export default {
     GlLink,
     GlLoadingIcon,
     GlSprintf,
+    PipelineEditorMiniGraph,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: ['projectFullPath'],
   props: {
     commitSha: {
@@ -55,12 +59,15 @@ export default {
         };
       },
       update(data) {
-        const { id, commitPath = '', detailedStatus = {} } = data.project?.pipeline || {};
+        const { id, commitPath = '', detailedStatus = {}, stages, status } =
+          data.project?.pipeline || {};
 
         return {
           id,
           commitPath,
           detailedStatus,
+          stages,
+          status,
         };
       },
       result(res) {
@@ -111,9 +118,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-white-space-nowrap gl-max-w-full"
-  >
+  <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-flex-wrap">
     <template v-if="showLoadingState">
       <div>
         <gl-loading-icon class="gl-mr-auto gl-display-inline-block" size="sm" />
@@ -129,19 +134,12 @@ export default {
     <template v-else>
       <div>
         <a :href="status.detailsPath" class="gl-mr-auto">
-          <ci-icon :status="status" :size="16" />
+          <ci-icon :status="status" :size="16" data-testid="pipeline-status-icon" />
         </a>
         <span class="gl-font-weight-bold">
           <gl-sprintf :message="$options.i18n.pipelineInfo">
             <template #id="{ content }">
-              <gl-link
-                :href="status.detailsPath"
-                class="pipeline-id gl-font-weight-normal pipeline-number"
-                target="_blank"
-                data-testid="pipeline-id"
-              >
-                {{ content }}{{ pipelineId }}</gl-link
-              >
+              <span data-testid="pipeline-id"> {{ content }}{{ pipelineId }} </span>
             </template>
             <template #status>{{ status.text }}</template>
             <template #commit>
@@ -157,8 +155,13 @@ export default {
           </gl-sprintf>
         </span>
       </div>
-      <div>
+      <div class="gl-display-flex gl-flex-wrap">
+        <pipeline-editor-mini-graph
+          v-if="glFeatures.pipelineEditorMiniGraph"
+          :pipeline="pipeline"
+        />
         <gl-button
+          class="gl-mt-2 gl-md-mt-0"
           target="_blank"
           category="secondary"
           variant="confirm"
diff --git a/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue b/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
index fbb66231f16..dcd08c9de8d 100644
--- a/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
+++ b/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
@@ -2,7 +2,6 @@
 import { GlButton, GlSprintf } from '@gitlab/ui';
 import { __ } from '~/locale';
 import PipelineEditorFileNav from '~/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
@@ -17,17 +16,11 @@ export default {
     ),
     btnText: __('Create new CI/CD pipeline'),
   },
-  mixins: [glFeatureFlagsMixin()],
   inject: {
     emptyStateIllustrationPath: {
       default: '',
     },
   },
-  computed: {
-    showCTAButton() {
-      return this.glFeatures.pipelineEditorEmptyStateAction;
-    },
-  },
   methods: {
     createEmptyConfigFile() {
       this.$emit('createEmptyConfigFile');
@@ -48,12 +41,7 @@ export default {
           </template>
         </gl-sprintf>
       </p>
-      <gl-button
-        v-if="showCTAButton"
-        variant="confirm"
-        class="gl-mt-3"
-        @click="createEmptyConfigFile"
-      >
+      <gl-button variant="confirm" class="gl-mt-3" @click="createEmptyConfigFile">
         {{ $options.i18n.btnText }}
       </gl-button>
     </div>
diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline.graphql
index d3a7387ad2d..0c3653a2880 100644
--- a/app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline.graphql
+++ b/app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline.graphql
@@ -11,6 +11,25 @@ query getPipeline($fullPath: ID!, $sha: String!) {
         group
         text
       }
+      stages {
+        edges {
+          node {
+            id
+            name
+            status
+            detailedStatus {
+              detailsPath
+              group
+              hasDetails
+              icon
+              id
+              label
+              text
+              tooltip
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
index 4324c64ab3b..ba567023946 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
@@ -1,5 +1,4 @@
 <script>
-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';
@@ -15,7 +14,6 @@ export default {
     PipelineEditorHeader,
     PipelineEditorTabs,
   },
-  mixins: [glFeatureFlagMixin()],
   props: {
     ciConfigData: {
       type: Object,
@@ -44,9 +42,6 @@ export default {
     showCommitForm() {
       return TABS_WITH_COMMIT_FORM.includes(this.currentTab);
     },
-    showPipelineDrawer() {
-      return this.glFeatures.pipelineEditorDrawer;
-    },
   },
   methods: {
     setCurrentTab(tabName) {
@@ -77,6 +72,6 @@ export default {
       :commit-sha="commitSha"
       v-on="$listeners"
     />
-    <pipeline-editor-drawer v-if="showPipelineDrawer" />
+    <pipeline-editor-drawer />
   </div>
 </template>