Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

1 files changed, 22 insertions, 12 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
index b1ea464be99..4a92e106da1 100644
--- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
+++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
@@ -1,9 +1,11 @@
 <script>
 import { GlIcon, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { truncateSha } from '~/lib/utils/text_utility';
 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 { toggleQueryPollingByVisibility } from '~/pipelines/components/graph/utils';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 const POLL_INTERVAL = 10000;
@@ -38,13 +40,11 @@ export default {
         };
       },
       update: (data) => {
-        const { id, commitPath = '', shortSha = '', detailedStatus = {} } =
-          data.project?.pipeline || {};
+        const { id, commitPath = '', detailedStatus = {} } = data.project?.pipeline || {};
 
         return {
           id,
           commitPath,
-          shortSha,
           detailedStatus,
         };
       },
@@ -61,24 +61,34 @@ export default {
   },
   computed: {
     hasPipelineData() {
-      return Boolean(this.$apollo.queries.pipeline?.id);
+      return Boolean(this.pipeline?.id);
     },
-    isQueryLoading() {
-      return this.$apollo.queries.pipeline.loading && !this.hasPipelineData;
+    pipelineId() {
+      return getIdFromGraphQLId(this.pipeline.id);
+    },
+    showLoadingState() {
+      // the query is set to poll regularly, so if there is no pipeline data
+      // (e.g. pipeline is null during fetch when the pipeline hasn't been
+      // triggered yet), we can just show the loading state until the pipeline
+      // details are ready to be fetched
+      return this.$apollo.queries.pipeline.loading || (!this.hasPipelineData && !this.hasError);
+    },
+    shortSha() {
+      return truncateSha(this.commitSha);
     },
     status() {
       return this.pipeline.detailedStatus;
     },
-    pipelineId() {
-      return getIdFromGraphQLId(this.pipeline.id);
-    },
+  },
+  mounted() {
+    toggleQueryPollingByVisibility(this.$apollo.queries.pipeline, POLL_INTERVAL);
   },
 };
 </script>
 
 <template>
   <div class="gl-white-space-nowrap gl-max-w-full">
-    <template v-if="isQueryLoading">
+    <template v-if="showLoadingState">
       <gl-loading-icon class="gl-mr-auto gl-display-inline-block" size="sm" />
       <span data-testid="pipeline-loading-msg">{{ $options.i18n.fetchLoading }}</span>
     </template>
@@ -88,7 +98,7 @@ export default {
     </template>
     <template v-else>
       <a :href="status.detailsPath" class="gl-mr-auto">
-        <ci-icon :status="status" :size="18" />
+        <ci-icon :status="status" :size="16" />
       </a>
       <span class="gl-font-weight-bold">
         <gl-sprintf :message="$options.i18n.pipelineInfo">
@@ -110,7 +120,7 @@ export default {
               target="_blank"
               data-testid="pipeline-commit"
             >
-              {{ pipeline.shortSha }}
+              {{ shortSha }}
             </gl-link>
           </template>
         </gl-sprintf>