Merge branch '291043-delete-integrated-code' into 'master'

Pipeline Graph: Remove REST/old graph bridging code [RUN ALL RSPEC]

See merge request gitlab-org/gitlab!68665

app/assets/javascripts/pipelines/components/graph/accessors.js

-import { get } from 'lodash';
-import { REST, GRAPHQL } from './constants';
-
-const accessors = {
-  [REST]: {
-    detailsPath: 'details_path',
-    groupId: 'id',
-    hasDetails: 'has_details',
-    pipelineStatus: ['details', 'status'],
-    sourceJob: ['source_job', 'name'],
-  },
-  [GRAPHQL]: {
-    detailsPath: 'detailsPath',
-    groupId: 'name',
-    hasDetails: 'hasDetails',
-    pipelineStatus: 'status',
-    sourceJob: ['sourceJob', 'name'],
-  },
-};
-
-const accessValue = (dataMethod, prop, item) => {
-  return get(item, accessors[dataMethod][prop]);
-};
-
-export { accessors, accessValue };

app/assets/javascripts/pipelines/components/graph/constants.js

@@ -8,9 +8,6 @@ export const UPSTREAM = 'upstream';
 */
 export const ONE_COL_WIDTH = 180;
 
-export const REST = 'rest';
-export const GRAPHQL = 'graphql';
-
 export const STAGE_VIEW = 'stage';
 export const LAYER_VIEW = 'layer';
 export const VIEW_TYPE_KEY = 'pipeline_graph_view_type';

app/assets/javascripts/pipelines/components/graph/job_item.vue

@@ -7,8 +7,7 @@ import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { reportToSentry } from '../../utils';
 import ActionComponent from '../jobs_shared/action_component.vue';
 import JobNameComponent from '../jobs_shared/job_name_component.vue';
-import { accessValue } from './accessors';
-import { REST, SINGLE_JOB } from './constants';
+import { SINGLE_JOB } from './constants';
 
 /**
  * Renders the badge for the pipeline graph and the job's dropdown.
@@ -47,11 +46,6 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [delayedJobMixin],
-  inject: {
-    dataMethod: {
-      default: REST,
-    },
-  },
   props: {
     job: {
       type: Object,
@@ -111,10 +105,10 @@ export default {
       return this.pipelineId > -1 ? `${this.job.name}-${this.pipelineId}` : '';
     },
     detailsPath() {
-      return accessValue(this.dataMethod, 'detailsPath', this.status);
+      return this.status.detailsPath;
     },
     hasDetails() {
-      return accessValue(this.dataMethod, 'hasDetails', this.status);
+      return this.status.hasDetails;
     },
     isSingleItem() {
       return this.type === SINGLE_JOB;
@@ -189,7 +183,7 @@ export default {
       if (this.isSingleItem) {
         /*
           This is so the jobDropdown still toggles. Issue to refactor:
-          https://gitlab.com/gitlab-org/gitlab/-/issues/267117 
+          https://gitlab.com/gitlab-org/gitlab/-/issues/267117
         */
         evt.stopPropagation();
       }

app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue

@@ -4,8 +4,7 @@ import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { __, sprintf } from '~/locale';
 import CiStatus from '~/vue_shared/components/ci_icon.vue';
 import { reportToSentry } from '../../utils';
