1 files changed, 39 insertions, 22 deletions
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
index e6044401c9f..8a1836a5c92 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
@@ -1,11 +1,15 @@
 <script>
+import $ from 'jquery';
 import { mapActions } from 'vuex';
+import { sprintf, __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
 
 export default {
   components: {
     Icon,
+    GlModal,
   },
   directives: {
     tooltip,
@@ -16,8 +20,22 @@ export default {
       required: true,
     },
   },
+  computed: {
+    modalId() {
+      return `discard-file-${this.path}`;
+    },
+    modalTitle() {
+      return sprintf(
+        __('Discard changes to %{path}?'),
+        { path: this.path },
+      );
+    },
+  },
   methods: {
     ...mapActions(['stageChange', 'discardFileChanges']),
+    showDiscardModal() {
+      $(document.getElementById(this.modalId)).modal('show');
+    },
   },
 };
 </script>
@@ -25,51 +43,50 @@ export default {
 <template>
   <div
     v-once
-    class="multi-file-discard-btn dropdown"
+    class="multi-file-discard-btn d-flex"
   >
     <button
       v-tooltip
       :aria-label="__('Stage changes')"
       :title="__('Stage changes')"
       type="button"
-      class="btn btn-blank append-right-5 d-flex align-items-center"
+      class="btn btn-blank align-items-center"
       data-container="body"
       data-boundary="viewport"
       data-placement="bottom"
-      @click.stop="stageChange(path)"
+      @click.stop.prevent="stageChange(path)"
     >
       <icon
-        :size="12"
+        :size="16"
         name="mobile-issue-close"
+        class="ml-auto mr-auto"
       />
     </button>
     <button
       v-tooltip
-      :title="__('More actions')"
+      :aria-label="__('Discard changes')"
+      :title="__('Discard changes')"
       type="button"
-      class="btn btn-blank d-flex align-items-center"
+      class="btn btn-blank align-items-center"
       data-container="body"
       data-boundary="viewport"
       data-placement="bottom"
-      data-toggle="dropdown"
-      data-display="static"
+      @click.stop.prevent="showDiscardModal"
     >
       <icon
-        :size="12"
-        name="ellipsis_h"
+        :size="16"
+        name="remove"
+        class="ml-auto mr-auto"
       />
     </button>
-    <div class="dropdown-menu dropdown-menu-right">
-      <ul>
-        <li>
-          <button
-            type="button"
-            @click.stop="discardFileChanges(path)"
-          >
-            {{ __('Discard changes') }}
-          </button>
-        </li>
-      </ul>
-    </div>
+    <gl-modal
+      :id="modalId"
+      :header-title-text="modalTitle"
+      :footer-primary-button-text="__('Discard changes')"
+      footer-primary-button-variant="danger"
+      @submit="discardFileChanges(path)"
+    >
+      {{ __("You will loose all changes you've made to this file. This action cannot be undone.") }}
+    </gl-modal>
   </div>
 </template>