update components to match designs in commit section

4 files changed, 74 insertions, 21 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 9b4cea35538..92cd46e9385 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,
@@ -73,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>
 
@@ -89,12 +100,13 @@ export default {
       class="multi-file-commit-panel-header"
     >
       <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"
         />
         <strong>
           {{ titleText }}
@@ -102,6 +114,7 @@ export default {
         <div class="d-flex ml-auto">
           <button
             v-tooltip
+            ref="actionBtn"
             :title="actionBtnText"
             :aria-label="actionBtnText"
             :disabled="!filesLength"
@@ -121,6 +134,28 @@ export default {
               class="mr-0"
             />
           </button>
+          <button
+            v-tooltip
+            v-if="!stagedList"
+            :title="__('Unstage all changes')"
+            :aria-label="__('Unstage all changes')"
+            :disabled="!filesLength"
+            :class="{
+              'disabled-content': !filesLength
+            }"
+            type="button"
+            class="d-flex ide-staged-action-btn p-0 border-0 align-items-center prepend-left-8"
+            data-placement="bottom"
+            data-container="body"
+            data-boundary="viewport"
+            @click="openDiscardModal"
+          >
+            <icon
+              :size="16"
+              name="remove-all"
+              class="mr-0"
+            />
+          </button>
         </div>
       </div>
     </header>
@@ -147,5 +182,15 @@ export default {
     >
       {{ 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>
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index e24469f17ed..d3b24c5b793 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -97,7 +97,7 @@ export default {
         :active-file-key="activeFileKey"
         :empty-state-text="__('There are no unstaged changes')"
         action="stageAllChanges"
-        action-btn-icon="mobile-issue-close"
+        action-btn-icon="stage-all"
         item-action-component="stage-button"
         class="is-first"
         icon-name="unstaged"
@@ -111,7 +111,7 @@ export default {
         :active-file-key="activeFileKey"
         :empty-state-text="__('There are no staged changes')"
         action="unstageAllChanges"
-        action-btn-icon="history"
+        action-btn-icon="unstage-all"
         item-action-component="unstage-button"
         icon-name="staged"
       />
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 28b9d0df201..30dcf7ef4df 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -5,7 +5,7 @@ import service from '../../services';
 import * as types from '../mutation_types';
 import router from '../../ide_router';
 import { setPageTitle } from '../utils';
-import { viewerTypes } from '../../constants';
+import { viewerTypes, stageKeys } from '../../constants';
 
 export const closeFile = ({ commit, state, dispatch }, file) => {
   const { path } = file;
@@ -208,8 +208,9 @@ export const discardFileChanges = ({ dispatch, state, commit, getters }, path) =
   eventHub.$emit(`editor.update.model.dispose.unstaged-${file.key}`, file.content);
 };
 
-export const stageChange = ({ commit, state }, path) => {
+export const stageChange = ({ commit, state, dispatch }, path) => {
   const stagedFile = state.stagedFiles.find(f => f.path === path);
+  const openFile = state.openFiles.find(f => f.path === path);
 
   commit(types.STAGE_CHANGE, path);
   commit(types.SET_LAST_COMMIT_MSG, '');
@@ -217,21 +218,39 @@ export const stageChange = ({ commit, state }, path) => {
   if (stagedFile) {
     eventHub.$emit(`editor.update.model.new.content.staged-${stagedFile.key}`, stagedFile.content);
   }
+
+  if (openFile && openFile.active) {
+    const file = state.stagedFiles.find(f => f.path === path);
+
+    dispatch('openPendingTab', {
+      file,
+      keyPrefix: stageKeys.staged,
+    });
+  }
 };
 
-export const unstageChange = ({ commit }, path) => {
+export const unstageChange = ({ commit, dispatch, state }, path) => {
+  const openFile = state.openFiles.find(f => f.path === path);
+
   commit(types.UNSTAGE_CHANGE, path);
+
+  if (openFile && openFile.active) {
+    const file = state.changedFiles.find(f => f.path === path);
+
+    dispatch('openPendingTab', {
+      file,
+      keyPrefix: stageKeys.unstaged,
+    });
+  }
 };
 
-export const openPendingTab = ({ commit, getters, dispatch, state }, { file, keyPrefix }) => {
+export const openPendingTab = ({ commit, getters, state }, { file, keyPrefix }) => {
   if (getters.activeFile && getters.activeFile.key === `${keyPrefix}-${file.key}`) return false;
 
   state.openFiles.forEach(f => eventHub.$emit(`editor.update.model.dispose.${f.key}`));
 
   commit(types.ADD_PENDING_TAB, { file, keyPrefix });
 
-  dispatch('scrollToTab');
-
   router.push(`/project/${file.projectId}/tree/${state.currentBranchId}/`);
 
   return true;
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 0f0890f9fb6..f4c99016696 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -574,17 +574,6 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   padding: 12px 0;
 }
 
-.multi-file-commit-panel-header-title {
-  display: flex;
-  flex: 1;
-  align-items: center;
-
-  svg {
-    margin-right: $gl-btn-padding;
-    color: $theme-gray-700;
-  }
-}
-
 .multi-file-commit-panel-collapse-btn {
   border-left: 1px solid $white-dark;
   margin-left: auto;