Add latest changes from gitlab-org/gitlab@master

6 files changed, 134 insertions, 3 deletions

diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
index b996d3f15d1..8511f9bdb0f 100644
--- a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
@@ -10,7 +10,7 @@ import {
 import { formatStages } from '../utils';
 import getLinkedPipelinesQuery from '../graphql/queries/get_linked_pipelines.query.graphql';
 import getPipelineStagesQuery from '../graphql/queries/get_pipeline_stages.query.graphql';
-import { PIPELINE_STAGES_POLL_INTERVAL } from '../constants';
+import { COMMIT_BOX_POLL_INTERVAL } from '../constants';
 
 export default {
   i18n: {
@@ -65,7 +65,7 @@ export default {
         return getQueryHeaders(this.graphqlResourceEtag);
       },
       query: getPipelineStagesQuery,
-      pollInterval: PIPELINE_STAGES_POLL_INTERVAL,
+      pollInterval: COMMIT_BOX_POLL_INTERVAL,
       variables() {
         return {
           fullPath: this.fullPath,
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
new file mode 100644
index 00000000000..5a9d3129809
--- /dev/null
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
@@ -0,0 +1,74 @@
+<script>
+import { GlLoadingIcon, GlLink } from '@gitlab/ui';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import createFlash from '~/flash';
+import {
+  getQueryHeaders,
+  toggleQueryPollingByVisibility,
+} from '~/pipelines/components/graph/utils';
+import getLatestPipelineStatusQuery from '../graphql/queries/get_latest_pipeline_status.query.graphql';
+import { COMMIT_BOX_POLL_INTERVAL, PIPELINE_STATUS_FETCH_ERROR } from '../constants';
+
+export default {
+  PIPELINE_STATUS_FETCH_ERROR,
+  components: {
+    CiIcon,
+    GlLoadingIcon,
+    GlLink,
+  },
+  inject: {
+    fullPath: {
+      default: '',
+    },
+    iid: {
+      default: '',
+    },
+    graphqlResourceEtag: {
+      default: '',
+    },
+  },
+  apollo: {
+    pipelineStatus: {
+      context() {
+        return getQueryHeaders(this.graphqlResourceEtag);
+      },
+      query: getLatestPipelineStatusQuery,
+      pollInterval: COMMIT_BOX_POLL_INTERVAL,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+          iid: this.iid,
+        };
+      },
+      update({ project }) {
+        return project?.pipeline?.detailedStatus || {};
+      },
+      error() {
+        createFlash({ message: this.$options.PIPELINE_STATUS_FETCH_ERROR });
+      },
+    },
+  },
+  data() {
+    return {
+      pipelineStatus: {},
+    };
+  },
+  computed: {
+    loading() {
+      return this.$apollo.queries.pipelineStatus.loading;
+    },
+  },
+  mounted() {
+    toggleQueryPollingByVisibility(this.$apollo.queries.pipelineStatus);
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-inline-block gl-vertical-align-middle gl-mr-2">
+    <gl-loading-icon v-if="loading" />
+    <gl-link v-else :href="pipelineStatus.detailsPath">
+      <ci-icon :status="pipelineStatus" :size="24" />
+    </gl-link>
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/commit_box/info/constants.js b/app/assets/javascripts/projects/commit_box/info/constants.js
index fc4f03482e2..be0bf715314 100644
--- a/app/assets/javascripts/projects/commit_box/info/constants.js
+++ b/app/assets/javascripts/projects/commit_box/info/constants.js
@@ -1 +1,7 @@
-export const PIPELINE_STAGES_POLL_INTERVAL = 10000;
+import { __ } from '~/locale';
+
+export const COMMIT_BOX_POLL_INTERVAL = 10000;
+
+export const PIPELINE_STATUS_FETCH_ERROR = __(
+  'There was a problem fetching the latest pipeline status.',
+);
diff --git a/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_latest_pipeline_status.query.graphql b/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_latest_pipeline_status.query.graphql
new file mode 100644
index 00000000000..cec96f82336
--- /dev/null
+++ b/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_latest_pipeline_status.query.graphql
@@ -0,0 +1,14 @@
+query getLatestPipelineStatus($fullPath: ID!, $iid: ID!) {
+  project(fullPath: $fullPath) {
+    id
+    pipeline(iid: $iid) {
+      id
+      detailedStatus {
+        id
+        detailsPath
+        icon
+        group
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/projects/commit_box/info/index.js b/app/assets/javascripts/projects/commit_box/info/index.js
index 69fe2d30489..7500c152b6a 100644
--- a/app/assets/javascripts/projects/commit_box/info/index.js
+++ b/app/assets/javascripts/projects/commit_box/info/index.js
@@ -2,6 +2,7 @@ import { fetchCommitMergeRequests } from '~/commit_merge_requests';
 import { initCommitPipelineMiniGraph } from './init_commit_pipeline_mini_graph';
 import { initDetailsButton } from './init_details_button';
 import { loadBranches } from './load_branches';
+import initCommitPipelineStatus from './init_commit_pipeline_status';
 
 export const initCommitBoxInfo = () => {
   // Display commit related branches
@@ -14,4 +15,6 @@ export const initCommitBoxInfo = () => {
   initCommitPipelineMiniGraph();
 
   initDetailsButton();
+
+  initCommitPipelineStatus();
 };
diff --git a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_status.js b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_status.js
new file mode 100644
index 00000000000..d5e62531283
--- /dev/null
+++ b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_status.js
@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import CommitBoxPipelineStatus from './components/commit_box_pipeline_status.vue';
+
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient({}, { useGet: true }),
+});
+
+export default (selector = '.js-commit-pipeline-status') => {
+  const el = document.querySelector(selector);
+
+  if (!el) {
+    return;
+  }
+
+  const { fullPath, iid, graphqlResourceEtag } = el.dataset;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      fullPath,
+      iid,
+      graphqlResourceEtag,
+    },
+    render(createElement) {
+      return createElement(CommitBoxPipelineStatus);
+    },
+  });
+};