Add alert for a successful commit

This change adds adds an alert when there is a successful commit instead
of a refresh, an MVC to give feedback to the user.

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

 <script>
 import { GlAlert, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
-import { mergeUrlParams, redirectTo, refreshCurrentPage } from '~/lib/utils/url_utility';
+import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
@@ -18,6 +18,7 @@ const MR_SOURCE_BRANCH = 'merge_request[source_branch]';
 const MR_TARGET_BRANCH = 'merge_request[target_branch]';
 
 const COMMIT_FAILURE = 'COMMIT_FAILURE';
+const COMMIT_SUCCESS = 'COMMIT_SUCCESS';
 const DEFAULT_FAILURE = 'DEFAULT_FAILURE';
 const LOAD_FAILURE_NO_FILE = 'LOAD_FAILURE_NO_FILE';
 const LOAD_FAILURE_NO_REF = 'LOAD_FAILURE_NO_REF';
@@ -67,10 +68,14 @@ export default {
       lastCommitSha: this.commitSha,
       currentTabIndex: 0,
       editorIsReady: false,
-      failureType: null,
-      failureReasons: [],
       isSaving: false,
+
+      // Success and failure state
+      failureType: null,
       showFailureAlert: false,
+      failureReasons: [],
+      successType: null,
+      showSuccessAlert: false,
     };
   },
   apollo: {
@@ -129,31 +134,42 @@ export default {
     defaultCommitMessage() {
       return sprintf(this.$options.i18n.defaultCommitMessage, { sourcePath: this.ciConfigPath });
     },
+    success() {
+      switch (this.successType) {
+        case COMMIT_SUCCESS:
+          return {
+            text: this.$options.alertTexts[COMMIT_SUCCESS],
+            variant: 'info',
+          };
+        default:
+          return null;
+      }
+    },
     failure() {
       switch (this.failureType) {
         case LOAD_FAILURE_NO_REF:
           return {
-            text: this.$options.errorTexts[LOAD_FAILURE_NO_REF],
+            text: this.$options.alertTexts[LOAD_FAILURE_NO_REF],
             variant: 'danger',
           };
         case LOAD_FAILURE_NO_FILE:
           return {
-            text: this.$options.errorTexts[LOAD_FAILURE_NO_FILE],
+            text: this.$options.alertTexts[LOAD_FAILURE_NO_FILE],
             variant: 'danger',
           };
         case LOAD_FAILURE_UNKNOWN:
           return {
-            text: this.$options.errorTexts[LOAD_FAILURE_UNKNOWN],
+            text: this.$options.alertTexts[LOAD_FAILURE_UNKNOWN],
             variant: 'danger',
           };
         case COMMIT_FAILURE:
           return {
-            text: this.$options.errorTexts[COMMIT_FAILURE],
+            text: this.$options.alertTexts[COMMIT_FAILURE],
             variant: 'danger',
           };
         default:
           return {
-            text: this.$options.errorTexts[DEFAULT_FAILURE],
+            text: this.$options.alertTexts[DEFAULT_FAILURE],
             variant: 'danger',
           };
       }
@@ -165,13 +181,15 @@ export default {
     tabGraph: s__('Pipelines|Visualize'),
     tabLint: s__('Pipelines|Lint'),
   },
-  errorTexts: {
+  alertTexts: {
+    [COMMIT_FAILURE]: s__('Pipelines|The GitLab CI configuration could not be updated.'),
+    [COMMIT_SUCCESS]: __('Your changes have been successfully committed.'),
+    [DEFAULT_FAILURE]: __('Something went wrong on our end.'),
+    [LOAD_FAILURE_NO_FILE]: s__('Pipelines|No CI file found in this repository, please add one.'),
     [LOAD_FAILURE_NO_REF]: s__(
       'Pipelines|Repository does not have a default branch, please set one.',
     ),
-    [LOAD_FAILURE_NO_FILE]: s__('Pipelines|No CI file found in this repository, please add one.'),
     [LOAD_FAILURE_UNKNOWN]: s__('Pipelines|The CI configuration was not loaded, please try again.'),
-    [COMMIT_FAILURE]: s__('Pipelines|The GitLab CI configuration could not be updated.'),
   },
   methods: {
     handleBlobContentError(error = {}) {
@@ -188,6 +206,7 @@ export default {
         this.reportFailure(LOAD_FAILURE_UNKNOWN);
       }
     },
+
     dismissFailure() {
       this.showFailureAlert = false;
     },
@@ -196,6 +215,14 @@ export default {
       this.failureType = type;
       this.failureReasons = reasons;
     },
+    dismissSuccess() {
+      this.showSuccessAlert = false;
+    },
+    reportSuccess(type) {
+      this.showSuccessAlert = true;
+      this.successType = type;
+    },
+
     redirectToNewMergeRequest(sourceBranch) {
       const url = mergeUrlParams(
         {
@@ -236,13 +263,10 @@ export default {
         if (openMergeRequest) {
           this.redirectToNewMergeRequest(branch);
         } else {
-          this.lastCommitSha = commit.sha;
+          this.reportSuccess(COMMIT_SUCCESS);
 
-          // 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();
+          // Update latest commit
+          this.lastCommitSha = commit.sha;
         }
       } catch (error) {
         this.reportFailure(COMMIT_FAILURE, [error?.message]);
@@ -259,6 +283,14 @@ export default {
 
 <template>
   <div class="gl-mt-4">
+    <gl-alert
+      v-if="showSuccessAlert"
+      :variant="success.variant"
+      :dismissible="true"
+      @dismiss="dismissSuccess"
+    >
+      {{ success.text }}
+    </gl-alert>
     <gl-alert
       v-if="showFailureAlert"
       :variant="failure.variant"

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -284,13 +284,29 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
           });
         });
 
-        it('refreshes the page', () => {
-          expect(refreshCurrentPage).toHaveBeenCalled();
+        it('displays an alert to indicate success', () => {
+          expect(findAlert().text()).toMatchInterpolatedText(
+            'Your changes have been successfully committed.',
+          );
         });
 
         it('shows no saving state', () => {
           expect(findCommitBtnLoadingIcon().exists()).toBe(false);
         });
+
+        it('a second commit submits the latest sha, keeping the form updated', async () => {
+          await submitCommit();
+
+          expect(mockMutate).toHaveBeenCalledTimes(2);
+          expect(mockMutate).toHaveBeenLastCalledWith({
+            mutation: expect.any(Object),
+            variables: {
+              ...mockVariables,
+              lastCommitId: mockCommitNextSha,
+              branch: mockDefaultBranch,
+            },
+          });
+        });
       });
 
       describe('when the user commits changes to a new branch', () => {
@@ -311,10 +327,6 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
             },
           });
         });
-
-        it('refreshes the page', () => {
-          expect(refreshCurrentPage).toHaveBeenCalledWith();
-        });
       });
 
       describe('when the user commits changes to open a new merge request', () => {