Uniform CI status components in vue

6 files changed, 87 insertions, 83 deletions

diff --git a/app/assets/javascripts/vue_shared/ci_status_icons.js b/app/assets/javascripts/vue_shared/ci_status_icons.js
index 48ad9214ac8..d9d0cad38e4 100644
--- a/app/assets/javascripts/vue_shared/ci_status_icons.js
+++ b/app/assets/javascripts/vue_shared/ci_status_icons.js
@@ -41,15 +41,3 @@ export const statusIconEntityMap = {
   icon_status_success: SUCCESS_SVG,
   icon_status_warning: WARNING_SVG,
 };
-
-export const statusCssClasses = {
-  icon_status_canceled: 'canceled',
-  icon_status_created: 'created',
-  icon_status_failed: 'failed',
-  icon_status_manual: 'manual',
-  icon_status_pending: 'pending',
-  icon_status_running: 'running',
-  icon_status_skipped: 'skipped',
-  icon_status_success: 'success',
-  icon_status_warning: 'warning',
-};
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
new file mode 100644
index 00000000000..caa28bff6db
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -0,0 +1,52 @@
+<script>
+import ciIcon from './ci_icon.vue';
+/**
+ * Renders CI Badge link with CI icon and status text based on
+ * API response shared between all places where it is used.
+ *
+ * Receives status object containing:
+ * status: {
+ *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+ *   group:"running" // used for CSS class
+ *   icon: "icon_status_running" // used to render the icon
+ *   label:"running" // used for potential tooltip
+ *   text:"running" // text rendered
+ * }
+ *
+ * Used in:
+ * - Pipelines table - first column
+ * - Jobs table - first column
+ * - Pipeline show view - header
+ * - Job show view - header
+ * - MR widget
+ */
+
+export default {
+  props: {
+    status: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  components: {
+    ciIcon,
+  },
+
+  computed: {
+    cssClass() {
+      const className = this.status.group;
+
+      return className ? `ci-status ci-${this.status.group}` : 'ci-status';
+    },
+  },
+};
+</script>
+<template>
+  <a
+    :href="status.details_path"
+    :class="cssClass">
+    <ci-icon :status="status" />
+    {{status.text}}
+  </a>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index 4d44baaa3c4..ec88119e16c 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -1,6 +1,27 @@
 <script>
-  import { statusIconEntityMap, statusCssClasses } from '../../vue_shared/ci_status_icons';
+  import { statusIconEntityMap } from '../ci_status_icons';
 
+  /**
+   * Renders CI icon based on API response shared between all places where it is used.
+   *
+   * Receives status object containing:
+   * status: {
+   *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+   *   group:"running" // used for CSS class
+   *   icon: "icon_status_running" // used to render the icon
+   *   label:"running" // used for potential tooltip
+   *   text:"running" // text rendered
+   * }
+   *
+   * Used in:
+   * - Pipelines table Badge
+   * - Pipelines table mini graph
+   * - Pipeline graph
+   * - Pipeline show view badge
+   * - Jobs table
+   * - Jobs show view header
+   * - Jobs show view sidebar
+   */
   export default {
     props: {
       status: {
@@ -15,7 +36,7 @@
       },
 
       cssClass() {
-        const status = statusCssClasses[this.status.icon];
+        const status = this.status.group;
         return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
       },
     },
diff --git a/app/assets/javascripts/vue_shared/components/pipeline_status_icon.js b/app/assets/javascripts/vue_shared/components/pipeline_status_icon.js
deleted file mode 100644
index ae246ada01b..00000000000
--- a/app/assets/javascripts/vue_shared/components/pipeline_status_icon.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { statusClassToSvgMap } from '../pipeline_svg_icons';
-
-export default {
-  name: 'PipelineStatusIcon',
-  props: {
-    pipelineStatus: { type: Object, required: true, default: () => ({}) },
-  },
-  computed: {
-    svg() {
-      return statusClassToSvgMap[this.pipelineStatus.icon];
-    },
-    statusClass() {
-      return `ci-status-icon ci-status-icon-${this.pipelineStatus.group}`;
-    },
-  },
-  template: `
-    <div :class="statusClass">
-      <a class="icon-link" :href="pipelineStatus.details_path">
-        <span v-html="svg" aria-hidden="true"></span>
-      </a>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
index 7ac7ceaa4e5..30d16e4ed3e 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -2,7 +2,7 @@
 import AsyncButtonComponent from '../../pipelines/components/async_button.vue';
 import PipelinesActionsComponent from '../../pipelines/components/pipelines_actions';
 import PipelinesArtifactsComponent from '../../pipelines/components/pipelines_artifacts';
-import PipelinesStatusComponent from '../../pipelines/components/status';
+import ciBadge from './ci_badge_link.vue';
 import PipelinesStageComponent from '../../pipelines/components/stage.vue';
 import PipelinesUrlComponent from '../../pipelines/components/pipeline_url';
 import PipelinesTimeagoComponent from '../../pipelines/components/time_ago';
@@ -39,7 +39,7 @@ export default {
     'commit-component': CommitComponent,
     'dropdown-stage': PipelinesStageComponent,
     'pipeline-url': PipelinesUrlComponent,
-    'status-scope': PipelinesStatusComponent,
+    ciBadge,
     'time-ago': PipelinesTimeagoComponent,
   },
 
@@ -196,11 +196,20 @@ export default {
 
       return '';
     },
+
+    pipelineStatus() {
+      if (this.pipeline.details && this.pipeline.details.status) {
+        return this.pipeline.details.status;
+      }
+      return {};
+    },
   },
 
   template: `
     <tr class="commit">
-      <status-scope :pipeline="pipeline"/>
+      <td class="commit-link">
+        <ci-badge :status="pipelineStatus"/>
+      </td>
 
       <pipeline-url :pipeline="pipeline"></pipeline-url>
 
diff --git a/app/assets/javascripts/vue_shared/pipeline_svg_icons.js b/app/assets/javascripts/vue_shared/pipeline_svg_icons.js
deleted file mode 100644
index 5af30ae74f0..00000000000
--- a/app/assets/javascripts/vue_shared/pipeline_svg_icons.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import canceledSvg from 'icons/_icon_status_canceled.svg';
-import createdSvg from 'icons/_icon_status_created.svg';
-import failedSvg from 'icons/_icon_status_failed.svg';
-import manualSvg from 'icons/_icon_status_manual.svg';
-import pendingSvg from 'icons/_icon_status_pending.svg';
-import runningSvg from 'icons/_icon_status_running.svg';
-import skippedSvg from 'icons/_icon_status_skipped.svg';
-import successSvg from 'icons/_icon_status_success.svg';
-import warningSvg from 'icons/_icon_status_warning.svg';
-
-import canceledBorderlessSvg from 'icons/_icon_status_canceled_borderless.svg';
-import createdBorderlessSvg from 'icons/_icon_status_created_borderless.svg';
-import failedBorderlessSvg from 'icons/_icon_status_failed_borderless.svg';
-import manualBorderlessSvg from 'icons/_icon_status_manual_borderless.svg';
-import pendingBorderlessSvg from 'icons/_icon_status_pending_borderless.svg';
-import runningBorderlessSvg from 'icons/_icon_status_running_borderless.svg';
-import skippedBorderlessSvg from 'icons/_icon_status_skipped_borderless.svg';
-import successBorderlessSvg from 'icons/_icon_status_success_borderless.svg';
-import warningBorderlessSvg from 'icons/_icon_status_warning_borderless.svg';
-
-export const statusClassToSvgMap = {
-  icon_status_canceled: canceledSvg,
-  icon_status_created: createdSvg,
-  icon_status_failed: failedSvg,
-  icon_status_manual: manualSvg,
-  icon_status_pending: pendingSvg,
-  icon_status_running: runningSvg,
-  icon_status_skipped: skippedSvg,
-  icon_status_success: successSvg,
-  icon_status_warning: warningSvg,
-};
-
-export const statusClassToBorderlessSvgMap = {
-  icon_status_canceled: canceledBorderlessSvg,
-  icon_status_created: createdBorderlessSvg,
-  icon_status_failed: failedBorderlessSvg,
-  icon_status_manual: manualBorderlessSvg,
-  icon_status_pending: pendingBorderlessSvg,
-  icon_status_running: runningBorderlessSvg,
-  icon_status_skipped: skippedBorderlessSvg,
-  icon_status_success: successBorderlessSvg,
-  icon_status_warning: warningBorderlessSvg,
-};