Add latest changes from gitlab-org/gitlab@master

8 files changed, 150 insertions, 57 deletions

diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js
new file mode 100644
index 00000000000..70bab8092c0
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/constants.js
@@ -0,0 +1,2 @@
+export const CI_CONFIG_STATUS_VALID = 'VALID';
+export const CI_CONFIG_STATUS_INVALID = 'INVALID';
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
index 8a57c9b1970..96dc782964b 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
@@ -2,6 +2,7 @@
 import { GlAlert, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import { mergeUrlParams, redirectTo, refreshCurrentPage } from '~/lib/utils/url_utility';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import CommitForm from './components/commit/commit_form.vue';
@@ -31,6 +32,7 @@ export default {
     PipelineGraph,
     TextEditor,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     projectPath: {
       type: String,
@@ -115,6 +117,9 @@ export default {
     isBlobContentLoading() {
       return this.$apollo.queries.content.loading;
     },
+    isVisualizationTabLoading() {
+      return this.$apollo.queries.ciConfigData.loading;
+    },
     isVisualizeTabActive() {
       return this.currentTabIndex === 1;
     },
@@ -266,8 +271,14 @@ export default {
             <text-editor v-model="contentModel" @editor-ready="editorIsReady = true" />
           </gl-tab>
 
-          <gl-tab :title="$options.i18n.tabGraph" :lazy="!isVisualizeTabActive">
-            <pipeline-graph :pipeline-data="ciConfigData" />
+          <gl-tab
+            v-if="glFeatures.ciConfigVisualizationTab"
+            :title="$options.i18n.tabGraph"
+            :lazy="!isVisualizeTabActive"
+            data-testid="visualization-tab"
+          >
+            <gl-loading-icon v-if="isVisualizationTabLoading" size="lg" class="gl-m-3" />
+            <pipeline-graph v-else :pipeline-data="ciConfigData" />
           </gl-tab>
         </gl-tabs>
       </div>
diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/drawing_utils.js b/app/assets/javascripts/pipelines/components/pipeline_graph/drawing_utils.js
index 45940d4a39c..35230e1511b 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_graph/drawing_utils.js
+++ b/app/assets/javascripts/pipelines/components/pipeline_graph/drawing_utils.js
@@ -1,5 +1,5 @@
 import * as d3 from 'd3';
-import { createUniqueJobId } from '../../utils';
+import { createUniqueLinkId } from '../../utils';
 /**
  * This function expects its first argument data structure
  * to be the same shaped as the one generated by `parseData`,
@@ -12,13 +12,13 @@ import { createUniqueJobId } from '../../utils';
  * @returns {Array} Links that contain all the information about them
  */
 
-export const generateLinksData = ({ links }, jobs, containerID) => {
+export const generateLinksData = ({ links }, containerID) => {
   const containerEl = document.getElementById(containerID);
   return links.map(link => {
     const path = d3.path();
 
-    const sourceId = jobs[link.source].id;
-    const targetId = jobs[link.target].id;
+    const sourceId = link.source;
+    const targetId = link.target;
 
     const sourceNodeEl = document.getElementById(sourceId);
     const targetNodeEl = document.getElementById(targetId);
@@ -89,7 +89,7 @@ export const generateLinksData = ({ links }, jobs, containerID) => {
       ...link,
       source: sourceId,
       target: targetId,
-      ref: createUniqueJobId(sourceId, targetId),
+      ref: createUniqueLinkId(sourceId, targetId),
       path: path.toString(),
     };
   });
diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue b/app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue
index a0c35f54c0e..51a95612d3f 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue
@@ -10,10 +10,6 @@ export default {
       type: String,
       required: true,
     },
-    jobId: {
-      type: String,
-      required: true,
-    },
     isHighlighted: {
       type: Boolean,
       required: false,
@@ -45,7 +41,7 @@ export default {
   },
   methods: {
     onMouseEnter() {
-      this.$emit('on-mouse-enter', this.jobId);
+      this.$emit('on-mouse-enter', this.jobName);
     },
     onMouseLeave() {
       this.$emit('on-mouse-leave');
@@ -56,7 +52,7 @@ export default {
 <template>
   <tooltip-on-truncate :title="jobName" truncate-target="child" placement="top">
     <div
-      :id="jobId"
+      :id="jobName"
       class="gl-w-15 gl-bg-white gl-text-center gl-text-truncate gl-rounded-pill gl-mb-3 gl-px-5 gl-py-2 gl-relative gl-z-index-1 gl-transition-duration-slow gl-transition-timing-function-ease"
       :class="jobPillClasses"
       @mouseover="onMouseEnter"
diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
index 11ad2f2a3b6..73e5f2542fb 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
@@ -6,8 +6,10 @@ import JobPill from './job_pill.vue';
 import StagePill from './stage_pill.vue';
 import { generateLinksData } from './drawing_utils';
 import { parseData } from '../parsing_utils';
-import { DRAW_FAILURE, DEFAULT } from '../../constants';
-import { generateJobNeedsDict } from '../../utils';
+import { unwrapArrayOfJobs } from '../unwrapping_utils';
+import { DRAW_FAILURE, DEFAULT, INVALID_CI_CONFIG, EMPTY_PIPELINE_DATA } from '../../constants';
+import { createJobsHash, generateJobNeedsDict } from '../../utils';
+import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
 
 export default {
   components: {
@@ -22,6 +24,12 @@ export default {
     [DRAW_FAILURE]: __('Could not draw the lines for job relationships'),
     [DEFAULT]: __('An unknown error occurred.'),
   },
+  warningTexts: {
+    [EMPTY_PIPELINE_DATA]: __(
+      'The visualization will appear in this tab when the CI/CD configuration file is populated with valid syntax.',
+    ),
+    [INVALID_CI_CONFIG]: __('Your CI configuration file is invalid.'),
+  },
   props: {
     pipelineData: {
       required: true,
@@ -40,18 +48,51 @@ export default {
   },
   computed: {
     isPipelineDataEmpty() {
-      return isEmpty(this.pipelineData);
+      return !this.isInvalidCiConfig && isEmpty(this.pipelineData?.stages);
+    },
+    isInvalidCiConfig() {
+      return this.pipelineData?.status === CI_CONFIG_STATUS_INVALID;
+    },
+    showAlert() {
+      return this.hasError || this.hasWarning;
     },
     hasError() {
       return this.failureType;
     },
+    hasWarning() {
+      return this.warning;
+    },
     hasHighlightedJob() {
       return Boolean(this.highlightedJob);
     },
+    alert() {
+      if (this.hasError) {
+        return this.failure;
+      }
+
+      return this.warning;
+    },
     failure() {
       const text = this.$options.errorTexts[this.failureType] || this.$options.errorTexts[DEFAULT];
 
-      return { text, variant: 'danger' };
+      return { text, variant: 'danger', dismissible: true };
+    },
+    warning() {
+      if (this.isPipelineDataEmpty) {
+        return {
+          text: this.$options.warningTexts[EMPTY_PIPELINE_DATA],
+          variant: 'tip',
+          dismissible: false,
+        };
+      } else if (this.isInvalidCiConfig) {
+        return {
+          text: this.$options.warningTexts[INVALID_CI_CONFIG],
+          variant: 'danger',
+          dismissible: false,
+        };
+      }
+
+      return null;
     },
     viewBox() {
       return [0, 0, this.width, this.height];
@@ -80,19 +121,21 @@ export default {
     },
   },
   mounted() {
-    if (!this.isPipelineDataEmpty) {
-      this.getGraphDimensions();
-      this.drawJobLinks();
+    if (!this.isPipelineDataEmpty && !this.isInvalidCiConfig) {
+      // This guarantee that all sub-elements are rendered
+      // https://v3.vuejs.org/api/options-lifecycle-hooks.html#mounted
+      this.$nextTick(() => {
+        this.getGraphDimensions();
+        this.prepareLinkData();
+      });
     }
   },
   methods: {
-    drawJobLinks() {
-      const { stages, jobs } = this.pipelineData;
-      const unwrappedGroups = this.unwrapPipelineData(stages);
-
+    prepareLinkData() {
       try {
-        const parsedData = parseData(unwrappedGroups);
-        this.links = generateLinksData(parsedData, jobs, this.$options.CONTAINER_ID);
+        const arrayOfJobs = unwrapArrayOfJobs(this.pipelineData);
+        const parsedData = parseData(arrayOfJobs);
+        this.links = generateLinksData(parsedData, this.$options.CONTAINER_ID);
       } catch {
         this.reportFailure(DRAW_FAILURE);
       }
@@ -119,7 +162,8 @@ export default {
       // The first time we hover, we create the object where
       // we store all the data to properly highlight the needs.
       if (!this.needsObject) {
-        this.needsObject = generateJobNeedsDict(this.pipelineData) ?? {};
+        const jobs = createJobsHash(this.pipelineData);
+        this.needsObject = generateJobNeedsDict(jobs) ?? {};
       }
 
       this.highlightedJob = uniqueJobId;
@@ -127,18 +171,9 @@ export default {
     removeHighlightNeeds() {
       this.highlightedJob = null;
     },
-    unwrapPipelineData(stages) {
-      return stages
-        .map(({ name, groups }) => {
-          return groups.map(group => {
-            return { category: name, ...group };
-          });
-        })
-        .flat(2);
-    },
     getGraphDimensions() {
-      this.width = `${this.$refs[this.$options.CONTAINER_REF].scrollWidth}px`;
-      this.height = `${this.$refs[this.$options.CONTAINER_REF].scrollHeight}px`;
+      this.width = `${this.$refs[this.$options.CONTAINER_REF].scrollWidth}`;
+      this.height = `${this.$refs[this.$options.CONTAINER_REF].scrollHeight}`;
     },
     reportFailure(errorType) {
       this.failureType = errorType;
@@ -163,21 +198,20 @@ export default {
 </script>
 <template>
   <div>
-    <gl-alert v-if="hasError" :variant="failure.variant" @dismiss="resetFailure">
-      {{ failure.text }}
-    </gl-alert>
-    <gl-alert v-if="isPipelineDataEmpty" variant="tip" :dismissible="false">
-      {{
-        __(
-          'The visualization will appear in this tab when the CI/CD configuration file is populated with valid syntax.',
-        )
-      }}
+    <gl-alert
+      v-if="showAlert"
+      :variant="alert.variant"
+      :dismissible="alert.dismissible"
+      @dismiss="alert.dismissible ? resetFailure : null"
+    >
+      {{ alert.text }}
     </gl-alert>
     <div
-      v-else
+      v-if="!hasWarning"
       :id="$options.CONTAINER_ID"
       :ref="$options.CONTAINER_REF"
       class="gl-display-flex gl-bg-gray-50 gl-px-4 gl-overflow-auto gl-relative gl-py-7"
+      data-testid="graph-container"
     >
       <svg :viewBox="viewBox" :width="width" :height="height" class="gl-absolute">
         <template>
@@ -210,10 +244,9 @@ export default {
           <job-pill
             v-for="group in stage.groups"
             :key="group.name"
-            :job-id="group.id"
             :job-name="group.name"
-            :is-highlighted="hasHighlightedJob && isJobHighlighted(group.id)"
-            :is-faded-out="hasHighlightedJob && !isJobHighlighted(group.id)"
+            :is-highlighted="hasHighlightedJob && isJobHighlighted(group.name)"
+            :is-faded-out="hasHighlightedJob && !isJobHighlighted(group.name)"
             @on-mouse-enter="highlightNeeds"
             @on-mouse-leave="removeHighlightNeeds"
           />
diff --git a/app/assets/javascripts/pipelines/components/unwrapping_utils.js b/app/assets/javascripts/pipelines/components/unwrapping_utils.js
index 99934cd5014..aa33f622ce6 100644
--- a/app/assets/javascripts/pipelines/components/unwrapping_utils.js
+++ b/app/assets/javascripts/pipelines/components/unwrapping_utils.js
@@ -1,3 +1,20 @@
+/**
+ * This function takes the stages and add the stage name
+ * at the group level as `category` to have an easier
+ * implementation while constructions nodes with D3
+ * @param {Array} stages
+ * @returns {Array} - Array of stages with stage name at the group level as `category`
+ */
+export const unwrapArrayOfJobs = (stages = []) => {
+  return stages
+    .map(({ name, groups }) => {
+      return groups.map(group => {
+        return { category: name, ...group };
+      });
+    })
+    .flat(2);
+};
+
 const unwrapGroups = stages => {
   return stages.map(stage => {
     const {
diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
index 607e7a66f44..757d285ef19 100644
--- a/app/assets/javascripts/pipelines/constants.js
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -28,6 +28,8 @@ export const RAW_TEXT_WARNING = s__(
 export const DEFAULT = 'default';
 export const DELETE_FAILURE = 'delete_pipeline_failure';
 export const DRAW_FAILURE = 'draw_failure';
+export const EMPTY_PIPELINE_DATA = 'empty_data';
+export const INVALID_CI_CONFIG = 'invalid_ci_config';
 export const LOAD_FAILURE = 'load_failure';
 export const PARSE_FAILURE = 'parse_failure';
 export const POST_FAILURE = 'post_failure';
diff --git a/app/assets/javascripts/pipelines/utils.js b/app/assets/javascripts/pipelines/utils.js
index 46e54bfb4ff..28d6c0edb0f 100644
--- a/app/assets/javascripts/pipelines/utils.js
+++ b/app/assets/javascripts/pipelines/utils.js
@@ -5,9 +5,42 @@ export const validateParams = params => {
   return pickBy(params, (val, key) => SUPPORTED_FILTER_PARAMETERS.includes(key) && val);
 };
 
-export const createUniqueJobId = (stageName, jobName) => `${stageName}-${jobName}`;
+export const createUniqueLinkId = (stageName, jobName) => `${stageName}-${jobName}`;
 
-export const generateJobNeedsDict = ({ jobs }) => {
+/**
+ * This function takes the stages array and transform it
+ * into a hash where each key is a job name and the job data
+ * is associated to that key.
+ * @param {Array} stages
+ * @returns {Object} - Hash of jobs
+ */
+export const createJobsHash = (stages = []) => {
+  const jobsHash = {};
+
+  stages.forEach(stage => {
+    if (stage.groups.length > 0) {
+      stage.groups.forEach(group => {
+        group.jobs.forEach(job => {
+          jobsHash[job.name] = job;
+        });
+      });
+    }
+  });
+
+  return jobsHash;
+};
+
+/**
+ * This function takes the jobs hash generated by
+ * `createJobsHash` function and returns an easier
+ * structure to work with for needs relationship
+ * where the key is the job name and the value is an
+ * array of all the needs this job has recursively
+ * (includes the needs of the needs)
+ * @param {Object} jobs
+ * @returns {Object} - Hash of jobs and array of needs
+ */
+export const generateJobNeedsDict = (jobs = {}) => {
   const arrOfJobNames = Object.keys(jobs);
 
   return arrOfJobNames.reduce((acc, value) => {
@@ -18,13 +51,12 @@ export const generateJobNeedsDict = ({ jobs }) => {
 
       return jobs[jobName].needs
         .map(job => {
-          const { id } = jobs[job];
           // If we already have the needs of a job in the accumulator,
           // then we use the memoized data instead of the recursive call
           // to save some performance.
-          const newNeeds = acc[id] ?? recursiveNeeds(job);
+          const newNeeds = acc[job] ?? recursiveNeeds(job);
 
-          return [id, ...newNeeds];
+          return [job, ...newNeeds];
         })
         .flat(Infinity);
     };
@@ -34,6 +66,6 @@ export const generateJobNeedsDict = ({ jobs }) => {
     // duplicates from the array.
     const uniqueValues = Array.from(new Set(recursiveNeeds(value)));
 
-    return { ...acc, [jobs[value].id]: uniqueValues };
+    return { ...acc, [value]: uniqueValues };
   }, {});
 };