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
EE: true

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>
 

ee/spec/frontend/pipelines/mock_data.js

+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',
+  },
+};

ee/spec/frontend/pipelines/pipelines_table_spec.js

+import { mount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import PipelinesTable from '~/pipelines/components/pipelines_list/pipelines_table.vue';
+
+import { triggeredBy, triggered } from './mock_data';
+
+jest.mock('~/pipelines/event_hub');
+
+describe('Pipelines Table', () => {
+  let pipeline;
+  let wrapper;
+
+  const jsonFixtureName = 'pipelines/pipelines.json';
+
+  const defaultProps = {
+    pipelines: [],
+    viewType: 'root',
+  };
+
+  const createMockPipeline = () => {
+    const { pipelines } = getJSONFixture(jsonFixtureName);
+    return pipelines.find((p) => p.user !== null && p.commit !== null);
+  };
+
+  const createComponent = (props = {}) => {
+    wrapper = extendedWrapper(
+      mount(PipelinesTable, {
+        propsData: {
+          ...defaultProps,
+          ...props,
+        },
+      }),
+    );
+  };
+
+  const findUpstream = () => wrapper.findByTestId('mini-graph-upstream');
+  const findDownstream = () => wrapper.findByTestId('mini-graph-downstream');
+
+  beforeEach(() => {
+    pipeline = createMockPipeline();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Pipelines Table', () => {
+    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);
+      });
+    });
+  });
+});