Implement CI config viz in new editor home

We connect the visualize tab with the new graphQL
API for linting so that our visualization relies
on the data that comes from the API.

app/assets/javascripts/pipeline_editor/constants.js

+export const CI_CONFIG_STATUS_VALID = 'VALID';
+export const CI_CONFIG_STATUS_INVALID = 'INVALID';

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>

app/assets/javascripts/pipelines/components/pipeline_graph/drawing_utils.js

 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(),
     };
   });

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"

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) {
+    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.drawJobLinks();
+        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"
           />

app/assets/javascripts/pipelines/components/unwrapping_utils.js

+/**
+ * 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 {

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';

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 };
   }, {});
 };

app/controllers/projects/ci/pipeline_editor_controller.rb

@@ -2,6 +2,9 @@
 
 class Projects::Ci::PipelineEditorController < Projects::ApplicationController
   before_action :check_can_collaborate!
+  before_action do
+    push_frontend_feature_flag(:ci_config_visualization_tab, @project, default_enabled: false)
+  end
 
   feature_category :pipeline_authoring
 

config/feature_flags/development/ci_config_visualization_tab.yml

+---
+name: ci_config_visualization_tab
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/48793
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/290117
+milestone: '13.7'
+type: development
+group: group::pipeline authoring
+default_enabled: false

doc/ci/yaml/visualization.md

@@ -7,6 +7,7 @@ info: To determine the technical writer assigned to the Stage/Group associated w
 # Visualize your CI/CD configuration
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/241722) in GitLab 13.5.
+> - [Moved to **CI/CD > Editor**](https://gitlab.com/gitlab-org/gitlab/-/issues/263141) in GitLab 13.7.
 > - It's [deployed behind a feature flag](../../user/feature_flags.md), disabled by default.
 > - It's disabled on GitLab.com.
 > - It's not recommended for production use.
@@ -15,16 +16,15 @@ info: To determine the technical writer assigned to the Stage/Group associated w
 WARNING:
 This feature might not be available to you. Check the **version history** note above for details.
 
-To see a visualization of your `gitlab-ci.yml` configuration, navigate to any CI/CD
-configuration file and click on the `Visualization` tab. The visualization shows
-all stages and jobs. [`needs`](README.md#needs) relationships are displayed as lines
-connecting jobs together, showing the hierarchy of execution:
+To see a visualization of your `gitlab-ci.yml` configuration, navigate to **CI/CD > Editor**
+and select the `Visualization` tab. The visualization shows all stages and jobs. 
+[`needs`](README.md#needs) relationships are displayed as lines connecting jobs together, showing the hierarchy of execution:
 
-![CI Configuration Visualization](img/ci_config_visualization_v13_5.png)
+![CI Config Visualization](img/ci_config_visualization_v13_7.png)
 
 Hovering on a job highlights its `needs` relationships:
 
-![CI Configuration Visualization on hover](img/ci_config_visualization_hover_v13_5.png)
+![CI Config Visualization on hover](img/ci_config_visualization_hover_v13_7.png)
 
 If the configuration does not have any `needs` relationships, then no lines are drawn because
 each job depends only on the previous stage being completed successfully.
@@ -42,11 +42,11 @@ can enable it.
 To enable it:
 
 ```ruby
-Feature.enable(:gitlab_ci_yml_preview)
+Feature.enable(:ci_config_visualization_tab)
 ```
 
 To disable it:
 
 ```ruby
-Feature.disable(:gitlab_ci_yml_preview)
+Feature.disable(:ci_config_visualization_tab)
 ```

locale/gitlab.pot

@@ -32062,6 +32062,9 @@ msgstr ""
 msgid "Your %{strong}%{plan_name}%{strong_close} subscription will expire on %{strong}%{expires_on}%{strong_close}. After that, you will not be able to create issues or merge requests as well as many other features."
 msgstr ""
 
+msgid "Your CI configuration file is invalid."
+msgstr ""
+
 msgid "Your CSV export has started. It will be emailed to %{email} when complete."
 msgstr ""
 

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -51,9 +51,15 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
 
   const createComponent = ({
     props = {},
-    loading = false,
+    blobLoading = false,
+    lintLoading = false,
     options = {},
     mountFn = shallowMount,
+    provide = {
+      glFeatures: {
+        ciConfigVisualizationTab: true,
+      },
+    },
   } = {}) => {
     mockMutate = jest.fn().mockResolvedValue({
       data: {
@@ -73,6 +79,7 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
         newMergeRequestPath: mockNewMergeRequestPath,
         ...props,
       },
+      provide,
       stubs: {
         GlTabs,
         GlButton,
@@ -86,7 +93,10 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
         $apollo: {
           queries: {
             content: {
-              loading,
+              loading: blobLoading,
+            },
+            ciConfigData: {
+              loading: lintLoading,
             },
           },
           mutate: mockMutate,
@@ -124,9 +134,12 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
 
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findAlert = () => wrapper.find(GlAlert);
+  const findBlobFailureAlert = () => wrapper.find(GlAlert);
   const findTabAt = i => wrapper.findAll(GlTab).at(i);
+  const findVisualizationTab = () => wrapper.find('[data-testid="visualization-tab"]');
   const findTextEditor = () => wrapper.find(TextEditor);
   const findCommitForm = () => wrapper.find(CommitForm);
+  const findPipelineGraph = () => wrapper.find(PipelineGraph);
   const findCommitBtnLoadingIcon = () => wrapper.find('[type="submit"]').find(GlLoadingIcon);
 
   beforeEach(() => {
@@ -145,32 +158,28 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
     wrapper = null;
   });
 
-  it('displays a loading icon if the query is loading', () => {
-    createComponent({ loading: true });
+  it('displays a loading icon if the blob query is loading', () => {
+    createComponent({ blobLoading: true });
 
     expect(findLoadingIcon().exists()).toBe(true);
     expect(findTextEditor().exists()).toBe(false);
   });
 
   describe('tabs', () => {
+    describe('editor tab', () => {
       beforeEach(() => {
         createComponent();
       });
 
-    it('displays tabs and their content', async () => {
+      it('displays the tab and its content', async () => {
         expect(
           findTabAt(0)
             .find(TextEditor)
             .exists(),
         ).toBe(true);
-      expect(
-        findTabAt(1)
-          .find(PipelineGraph)
-          .exists(),
-      ).toBe(true);
       });
 
-    it('displays editor tab lazily, until editor is ready', async () => {
+      it('displays tab lazily, until editor is ready', async () => {
         expect(findTabAt(0).attributes('lazy')).toBe('true');
 
         findTextEditor().vm.$emit('editor-ready');
@@ -181,6 +190,36 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
       });
     });
 
+    describe('visualization tab', () => {
+      describe('with feature flag on', () => {
+        beforeEach(() => {
+          createComponent();
+        });
+
+        it('display the tab', () => {
+          expect(findVisualizationTab().exists()).toBe(true);
+        });
+
+        it('displays a loading icon if the lint query is loading', () => {
+          createComponent({ lintLoading: true });
+
+          expect(findLoadingIcon().exists()).toBe(true);
+          expect(findPipelineGraph().exists()).toBe(false);
+        });
+      });
+
+      describe('with feature flag off', () => {
+        beforeEach(() => {
+          createComponent({ provide: { glFeatures: { ciConfigVisualizationTab: false } } });
+        });
+
+        it('does not display the tab', () => {
+          expect(findVisualizationTab().exists()).toBe(false);
+        });
+      });
+    });
+  });
+
   describe('when data is set', () => {
     beforeEach(async () => {
       createComponent({ mountFn: mount });
@@ -359,7 +398,7 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
 
       await waitForPromises();
 
-      expect(findAlert().exists()).toBe(false);
+      expect(findBlobFailureAlert().exists()).toBe(false);
       expect(findTextEditor().attributes('value')).toBe(mockCiYml);
     });
 
@@ -373,7 +412,9 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
 
       await waitForPromises();
 
-      expect(findAlert().text()).toMatch('No CI file found in this repository, please add one.');
+      expect(findBlobFailureAlert().text()).toBe(
+        'No CI file found in this repository, please add one.',
+      );
     });
 
     it('shows a 400 error message', async () => {
@@ -386,7 +427,7 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
 
       await waitForPromises();
 
-      expect(findAlert().text()).toMatch(
+      expect(findBlobFailureAlert().text()).toBe(
         'Repository does not have a default branch, please set one.',
       );
     });
@@ -396,7 +437,9 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
       createComponentWithApollo();
       await waitForPromises();
 
-      expect(findAlert().text()).toMatch('The CI configuration was not loaded, please try again.');
+      expect(findBlobFailureAlert().text()).toBe(
+        'The CI configuration was not loaded, please try again.',
+      );
     });
   });
 });

spec/frontend/pipelines/pipeline_graph/mock_data.js

-import { createUniqueJobId } from '~/pipelines/utils';
+import { createUniqueLinkId } from '~/pipelines/utils';
 
 export const yamlString = `stages:
 - empty
@@ -41,10 +41,10 @@ deploy_a:
   script: echo hello
 `;
 
-const jobId1 = createUniqueJobId('build', 'build_1');
-const jobId2 = createUniqueJobId('test', 'test_1');
-const jobId3 = createUniqueJobId('test', 'test_2');
-const jobId4 = createUniqueJobId('deploy', 'deploy_1');
+const jobId1 = createUniqueLinkId('build', 'build_1');
+const jobId2 = createUniqueLinkId('test', 'test_1');
+const jobId3 = createUniqueLinkId('test', 'test_2');
+const jobId4 = createUniqueLinkId('deploy', 'deploy_1');
 
 export const pipelineData = {
   stages: [

spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlAlert } from '@gitlab/ui';
 import { pipelineData, singleStageData } from './mock_data';
+import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
+import { DRAW_FAILURE, EMPTY_PIPELINE_DATA, INVALID_CI_CONFIG } from '~/pipelines/constants';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import StagePill from '~/pipelines/components/pipeline_graph/stage_pill.vue';
 import JobPill from '~/pipelines/components/pipeline_graph/job_pill.vue';
@@ -8,15 +11,16 @@ describe('pipeline graph component', () => {
   const defaultProps = { pipelineData };
   let wrapper;
 
-  const createComponent = props => {
+  const createComponent = (props = defaultProps) => {
     return shallowMount(PipelineGraph, {
       propsData: {
-        ...defaultProps,
         ...props,
       },
     });
   };
 
+  const findPipelineGraph = () => wrapper.find('[data-testid="graph-container"]');
+  const findAlert = () => wrapper.find(GlAlert);
   const findAllStagePills = () => wrapper.findAll(StagePill);
   const findAllStageBackgroundElements = () => wrapper.findAll('[data-testid="stage-background"]');
   const findStageBackgroundElementAt = index => findAllStageBackgroundElements().at(index);
@@ -33,54 +37,92 @@ describe('pipeline graph component', () => {
     });
 
     it('renders an empty section', () => {
-      expect(wrapper.text()).toContain(
-        'The visualization will appear in this tab when the CI/CD configuration file is populated with valid syntax.',
-      );
+      expect(wrapper.text()).toBe(wrapper.vm.$options.warningTexts[EMPTY_PIPELINE_DATA]);
+      expect(findPipelineGraph().exists()).toBe(false);
       expect(findAllStagePills()).toHaveLength(0);
       expect(findAllJobPills()).toHaveLength(0);
     });
   });
 
-  describe('with data', () => {
+  describe('with `INVALID` status', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ pipelineData: { status: CI_CONFIG_STATUS_INVALID } });
+    });
+
+    it('renders an error message and does not render the graph', () => {
+      expect(findAlert().exists()).toBe(true);
+      expect(findAlert().text()).toBe(wrapper.vm.$options.warningTexts[INVALID_CI_CONFIG]);
+      expect(findPipelineGraph().exists()).toBe(false);
+    });
+  });
+
+  describe('without `INVALID` status', () => {
     beforeEach(() => {
       wrapper = createComponent();
     });
 
+    it('renders the graph with no status error', () => {
+      expect(findAlert().text()).not.toBe(wrapper.vm.$options.warningTexts[INVALID_CI_CONFIG]);
+      expect(findPipelineGraph().exists()).toBe(true);
+    });
+  });
+
+  describe('with error while rendering the links', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('renders the error that link could not be drawn', () => {
+      expect(findAlert().exists()).toBe(true);
+      expect(findAlert().text()).toBe(wrapper.vm.$options.errorTexts[DRAW_FAILURE]);
+    });
+  });
+
+  describe('with only one stage', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ pipelineData: singleStageData });
+    });
+
     it('renders the right number of stage pills', () => {
-      const expectedStagesLength = pipelineData.stages.length;
+      const expectedStagesLength = singleStageData.stages.length;
 
       expect(findAllStagePills()).toHaveLength(expectedStagesLength);
     });
 
+    it('renders the right number of job pills', () => {
+      // We count the number of jobs in the mock data
+      const expectedJobsLength = singleStageData.stages.reduce((acc, val) => {
+        return acc + val.groups.length;
+      }, 0);
+
+      expect(findAllJobPills()).toHaveLength(expectedJobsLength);
+    });
+
+    describe('rounds corner', () => {
       it.each`
         cssClass                       | expectedState
         ${'gl-rounded-bottom-left-6'}  | ${true}
         ${'gl-rounded-top-left-6'}     | ${true}
-      ${'gl-rounded-top-right-6'}    | ${false}
-      ${'gl-rounded-bottom-right-6'} | ${false}
-    `(
-      'rounds corner: $class should be $expectedState on the first element',
-      ({ cssClass, expectedState }) => {
+        ${'gl-rounded-top-right-6'}    | ${true}
+        ${'gl-rounded-bottom-right-6'} | ${true}
+      `('$cssClass should be $expectedState on the only element', ({ cssClass, expectedState }) => {
         const classes = findStageBackgroundElementAt(0).classes();
 
         expect(classes.includes(cssClass)).toBe(expectedState);
-      },
-    );
+      });
+    });
+  });
 
-    it.each`
-      cssClass                       | expectedState
-      ${'gl-rounded-bottom-left-6'}  | ${false}
-      ${'gl-rounded-top-left-6'}     | ${false}
-      ${'gl-rounded-top-right-6'}    | ${true}
-      ${'gl-rounded-bottom-right-6'} | ${true}
-    `(
-      'rounds corner: $class should be $expectedState on the last element',
-      ({ cssClass, expectedState }) => {
-        const classes = findStageBackgroundElementAt(pipelineData.stages.length - 1).classes();
+  describe('with multiple stages and jobs', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
 
-        expect(classes.includes(cssClass)).toBe(expectedState);
-      },
-    );
+    it('renders the right number of stage pills', () => {
+      const expectedStagesLength = pipelineData.stages.length;
+
+      expect(findAllStagePills()).toHaveLength(expectedStagesLength);
+    });
 
     it('renders the right number of job pills', () => {
       // We count the number of jobs in the mock data
@@ -90,26 +132,34 @@ describe('pipeline graph component', () => {
 
       expect(findAllJobPills()).toHaveLength(expectedJobsLength);
     });
-  });
-
-  describe('with only one stage', () => {
-    beforeEach(() => {
-      wrapper = createComponent({ pipelineData: singleStageData });
-    });
 
+    describe('rounds corner', () => {
       it.each`
         cssClass                       | expectedState
         ${'gl-rounded-bottom-left-6'}  | ${true}
         ${'gl-rounded-top-left-6'}     | ${true}
-      ${'gl-rounded-top-right-6'}    | ${true}
-      ${'gl-rounded-bottom-right-6'} | ${true}
+        ${'gl-rounded-top-right-6'}    | ${false}
+        ${'gl-rounded-bottom-right-6'} | ${false}
       `(
-      'rounds corner: $class should be $expectedState on the only element',
+        '$cssClass should be $expectedState on the first element',
         ({ cssClass, expectedState }) => {
           const classes = findStageBackgroundElementAt(0).classes();
 
           expect(classes.includes(cssClass)).toBe(expectedState);
         },
       );
+
+      it.each`
+        cssClass                       | expectedState
+        ${'gl-rounded-bottom-left-6'}  | ${false}
+        ${'gl-rounded-top-left-6'}     | ${false}
+        ${'gl-rounded-top-right-6'}    | ${true}
+        ${'gl-rounded-bottom-right-6'} | ${true}
+      `('$cssClass should be $expectedState on the last element', ({ cssClass, expectedState }) => {
+        const classes = findStageBackgroundElementAt(pipelineData.stages.length - 1).classes();
+
+        expect(classes.includes(cssClass)).toBe(expectedState);
+      });
+    });
   });
 });

spec/frontend/pipelines/pipeline_graph/utils_spec.js

-import { createUniqueJobId, generateJobNeedsDict } from '~/pipelines/utils';
+import { createJobsHash, generateJobNeedsDict } from '~/pipelines/utils';
 
 describe('utils functions', () => {
   const jobName1 = 'build_1';
   const jobName2 = 'build_2';
   const jobName3 = 'test_1';
   const jobName4 = 'deploy_1';
-  const job1 = { script: 'echo hello', stage: 'build' };
-  const job2 = { script: 'echo build', stage: 'build' };
-  const job3 = { script: 'echo test', stage: 'test', needs: [jobName1, jobName2] };
-  const job4 = { script: 'echo deploy', stage: 'deploy', needs: [jobName3] };
+  const job1 = { name: jobName1, script: 'echo hello', stage: 'build' };
+  const job2 = { name: jobName2, script: 'echo build', stage: 'build' };
+  const job3 = {
+    name: jobName3,
+    script: 'echo test',
+    stage: 'test',
+    needs: [jobName1, jobName2],
+  };
+  const job4 = {
+    name: jobName4,
+    script: 'echo deploy',
+    stage: 'deploy',
+    needs: [jobName3],
+  };
   const userDefinedStage = 'myStage';
 
   const pipelineGraphData = {
@@ -23,7 +33,6 @@ describe('utils functions', () => {
           {
             name: jobName4,
             jobs: [{ ...job4 }],
-            id: createUniqueJobId(job4.stage, jobName4),
           },
         ],
       },
@@ -33,12 +42,10 @@ describe('utils functions', () => {
           {
             name: jobName1,
             jobs: [{ ...job1 }],
-            id: createUniqueJobId(job1.stage, jobName1),
           },
           {
             name: jobName2,
             jobs: [{ ...job2 }],
-            id: createUniqueJobId(job2.stage, jobName2),
           },
         ],
       },
@@ -48,49 +55,59 @@ describe('utils functions', () => {
           {
             name: jobName3,
             jobs: [{ ...job3 }],
-            id: createUniqueJobId(job3.stage, jobName3),
           },
         ],
       },
     ],
-    jobs: {
-      [jobName1]: { ...job1, id: createUniqueJobId(job1.stage, jobName1) },
-      [jobName2]: { ...job2, id: createUniqueJobId(job2.stage, jobName2) },
-      [jobName3]: { ...job3, id: createUniqueJobId(job3.stage, jobName3) },
-      [jobName4]: { ...job4, id: createUniqueJobId(job4.stage, jobName4) },
-    },
   };
 
+  describe('createJobsHash', () => {
+    it('returns an empty object if there are no jobs received as argument', () => {
+      expect(createJobsHash([])).toEqual({});
+    });
+
+    it('returns a hash with the jobname as key and all its data as value', () => {
+      const jobs = {
+        [jobName1]: job1,
+        [jobName2]: job2,
+        [jobName3]: job3,
+        [jobName4]: job4,
+      };
+
+      expect(createJobsHash(pipelineGraphData.stages)).toEqual(jobs);
+    });
+  });
+
   describe('generateJobNeedsDict', () => {
     it('generates an empty object if it receives no jobs', () => {
-      expect(generateJobNeedsDict({ jobs: {} })).toEqual({});
+      expect(generateJobNeedsDict({})).toEqual({});
     });
 
     it('generates a dict with empty needs if there are no dependencies', () => {
       const smallGraph = {
-        jobs: {
-          [jobName1]: { ...job1, id: createUniqueJobId(job1.stage, jobName1) },
-          [jobName2]: { ...job2, id: createUniqueJobId(job2.stage, jobName2) },
-        },
+        [jobName1]: job1,
+        [jobName2]: job2,
       };
 
       expect(generateJobNeedsDict(smallGraph)).toEqual({
-        [pipelineGraphData.jobs[jobName1].id]: [],
-        [pipelineGraphData.jobs[jobName2].id]: [],
+        [jobName1]: [],
+        [jobName2]: [],
       });
     });
 
     it('generates a dict where key is the a job and its value is an array of all its needs', () => {
-      const uniqueJobName1 = pipelineGraphData.jobs[jobName1].id;
-      const uniqueJobName2 = pipelineGraphData.jobs[jobName2].id;
-      const uniqueJobName3 = pipelineGraphData.jobs[jobName3].id;
-      const uniqueJobName4 = pipelineGraphData.jobs[jobName4].id;
+      const jobsWithNeeds = {
+        [jobName1]: job1,
+        [jobName2]: job2,
+        [jobName3]: job3,
+        [jobName4]: job4,
+      };
 
-      expect(generateJobNeedsDict(pipelineGraphData)).toEqual({
-        [uniqueJobName1]: [],
-        [uniqueJobName2]: [],
-        [uniqueJobName3]: [uniqueJobName1, uniqueJobName2],
-        [uniqueJobName4]: [uniqueJobName3, uniqueJobName1, uniqueJobName2],
+      expect(generateJobNeedsDict(jobsWithNeeds)).toEqual({
+        [jobName1]: [],
+        [jobName2]: [],
+        [jobName3]: [jobName1, jobName2],
+        [jobName4]: [jobName3, jobName1, jobName2],
       });
     });
   });

spec/frontend/pipelines/unwrapping_utils_spec.js

 import {
+  unwrapArrayOfJobs,
   unwrapGroups,
   unwrapNodesWithName,
   unwrapStagesWithNeeds,
@@ -94,6 +95,29 @@ const completeMock = [
 ];
 
 describe('Shared pipeline unwrapping utils', () => {
+  describe('unwrapArrayOfJobs', () => {
+    it('returns an empty array if the input is an empty undefined', () => {
+      expect(unwrapArrayOfJobs(undefined)).toEqual([]);
+    });
+
+    it('returns an empty array if the input is an empty array', () => {
+      expect(unwrapArrayOfJobs([])).toEqual([]);
+    });
+
+    it('returns a flatten array of each job with their data and stage name', () => {
+      expect(
+        unwrapArrayOfJobs([
+          { name: 'build', groups: [{ name: 'job_a_1' }, { name: 'job_a_2' }] },
+          { name: 'test', groups: [{ name: 'job_b' }] },
+        ]),
+      ).toMatchObject([
+        { category: 'build', name: 'job_a_1' },
+        { category: 'build', name: 'job_a_2' },
+        { category: 'test', name: 'job_b' },
+      ]);
+    });
+  });
+
   describe('unwrapGroups', () => {
     it('takes stages without nodes and returns the unwrapped groups', () => {
       expect(unwrapGroups(stagesAndGroups)[0].groups).toEqual(groupsArray);