Add latest changes from gitlab-org/gitlab@master

7 files changed, 260 insertions, 29 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipeline_mini_graph/accessors/linked_pipelines_accessors.js b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/accessors/linked_pipelines_accessors.js
new file mode 100644
index 00000000000..1ca9e35c008
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/accessors/linked_pipelines_accessors.js
@@ -0,0 +1,14 @@
+import { get } from 'lodash';
+
+export const accessors = {
+  rest: {
+    detailedStatus: ['details', 'status'],
+  },
+  graphql: {
+    detailedStatus: 'detailedStatus',
+  },
+};
+
+export const accessValue = (pipeline, dataMethod, path) => {
+  return get(pipeline, accessors[dataMethod][path]);
+};
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/job_item.vue b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/job_item.vue
index 670fa398536..670fa398536 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/job_item.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/job_item.vue
diff --git a/app/assets/javascripts/pipelines/components/pipeline_mini_graph/linked_pipelines_mini_list.vue b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/linked_pipelines_mini_list.vue
new file mode 100644
index 00000000000..a5c6dc98694
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/linked_pipelines_mini_list.vue
@@ -0,0 +1,132 @@
+<script>
+import { GlTooltipDirective } from '@gitlab/ui';
+import { sprintf, s__ } from '~/locale';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import { accessValue } from './accessors/linked_pipelines_accessors';
+/**
+ * Renders the upstream/downstream portions of the pipeline mini graph.
+ */
+export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    CiIcon,
+  },
+  inject: {
+    dataMethod: {
+      default: 'rest',
+    },
+  },
+  props: {
+    triggeredBy: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    triggered: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    pipelinePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      maxRenderedPipelines: 3,
+    };
+  },
+  computed: {
+    // Exactly one of these (triggeredBy and triggered) must be truthy. Never both. Never neither.
+    isUpstream() {
+      return Boolean(this.triggeredBy.length) && !this.triggered.length;
+    },
+    isDownstream() {
+      return !this.triggeredBy.length && Boolean(this.triggered.length);
+    },
+    linkedPipelines() {
+      return this.isUpstream ? this.triggeredBy : this.triggered;
+    },
+    totalPipelineCount() {
+      return this.linkedPipelines.length;
+    },
+    linkedPipelinesTrimmed() {
+      return this.totalPipelineCount > this.maxRenderedPipelines
+        ? this.linkedPipelines.slice(0, this.maxRenderedPipelines)
+        : this.linkedPipelines;
+    },
+    shouldRenderCounter() {
+      return this.isDownstream && this.linkedPipelines.length > this.maxRenderedPipelines;
+    },
+    counterLabel() {
+      return `+${this.linkedPipelines.length - this.maxRenderedPipelines}`;
+    },
+    counterTooltipText() {
+      return sprintf(s__('LinkedPipelines|%{counterLabel} more downstream pipelines'), {
+        counterLabel: this.counterLabel,
+      });
+    },
+  },
+  methods: {
+    pipelineTooltipText(pipeline) {
+      const { label } = accessValue(pipeline, this.dataMethod, 'detailedStatus');
+
+      return `${pipeline.project.name} - ${label}`;
+    },
+    pipelineStatus(pipeline) {
+      // detailedStatus is graphQL, details.status is REST
+      return pipeline?.detailedStatus || pipeline?.details?.status;
+    },
+    triggerButtonClass(pipeline) {
+      const { group } = accessValue(pipeline, this.dataMethod, 'detailedStatus');
+
+      return `ci-status-icon-${group}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <span
+    v-if="linkedPipelines"
+    :class="{
+      'is-upstream': isUpstream,
+      'is-downstream': isDownstream,
+    }"
+    class="linked-pipeline-mini-list gl-display-inline gl-vertical-align-middle"
+  >
+    <a
+      v-for="pipeline in linkedPipelinesTrimmed"
+      :key="pipeline.id"
+      v-gl-tooltip="{ title: pipelineTooltipText(pipeline) }"
+      :href="pipeline.path"
+      :class="triggerButtonClass(pipeline)"
+      class="linked-pipeline-mini-item gl-display-inline-block gl-h-6 gl-mr-2 gl-my-2 gl-rounded-full gl-vertical-align-middle"
+      data-testid="linked-pipeline-mini-item"
+    >
+      <ci-icon
+        is-borderless
+        is-interactive
+        css-classes="gl-rounded-full"
+        :size="24"
+        :status="pipelineStatus(pipeline)"
+        class="gl-align-items-center gl-border gl-display-inline-flex"
+      />
+    </a>
+
+    <a
+      v-if="shouldRenderCounter"
+      v-gl-tooltip="{ title: counterTooltipText }"
+      :title="counterTooltipText"
+      :href="pipelinePath"
+      class="gl-align-items-center gl-bg-gray-50 gl-display-inline-flex gl-font-sm gl-h-6 gl-justify-content-center gl-rounded-pill gl-text-decoration-none gl-text-gray-500 gl-w-7 linked-pipelines-counter linked-pipeline-mini-item"
+      data-testid="linked-pipeline-counter"
+    >
+      {{ counterLabel }}
+    </a>
+  </span>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue
new file mode 100644
index 00000000000..83cfa0b7f87
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue
@@ -0,0 +1,102 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+import PipelineStages from './pipeline_stages.vue';
+import LinkedPipelinesMiniList from './linked_pipelines_mini_list.vue';
+/**
+ * Renders the pipeline mini graph.
+ */
+export default {
+  components: {
+    GlIcon,
+    LinkedPipelinesMiniList,
+    PipelineStages,
+  },
+  arrowStyles: [
+    'arrow-icon gl-display-inline-block gl-mx-1 gl-text-gray-500 gl-vertical-align-middle!',
+  ],
+  props: {
+    downstreamPipelines: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    isMergeTrain: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    pipelinePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    stages: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    stagesClass: {
+      type: [Array, Object, String],
+      required: false,
+      default: '',
+    },
+    updateDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    upstreamPipeline: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+  },
+  computed: {
+    hasDownstreamPipelines() {
+      return Boolean(this.downstreamPipelines.length);
+    },
+  },
+  methods: {
+    onPipelineActionRequestComplete() {
+      this.$emit('pipelineActionRequestComplete');
+    },
+  },
+};
+</script>
+<template>
+  <div class="stage-cell" data-testid="pipeline-mini-graph">
+    <linked-pipelines-mini-list
+      v-if="upstreamPipeline"
+      :triggered-by="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [
+        upstreamPipeline,
+      ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
+      data-testid="pipeline-mini-graph-upstream"
+    />
+    <gl-icon
+      v-if="upstreamPipeline"
+      :class="$options.arrowStyles"
+      name="long-arrow"
+      data-testid="upstream-arrow-icon"
+    />
+    <pipeline-stages
+      :is-merge-train="isMergeTrain"
+      :stages="stages"
+      :update-dropdown="updateDropdown"
+      :stages-class="stagesClass"
+      data-testid="pipeline-stages"
+      @pipelineActionRequestComplete="onPipelineActionRequestComplete"
+    />
+    <gl-icon
+      v-if="hasDownstreamPipelines"
+      :class="$options.arrowStyles"
+      name="long-arrow"
+      data-testid="downstream-arrow-icon"
+    />
+    <linked-pipelines-mini-list
+      v-if="hasDownstreamPipelines"
+      :triggered="downstreamPipelines"
+      :pipeline-path="pipelinePath"
+      data-testid="pipeline-mini-graph-downstream"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue
index d7e55d36ff6..d7e55d36ff6 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_mini_graph.vue b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stages.vue
index 05cb2ebb769..71de8928748 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_mini_graph.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stages.vue
@@ -1,7 +1,7 @@
 <script>
-import PipelineStage from '~/pipelines/components/pipelines_list/pipeline_stage.vue';
+import PipelineStage from './pipeline_stage.vue';
 /**
- * Renders the pipeline mini graph.
+ * Renders the pipeline stages portion of the pipeline mini graph.
  */
 export default {
   components: {
@@ -36,7 +36,7 @@ export default {
 };
 </script>
 <template>
-  <div data-testid="pipeline-mini-graph" class="gl-display-inline gl-vertical-align-middle">
+  <div data-testid="pipeline-stages" class="gl-display-inline gl-vertical-align-middle">
     <div
       v-for="stage in stages"
       :key="stage.name"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
index 53da98434b0..6f077e4c138 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
@@ -1,8 +1,8 @@
 <script>
 import { GlTableLite, GlTooltipDirective } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
+import PipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue';
 import eventHub from '../../event_hub';
-import PipelineMiniGraph from './pipeline_mini_graph.vue';
 import PipelineOperations from './pipeline_operations.vue';
 import PipelineStopModal from './pipeline_stop_modal.vue';
 import PipelineTriggerer from './pipeline_triggerer.vue';
@@ -17,8 +17,6 @@ const DEFAULT_TH_CLASSES =
 export default {
   components: {
     GlTableLite,
-    LinkedPipelinesMiniList: () =>
-      import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'),
     PipelineMiniGraph,
     PipelineOperations,
     PipelinesStatusBadge,
@@ -169,29 +167,14 @@ export default {
       </template>
 
       <template #cell(stages)="{ item }">
-        <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="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [
-              item.triggered_by,
-            ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
-            data-testid="mini-graph-upstream"
-          />
-          <pipeline-mini-graph
-            v-if="item.details && item.details.stages && item.details.stages.length > 0"
-            :stages="item.details.stages"
-            :update-dropdown="updateGraphDropdown"
-            @pipelineActionRequestComplete="onPipelineActionRequestComplete"
-          />
-          <linked-pipelines-mini-list
-            v-if="item.triggered.length"
-            :triggered="item.triggered"
-            :pipeline-path="item.path"
-            data-testid="mini-graph-downstream"
-          />
-        </div>
+        <pipeline-mini-graph
+          :downstream-pipelines="item.triggered"
+          :pipeline-path="item.path"
+          :stages="item.details.stages"
+          :update-dropdown="updateGraphDropdown"
+          :upstream-pipeline="item.triggered_by"
+          @pipelineActionRequestComplete="onPipelineActionRequestComplete"
+        />
       </template>
 
       <template #cell(actions)="{ item }">