Add linked pipelines to component

Add linked pipelines to the mini
pipeline graph for the pipelines table.
Also change column widths on table to
account for new change.

Changelog: changed

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue

@@ -55,7 +55,7 @@ export default {
       label: s__('Pipeline|Stages'),
       thClass: DEFAULT_TH_CLASSES,
       tdClass: DEFAULT_TD_CLASS,
-      columnClass: 'gl-w-15p',
+      columnClass: 'gl-w-quarter',
       thAttr: { 'data-testid': 'stages-th' },
     },
     {
@@ -70,12 +70,14 @@ export default {
       key: 'actions',
       thClass: DEFAULT_TH_CLASSES,
       tdClass: DEFAULT_TD_CLASS,
-      columnClass: 'gl-w-20p',
+      columnClass: 'gl-w-15p',
       thAttr: { 'data-testid': 'actions-th' },
     },
   ],
   components: {
     GlTable,
+    LinkedPipelinesMiniList: () =>
+      import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'),
     PipelinesCommit,
     PipelineMiniGraph,
     PipelineOperations,
@@ -182,12 +184,23 @@ export default {
         <div class="stage-cell">
           <!-- This empty div should be removed, see https://gitlab.com/gitlab-org/gitlab/-/issues/323488 -->
           <div></div>
+          <linked-pipelines-mini-list
+            v-if="item.triggered_by"
+            :triggered-by="[item.triggered_by]"
+            data-testid="mini-graph-upstream"
+          />
           <pipeline-mini-graph
             v-if="item.details && item.details.stages && item.details.stages.length > 0"
+            class="gl-display-inline"
             :stages="item.details.stages"
             :update-dropdown="updateGraphDropdown"
             @pipelineActionRequestComplete="onPipelineActionRequestComplete"
           />
+          <linked-pipelines-mini-list
+            v-if="item.triggered.length"
+            :triggered="item.triggered"
+            data-testid="mini-graph-downstream"
+          />
         </div>
       </template>
 

spec/frontend/pipelines/mock_data.js

@@ -471,3 +471,84 @@ export const mockSearch = [
 export const mockBranchesAfterMap = ['branch-1', 'branch-10', 'branch-11'];
 
 export const mockTagsAfterMap = ['tag-3', 'tag-2', 'tag-1', 'main-tag'];
+
+export const triggered = [
+  {
+    id: 602,
+    user: {
+      id: 1,
+      name: 'Administrator',
+      username: 'root',
+      state: 'active',
+      avatar_url:
+        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+      web_url: 'http://gdk.test:3000/root',
+      show_status: false,
+      path: '/root',
+    },
+    active: false,
+    coverage: null,
+    source: 'pipeline',
+    source_job: { name: 'trigger_job_on_mr' },
+    path: '/root/job-log-sections/-/pipelines/602',
+    details: {
+      status: {
+        icon: 'status_success',
+        text: 'passed',
+        label: 'passed',
+        group: 'success',
+        tooltip: 'passed',
+        has_details: true,
+        details_path: '/root/job-log-sections/-/pipelines/602',
+        illustration: null,
+        favicon:
+          '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+      },
+    },
+    project: {
+      id: 36,
+      name: 'job-log-sections',
+      full_path: '/root/job-log-sections',
+      full_name: 'Administrator / job-log-sections',
+    },
+  },
+];
+
+export const triggeredBy = {
+  id: 614,
+  user: {
+    id: 1,
+    name: 'Administrator',
+    username: 'root',
+    state: 'active',
+    avatar_url: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+    web_url: 'http://gdk.test:3000/root',
+    show_status: false,
+    path: '/root',
+  },
+  active: false,
+  coverage: null,
+  source: 'web',
+  source_job: { name: null },
+  path: '/root/trigger-downstream/-/pipelines/614',
+  details: {
+    status: {
+      icon: 'status_success',
+      text: 'passed',
+      label: 'passed',
+      group: 'success',
+      tooltip: 'passed',
+      has_details: true,
+      details_path: '/root/trigger-downstream/-/pipelines/614',
+      illustration: null,
+      favicon:
+        '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+    },
+  },
+  project: {
+    id: 42,
+    name: 'trigger-downstream',
+    full_path: '/root/trigger-downstream',
+    full_name: 'Administrator / trigger-downstream',
+  },
+};

spec/frontend/pipelines/pipelines_table_spec.js

@@ -12,6 +12,7 @@ import PipelinesTimeago from '~/pipelines/components/pipelines_list/time_ago.vue
 import eventHub from '~/pipelines/event_hub';
 import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
 import CommitComponent from '~/vue_shared/components/commit.vue';
+import { triggeredBy, triggered } from './mock_data';
 
 jest.mock('~/pipelines/event_hub');
 
@@ -59,6 +60,8 @@ describe('Pipelines Table', () => {
   const findStagesTh = () => wrapper.findByTestId('stages-th');
   const findTimeAgoTh = () => wrapper.findByTestId('timeago-th');
   const findActionsTh = () => wrapper.findByTestId('actions-th');
+  const findUpstream = () => wrapper.findByTestId('mini-graph-upstream');
+  const findDownstream = () => wrapper.findByTestId('mini-graph-downstream');
 
   beforeEach(() => {
     pipeline = createMockPipeline();
@@ -136,6 +139,8 @@ describe('Pipelines Table', () => {
     describe('stages cell', () => {
       it('should render a pipeline mini graph', () => {
         expect(findPipelineMiniGraph().exists()).toBe(true);
+        expect(findUpstream().exists()).toBe(false);
+        expect(findDownstream().exists()).toBe(false);
       });
 
       it('should render the right number of stages', () => {
@@ -173,6 +178,57 @@ describe('Pipelines Table', () => {
 
         expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
       });
+
+      describe('upstream linked pipelines', () => {
+        beforeEach(() => {
+          pipeline = createMockPipeline();
+          pipeline.triggered_by = triggeredBy;
+
+          createComponent({ pipelines: [pipeline] });
+        });
+
+        it('should render only a upstream pipeline', () => {
+          expect(findUpstream().exists()).toBe(true);
+          expect(findDownstream().exists()).toBe(false);
+        });
+
+        it('should pass an array of the correct data to the linked pipeline component', () => {
+          const triggeredByProps = findUpstream().props('triggeredBy');
+
+          expect(triggeredByProps).toEqual(expect.any(Array));
+          expect(triggeredByProps).toHaveLength(1);
+          expect(triggeredByProps[0]).toBe(triggeredBy);
+        });
+      });
+
+      describe('downstream linked pipelines', () => {
+        beforeEach(() => {
+          pipeline = createMockPipeline();
+          pipeline.triggered = triggered;
+
+          createComponent({ pipelines: [pipeline] });
+        });
+
+        it('should render only a downstream pipeline', () => {
+          expect(findDownstream().exists()).toBe(true);
+          expect(findUpstream().exists()).toBe(false);
+        });
+      });
+
+      describe('upstream and downstream linked pipelines', () => {
+        beforeEach(() => {
+          pipeline = createMockPipeline();
+          pipeline.triggered = triggered;
+          pipeline.triggered_by = triggeredBy;
+
+          createComponent({ pipelines: [pipeline] });
+        });
+
+        it('should render both downstream and upstream pipelines', () => {
+          expect(findDownstream().exists()).toBe(true);
+          expect(findUpstream().exists()).toBe(true);
+        });
+      });
     });
 
     describe('duration cell', () => {