Merge branch '292229-ci-cd-home-add-an-alert-after-a-successful-commit-to-master-1' into 'master'

Keep track of last commit in pipeline editor

See merge request gitlab-org/gitlab!50379

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,