Keep track of last commit in pipeline editor

This change is a technical iteration to keep track of
the last committed sha by the user after any commit is submitted
successfully.

No UI changes are expected, and the actual alert will be added in a
follow up MR.

app/assets/javascripts/pipeline_editor/graphql/mutations/commit_ci_file.mutation.graphql

@@ -19,7 +19,7 @@ mutation commitCIFileMutation(
     }
   ) {
     commit {
-      id
+      sha
     }
     errors
   }

app/assets/javascripts/pipeline_editor/index.js

@@ -14,7 +14,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     return null;
   }
 
-  const { ciConfigPath, commitId, defaultBranch, newMergeRequestPath, projectPath } = el?.dataset;
+  const { ciConfigPath, commitSha, defaultBranch, newMergeRequestPath, projectPath } = el?.dataset;
 
   Vue.use(VueApollo);
 
@@ -29,7 +29,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
       return h(PipelineEditorApp, {
         props: {
           ciConfigPath,
-          commitId,
+          commitSha,
           defaultBranch,
           newMergeRequestPath,
           projectPath,

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -43,7 +43,7 @@ export default {
       required: false,
       default: null,
     },
-    commitId: {
+    commitSha: {
       type: String,
       required: false,
       default: null,
@@ -62,6 +62,7 @@ export default {
       ciConfigData: {},
       content: '',
       contentModel: '',
+      lastCommitSha: this.commitSha,
       currentTabIndex: 0,
       editorIsReady: false,
       failureType: null,
@@ -209,7 +210,7 @@ export default {
       try {
         const {
           data: {
-            commitCreate: { errors },
+            commitCreate: { errors, commit },
           },
         } = await this.$apollo.mutate({
           mutation: commitCiFileMutation,
@@ -220,7 +221,7 @@ export default {
             message,
             filePath: this.ciConfigPath,
             content: this.contentModel,
-            lastCommitId: this.commitId,
+            lastCommitId: this.lastCommitSha,
           },
         });
 
@@ -232,7 +233,12 @@ export default {
         if (openMergeRequest) {
           this.redirectToNewMergeRequest(branch);
         } else {
-          // Refresh the page to ensure commit is updated
+          this.lastCommitSha = commit.sha;
+
+          // Note: The page should not be refreshed, and we
+          // would display an alert to notify users the
+          // commit was succesful. See:
+          // https://gitlab.com/gitlab-org/gitlab/-/issues/292229
           refreshCurrentPage();
         }
       } catch (error) {

app/views/projects/ci/pipeline_editor/show.html.haml

@@ -3,6 +3,6 @@
 #js-pipeline-editor{ data: { "ci-config-path": @project.ci_config_path_or_default,
   "project-path" => @project.full_path,
   "default-branch" => @project.default_branch,
-  "commit-id" => @project.commit ? @project.commit.id : '',
+  "commit-sha" => @project.commit ? @project.commit.sha : '',
   "new-merge-request-path" => namespace_project_new_merge_request_path,
 } }

spec/frontend/pipeline_editor/mock_data.js

 export const mockProjectPath = 'user1/project1';
 export const mockDefaultBranch = 'master';
 export const mockNewMergeRequestPath = '/-/merge_requests/new';
-export const mockCommitId = 'aabbccdd';
+export const mockCommitSha = 'aabbccdd';
+export const mockCommitNextSha = 'eeffgghh';
 export const mockCommitMessage = 'My commit message';
 
 export const mockCiConfigPath = '.gitlab-ci.yml';

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -18,7 +18,8 @@ import {
   mockCiConfigPath,
   mockCiConfigQueryResponse,
   mockCiYml,
-  mockCommitId,
+  mockCommitSha,
+  mockCommitNextSha,
   mockCommitMessage,
   mockDefaultBranch,
   mockProjectPath,
@@ -65,7 +66,9 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
       data: {
         commitCreate: {
           errors: [],
-          commit: {},
+          commit: {
+            sha: mockCommitNextSha,
+          },
         },
       },
     });
@@ -73,7 +76,7 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
     wrapper = mountFn(PipelineEditorApp, {
       propsData: {
         ciConfigPath: mockCiConfigPath,
-        commitId: mockCommitId,
+        commitSha: mockCommitSha,
         defaultBranch: mockDefaultBranch,
         projectPath: mockProjectPath,
         newMergeRequestPath: mockNewMergeRequestPath,
@@ -239,7 +242,7 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
       const mockVariables = {
         content: mockCiYml,
         filePath: mockCiConfigPath,
-        lastCommitId: mockCommitId,
+        lastCommitId: mockCommitSha,
         message: mockCommitMessage,
         projectPath: mockProjectPath,
         startBranch: mockDefaultBranch,