Add empty state to DAG graph

We add a new empty state to the graph
so that we can redirect users to the
job dependencies documentation and
educate them on this architecture.
This should only appears when there
is not enough data to render the graph
and there are no errors while parsing the
data.

app/assets/javascripts/pipelines/components/dag/dag.vue

 <script>
-import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlButton, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
@@ -25,6 +25,8 @@ export default {
     GlAlert,
     GlLink,
     GlSprintf,
+    GlEmptyState,
+    GlButton,
   },
   props: {
     graphUrl: {
@@ -32,6 +34,16 @@ export default {
       required: false,
       default: '',
     },
+    emptySvgPath: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    dagDocPath: {
+      type: String,
+      required: true,
+      default: '',
+    },
   },
   data() {
     return {
@@ -40,6 +52,7 @@ export default {
       graphData: null,
       showFailureAlert: false,
       showBetaInfo: true,
+      hasNoDependentJobs: false,
     };
   },
   errorTexts: {
@@ -48,6 +61,16 @@ export default {
     [UNSUPPORTED_DATA]: __('DAG visualization requires at least 3 dependent jobs.'),
     [DEFAULT]: __('An unknown error occurred while loading this graph.'),
   },
+  emptyStateTexts: {
+    title: __('Start using Directed Acyclic Graphs (DAG)'),
+    firstDescription: __(
+      "This pipeline does not use the %{codeStart}needs%{codeEnd} keyword and can't be represented as a directed acyclic graph.",
+    ),
+    secondDescription: __(
+      'Using %{codeStart}needs%{codeEnd} allows jobs to run before their stage is reached, as soon as their individual dependencies are met, which speeds up your pipelines.',
+    ),
+    button: __('Learn more about job dependencies'),
+  },
   computed: {
     betaMessage() {
       return __(
@@ -114,11 +137,18 @@ export default {
         return;
       }
 
-      if (parsed.links.length < 2) {
+      if (parsed.links.length === 1) {
         this.reportFailure(UNSUPPORTED_DATA);
         return;
       }
 
+      // If there are no links, we don't report failure
+      // as it simply means the user does not use job dependencies
+      if (parsed.links.length === 0) {
+        this.hasNoDependentJobs = true;
+        return;
+      }
+
       this.graphData = parsed;
     },
     hideAlert() {
@@ -172,9 +202,38 @@ export default {
       <dag-graph
         v-if="shouldDisplayGraph"
         :graph-data="graphData"
-        @on-failure="reportFailure"
+        @onFailure="reportFailure"
         @update-annotation="updateAnnotation"
       />
+      <gl-empty-state
+        v-else-if="hasNoDependentJobs"
+        :svg-path="emptySvgPath"
+        :title="$options.emptyStateTexts.title"
+      >
+        <template #description>
+          <div class="gl-text-left">
+            <p>
+              <gl-sprintf :message="$options.emptyStateTexts.firstDescription">
+                <template #code="{ content }">
+                  <code>{{ content }}</code>
+                </template>
+              </gl-sprintf>
+            </p>
+            <p>
+              <gl-sprintf :message="$options.emptyStateTexts.secondDescription">
+                <template #code="{ content }">
+                  <code>{{ content }}</code>
+                </template>
+              </gl-sprintf>
+            </p>
+          </div>
+        </template>
+        <template #actions>
+          <gl-button :href="dagDocPath" target="__blank" variant="success">
+            {{ $options.emptyStateTexts.button }}
+          </gl-button>
+        </template>
+      </gl-empty-state>
     </div>
   </div>
 </template>

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -151,7 +151,8 @@ const createDagApp = () => {
   }
 
   const el = document.querySelector('#js-pipeline-dag-vue');
-  const graphUrl = el?.dataset?.pipelineDataPath;
+  const { pipelineDataPath, emptySvgPath, dagDocPath } = el?.dataset;
+
   // eslint-disable-next-line no-new
   new Vue({
     el,
@@ -161,7 +162,9 @@ const createDagApp = () => {
     render(createElement) {
       return createElement('dag', {
         props: {
-          graphUrl,
+          graphUrl: pipelineDataPath,
+          emptySvgPath,
+          dagDocPath,
         },
       });
     },

app/views/projects/pipelines/_with_tabs.html.haml

@@ -83,7 +83,7 @@
 
   - if dag_pipeline_tab_enabled
     #js-tab-dag.tab-pane
-      #js-pipeline-dag-vue{ data: { pipeline_data_path: dag_project_pipeline_path(@project, @pipeline) } }
+      #js-pipeline-dag-vue{ data: { pipeline_data_path: dag_project_pipeline_path(@project, @pipeline), empty_svg_path: image_path('illustrations/empty-state/empty-dag-md.svg'), dag_doc_path: help_page_path('ci/yaml/README.md', anchor: 'needs')} }
 
   #js-tab-tests.tab-pane
     #js-pipeline-tests-detail

changelogs/unreleased/217648-add-no-graph-empty-state-for-dag.yml

+---
+title: Resolve Add no graph empty state for DAG
+merge_request: 35053
+author:
+type: changed

locale/gitlab.pot

@@ -13201,6 +13201,9 @@ msgstr ""
 msgid "Learn more about group-level project templates"
 msgstr ""
 
+msgid "Learn more about job dependencies"
+msgstr ""
+
 msgid "Learn more about signing commits"
 msgstr ""
 
@@ -21646,6 +21649,9 @@ msgstr ""
 msgid "Start thread & reopen %{noteable_name}"
 msgstr ""
 
+msgid "Start using Directed Acyclic Graphs (DAG)"
+msgstr ""
+
 msgid "Start your Free Gold Trial"
 msgstr ""
 
@@ -23395,6 +23401,9 @@ msgstr ""
 msgid "This page will be removed in a future release."
 msgstr ""
 
+msgid "This pipeline does not use the %{codeStart}needs%{codeEnd} keyword and can't be represented as a directed acyclic graph."
+msgstr ""
+
 msgid "This pipeline makes use of a predefined CI/CD configuration enabled by %{strongStart}Auto DevOps.%{strongEnd}"
 msgstr ""
 
@@ -25169,6 +25178,9 @@ msgstr ""
 msgid "UsersSelect|Unassigned"
 msgstr ""
 
+msgid "Using %{codeStart}needs%{codeEnd} allows jobs to run before their stage is reached, as soon as their individual dependencies are met, which speeds up your pipelines."
+msgstr ""
+
 msgid "Using %{code_start}::%{code_end} denotes a %{link_start}scoped label set%{link_end}"
 msgstr ""
 

spec/frontend/pipelines/components/dag/dag_spec.js

@@ -2,7 +2,7 @@ import { mount, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import waitForPromises from 'helpers/wait_for_promises';
-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlEmptyState } from '@gitlab/ui';
 import Dag from '~/pipelines/components/dag/dag.vue';
 import DagGraph from '~/pipelines/components/dag/dag_graph.vue';
 import DagAnnotations from '~/pipelines/components/dag/dag_annotations.vue';
@@ -16,7 +16,14 @@ import {
   LOAD_FAILURE,
   UNSUPPORTED_DATA,
 } from '~/pipelines/components/dag//constants';
-import { mockBaseData, tooSmallGraph, unparseableGraph, singleNote, multiNote } from './mock_data';
+import {
+  mockBaseData,
+  tooSmallGraph,
+  unparseableGraph,
+  graphWithoutDependencies,
+  singleNote,
+  multiNote,
+} from './mock_data';
 
 describe('Pipeline DAG graph wrapper', () => {
   let wrapper;
@@ -26,6 +33,7 @@ describe('Pipeline DAG graph wrapper', () => {
   const getGraph = () => wrapper.find(DagGraph);
   const getNotes = () => wrapper.find(DagAnnotations);
   const getErrorText = type => wrapper.vm.$options.errorTexts[type];
+  const getEmptyState = () => wrapper.find(GlEmptyState);
 
   const dataPath = '/root/test/pipelines/90/dag.json';
 
@@ -35,7 +43,11 @@ describe('Pipeline DAG graph wrapper', () => {
     }
 
     wrapper = method(Dag, {
-      propsData,
+      propsData: {
+        emptySvgPath: '/my-svg',
+        dagDocPath: '/my-doc',
+        ...propsData,
+      },
       data() {
         return {
           showFailureAlert: false,
@@ -64,6 +76,10 @@ describe('Pipeline DAG graph wrapper', () => {
       expect(getAlert().text()).toBe(getErrorText(DEFAULT));
       expect(getGraph().exists()).toBe(false);
     });
+
+    it('does not render the empty state', () => {
+      expect(getEmptyState().exists()).toBe(false);
+    });
   });
 
   describe('when there is a dataUrl', () => {
@@ -83,6 +99,10 @@ describe('Pipeline DAG graph wrapper', () => {
             expect(getGraph().exists()).toBe(false);
           });
       });
+
+      it('does not render the empty state', () => {
+        expect(getEmptyState().exists()).toBe(false);
+      });
     });
 
     describe('the data fetch succeeds but the parse fails', () => {
@@ -101,6 +121,10 @@ describe('Pipeline DAG graph wrapper', () => {
             expect(getGraph().exists()).toBe(false);
           });
       });
+
+      it('does not render the empty state', () => {
+        expect(getEmptyState().exists()).toBe(false);
+      });
     });
 
     describe('and the data fetch and parse succeeds', () => {
@@ -119,6 +143,15 @@ describe('Pipeline DAG graph wrapper', () => {
             expect(getGraph().exists()).toBe(true);
           });
       });
+
+      it('does not render the empty state', () => {
+        return wrapper.vm
+          .$nextTick()
+          .then(waitForPromises)
+          .then(() => {
+            expect(getEmptyState().exists()).toBe(false);
+          });
+      });
     });
 
     describe('the data fetch and parse succeeds, but the resulting graph is too small', () => {
@@ -137,6 +170,42 @@ describe('Pipeline DAG graph wrapper', () => {
             expect(getGraph().exists()).toBe(false);
           });
       });
+
+      it('does not show the empty dag graph state', () => {
+        return wrapper.vm
+          .$nextTick()
+          .then(waitForPromises)
+          .then(() => {
+            expect(getEmptyState().exists()).toBe(false);
+          });
+      });
+    });
+
+    describe('the data fetch and parse succeeds, but the resulting graph is empty', () => {
+      beforeEach(() => {
+        mock.onGet(dataPath).replyOnce(200, graphWithoutDependencies);
+        createComponent({ graphUrl: dataPath }, mount);
+      });
+
+      it('does not render an error alert or the graph', () => {
+        return wrapper.vm
+          .$nextTick()
+          .then(waitForPromises)
+          .then(() => {
+            expect(getAllAlerts().length).toBe(1);
+            expect(getAlert().text()).toContain('This feature is currently in beta.');
+            expect(getGraph().exists()).toBe(false);
+          });
+      });
+
+      it('shows the empty dag graph state', () => {
+        return wrapper.vm
+          .$nextTick()
+          .then(waitForPromises)
+          .then(() => {
+            expect(getEmptyState().exists()).toBe(true);
+          });
+      });
     });
   });
 

spec/frontend/pipelines/components/dag/mock_data.js

@@ -83,6 +83,46 @@ export const tooSmallGraph = {
   ],
 };
 
+export const graphWithoutDependencies = {
+  stages: [
+    {
+      name: 'test',
+      groups: [
+        {
+          name: 'jest',
+          size: 2,
+          jobs: [{ name: 'jest 1/2' }, { name: 'jest 2/2' }],
+        },
+        {
+          name: 'rspec',
+          size: 1,
+          jobs: [{ name: 'rspec' }],
+        },
+      ],
+    },
+    {
+      name: 'fixtures',
+      groups: [
+        {
+          name: 'frontend fixtures',
+          size: 1,
+          jobs: [{ name: 'frontend fixtures' }],
+        },
+      ],
+    },
+    {
+      name: 'un-needed',
+      groups: [
+        {
+          name: 'un-needed',
+          size: 1,
+          jobs: [{ name: 'un-needed' }],
+        },
+      ],
+    },
+  ],
+};
+
 export const unparseableGraph = [
   {
     name: 'test',