1 files changed, 61 insertions, 16 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index d0fb0e3d99e..3fdd35ad228 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -1,7 +1,9 @@
 <script>
+import $ from 'jquery';
 import { mapActions } from 'vuex';
 import { __, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import ListItem from './list_item.vue';
 
@@ -9,6 +11,7 @@ export default {
   components: {
     Icon,
     ListItem,
+    GlModal,
   },
   directives: {
     tooltip,
@@ -56,6 +59,11 @@ export default {
       type: String,
       required: true,
     },
+    emptyStateText: {
+      type: String,
+      required: false,
+      default: __('No changes'),
+    },
   },
   computed: {
     titleText() {
@@ -68,11 +76,19 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['stageAllChanges', 'unstageAllChanges']),
+    ...mapActions(['stageAllChanges', 'unstageAllChanges', 'discardAllChanges']),
     actionBtnClicked() {
       this[this.action]();
+
+      $(this.$refs.actionBtn).tooltip('hide');
+    },
+    openDiscardModal() {
+      $('#discard-all-changes').modal('show');
     },
   },
+  discardModalText: __(
+    "You will loose all the unstaged changes you've made in this project. This action cannot be undone.",
+  ),
 };
 </script>
 
@@ -81,27 +97,32 @@ export default {
     class="ide-commit-list-container"
   >
     <header
-      class="multi-file-commit-panel-header"
+      class="multi-file-commit-panel-header d-flex mb-0"
     >
       <div
-        class="multi-file-commit-panel-header-title"
+        class="d-flex align-items-center flex-fill"
       >
         <icon
           v-once
           :name="iconName"
           :size="18"
+          class="append-right-8"
         />
-        {{ titleText }}
+        <strong>
+          {{ titleText }}
+        </strong>
         <div class="d-flex ml-auto">
           <button
             v-tooltip
-            v-show="filesLength"
+            ref="actionBtn"
+            :title="actionBtnText"
+            :aria-label="actionBtnText"
+            :disabled="!filesLength"
             :class="{
-              'd-flex': filesLength
+              'disabled-content': !filesLength
             }"
-            :title="actionBtnText"
             type="button"
-            class="btn btn-default ide-staged-action-btn p-0 order-1 align-items-center"
+            class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
             data-placement="bottom"
             data-container="body"
             data-boundary="viewport"
@@ -109,18 +130,32 @@ export default {
           >
             <icon
               :name="actionBtnIcon"
-              :size="12"
+              :size="16"
               class="ml-auto mr-auto"
             />
           </button>
-          <span
+          <button
+            v-tooltip
+            v-if="!stagedList"
+            :title="__('Discard all changes')"
+            :aria-label="__('Discard all changes')"
+            :disabled="!filesLength"
             :class="{
-              'rounded-right': !filesLength
+              'disabled-content': !filesLength
             }"
-            class="ide-commit-file-count order-0 rounded-left text-center"
+            type="button"
+            class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
+            data-placement="bottom"
+            data-container="body"
+            data-boundary="viewport"
+            @click="openDiscardModal"
           >
-            {{ filesLength }}
-          </span>
+            <icon
+              :size="16"
+              name="remove-all"
+              class="ml-auto mr-auto"
+            />
+          </button>
         </div>
       </div>
     </header>
@@ -143,9 +178,19 @@ export default {
     </ul>
     <p
       v-else
-      class="multi-file-commit-list form-text text-muted"
+      class="multi-file-commit-list form-text text-muted text-center"
     >
-      {{ __('No changes') }}
+      {{ emptyStateText }}
     </p>
+    <gl-modal
+      v-if="!stagedList"
+      id="discard-all-changes"
+      :footer-primary-button-text="__('Discard all changes')"
+      :header-title-text="__('Discard all unstaged changes?')"
+      footer-primary-button-variant="danger"
+      @submit="discardAllChanges"
+    >
+      {{ $options.discardModalText }}
+    </gl-modal>
   </div>
 </template>