1 files changed, 120 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
new file mode 100644
index 00000000000..b1ea464be99
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
@@ -0,0 +1,120 @@
+<script>
+import { GlIcon, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { s__ } from '~/locale';
+import getCommitSha from '~/pipeline_editor/graphql/queries/client/commit_sha.graphql';
+import getPipelineQuery from '~/pipeline_editor/graphql/queries/client/pipeline.graphql';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+
+const POLL_INTERVAL = 10000;
+export const i18n = {
+  fetchError: s__('Pipeline|We are currently unable to fetch pipeline data'),
+  fetchLoading: s__('Pipeline|Checking pipeline status'),
+  pipelineInfo: s__(
+    `Pipeline|Pipeline %{idStart}#%{idEnd} %{statusStart}%{statusEnd} for %{commitStart}%{commitEnd}`,
+  ),
+};
+
+export default {
+  i18n,
+  components: {
+    CiIcon,
+    GlIcon,
+    GlLink,
+    GlLoadingIcon,
+    GlSprintf,
+  },
+  inject: ['projectFullPath'],
+  apollo: {
+    commitSha: {
+      query: getCommitSha,
+    },
+    pipeline: {
+      query: getPipelineQuery,
+      variables() {
+        return {
+          fullPath: this.projectFullPath,
+          sha: this.commitSha,
+        };
+      },
+      update: (data) => {
+        const { id, commitPath = '', shortSha = '', detailedStatus = {} } =
+          data.project?.pipeline || {};
+
+        return {
+          id,
+          commitPath,
+          shortSha,
+          detailedStatus,
+        };
+      },
+      error() {
+        this.hasError = true;
+      },
+      pollInterval: POLL_INTERVAL,
+    },
+  },
+  data() {
+    return {
+      hasError: false,
+    };
+  },
+  computed: {
+    hasPipelineData() {
+      return Boolean(this.$apollo.queries.pipeline?.id);
+    },
+    isQueryLoading() {
+      return this.$apollo.queries.pipeline.loading && !this.hasPipelineData;
+    },
+    status() {
+      return this.pipeline.detailedStatus;
+    },
+    pipelineId() {
+      return getIdFromGraphQLId(this.pipeline.id);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-white-space-nowrap gl-max-w-full">
+    <template v-if="isQueryLoading">
+      <gl-loading-icon class="gl-mr-auto gl-display-inline-block" size="sm" />
+      <span data-testid="pipeline-loading-msg">{{ $options.i18n.fetchLoading }}</span>
+    </template>
+    <template v-else-if="hasError">
+      <gl-icon class="gl-mr-auto" name="warning-solid" />
+      <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span>
+    </template>
+    <template v-else>
+      <a :href="status.detailsPath" class="gl-mr-auto">
+        <ci-icon :status="status" :size="18" />
+      </a>
+      <span class="gl-font-weight-bold">
+        <gl-sprintf :message="$options.i18n.pipelineInfo">
+          <template #id="{ content }">
+            <gl-link
+              :href="status.detailsPath"
+              class="pipeline-id gl-font-weight-normal pipeline-number"
+              target="_blank"
+              data-testid="pipeline-id"
+            >
+              {{ content }}{{ pipelineId }}</gl-link
+            >
+          </template>
+          <template #status>{{ status.text }}</template>
+          <template #commit>
+            <gl-link
+              :href="pipeline.commitPath"
+              class="commit-sha gl-font-weight-normal"
+              target="_blank"
+              data-testid="pipeline-commit"
+            >
+              {{ pipeline.shortSha }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </span>
+    </template>
+  </div>
+</template>