Add latest changes from gitlab-org/gitlab@master

8 files changed, 39 insertions, 690 deletions

diff --git a/spec/features/projects/commit/mini_pipeline_graph_spec.rb b/spec/features/projects/commit/mini_pipeline_graph_spec.rb
index 4740f6e19fe..e472cff38ce 100644
--- a/spec/features/projects/commit/mini_pipeline_graph_spec.rb
+++ b/spec/features/projects/commit/mini_pipeline_graph_spec.rb
@@ -27,7 +27,7 @@ RSpec.describe 'Mini Pipeline Graph in Commit View', :js do
     end
 
     it 'displays a mini pipeline graph' do
-      expect(page).to have_selector('[data-testid="commit-box-pipeline-mini-graph"]')
+      expect(page).to have_selector('[data-testid="commit-box-mini-graph"]')
 
       first('[data-testid="mini-pipeline-graph-dropdown"]').click
 
diff --git a/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js b/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
index ab5055de5e3..b1c8ba48475 100644
--- a/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
+++ b/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
@@ -6,7 +6,6 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import CommitBoxPipelineMiniGraph from '~/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue';
-import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
 import getLinkedPipelinesQuery from '~/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql';
 import getPipelineStagesQuery from '~/projects/commit_box/info/graphql/queries/get_pipeline_stages.query.graphql';
 import { mockPipelineStagesQueryResponse, mockStages } from './mock_data';
@@ -18,7 +17,9 @@ Vue.use(VueApollo);
 describe('Commit box pipeline mini graph', () => {
   let wrapper;
 
-  const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph);
+  const findMiniGraph = () => wrapper.findByTestId('commit-box-mini-graph');
+  const findUpstream = () => wrapper.findByTestId('commit-box-mini-graph-upstream');
+  const findDownstream = () => wrapper.findByTestId('commit-box-mini-graph-downstream');
 
   const stagesHandler = jest.fn().mockResolvedValue(mockPipelineStagesQueryResponse);
 
@@ -50,16 +51,13 @@ describe('Commit box pipeline mini graph', () => {
       await createComponent();
     });
 
-    it('should display the pipeline mini graph', () => {
-      expect(findPipelineMiniGraph().exists()).toBe(true);
+    it('should display the mini pipeine graph', () => {
+      expect(findMiniGraph().exists()).toBe(true);
     });
 
     it('should not display linked pipelines', () => {
-      const downstreamPipelines = findPipelineMiniGraph().props('downstreamPipelines');
-      const upstreamPipeline = findPipelineMiniGraph().props('upstreamPipeline');
-
-      expect(downstreamPipelines).toHaveLength(0);
-      expect(upstreamPipeline).toEqual(undefined);
+      expect(findUpstream().exists()).toBe(false);
+      expect(findDownstream().exists()).toBe(false);
     });
   });
 
diff --git a/spec/frontend/pipeline_editor/components/header/pipeline_editor_mini_graph_spec.js b/spec/frontend/pipeline_editor/components/header/pipeline_editor_mini_graph_spec.js
deleted file mode 100644
index 93eb18c90cf..00000000000
--- a/spec/frontend/pipeline_editor/components/header/pipeline_editor_mini_graph_spec.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import waitForPromises from 'helpers/wait_for_promises';
-import PipelineEditorMiniGraph from '~/pipeline_editor/components/header/pipeline_editor_mini_graph.vue';
-import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
-import getLinkedPipelinesQuery from '~/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql';
-import { PIPELINE_FAILURE } from '~/pipeline_editor/constants';
-import { mockLinkedPipelines, mockProjectFullPath, mockProjectPipeline } from '../../mock_data';
-
-Vue.use(VueApollo);
-
-describe('Pipeline Status', () => {
-  let wrapper;
-  let mockApollo;
-  let mockLinkedPipelinesQuery;
-
-  const createComponent = ({ hasStages = true, options } = {}) => {
-    wrapper = shallowMount(PipelineEditorMiniGraph, {
-      provide: {
-        dataMethod: 'graphql',
-        projectFullPath: mockProjectFullPath,
-      },
-      propsData: {
-        pipeline: mockProjectPipeline({ hasStages }).pipeline,
-      },
-      ...options,
-    });
-  };
-
-  const createComponentWithApollo = (hasStages = true) => {
-    const handlers = [[getLinkedPipelinesQuery, mockLinkedPipelinesQuery]];
-    mockApollo = createMockApollo(handlers);
-
-    createComponent({
-      hasStages,
-      options: {
-        apolloProvider: mockApollo,
-      },
-    });
-  };
-
-  const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph);
-
-  beforeEach(() => {
-    mockLinkedPipelinesQuery = jest.fn();
-  });
-
-  afterEach(() => {
-    mockLinkedPipelinesQuery.mockReset();
-    wrapper.destroy();
-  });
-
-  describe('when there are stages', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('renders pipeline mini graph', () => {
-      expect(findPipelineMiniGraph().exists()).toBe(true);
-    });
-  });
-
-  describe('when there are no stages', () => {
-    beforeEach(() => {
-      createComponent({ hasStages: false });
-    });
-
-    it('does not render pipeline mini graph', () => {
-      expect(findPipelineMiniGraph().exists()).toBe(false);
-    });
-  });
-
-  describe('when querying upstream and downstream pipelines', () => {
-    describe('when query succeeds', () => {
-      beforeEach(() => {
-        mockLinkedPipelinesQuery.mockResolvedValue(mockLinkedPipelines());
-        createComponentWithApollo();
-      });
-
-      it('should call the query with the correct variables', () => {
-        expect(mockLinkedPipelinesQuery).toHaveBeenCalledTimes(1);
-        expect(mockLinkedPipelinesQuery).toHaveBeenCalledWith({
-          fullPath: mockProjectFullPath,
-          iid: mockProjectPipeline().pipeline.iid,
-        });
-      });
-    });
-
-    describe('when query fails', () => {
-      beforeEach(async () => {
-        mockLinkedPipelinesQuery.mockRejectedValue(new Error());
-        createComponentWithApollo();
-        await waitForPromises();
-      });
-
-      it('should emit an error event when query fails', async () => {
-        expect(wrapper.emitted('showError')).toHaveLength(1);
-        expect(wrapper.emitted('showError')[0]).toEqual([
-          {
-            type: PIPELINE_FAILURE,
-            reasons: [wrapper.vm.$options.i18n.linkedPipelinesFetchError],
-          },
-        ]);
-      });
-    });
-  });
-});
diff --git a/spec/frontend/pipelines/components/pipelines_list/pipeline_stages_spec.js b/spec/frontend/pipelines/components/pipelines_list/pipeline_mini_graph_spec.js
index 1e31d8a62ff..1cb43c199aa 100644
--- a/spec/frontend/pipelines/components/pipelines_list/pipeline_stages_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/pipeline_mini_graph_spec.js
@@ -1,18 +1,18 @@
 import { shallowMount } from '@vue/test-utils';
 import { pipelines } from 'test_fixtures/pipelines/pipelines.json';
