Fix pipeline status update in pipeline editor

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

@@ -112,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] });

app/assets/javascripts/pipeline_editor/constants.js

@@ -43,3 +43,5 @@ export const pipelineEditorTrackingOptions = {
 
 export const TEMPLATE_REPOSITORY_URL =
   'https://gitlab.com/gitlab-org/gitlab-foss/tree/master/lib/gitlab/ci/templates';
+
+export const COMMIT_SHA_POLL_INTERVAL = 1000;

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -10,6 +10,7 @@ import ConfirmUnsavedChangesDialog from './components/ui/confirm_unsaved_changes
 import PipelineEditorEmptyState from './components/ui/pipeline_editor_empty_state.vue';
 import PipelineEditorMessages from './components/ui/pipeline_editor_messages.vue';
 import {
+  COMMIT_SHA_POLL_INTERVAL,
   EDITOR_APP_STATUS_EMPTY,
   EDITOR_APP_STATUS_ERROR,
   EDITOR_APP_STATUS_LOADING,
@@ -48,6 +49,7 @@ export default {
       failureType: null,
       failureReasons: [],
       initialCiFileContent: '',
+      isFetchingCommitSha: false,
       isNewCiConfigFile: false,
       lastCommittedContent: '',
       currentCiFileContent: '',
@@ -170,15 +172,22 @@ export default {
         // 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);
+            this.$apollo.queries.commitSha.startPolling(COMMIT_SHA_POLL_INTERVAL);
             return this.commitSha;
           }
 
           return '';
         }
 
+        const latestCommitSha = pipelineNodes[0].sha;
+        if (this.isFetchingCommitSha && latestCommitSha === this.commitSha) {
+          this.$apollo.queries.commitSha.startPolling(COMMIT_SHA_POLL_INTERVAL);
+          return this.commitSha;
+        }
+
+        this.isFetchingCommitSha = false;
         this.$apollo.queries.commitSha.stopPolling();
-        return pipelineNodes[0].sha;
+        return latestCommitSha;
       },
     },
     currentBranch: {
@@ -280,6 +289,10 @@ export default {
     updateCiConfig(ciFileContent) {
       this.currentCiFileContent = ciFileContent;
     },
+    updateCommitSha() {
+      this.isFetchingCommitSha = true;
+      this.$apollo.queries.commitSha.refetch();
+    },
     updateOnCommit({ type }) {
       this.reportSuccess(type);
 
@@ -333,6 +346,7 @@ export default {
         @showError="showErrorAlert"
         @refetchContent="refetchContent"
         @updateCiConfig="updateCiConfig"
+        @updateCommitSha="updateCommitSha"
       />
       <confirm-unsaved-changes-dialog :has-unsaved-changes="hasUnsavedChanges" />
     </div>

spec/frontend/pipeline_editor/components/commit/commit_section_spec.js

@@ -177,6 +177,10 @@ describe('Pipeline Editor | Commit section', () => {
       expect(wrapper.emitted('commit')[0]).toEqual([{ type: COMMIT_SUCCESS }]);
     });
 
+    it('emits an event to refetch the commit sha', () => {
+      expect(wrapper.emitted('updateCommitSha')).toHaveLength(1);
+    });
+
     it('shows no saving state', () => {
       expect(findCommitBtnLoadingIcon().exists()).toBe(false);
     });
@@ -216,6 +220,10 @@ describe('Pipeline Editor | Commit section', () => {
         },
       });
     });
+
+    it('does not emit an event to refetch the commit sha', () => {
+      expect(wrapper.emitted('updateCommitSha')).toBeUndefined();
+    });
   });
 
   describe('when the user commits changes to open a new merge request', () => {

spec/frontend/pipeline_editor/mock_data.js

@@ -173,6 +173,29 @@ export const mockCommitShaResults = {
   },
 };
 
+export const mockNewCommitShaResults = {
+  data: {
+    project: {
+      pipelines: {
+        nodes: [
+          {
+            id: 'gid://gitlab/Ci::Pipeline/2',
+            sha: 'eeff1122',
+            path: `/${mockProjectFullPath}/-/pipelines/489`,
+            commitPath: `/${mockProjectFullPath}/-/commit/bb1abcfe3d8a3f67a8ab9fc00207d468f3022bee`,
+          },
+          {
+            id: 'gid://gitlab/Ci::Pipeline/1',
+            sha: mockCommitSha,
+            path: `/${mockProjectFullPath}/-/pipelines/488`,
+            commitPath: `/${mockProjectFullPath}/-/commit/d0d56d363d8a3f67a8ab9fc00207d468f30032ca`,
+          },
+        ],
+      },
+    },
+  },
+};
+
 export const mockEmptyCommitShaResults = {
   data: {
     project: {

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -29,6 +29,7 @@ import {
   mockCommitShaResults,
   mockDefaultBranch,
   mockEmptyCommitShaResults,
+  mockNewCommitShaResults,
   mockProjectFullPath,
 } from './mock_data';
 
@@ -282,7 +283,7 @@ describe('Pipeline editor app component', () => {
           expect(window.scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
         });
 
-        it('polls for commit sha while pipeline data is not yet available', async () => {
+        it('polls for commit sha while pipeline data is not yet available for newly committed branch', async () => {
           jest
             .spyOn(wrapper.vm.$apollo.queries.commitSha, 'startPolling')
             .mockImplementation(jest.fn());
@@ -295,7 +296,19 @@ describe('Pipeline editor app component', () => {
           expect(wrapper.vm.$apollo.queries.commitSha.startPolling).toHaveBeenCalledTimes(1);
         });
 
-        it('stops polling for commit sha when pipeline data is available', async () => {
+        it('polls for commit sha while pipeline data is not yet available for current branch', async () => {
+          jest
+            .spyOn(wrapper.vm.$apollo.queries.commitSha, 'startPolling')
+            .mockImplementation(jest.fn());
+
+          // simulate a commit to the current branch
+          findEditorHome().vm.$emit('updateCommitSha');
+          await waitForPromises();
+
+          expect(wrapper.vm.$apollo.queries.commitSha.startPolling).toHaveBeenCalledTimes(1);
+        });
+
+        it('stops polling for commit sha when pipeline data is available for newly committed branch', async () => {
           jest
             .spyOn(wrapper.vm.$apollo.queries.commitSha, 'stopPolling')
             .mockImplementation(jest.fn());
@@ -305,6 +318,18 @@ describe('Pipeline editor app component', () => {
 
           expect(wrapper.vm.$apollo.queries.commitSha.stopPolling).toHaveBeenCalledTimes(1);
         });
+
+        it('stops polling for commit sha when pipeline data is available for current branch', async () => {
+          jest
+            .spyOn(wrapper.vm.$apollo.queries.commitSha, 'stopPolling')
+            .mockImplementation(jest.fn());
+
+          mockLatestCommitShaQuery.mockResolvedValue(mockNewCommitShaResults);
+          findEditorHome().vm.$emit('updateCommitSha');
+          await waitForPromises();
+
+          expect(wrapper.vm.$apollo.queries.commitSha.stopPolling).toHaveBeenCalledTimes(1);
+        });
       });
 
       describe('and the commit mutation fails', () => {