Add latest changes from gitlab-org/gitlab@master

4 files changed, 46 insertions, 10 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/accessors.js b/app/assets/javascripts/pipelines/components/graph/accessors.js
index 31fbab00ee8..6ece855bcd8 100644
--- a/app/assets/javascripts/pipelines/components/graph/accessors.js
+++ b/app/assets/javascripts/pipelines/components/graph/accessors.js
@@ -1,10 +1,25 @@
+import { get } from 'lodash';
 import { REST, GRAPHQL } from './constants';
 
-export const accessors = {
+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 };
diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue
index ef443d93c62..f099372d6db 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_item.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue
@@ -4,6 +4,8 @@ import ActionComponent from './action_component.vue';
 import JobNameComponent from './job_name_component.vue';
 import { sprintf } from '~/locale';
 import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
+import { accessors } from './accessors';
+import { REST } from './constants';
 
 /**
  * Renders the badge for the pipeline graph and the job's dropdown.
@@ -41,6 +43,11 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [delayedJobMixin],
+  inject: {
+    dataMethod: {
+      default: REST,
+    },
+  },
   props: {
     job: {
       type: Object,
@@ -71,10 +78,15 @@ export default {
     boundary() {
       return this.dropdownLength === 1 ? 'viewport' : 'scrollParent';
     },
+    detailsPath() {
+      return this.status[accessors[this.dataMethod].detailsPath];
+    },
+    hasDetails() {
+      return this.status[accessors[this.dataMethod].hasDetails];
+    },
     status() {
       return this.job && this.job.status ? this.job.status : {};
     },
-
     tooltipText() {
       const textBuilder = [];
       const { name: jobName } = this.job;
@@ -134,13 +146,13 @@ export default {
     data-qa-selector="job_item_container"
   >
     <gl-link
-      v-if="status.has_details"
+      v-if="hasDetails"
       v-gl-tooltip="{ boundary, placement: 'bottom', customClass: 'gl-pointer-events-none' }"
-      :href="status.details_path"
+      :href="detailsPath"
       :title="tooltipText"
       :class="jobClasses"
       class="js-pipeline-graph-job-link qa-job-link menu-item gl-text-gray-900 gl-active-text-decoration-none
-      gl-focus-text-decoration-none"
+      gl-focus-text-decoration-none gl-hover-text-decoration-none"
       data-testid="job-with-link"
       @click.stop="hideTooltips"
       @mouseout="hideTooltips"
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
index 11f06a25984..97e5a309215 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
@@ -2,7 +2,8 @@
 import { GlTooltipDirective, GlButton, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import CiStatus from '~/vue_shared/components/ci_icon.vue';
 import { __, sprintf } from '~/locale';
-import { UPSTREAM, DOWNSTREAM } from './constants';
+import { accessValue } from './accessors';
+import { DOWNSTREAM, REST, UPSTREAM } from './constants';
 
 export default {
   directives: {
@@ -14,6 +15,11 @@ export default {
     GlLink,
     GlLoadingIcon,
   },
+  inject: {
+    dataMethod: {
+      default: REST,
+    },
+  },
   props: {
     columnTitle: {
       type: String,
@@ -46,7 +52,7 @@ export default {
       return `js-linked-pipeline-${this.pipeline.id}`;
     },
     pipelineStatus() {
-      return this.pipeline.details.status;
+      return accessValue(this.dataMethod, 'pipelineStatus', this.pipeline);
     },
     projectName() {
       return this.pipeline.project.name;
@@ -77,10 +83,11 @@ export default {
     isSameProject() {
       return this.projectId === this.pipeline.project.id;
     },
+    sourceJobName() {
+      return accessValue(this.dataMethod, 'sourceJob', this.pipeline);
+    },
     sourceJobInfo() {
-      return this.isDownstream
-        ? sprintf(__('Created by %{job}'), { job: this.pipeline.source_job.name })
-        : '';
+      return this.isDownstream ? sprintf(__('Created by %{job}'), { job: this.sourceJobName }) : '';
     },
     expandedIcon() {
       if (this.isUpstream) {
diff --git a/app/assets/javascripts/pipelines/pipeline_details_graph.js b/app/assets/javascripts/pipelines/pipeline_details_graph.js
index 51e40b95515..b6ebd271802 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_graph.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_graph.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import PipelineGraphWrapper from './components/graph/graph_component_wrapper.vue';
+import { GRAPHQL } from './components/graph/constants';
 
 Vue.use(VueApollo);
 
@@ -20,6 +21,7 @@ const createPipelinesDetailApp = (selector, pipelineProjectPath, pipelineIid) =>
     provide: {
       pipelineProjectPath,
       pipelineIid,
+      dataMethod: GRAPHQL,
     },
     render(createElement) {
       return createElement(PipelineGraphWrapper);