+import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
 import PipelineStage from '~/pipelines/components/pipelines_list/pipeline_stage.vue';
-import PipelineStages from '~/pipelines/components/pipelines_list/pipeline_stages.vue';
 
 const mockStages = pipelines[0].details.stages;
 
-describe('Pipeline Stages', () => {
+describe('Pipeline Mini Graph', () => {
   let wrapper;
 
   const findPipelineStages = () => wrapper.findAll(PipelineStage);
   const findPipelineStagesAt = (i) => findPipelineStages().at(i);
 
   const createComponent = (props = {}) => {
-    wrapper = shallowMount(PipelineStages, {
+    wrapper = shallowMount(PipelineMiniGraph, {
       propsData: {
         stages: mockStages,
         ...props,
diff --git a/spec/frontend/pipelines/linked_pipelines_mock_data.js b/spec/frontend/pipelines/linked_pipelines_mock_data.js
deleted file mode 100644
index 117c7f2ae52..00000000000
--- a/spec/frontend/pipelines/linked_pipelines_mock_data.js
+++ /dev/null
@@ -1,407 +0,0 @@
-export default {
-  triggered_by: {
-    id: 129,
-    active: true,
-    path: '/gitlab-org/gitlab-foss/-/pipelines/129',
-    project: {
-      name: 'GitLabCE',
-    },
-    details: {
-      status: {
-        icon: 'status_running',
-        text: 'running',
-        label: 'running',
-        group: 'running',
-        has_details: true,
-        details_path: '/gitlab-org/gitlab-foss/-/pipelines/129',
-        favicon:
-          '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-      },
-    },
-    flags: {
-      latest: false,
-      triggered: false,
-      stuck: false,
-      yaml_errors: false,
-      retryable: true,
-      cancelable: true,
-    },
-    ref: {
-      name: '7-5-stable',
-      path: '/gitlab-org/gitlab-foss/commits/7-5-stable',
-      tag: false,
-      branch: true,
-    },
-    commit: {
-      id: '23433d4d8b20d7e45c103d0b6048faad38a130ab',
-      short_id: '23433d4d',
-      title: 'Version 7.5.0.rc1',
-      created_at: '2014-11-17T15:44:14.000+01:00',
-      parent_ids: ['30ac909f30f58d319b42ed1537664483894b18cd'],
-      message: 'Version 7.5.0.rc1\n',
-      author_name: 'Jacob Vosmaer',
-      author_email: 'contact@jacobvosmaer.nl',
-      authored_date: '2014-11-17T15:44:14.000+01:00',
-      committer_name: 'Jacob Vosmaer',
-      committer_email: 'contact@jacobvosmaer.nl',
-      committed_date: '2014-11-17T15:44:14.000+01:00',
-      author_gravatar_url:
-        'http://www.gravatar.com/avatar/e66d11c0eedf8c07b3b18fca46599807?s=80&d=identicon',
-      commit_url:
-        'http://localhost:3000/gitlab-org/gitlab-foss/commit/23433d4d8b20d7e45c103d0b6048faad38a130ab',
-      commit_path: '/gitlab-org/gitlab-foss/commit/23433d4d8b20d7e45c103d0b6048faad38a130ab',
-    },
-    retry_path: '/gitlab-org/gitlab-foss/-/pipelines/129/retry',
-    cancel_path: '/gitlab-org/gitlab-foss/-/pipelines/129/cancel',
-    created_at: '2017-05-24T14:46:20.090Z',
-    updated_at: '2017-05-24T14:46:29.906Z',
-  },
-  triggered: [
-    {
-      id: 132,
-      active: true,
-      path: '/gitlab-org/gitlab-foss/-/pipelines/132',
-      project: {
-        name: 'GitLabCE',
-      },
-      details: {
-        status: {
-          icon: 'status_running',
-          text: 'running',
-          label: 'running',
-          group: 'running',
-          has_details: true,
-          details_path: '/gitlab-org/gitlab-foss/-/pipelines/132',
-          favicon:
-            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-        },
-      },
-      flags: {
-        latest: false,
-        triggered: false,
-        stuck: false,
-        yaml_errors: false,
-        retryable: true,
-        cancelable: true,
-      },
-      ref: {
-        name: 'crowd',
-        path: '/gitlab-org/gitlab-foss/commits/crowd',
-        tag: false,
-        branch: true,
-      },
-      commit: {
-        id: 'b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
-        short_id: 'b9d58c4c',
-        title: 'getting user keys publically through http without any authentication, the github…',
-        created_at: '2013-10-03T12:50:33.000+05:30',
-        parent_ids: ['e219cf7246c6a0495e4507deaffeba11e79f13b8'],
-        message:
-          'getting user keys publically through http without any authentication, the github way. E.g: http://github.com/devaroop.keys\n\nchangelog updated to include ssh key retrieval feature update\n',
-        author_name: 'devaroop',
-        author_email: 'devaroop123@yahoo.co.in',
-        authored_date: '2013-10-02T20:39:29.000+05:30',
-        committer_name: 'devaroop',
-        committer_email: 'devaroop123@yahoo.co.in',
-        committed_date: '2013-10-03T12:50:33.000+05:30',
-        author_gravatar_url:
-          'http://www.gravatar.com/avatar/35df4b155ec66a3127d53459941cf8a2?s=80&d=identicon',
-        commit_url:
-          'http://localhost:3000/gitlab-org/gitlab-foss/commit/b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
-        commit_path: '/gitlab-org/gitlab-foss/commit/b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
-      },
-      retry_path: '/gitlab-org/gitlab-foss/-/pipelines/132/retry',
-      cancel_path: '/gitlab-org/gitlab-foss/-/pipelines/132/cancel',
-      created_at: '2017-05-24T14:46:24.644Z',
-      updated_at: '2017-05-24T14:48:55.226Z',
-    },
-    {
-      id: 133,
-      active: true,
-      path: '/gitlab-org/gitlab-foss/-/pipelines/133',
-      project: {
-        name: 'GitLabCE',
-      },
-      details: {
-        status: {
-          icon: 'status_running',
-          text: 'running',
-          label: 'running',
-          group: 'running',
-          has_details: true,
-          details_path: '/gitlab-org/gitlab-foss/-/pipelines/133',
-          favicon:
-            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-        },
-      },
-      flags: {
-        latest: false,
-        triggered: false,
-        stuck: false,
-        yaml_errors: false,
-        retryable: true,
-        cancelable: true,
-      },
-      ref: {
-        name: 'crowd',
-        path: '/gitlab-org/gitlab-foss/commits/crowd',
-        tag: false,
-        branch: true,
-      },
-      commit: {
-        id: 'b6bd4856a33df3d144be66c4ed1f1396009bb08b',
-        short_id: 'b6bd4856',
-        title: 'getting user keys publically through http without any authentication, the github…',
-        created_at: '2013-10-02T20:39:29.000+05:30',
-        parent_ids: ['e219cf7246c6a0495e4507deaffeba11e79f13b8'],
-        message:
-          'getting user keys publically through http without any authentication, the github way. E.g: http://github.com/devaroop.keys\n',
-        author_name: 'devaroop',
-        author_email: 'devaroop123@yahoo.co.in',
-        authored_date: '2013-10-02T20:39:29.000+05:30',
-        committer_name: 'devaroop',
-        committer_email: 'devaroop123@yahoo.co.in',
-        committed_date: '2013-10-02T20:39:29.000+05:30',
-        author_gravatar_url:
-          'http://www.gravatar.com/avatar/35df4b155ec66a3127d53459941cf8a2?s=80&d=identicon',
-        commit_url:
-          'http://localhost:3000/gitlab-org/gitlab-foss/commit/b6bd4856a33df3d144be66c4ed1f1396009bb08b',
-        commit_path: '/gitlab-org/gitlab-foss/commit/b6bd4856a33df3d144be66c4ed1f1396009bb08b',
-      },
-      retry_path: '/gitlab-org/gitlab-foss/-/pipelines/133/retry',
-      cancel_path: '/gitlab-org/gitlab-foss/-/pipelines/133/cancel',
-      created_at: '2017-05-24T14:46:24.648Z',
-      updated_at: '2017-05-24T14:48:59.673Z',
-    },
-    {
-      id: 130,
-      active: true,
-      path: '/gitlab-org/gitlab-foss/-/pipelines/130',
-      project: {
-        name: 'GitLabCE',
-      },
-      details: {
-        status: {
-          icon: 'status_running',
-          text: 'running',
-          label: 'running',
-          group: 'running',
-          has_details: true,
-          details_path: '/gitlab-org/gitlab-foss/-/pipelines/130',
-          favicon:
-            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-        },
-      },
-      flags: {
-        latest: false,
-        triggered: false,
-        stuck: false,
-        yaml_errors: false,
-        retryable: true,
-        cancelable: true,
-      },
-      ref: {
-        name: 'crowd',
-        path: '/gitlab-org/gitlab-foss/commits/crowd',
-        tag: false,
-        branch: true,
-      },
-      commit: {
-        id: '6d7ced4a2311eeff037c5575cca1868a6d3f586f',
-        short_id: '6d7ced4a',
-        title: 'Whitespace fixes to patch',
-        created_at: '2013-10-08T13:53:22.000-05:00',
-        parent_ids: ['1875141a963a4238bda29011d8f7105839485253'],
-        message: 'Whitespace fixes to patch\n',
-        author_name: 'Dale Hamel',
-        author_email: 'dale.hamel@srvthe.net',
-        authored_date: '2013-10-08T13:53:22.000-05:00',
-        committer_name: 'Dale Hamel',
-        committer_email: 'dale.hamel@invenia.ca',
-        committed_date: '2013-10-08T13:53:22.000-05:00',
-        author_gravatar_url:
-          'http://www.gravatar.com/avatar/cd08930e69fa5ad1a669206e7bafe476?s=80&d=identicon',
-        commit_url:
-          'http://localhost:3000/gitlab-org/gitlab-foss/commit/6d7ced4a2311eeff037c5575cca1868a6d3f586f',
-        commit_path: '/gitlab-org/gitlab-foss/commit/6d7ced4a2311eeff037c5575cca1868a6d3f586f',
-      },
-      retry_path: '/gitlab-org/gitlab-foss/-/pipelines/130/retry',
-      cancel_path: '/gitlab-org/gitlab-foss/-/pipelines/130/cancel',
-      created_at: '2017-05-24T14:46:24.630Z',
-      updated_at: '2017-05-24T14:49:45.091Z',
-    },
-    {
-      id: 131,
-      active: true,
-      path: '/gitlab-org/gitlab-foss/-/pipelines/132',
-      project: {
-        name: 'GitLabCE',
-      },
-      details: {
-        status: {
-          icon: 'status_running',
-          text: 'running',
-          label: 'running',
-          group: 'running',
-          has_details: true,
-          details_path: '/gitlab-org/gitlab-foss/-/pipelines/132',
-          favicon:
-            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-        },
-      },
-      flags: {
-        latest: false,
-        triggered: false,
-        stuck: false,
-        yaml_errors: false,
-        retryable: true,
-        cancelable: true,
-      },
-      ref: {
-        name: 'crowd',
-        path: '/gitlab-org/gitlab-foss/commits/crowd',
-        tag: false,
-        branch: true,
-      },
-      commit: {
-        id: 'b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
-        short_id: 'b9d58c4c',
-        title: 'getting user keys publically through http without any authentication, the github…',
-        created_at: '2013-10-03T12:50:33.000+05:30',
-        parent_ids: ['e219cf7246c6a0495e4507deaffeba11e79f13b8'],
-        message:
-          'getting user keys publically through http without any authentication, the github way. E.g: http://github.com/devaroop.keys\n\nchangelog updated to include ssh key retrieval feature update\n',
-        author_name: 'devaroop',
-        author_email: 'devaroop123@yahoo.co.in',
-        authored_date: '2013-10-02T20:39:29.000+05:30',
-        committer_name: 'devaroop',
-        committer_email: 'devaroop123@yahoo.co.in',
-        committed_date: '2013-10-03T12:50:33.000+05:30',
-        author_gravatar_url:
-          'http://www.gravatar.com/avatar/35df4b155ec66a3127d53459941cf8a2?s=80&d=identicon',
-        commit_url:
-          'http://localhost:3000/gitlab-org/gitlab-foss/commit/b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
-        commit_path: '/gitlab-org/gitlab-foss/commit/b9d58c4cecd06be74c3cc32ccfb522b31544ab2e',
-      },
-      retry_path: '/gitlab-org/gitlab-foss/-/pipelines/132/retry',
-      cancel_path: '/gitlab-org/gitlab-foss/-/pipelines/132/cancel',
-      created_at: '2017-05-24T14:46:24.644Z',
-      updated_at: '2017-05-24T14:48:55.226Z',
-    },
-    {
-      id: 134,
-      active: true,
-      path: '/gitlab-org/gitlab-foss/-/pipelines/133',
-      project: {
-        name: 'GitLabCE',
-      },
-      details: {
-        status: {
-          icon: 'status_running',
-          text: 'running',
-          label: 'running',
-          group: 'running',
-          has_details: true,
-          details_path: '/gitlab-org/gitlab-foss/-/pipelines/133',
-          favicon:
-            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-        },
-      },
-      flags: {
-        latest: false,
-        triggered: false,
-        stuck: false,
-        yaml_errors: false,
-        retryable: true,
-        cancelable: true,
-      },
-      ref: {
-        name: 'crowd',
-        path: '/gitlab-org/gitlab-foss/commits/crowd',
-        tag: false,
-        branch: true,
-      },
-      commit: {
-        id: 'b6bd4856a33df3d144be66c4ed1f1396009bb08b',
-        short_id: 'b6bd4856',
-        title: 'getting user keys publically through http without any authentication, the github…',
-        created_at: '2013-10-02T20:39:29.000+05:30',
-        parent_ids: ['e219cf7246c6a0495e4507deaffeba11e79f13b8'],
-        message:
-          'getting user keys publically through http without any authentication, the github way. E.g: http://github.com/devaroop.keys\n',
-        author_name: 'devaroop',
-        author_email: 'devaroop123@yahoo.co.in',
-        authored_date: '2013-10-02T20:39:29.000+05:30',
-        committer_name: 'devaroop',
-        committer_email: 'devaroop123@yahoo.co.in',
-        committed_date: '2013-10-02T20:39:29.000+05:30',
-        author_gravatar_url:
-          'http://www.gravatar.com/avatar/35df4b155ec66a3127d53459941cf8a2?s=80&d=identicon',
-        commit_url:
-          'http://localhost:3000/gitlab-org/gitlab-foss/commit/b6bd4856a33df3d144be66c4ed1f1396009bb08b',
-        commit_path: '/gitlab-org/gitlab-foss/commit/b6bd4856a33df3d144be66c4ed1f1396009bb08b',
-      },
-      retry_path: '/gitlab-org/gitlab-foss/-/pipelines/133/retry',
-      cancel_path: '/gitlab-org/gitlab-foss/-/pipelines/133/cancel',
-      created_at: '2017-05-24T14:46:24.648Z',
-      updated_at: '2017-05-24T14:48:59.673Z',
-    },
-    {
-      id: 135,
-      active: true,
-      path: '/gitlab-org/gitlab-foss/-/pipelines/130',
-      project: {
-        name: 'GitLabCE',
-      },
-      details: {
-        status: {
-          icon: 'status_running',
-          text: 'running',
-          label: 'running',
-          group: 'running',
-          has_details: true,
-          details_path: '/gitlab-org/gitlab-foss/-/pipelines/130',
-          favicon:
-            '/assets/ci_favicons/dev/favicon_status_running-c3ad2fc53ea6079c174e5b6c1351ff349e99ec3af5a5622fb77b0fe53ea279c1.ico',
-        },
-      },
-      flags: {
-        latest: false,
-        triggered: false,
-        stuck: false,
-        yaml_errors: false,
-        retryable: true,
-        cancelable: true,
-      },
-      ref: {
-        name: 'crowd',
-        path: '/gitlab-org/gitlab-foss/commits/crowd',
-        tag: false,
-        branch: true,
-      },
-      commit: {
-        id: '6d7ced4a2311eeff037c5575cca1868a6d3f586f',
-        short_id: '6d7ced4a',
-        title: 'Whitespace fixes to patch',
-        created_at: '2013-10-08T13:53:22.000-05:00',
-        parent_ids: ['1875141a963a4238bda29011d8f7105839485253'],
-        message: 'Whitespace fixes to patch\n',
-        author_name: 'Dale Hamel',
-        author_email: 'dale.hamel@srvthe.net',
-        authored_date: '2013-10-08T13:53:22.000-05:00',
-        committer_name: 'Dale Hamel',
-        committer_email: 'dale.hamel@invenia.ca',
-        committed_date: '2013-10-08T13:53:22.000-05:00',
-        author_gravatar_url:
-          'http://www.gravatar.com/avatar/cd08930e69fa5ad1a669206e7bafe476?s=80&d=identicon',
-        commit_url:
-          'http://localhost:3000/gitlab-org/gitlab-foss/commit/6d7ced4a2311eeff037c5575cca1868a6d3f586f',
-        commit_path: '/gitlab-org/gitlab-foss/commit/6d7ced4a2311eeff037c5575cca1868a6d3f586f',
-      },
-      retry_path: '/gitlab-org/gitlab-foss/-/pipelines/130/retry',
-      cancel_path: '/gitlab-org/gitlab-foss/-/pipelines/130/cancel',
-      created_at: '2017-05-24T14:46:24.630Z',
-      updated_at: '2017-05-24T14:49:45.091Z',
-    },
-  ],
-};
diff --git a/spec/frontend/pipelines/pipeline_mini_graph_spec.js b/spec/frontend/pipelines/pipeline_mini_graph_spec.js
deleted file mode 100644
index 81aa97ce13f..00000000000
--- a/spec/frontend/pipelines/pipeline_mini_graph_spec.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { pipelines } from 'test_fixtures/pipelines/pipelines.json';
-import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
-import PipelineStages from '~/pipelines/components/pipelines_list/pipeline_stages.vue';
-import mockLinkedPipelines from './linked_pipelines_mock_data';
-
-const mockStages = pipelines[0].details.stages;
-
-describe('Pipeline Mini Graph', () => {
-  let wrapper;
-
-  const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph);
-  const findPipelineStages = () => wrapper.findComponent(PipelineStages);
-
-  const findLinkedPipelineUpstream = () =>
-    wrapper.findComponent('[data-testid="pipeline-mini-graph-upstream"]');
-  const findLinkedPipelineDownstream = () =>
-    wrapper.findComponent('[data-testid="pipeline-mini-graph-downstream"]');
-  const findDownstreamArrowIcon = () => wrapper.find('[data-testid="downstream-arrow-icon"]');
-  const findUpstreamArrowIcon = () => wrapper.find('[data-testid="upstream-arrow-icon"]');
-
-  const createComponent = (props = {}) => {
-    wrapper = mount(PipelineMiniGraph, {
-      propsData: {
-        stages: mockStages,
-        ...props,
-      },
-    });
-  };
-
-  describe('rendered state without upstream or downstream pipelines', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    afterEach(() => {
-      wrapper.destroy();
-      wrapper = null;
-    });
-
-    it('should render the pipeline stages', () => {
-      expect(findPipelineStages().exists()).toBe(true);
-    });
-
-    it('should have the correct props', () => {
-      expect(findPipelineMiniGraph().props()).toMatchObject({
-        downstreamPipelines: [],
-        isMergeTrain: false,
-        pipelinePath: '',
-        stages: expect.any(Array),
-        stagesClass: '',
-        updateDropdown: false,
-        upstreamPipeline: undefined,
-      });
-    });
-
-    it('should have no linked pipelines', () => {
-      expect(findLinkedPipelineDownstream().exists()).toBe(false);
-      expect(findLinkedPipelineUpstream().exists()).toBe(false);
-    });
-
-    it('should not render arrow icons', () => {
-      expect(findUpstreamArrowIcon().exists()).toBe(false);
-      expect(findDownstreamArrowIcon().exists()).toBe(false);
-    });
-
-    it('triggers events in "action request complete"', () => {
-      createComponent();
-
-      findPipelineMiniGraph(0).vm.$emit('pipelineActionRequestComplete');
-      findPipelineMiniGraph(1).vm.$emit('pipelineActionRequestComplete');
-
-      expect(wrapper.emitted('pipelineActionRequestComplete')).toHaveLength(2);
-    });
-  });
-
-  describe('rendered state with upstream pipeline', () => {
-    beforeEach(() => {
-      createComponent({
-        upstreamPipeline: mockLinkedPipelines.triggered_by,
-      });
-    });
-
-    afterEach(() => {
-      wrapper.destroy();
-      wrapper = null;
-    });
-
-    it('should have the correct props', () => {
-      expect(findPipelineMiniGraph().props()).toMatchObject({
-        downstreamPipelines: [],
-        isMergeTrain: false,
-        pipelinePath: '',
-        stages: expect.any(Array),
-        stagesClass: '',
-        updateDropdown: false,
-        upstreamPipeline: expect.any(Object),
-      });
-    });
-
-    it('should render the upstream linked pipelines mini list only', () => {
-      expect(findLinkedPipelineUpstream().exists()).toBe(true);
-      expect(findLinkedPipelineDownstream().exists()).toBe(false);
-    });
-
-    it('should render an upstream arrow icon only', () => {
-      expect(findDownstreamArrowIcon().exists()).toBe(false);
-      expect(findUpstreamArrowIcon().exists()).toBe(true);
-      expect(findUpstreamArrowIcon().props('name')).toBe('long-arrow');
-    });
-  });
-
-  describe('rendered state with downstream pipelines', () => {
-    beforeEach(() => {
-      createComponent({
-        downstreamPipelines: mockLinkedPipelines.triggered,
-        pipelinePath: 'my/pipeline/path',
-      });
-    });
-
-    it('should have the correct props', () => {
-      expect(findPipelineMiniGraph().props()).toMatchObject({
-        downstreamPipelines: expect.any(Array),
-        isMergeTrain: false,
-        pipelinePath: 'my/pipeline/path',
-        stages: expect.any(Array),
-        stagesClass: '',
-        updateDropdown: false,
-        upstreamPipeline: undefined,
-      });
-    });
-
-    afterEach(() => {
-      wrapper.destroy();
-      wrapper = null;
-    });
-
-    it('should render the downstream linked pipelines mini list only', () => {
-      expect(findLinkedPipelineDownstream().exists()).toBe(true);
-      expect(findLinkedPipelineUpstream().exists()).toBe(false);
-    });
-
-    it('should render a downstream arrow icon only', () => {
-      expect(findUpstreamArrowIcon().exists()).toBe(false);
-      expect(findDownstreamArrowIcon().exists()).toBe(true);
-      expect(findDownstreamArrowIcon().props('name')).toBe('long-arrow');
-    });
-  });
-});
diff --git a/spec/frontend/pipelines/pipelines_table_spec.js b/spec/frontend/pipelines/pipelines_table_spec.js
index 07818b9dadb..7b49baa5a20 100644
--- a/spec/frontend/pipelines/pipelines_table_spec.js
+++ b/spec/frontend/pipelines/pipelines_table_spec.js
@@ -113,28 +113,40 @@ describe('Pipelines Table', () => {
     });
 
     describe('stages cell', () => {
-      it('should render pipeline mini graph', () => {
+      it('should render a pipeline mini graph', () => {
         expect(findPipelineMiniGraph().exists()).toBe(true);
       });
 
       it('should render the right number of stages', () => {
         const stagesLength = pipeline.details.stages.length;
-        expect(findPipelineMiniGraph().props('stages').length).toBe(stagesLength);
+        expect(
+          findPipelineMiniGraph().findAll('[data-testid="mini-pipeline-graph-dropdown"]'),
+        ).toHaveLength(stagesLength);
       });
 
       describe('when pipeline does not have stages', () => {
         beforeEach(() => {
           pipeline = createMockPipeline();
-          pipeline.details.stages = [];
+          pipeline.details.stages = null;
 
           createComponent({ pipelines: [pipeline] });
         });
 
         it('stages are not rendered', () => {
-          expect(findPipelineMiniGraph().props('stages')).toHaveLength(0);
+          expect(findPipelineMiniGraph().exists()).toBe(false);
         });
       });
 
+      it('should not update dropdown', () => {
+        expect(findPipelineMiniGraph().props('updateDropdown')).toBe(false);
+      });
+
+      it('when update graph dropdown is set, should update graph dropdown', () => {
+        createComponent({ pipelines: [pipeline], updateGraphDropdown: true });
+
+        expect(findPipelineMiniGraph().props('updateDropdown')).toBe(true);
+      });
+
       it('when action request is complete, should refresh table', () => {
         findPipelineMiniGraph().vm.$emit('pipelineActionRequestComplete');
 
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js
index a32f61c4567..6347e3c3be3 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js
@@ -4,8 +4,9 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { trimText } from 'helpers/text_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import MRWidgetPipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
 import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
+import PipelineStage from '~/pipelines/components/pipelines_list/pipeline_stage.vue';
+import PipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
 import { SUCCESS } from '~/vue_merge_request_widget/constants';
 import mockData from '../mock_data';
 
@@ -29,13 +30,14 @@ describe('MRWidgetPipeline', () => {
   const findPipelineInfoContainer = () => wrapper.findByTestId('pipeline-info-container');
   const findCommitLink = () => wrapper.findByTestId('commit-link');
   const findPipelineFinishedAt = () => wrapper.findByTestId('finished-at');
+  const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph);
+  const findAllPipelineStages = () => wrapper.findAllComponents(PipelineStage);
   const findPipelineCoverage = () => wrapper.findByTestId('pipeline-coverage');
   const findPipelineCoverageDelta = () => wrapper.findByTestId('pipeline-coverage-delta');
   const findPipelineCoverageTooltipText = () =>
     wrapper.findByTestId('pipeline-coverage-tooltip').text();
   const findPipelineCoverageDeltaTooltipText = () =>
     wrapper.findByTestId('pipeline-coverage-delta-tooltip').text();
-  const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph);
   const findMonitoringPipelineMessage = () => wrapper.findByTestId('monitoring-pipeline-message');
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
@@ -43,7 +45,7 @@ describe('MRWidgetPipeline', () => {
 
   const createWrapper = (props = {}, mountFn = shallowMount) => {
     wrapper = extendedWrapper(
-      mountFn(MRWidgetPipelineComponent, {
+      mountFn(PipelineComponent, {
         propsData: {
           ...defaultProps,
           ...props,
@@ -104,10 +106,8 @@ describe('MRWidgetPipeline', () => {
     });
 
     it('should render pipeline graph', () => {
-      const stagesCount = mockData.pipeline.details.stages.length;
-
       expect(findPipelineMiniGraph().exists()).toBe(true);
-      expect(findPipelineMiniGraph().props('stages')).toHaveLength(stagesCount);
+      expect(findAllPipelineStages()).toHaveLength(mockData.pipeline.details.stages.length);
     });
 
     describe('should render pipeline coverage information', () => {
@@ -176,11 +176,15 @@ describe('MRWidgetPipeline', () => {
       expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
     });
 
-    it('should render pipeline graph', () => {
+    it('should render pipeline graph with correct styles', () => {
       const stagesCount = mockData.pipeline.details.stages.length;
 
       expect(findPipelineMiniGraph().exists()).toBe(true);
-      expect(findPipelineMiniGraph().props('stages')).toHaveLength(stagesCount);
+      expect(findPipelineMiniGraph().findAll('.mr-widget-pipeline-stages')).toHaveLength(
+        stagesCount,
+      );
+
+      expect(findAllPipelineStages()).toHaveLength(stagesCount);
     });
 
     it('should render coverage information', () => {