Add latest changes from gitlab-org/gitlab@14-3-stable-eev14.3.0-rc42

8 files changed, 48 insertions, 41 deletions

diff --git a/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue b/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue
index 8f4894a0bde..0308cd9c565 100644
--- a/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue
+++ b/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 } });
             }
@@ -117,6 +112,9 @@ export default {
           this.$emit('commit', { type: COMMIT_SUCCESS });
           this.updateLastCommitBranch(targetBranch);
           this.updateCurrentBranch(targetBranch);
+          if (this.currentBranch === targetBranch) {
+            this.$emit('updateCommitSha');
+          }
         }
       } catch (error) {
         this.$emit('showError', { type: COMMIT_FAILURE, reasons: [error?.message] });
diff --git a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue
index 77ede396496..f2a0f474bc4 100644
--- a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue
+++ b/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: {
diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue
index 9a6eed50fbe..68065cc3c73 100644
--- a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue
+++ b/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');
     },
diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
index ebe73bdcec3..551a0430fbf 100644
--- a/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
+++ b/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
@@ -1,21 +1,14 @@
 <script>
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import BranchSwitcher from './branch_switcher.vue';
 
 export default {
   components: {
     BranchSwitcher,
   },
-  mixins: [glFeatureFlagsMixin()],
-  computed: {
-    showBranchSwitcher() {
-      return this.glFeatures.pipelineEditorBranchSwitcher;
-    },
-  },
 };
 </script>
 <template>
   <div class="gl-mb-4">
-    <branch-switcher v-if="showBranchSwitcher" v-on="$listeners" />
+    <branch-switcher v-on="$listeners" />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue
index 24bca04e115..fcc31f087ff 100644
--- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue
+++ b/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>
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 46f6f4a28c1..ec240854be5 100644
--- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
+++ b/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(res) {
+        if (res.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);
diff --git a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
index e463fcf379d..f7c9f10ea46 100644
--- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
+++ b/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"
diff --git a/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue b/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
index 0ac4a40ff4a..fbb66231f16 100644
--- a/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
+++ b/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
@@ -24,9 +24,6 @@ export default {
     },
   },
   computed: {
-    showFileNav() {
-      return this.glFeatures.pipelineEditorBranchSwitcher;
-    },
     showCTAButton() {
       return this.glFeatures.pipelineEditorEmptyStateAction;
     },
@@ -40,7 +37,7 @@ export default {
 </script>
 <template>
   <div>
-    <pipeline-editor-file-nav v-if="showFileNav" v-on="$listeners" />
+    <pipeline-editor-file-nav v-on="$listeners" />
     <div class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-mt-11">
       <img :src="emptyStateIllustrationPath" />
       <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>