Improve cancel button experience in Pipeline editor

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

@@ -73,7 +73,7 @@ export default {
       });
     },
     onReset() {
-      this.$emit('cancel');
+      this.$emit('resetContent');
     },
     scrollIntoView() {
       this.$el.scrollIntoView({ behavior: 'smooth' });
@@ -86,7 +86,7 @@ export default {
     startMergeRequest: __('Start a %{new_merge_request} with these changes'),
     newMergeRequest: __('new merge request'),
     commitChanges: __('Commit changes'),
-    cancel: __('Cancel'),
+    resetContent: __('Reset'),
   },
 };
 </script>
@@ -148,7 +148,7 @@ export default {
           {{ $options.i18n.commitChanges }}
         </gl-button>
         <gl-button type="reset" category="secondary" class="gl-mr-3">
-          {{ $options.i18n.cancel }}
+          {{ $options.i18n.resetContent }}
         </gl-button>
       </div>
     </gl-form>

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

@@ -127,9 +127,6 @@ export default {
         this.isSaving = false;
       }
     },
-    onCommitCancel() {
-      this.$emit('resetContent');
-    },
     updateCurrentBranch(currentBranch) {
       this.$apollo.mutate({
         mutation: updateCurrentBranchMutation,
@@ -153,7 +150,6 @@ export default {
     :is-saving="isSaving"
     :scroll-to-commit-form="scrollToCommitForm"
     v-on="$listeners"
-    @cancel="onCommitCancel"
     @submit="onCommitSubmit"
   />
 </template>

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlModal } from '@gitlab/ui';
 import { fetchPolicies } from '~/lib/graphql';
 import { queryToObject } from '~/lib/utils/url_utility';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 import { unwrapStagesWithNeeds } from '~/pipelines/components/unwrapping_utils';
 
@@ -30,6 +30,7 @@ export default {
   components: {
     ConfirmUnsavedChangesDialog,
     GlLoadingIcon,
+    GlModal,
     PipelineEditorEmptyState,
     PipelineEditorHome,
     PipelineEditorMessages,
@@ -54,6 +55,7 @@ export default {
       lastCommittedContent: '',
       shouldSkipStartScreen: false,
       showFailure: false,
+      showResetComfirmationModal: false,
       showStartScreen: false,
       showSuccess: false,
       starterTemplate: '',
@@ -224,6 +226,18 @@ export default {
     tabGraph: s__('Pipelines|Visualize'),
     tabLint: s__('Pipelines|Lint'),
   },
+  resetModal: {
+    actionPrimary: {
+      text: __('Reset file'),
+    },
+    actionCancel: {
+      text: __('Cancel'),
+    },
+    body: s__(
+      'Pipeline Editor|Are you sure you want to reset the file to its last committed version?',
+    ),
+    title: __('Discard changes'),
+  },
   watch: {
     isEmpty(flag) {
       if (flag) {
@@ -242,6 +256,11 @@ export default {
     hideSuccess() {
       this.showSuccess = false;
     },
+    confirmReset() {
+      if (this.hasUnsavedChanges) {
+        this.showResetComfirmationModal = true;
+      }
+    },
     async refetchContent() {
       this.$apollo.queries.initialCiFileContent.skip = false;
       await this.$apollo.queries.initialCiFileContent.refetch();
@@ -262,6 +281,7 @@ export default {
       this.successType = type;
     },
     resetContent() {
+      this.showResetComfirmationModal = false;
       this.currentCiFileContent = this.lastCommittedContent;
     },
     setAppStatus(appStatus) {
@@ -335,12 +355,22 @@ export default {
         :has-unsaved-changes="hasUnsavedChanges"
         :is-new-ci-config-file="isNewCiConfigFile"
         @commit="updateOnCommit"
-        @resetContent="resetContent"
+        @resetContent="confirmReset"
         @showError="showErrorAlert"
         @refetchContent="refetchContent"
         @updateCiConfig="updateCiConfig"
         @updateCommitSha="updateCommitSha"
       />
+      <gl-modal
+        v-model="showResetComfirmationModal"
+        modal-id="reset-content"
+        :title="$options.resetModal.title"
+        :action-cancel="$options.resetModal.actionCancel"
+        :action-primary="$options.resetModal.actionPrimary"
+        @primary="resetContent"
+      >
+        {{ $options.resetModal.body }}
+      </gl-modal>
       <confirm-unsaved-changes-dialog :has-unsaved-changes="hasUnsavedChanges" />
     </div>
   </div>

locale/gitlab.pot

@@ -25292,6 +25292,9 @@ msgstr ""
 msgid "Pipeline Editor"
 msgstr ""
 
+msgid "Pipeline Editor|Are you sure you want to reset the file to its last committed version?"
+msgstr ""
+
 msgid "Pipeline ID"
 msgstr ""
 
@@ -29523,6 +29526,9 @@ msgstr ""
 msgid "Reset authorization key?"
 msgstr ""
 
+msgid "Reset file"
+msgstr ""
+
 msgid "Reset filters"
 msgstr ""
 

spec/features/projects/ci/editor_spec.rb

@@ -52,4 +52,53 @@ RSpec.describe 'Pipeline Editor', :js do
       end
     end
   end
+
+  context 'Editor content' do
+    it 'user can reset their CI configuration' do
+      click_button 'Collapse'
+
+      page.within('#source-editor-') do
+        find('textarea').send_keys '123'
+      end
+
+      # It takes some time after sending keys for the reset
+      # btn to register the changes inside the editor
+      sleep 1
+      click_button 'Reset'
+
+      expect(page).to have_css('#reset-content')
+
+      page.within('#reset-content') do
+        click_button 'Reset file'
+      end
+
+      page.within('#source-editor-') do
+        expect(page).to have_content('Default Content')
+        expect(page).not_to have_content('Default Content123')
+      end
+    end
+
+    it 'user can cancel reseting their CI configuration' do
+      click_button 'Collapse'
+
+      page.within('#source-editor-') do
+        find('textarea').send_keys '123'
+      end
+
+      # It takes some time after sending keys for the reset
+      # btn to register the changes inside the editor
+      sleep 1
+      click_button 'Reset'
+
+      expect(page).to have_css('#reset-content')
+
+      page.within('#reset-content') do
+        click_button 'Cancel'
+      end
+
+      page.within('#source-editor-') do
+        expect(page).to have_content('Default Content123')
+      end
+    end
+  end
 end

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

@@ -78,7 +78,7 @@ describe('Pipeline Editor | Commit Form', () => {
     it('emits an event when the form resets', () => {
       findCancelBtn().trigger('click');
 
-      expect(wrapper.emitted('cancel')).toHaveLength(1);
+      expect(wrapper.emitted('resetContent')).toHaveLength(1);
     });
   });
 

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

@@ -103,11 +103,6 @@ describe('Pipeline Editor | Commit section', () => {
     await waitForPromises();
   };
 
-  const cancelCommitForm = async () => {
-    const findCancelBtn = () => wrapper.find('[type="reset"]');
-    await findCancelBtn().trigger('click');
-  };
-
   afterEach(() => {
     mockMutate.mockReset();
     wrapper.destroy();
@@ -266,18 +261,6 @@ describe('Pipeline Editor | Commit section', () => {
     });
   });
 
-  describe('when the commit form is cancelled', () => {
-    beforeEach(async () => {
-      createComponent();
-    });
-
-    it('emits an event so that it cab be reseted', async () => {
-      await cancelCommitForm();
-
-      expect(wrapper.emitted('resetContent')).toHaveLength(1);
-    });
-  });
-
   it('sets listeners on commit form', () => {
     const handler = jest.fn();
     createComponent({ options: { listeners: { event: handler } } });