Propagate commit sha down to the child components

Since the pipeline editor queries the commit sha and no longer
manages this data in the cache, the commit sha needs to be passed
down to the children components as props. This also removes instances
of writing to the cache.

app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue

@@ -10,7 +10,6 @@ import {
 import commitCIFile from '../../graphql/mutations/commit_ci_file.mutation.graphql';
 import updateCurrentBranchMutation from '../../graphql/mutations/update_current_branch.mutation.graphql';
 import updateLastCommitBranchMutation from '../../graphql/mutations/update_last_commit_branch.mutation.graphql';
-import getCommitSha from '../../graphql/queries/client/commit_sha.graphql';
 import getCurrentBranch from '../../graphql/queries/client/current_branch.graphql';
 import getIsNewCiConfigFile from '../../graphql/queries/client/is_new_ci_config_file.graphql';
 import getPipelineEtag from '../../graphql/queries/client/pipeline_etag.graphql';
@@ -37,6 +36,11 @@ export default {
       type: String,
       required: true,
     },
+    commitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -49,9 +53,6 @@ export default {
     isNewCiConfigFile: {
       query: getIsNewCiConfigFile,
     },
-    commitSha: {
-      query: getCommitSha,
-    },
     currentBranch: {
       query: getCurrentBranch,
     },
@@ -96,13 +97,7 @@ export default {
             lastCommitId: this.commitSha,
           },
           update(store, { data }) {
-            const commitSha = data?.commitCreate?.commit?.sha;
             const pipelineEtag = data?.commitCreate?.commit?.commitPipelinePath;
-
-            if (commitSha) {
-              store.writeQuery({ query: getCommitSha, data: { commitSha } });
-            }
-
             if (pipelineEtag) {
               store.writeQuery({ query: getPipelineEtag, data: { pipelineEtag } });
             }

app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue

@@ -3,7 +3,6 @@ import { EDITOR_READY_EVENT } from '~/editor/constants';
 import { CiSchemaExtension } from '~/editor/extensions/source_editor_ci_schema_ext';
 import SourceEditor from '~/vue_shared/components/source_editor.vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import getCommitSha from '../../graphql/queries/client/commit_sha.graphql';
 
 export default {
   components: {
@@ -12,14 +11,11 @@ export default {
   mixins: [glFeatureFlagMixin()],
   inject: ['ciConfigPath', 'projectPath', 'projectNamespace', 'defaultBranch'],
   inheritAttrs: false,
-  data() {
-    return {
-      commitSha: '',
-    };
-  },
-  apollo: {
+  props: {
     commitSha: {
-      query: getCommitSha,
+      type: String,
+      required: false,
+      default: '',
     },
   },
   methods: {

app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue

@@ -158,11 +158,9 @@ export default {
       const updatedPath = setUrlParams({ branch_name: newBranch });
       historyPushState(updatedPath);
 
-      this.$emit('updateCommitSha', { newBranch });
-
       // refetching the content will cause a lot of components to re-render,
       // including the text editor which uses the commit sha to register the CI schema
-      // so we need to make sure the commit sha is updated first
+      // so we need to make sure the currentBranch (and consequently, the commitSha) are updated first
       await this.$nextTick();
       this.$emit('refetchContent');
     },

app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue

@@ -33,6 +33,11 @@ export default {
       type: Object,
       required: true,
     },
+    commitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
     isNewCiConfigFile: {
       type: Boolean,
       required: true,
@@ -54,7 +59,11 @@ export default {
 </script>
 <template>
   <div class="gl-mb-5">
-    <pipeline-status v-if="showPipelineStatus" :class="$options.pipelineStatusClasses" />
+    <pipeline-status
+      v-if="showPipelineStatus"
+      :commit-sha="commitSha"
+      :class="$options.pipelineStatusClasses"
+    />
     <validation-segment :class="validationStyling" :ci-config="ciConfigData" />
   </div>
 </template>

app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue

@@ -3,7 +3,6 @@ import { GlButton, 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 getPipelineEtag from '~/pipeline_editor/graphql/queries/client/pipeline_etag.graphql';
 import {
@@ -33,10 +32,14 @@ export default {
     GlSprintf,
   },
   inject: ['projectFullPath'],
-  apollo: {
+  props: {
     commitSha: {
-      query: getCommitSha,
+      type: String,
+      required: false,
+      default: '',
     },
+  },
+  apollo: {
     pipelineEtag: {
       query: getPipelineEtag,
     },
@@ -51,7 +54,7 @@ export default {
           sha: this.commitSha,
         };
       },
-      update: (data) => {
+      update(data) {
         const { id, commitPath = '', detailedStatus = {} } = data.project?.pipeline || {};
 
         return {
@@ -60,6 +63,11 @@ export default {
           detailedStatus,
         };
       },
+      result(data) {
+        if (data.project?.pipeline) {
+          this.hasError = false;
+        }
+      },
       error() {
         this.hasError = true;
       },
@@ -68,7 +76,6 @@ export default {
   },
   data() {
     return {
-      commitSha: '',
       hasError: false,
     };
   },
@@ -84,7 +91,11 @@ export default {
       // (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);
+      return (
+        this.$apollo.queries.pipeline.loading ||
+        this.commitSha.length === 0 ||
+        (!this.hasPipelineData && !this.hasError)
+      );
     },
     shortSha() {
       return truncateSha(this.commitSha);

app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue

@@ -69,6 +69,11 @@ export default {
       type: String,
       required: true,
     },
+    commitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   apollo: {
     appStatus: {
@@ -110,7 +115,7 @@ export default {
       @click="setCurrentTab($options.tabConstants.CREATE_TAB)"
     >
       <ci-editor-header />
-      <text-editor :value="ciFileContent" v-on="$listeners" />
+      <text-editor :commit-sha="commitSha" :value="ciFileContent" v-on="$listeners" />
     </editor-tab>
     <editor-tab
       class="gl-mb-3"

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -163,10 +163,21 @@ export default {
       },
       update(data) {
         const pipelineNodes = data.project?.pipelines?.nodes ?? [];
+
+        // it's possible to query for the commit sha too early after an update
+        // (e.g. after committing a new branch, we might query for the commit sha
+        // but the pipeline nodes are still empty).
+        // in this case, we start polling until we get a commit sha.
         if (pipelineNodes.length === 0) {
+          if (![EDITOR_APP_STATUS_LOADING, EDITOR_APP_STATUS_EMPTY].includes(this.appStatus)) {
+            this.$apollo.queries.commitSha.startPolling(1000);
+            return this.commitSha;
+          }
+
           return '';
         }
 
+        this.$apollo.queries.commitSha.stopPolling();
         return pipelineNodes[0].sha;
       },
     },
@@ -316,6 +327,7 @@ export default {
         :ci-config-data="ciConfigData"
         :ci-file-content="currentCiFileContent"
         :is-new-ci-config-file="isNewCiConfigFile"
+        :commit-sha="commitSha"
         @commit="updateOnCommit"
         @resetContent="resetContent"
         @showError="showErrorAlert"

app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue

@@ -25,6 +25,11 @@ export default {
       type: String,
       required: true,
     },
+    commitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
     isNewCiConfigFile: {
       type: Boolean,
       required: true,
@@ -56,15 +61,22 @@ export default {
     <pipeline-editor-file-nav v-on="$listeners" />
     <pipeline-editor-header
       :ci-config-data="ciConfigData"
+      :commit-sha="commitSha"
       :is-new-ci-config-file="isNewCiConfigFile"
     />
     <pipeline-editor-tabs
       :ci-config-data="ciConfigData"
       :ci-file-content="ciFileContent"
+      :commit-sha="commitSha"
       v-on="$listeners"
       @set-current-tab="setCurrentTab"
     />
-    <commit-section v-if="showCommitForm" :ci-file-content="ciFileContent" v-on="$listeners" />
+    <commit-section
+      v-if="showCommitForm"
+      :ci-file-content="ciFileContent"
+      :commit-sha="commitSha"
+      v-on="$listeners"
+    />
     <pipeline-editor-drawer v-if="showPipelineDrawer" />
   </div>
 </template>