-import { accessValue } from './accessors';
-import { DOWNSTREAM, REST, UPSTREAM } from './constants';
+import { DOWNSTREAM, UPSTREAM } from './constants';
 
 export default {
   directives: {
@@ -18,11 +17,6 @@ export default {
     GlLoadingIcon,
     GlBadge,
   },
-  inject: {
-    dataMethod: {
-      default: REST,
-    },
-  },
   props: {
     columnTitle: {
       type: String,
@@ -40,20 +34,9 @@ export default {
       type: String,
       required: true,
     },
-    /*
-      The next two props will be removed or required
-      once the graph transition is done.
-      See: https://gitlab.com/gitlab-org/gitlab/-/issues/291043
-    */
     isLoading: {
       type: Boolean,
-      required: false,
-      default: false,
-    },
-    projectId: {
-      type: Number,
-      required: false,
-      default: -1,
+      required: true,
     },
   },
   computed: {
@@ -65,7 +48,7 @@ export default {
       return `js-linked-pipeline-${this.pipeline.id}`;
     },
     pipelineStatus() {
-      return accessValue(this.dataMethod, 'pipelineStatus', this.pipeline);
+      return this.pipeline.status;
     },
     projectName() {
       return this.pipeline.project.name;
@@ -97,12 +80,10 @@ export default {
       return this.type === UPSTREAM;
     },
     isSameProject() {
-      return this.projectId > -1
-        ? this.projectId === this.pipeline.project.id
-        : !this.pipeline.multiproject;
+      return !this.pipeline.multiproject;
     },
     sourceJobName() {
-      return accessValue(this.dataMethod, 'sourceJob', this.pipeline);
+      return this.pipeline.sourceJob?.name ?? '';
     },
     sourceJobInfo() {
       return this.isDownstream ? sprintf(__('Created by %{job}'), { job: this.sourceJobName }) : '';

app/assets/javascripts/pipelines/components/graph/stage_column_component.vue

@@ -4,8 +4,6 @@ import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { reportToSentry } from '../../utils';
 import MainGraphWrapper from '../graph_shared/main_graph_wrapper.vue';
 import ActionComponent from '../jobs_shared/action_component.vue';
-import { accessValue } from './accessors';
-import { GRAPHQL } from './constants';
 import JobGroupDropdown from './job_group_dropdown.vue';
 import JobItem from './job_item.vue';
 
@@ -97,7 +95,7 @@ export default {
   },
   methods: {
     getGroupId(group) {
-      return accessValue(GRAPHQL, 'groupId', group);
+      return group.name;
     },
     groupId(group) {
       return `ci-badge-${escape(group.name)}`;

app/assets/javascripts/pipelines/pipeline_details_graph.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import { GRAPHQL } from './components/graph/constants';
 import PipelineGraphWrapper from './components/graph/graph_component_wrapper.vue';
 import { reportToSentry } from './utils';
 
@@ -23,7 +22,6 @@ const createPipelinesDetailApp = (
       pipelineProjectPath,
       pipelineIid,
       graphqlResourceEtag,
-      dataMethod: GRAPHQL,
     },
     errorCaptured(err, _vm, info) {
       reportToSentry('pipeline_details_graph', `error: ${err}, info: ${info}`);

spec/frontend/pipelines/graph/graph_component_spec.js

 import { mount, shallowMount } from '@vue/test-utils';
-import { GRAPHQL, LAYER_VIEW, STAGE_VIEW } from '~/pipelines/components/graph/constants';
+import { LAYER_VIEW, STAGE_VIEW } from '~/pipelines/components/graph/constants';
 import PipelineGraph from '~/pipelines/components/graph/graph_component.vue';
 import JobItem from '~/pipelines/components/graph/job_item.vue';
 import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue';
@@ -54,9 +54,6 @@ describe('graph component', () => {
           ...data,
         };
       },
-      provide: {
-        dataMethod: GRAPHQL,
-      },
       stubs: {
         'links-inner': true,
         'linked-pipeline': true,

spec/frontend/pipelines/graph/job_item_spec.js

@@ -14,7 +14,29 @@ describe('pipeline graph job item', () => {
   };
 
   const triggerActiveClass = 'gl-shadow-x0-y0-b3-s1-blue-500';
-  const delayedJobFixture = getJSONFixture('jobs/delayed.json');
+
+  const delayedJob = {
+    __typename: 'CiJob',
+    name: 'delayed job',
+    scheduledAt: '2015-07-03T10:01:00.000Z',
+    needs: [],
+    status: {
+      __typename: 'DetailedStatus',
+      icon: 'status_scheduled',
+      tooltip: 'delayed manual action (%{remainingTime})',
+      hasDetails: true,
+      detailsPath: '/root/kinder-pipe/-/jobs/5339',
+      group: 'scheduled',
+      action: {
+        __typename: 'StatusAction',
+        icon: 'time-out',
+        title: 'Unschedule',
+        path: '/frontend-fixtures/builds-project/-/jobs/142/unschedule',
+        buttonTitle: 'Unschedule job',
+      },
+    },
+  };
+
   const mockJob = {
     id: 4256,
     name: 'test',
@@ -24,8 +46,8 @@ describe('pipeline graph job item', () => {
       label: 'passed',
       tooltip: 'passed',
       group: 'success',
-      details_path: '/root/ci-mock/builds/4256',
-      has_details: true,
+      detailsPath: '/root/ci-mock/builds/4256',
+      hasDetails: true,
       action: {
         icon: 'retry',
         title: 'Retry',
@@ -42,8 +64,8 @@ describe('pipeline graph job item', () => {
       text: 'passed',
       label: 'passed',
       group: 'success',
-      details_path: '/root/ci-mock/builds/4257',
-      has_details: false,
+      detailsPath: '/root/ci-mock/builds/4257',
+      hasDetails: false,
     },
   };
 
@@ -58,7 +80,7 @@ describe('pipeline graph job item', () => {
       wrapper.vm.$nextTick(() => {
         const link = wrapper.find('a');
 
-        expect(link.attributes('href')).toBe(mockJob.status.details_path);
+        expect(link.attributes('href')).toBe(mockJob.status.detailsPath);
 
         expect(link.attributes('title')).toBe(`${mockJob.name} - ${mockJob.status.label}`);
 
@@ -145,7 +167,7 @@ describe('pipeline graph job item', () => {
   describe('for delayed job', () => {
     it('displays remaining time in tooltip', () => {
       createWrapper({
-        job: delayedJobFixture,
+        job: delayedJob,
       });
 
       expect(findJobWithLink().attributes('title')).toBe(

spec/frontend/pipelines/graph/linked_pipeline_spec.js

@@ -4,11 +4,7 @@ import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { UPSTREAM, DOWNSTREAM } from '~/pipelines/components/graph/constants';
 import LinkedPipelineComponent from '~/pipelines/components/graph/linked_pipeline.vue';
 import CiStatus from '~/vue_shared/components/ci_icon.vue';
-import mockData from './linked_pipelines_mock_data';
-
-const mockPipeline = mockData.triggered[0];
-const validTriggeredPipelineId = mockPipeline.project.id;
-const invalidTriggeredPipelineId = mockPipeline.project.id + 5;
+import mockPipeline from './linked_pipelines_mock_data';
 
 describe('Linked pipeline', () => {
   let wrapper;
@@ -39,10 +35,10 @@ describe('Linked pipeline', () => {
   describe('rendered output', () => {
     const props = {
       pipeline: mockPipeline,
-      projectId: invalidTriggeredPipelineId,
       columnTitle: 'Downstream',
       type: DOWNSTREAM,
       expanded: false,
+      isLoading: false,
     };
 
     beforeEach(() => {
@@ -60,7 +56,7 @@ describe('Linked pipeline', () => {
     });
 
     it('should render the pipeline status icon svg', () => {
-      expect(wrapper.find('.ci-status-icon-failed svg').exists()).toBe(true);
+      expect(wrapper.find('.ci-status-icon-success svg').exists()).toBe(true);
     });
 
     it('should have a ci-status child component', () => {
@@ -73,8 +69,8 @@ describe('Linked pipeline', () => {
 
     it('should correctly compute the tooltip text', () => {
       expect(wrapper.vm.tooltipText).toContain(mockPipeline.project.name);
-      expect(wrapper.vm.tooltipText).toContain(mockPipeline.details.status.label);
-      expect(wrapper.vm.tooltipText).toContain(mockPipeline.source_job.name);
+      expect(wrapper.vm.tooltipText).toContain(mockPipeline.status.label);
+      expect(wrapper.vm.tooltipText).toContain(mockPipeline.sourceJob.name);
       expect(wrapper.vm.tooltipText).toContain(mockPipeline.id);
     });
 
@@ -82,11 +78,7 @@ describe('Linked pipeline', () => {
       const titleAttr = findLinkedPipeline().attributes('title');
 
       expect(titleAttr).toContain(mockPipeline.project.name);
-      expect(titleAttr).toContain(mockPipeline.details.status.label);
-    });
-
-    it('sets the loading prop to false', () => {
-      expect(findButton().props('loading')).toBe(false);
+      expect(titleAttr).toContain(mockPipeline.status.label);
     });
 
     it('should display multi-project label when pipeline project id is not the same as triggered pipeline project id', () => {
@@ -96,18 +88,20 @@ describe('Linked pipeline', () => {
 
   describe('parent/child', () => {
     const downstreamProps = {
-      pipeline: mockPipeline,
-      projectId: validTriggeredPipelineId,
+      pipeline: {
+        ...mockPipeline,
+        multiproject: false,
+      },
       columnTitle: 'Downstream',
       type: DOWNSTREAM,
       expanded: false,
+      isLoading: false,
     };
 
     const upstreamProps = {
       ...downstreamProps,
       columnTitle: 'Upstream',
       type: UPSTREAM,
-      expanded: false,
     };
 
     it('parent/child label container should exist', () => {
@@ -122,7 +116,7 @@ describe('Linked pipeline', () => {
 
     it('should have the name of the trigger job on the card when it is a child pipeline', () => {
       createWrapper(downstreamProps);
-      expect(findDownstreamPipelineTitle().text()).toBe(mockPipeline.source_job.name);
+      expect(findDownstreamPipelineTitle().text()).toBe(mockPipeline.sourceJob.name);
     });
 
     it('should display parent label when pipeline project id is the same as triggered_by pipeline project id', () => {
@@ -132,12 +126,12 @@ describe('Linked pipeline', () => {
 
     it('downstream pipeline should contain the correct link', () => {
       createWrapper(downstreamProps);
-      expect(findPipelineLink().attributes('href')).toBe(mockData.triggered_by.path);
+      expect(findPipelineLink().attributes('href')).toBe(downstreamProps.pipeline.path);
     });
 
     it('upstream pipeline should contain the correct link', () => {
       createWrapper(upstreamProps);
-      expect(findPipelineLink().attributes('href')).toBe(mockData.triggered_by.path);
+      expect(findPipelineLink().attributes('href')).toBe(upstreamProps.pipeline.path);
     });
 
     it.each`
@@ -183,11 +177,11 @@ describe('Linked pipeline', () => {
 
   describe('when isLoading is true', () => {
     const props = {
-      pipeline: { ...mockPipeline, isLoading: true },
-      projectId: invalidTriggeredPipelineId,
+      pipeline: mockPipeline,
       columnTitle: 'Downstream',
       type: DOWNSTREAM,
       expanded: false,
+      isLoading: true,
     };
 
     beforeEach(() => {
@@ -202,10 +196,10 @@ describe('Linked pipeline', () => {
   describe('on click/hover', () => {
     const props = {
       pipeline: mockPipeline,
-      projectId: validTriggeredPipelineId,
       columnTitle: 'Downstream',
       type: DOWNSTREAM,
       expanded: false,
+      isLoading: false,
     };
 
     beforeEach(() => {
@@ -228,7 +222,7 @@ describe('Linked pipeline', () => {
 
     it('should emit downstreamHovered with job name on mouseover', () => {
       findLinkedPipeline().trigger('mouseover');
-      expect(wrapper.emitted().downstreamHovered).toStrictEqual([['trigger_job']]);
+      expect(wrapper.emitted().downstreamHovered).toStrictEqual([['test_c']]);
     });
 
     it('should emit downstreamHovered with empty string on mouseleave', () => {
@@ -238,7 +232,7 @@ describe('Linked pipeline', () => {
 
     it('should emit pipelineExpanded with job name and expanded state on click', () => {
       findExpandButton().trigger('click');
-      expect(wrapper.emitted().pipelineExpandToggle).toStrictEqual([['trigger_job', true]]);
+      expect(wrapper.emitted().pipelineExpandToggle).toStrictEqual([['test_c', true]]);
     });
   });
 });

spec/frontend/pipelines/graph/linked_pipelines_column_spec.js

@@ -4,7 +4,6 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import {
   DOWNSTREAM,
-  GRAPHQL,
   UPSTREAM,
   LAYER_VIEW,
   STAGE_VIEW,
@@ -52,9 +51,6 @@ describe('Linked Pipelines Column', () => {
         ...defaultProps,
         ...props,
       },
-      provide: {
-        dataMethod: GRAPHQL,
-      },
     });
   };