update components to match designs in commit section

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

 <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>

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"
       />

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;

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;

package.json

@@ -18,7 +18,7 @@
     "webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
   },
   "dependencies": {
-    "@gitlab-org/gitlab-svgs": "^1.28.0",
+    "@gitlab-org/gitlab-svgs": "^1.29.0",
     "@gitlab-org/gitlab-ui": "1.0.5",
     "autosize": "^4.0.0",
     "axios": "^0.17.1",

spec/javascripts/ide/components/commit_sidebar/stage_button_spec.js

@@ -29,7 +29,7 @@ describe('IDE stage file button', () => {
   });
 
   it('renders button to discard & stage', () => {
-    expect(vm.$el.querySelectorAll('.btn').length).toBe(2);
+    expect(vm.$el.querySelectorAll('.btn-blank').length).toBe(2);
   });
 
   it('calls store with stage button', () => {
@@ -39,7 +39,7 @@ describe('IDE stage file button', () => {
   });
 
   it('calls store with discard button', () => {
-    vm.$el.querySelector('.dropdown-menu button').click();
+    vm.$el.querySelector('.btn-danger').click();
 
     expect(vm.discardFileChanges).toHaveBeenCalledWith(f.path);
   });

spec/javascripts/ide/components/repo_commit_section_spec.js

@@ -111,7 +111,7 @@ describe('RepoCommitSection', () => {
       .then(vm.$nextTick)
       .then(() => {
         expect(vm.$el.querySelector('.ide-commit-list-container').textContent).toContain(
-          'No changes',
+          'There are no unstaged changes',
         );
       })
       .then(done)
@@ -133,7 +133,7 @@ describe('RepoCommitSection', () => {
   });
 
   it('discards a single file', done => {
-    vm.$el.querySelector('.multi-file-discard-btn .dropdown-menu button').click();
+    vm.$el.querySelector('.multi-file-commit-list li:first-child .js-modal-primary-action').click();
 
     Vue.nextTick(() => {
       expect(vm.$el.querySelector('.ide-commit-list-container').textContent).not.toContain('file1');

yarn.lock

@@ -82,9 +82,9 @@
   version "1.27.0"
   resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.27.0.tgz#638e70399ebd59e503732177316bb9a18bf7a13f"
 
-"@gitlab-org/gitlab-svgs@^1.28.0":
-  version "1.28.0"
-  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.28.0.tgz#f689dfd46504df0a75027d6dd4ea01a71cd46f88"
+"@gitlab-org/gitlab-svgs@^1.29.0":
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.29.0.tgz#03b65b513f9099bbda6ecf94d673a2952f8c6c70"
 
 "@gitlab-org/gitlab-ui@1.0.5":
   version "1.0.5"