Fix "Discard" button in Web IDE does nothing

Discard button in Web IDE commits pane was broken.

app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue

 <script>
-import $ from 'jquery';
 import { mapActions } from 'vuex';
-import { __ } from '~/locale';
+import { sprintf, __ } from '~/locale';
+import { GlModal } from '@gitlab/ui';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
 
 export default {
   components: {
+    GlModal,
     FileIcon,
     ChangedFileIcon,
   },
@@ -17,7 +18,13 @@ export default {
     },
   },
   computed: {
-    activeButtonText() {
+    discardModalId() {
+      return `discard-file-${this.activeFile.path}`;
+    },
+    discardModalTitle() {
+      return sprintf(__('Discard changes to %{path}?'), { path: this.activeFile.path });
+    },
+    actionButtonText() {
       return this.activeFile.staged ? __('Unstage') : __('Stage');
     },
     isStaged() {
@@ -25,7 +32,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['stageChange', 'unstageChange']),
+    ...mapActions(['stageChange', 'unstageChange', 'discardFileChanges']),
     actionButtonClicked() {
       if (this.activeFile.staged) {
         this.unstageChange(this.activeFile.path);
@@ -34,7 +41,7 @@ export default {
       }
     },
     showDiscardModal() {
-      $(document.getElementById(`discard-file-${this.activeFile.path}`)).modal('show');
+      this.$refs.discardModal.show();
     },
   },
 };
@@ -53,6 +60,7 @@ export default {
     <div class="ml-auto">
       <button
         v-if="!isStaged"
+        ref="discardButton"
         type="button"
         class="btn btn-remove btn-inverted append-right-8"
         @click="showDiscardModal"
@@ -60,6 +68,7 @@ export default {
         {{ __('Discard') }}
       </button>
       <button
+        ref="actionButton"
         :class="{
           'btn-success': !isStaged,
           'btn-warning': isStaged,
@@ -68,8 +77,19 @@ export default {
         class="btn btn-inverted"
         @click="actionButtonClicked"
       >
-        {{ activeButtonText }}
+        {{ actionButtonText }}
       </button>
     </div>
+    <gl-modal
+      ref="discardModal"
+      ok-variant="danger"
+      cancel-variant="light"
+      :ok-title="__('Discard changes')"
+      :modal-id="discardModalId"
+      :title="discardModalTitle"
+      @ok="discardFileChanges(activeFile.path)"
+    >
+      {{ __("You will lose all changes you've made to this file. This action cannot be undone.") }}
+    </gl-modal>
   </div>
 </template>

changelogs/unreleased/himkp-27242.yml

+---
+title: 'Fix issue: Discard button in Web IDE does nothing'
+merge_request: 21902
+author:
+type: fixed

spec/frontend/ide/components/commit_sidebar/editor_header_spec.js

+import Vuex from 'vuex';
+import { mount, createLocalVue } from '@vue/test-utils';
+import { createStore } from '~/ide/stores';
+import EditorHeader from '~/ide/components/commit_sidebar/editor_header.vue';
+import { file } from '../../helpers';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('IDE commit editor header', () => {
+  let wrapper;
+  let f;
+  let store;
+
+  const findDiscardModal = () => wrapper.find({ ref: 'discardModal' });
+  const findDiscardButton = () => wrapper.find({ ref: 'discardButton' });
+  const findActionButton = () => wrapper.find({ ref: 'actionButton' });
+
+  beforeEach(() => {
+    f = file('file');
+    store = createStore();
+
+    wrapper = mount(EditorHeader, {
+      store,
+      localVue,
+      sync: false,
+      propsData: {
+        activeFile: f,
+      },
+    });
+
+    jest.spyOn(wrapper.vm, 'stageChange').mockImplementation();
+    jest.spyOn(wrapper.vm, 'unstageChange').mockImplementation();
+    jest.spyOn(wrapper.vm, 'discardFileChanges').mockImplementation();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders button to discard & stage', () => {
+    expect(wrapper.vm.$el.querySelectorAll('.btn').length).toBe(2);
+  });
+
+  describe('discard button', () => {
+    let modal;
+
+    beforeEach(() => {
+      modal = findDiscardModal();
+
+      jest.spyOn(modal.vm, 'show');
+
+      findDiscardButton().trigger('click');
+    });
+
+    it('opens a dialog confirming discard', () => {
+      expect(modal.vm.show).toHaveBeenCalled();
+    });
+
+    it('calls discardFileChanges if dialog result is confirmed', () => {
+      modal.vm.$emit('ok');
+
+      expect(wrapper.vm.discardFileChanges).toHaveBeenCalledWith(f.path);
+    });
+  });
+
+  describe('stage/unstage button', () => {
+    it('unstages the file if it was already staged', () => {
+      f.staged = true;
+
+      findActionButton().trigger('click');
+
+      expect(wrapper.vm.unstageChange).toHaveBeenCalledWith(f.path);
+    });
+
+    it('stages the file if it was not staged', () => {
+      findActionButton().trigger('click');
+
+      expect(wrapper.vm.stageChange).toHaveBeenCalledWith(f.path);
+    });
+  });
+});