Improve commit flow in Web IDE

Closes #46122

5 files changed, 64 insertions, 50 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 3d59410cbc2..72c02d1584f 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -34,6 +34,10 @@ export default {
       type: String,
       required: true,
     },
+    actionBtnIcon: {
+      type: String,
+      required: true,
+    },
     itemActionComponent: {
       type: String,
       required: true,
@@ -53,11 +57,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      showActionButton: false,
-    };
-  },
   computed: {
     titleText() {
       return sprintf(__('%{title} changes'), {
@@ -70,9 +69,6 @@ export default {
     actionBtnClicked() {
       this[this.action]();
     },
-    setShowActionButton(show) {
-      this.showActionButton = show;
-    },
   },
 };
 </script>
@@ -83,8 +79,6 @@ export default {
   >
     <header
       class="multi-file-commit-panel-header"
-      @mouseenter="setShowActionButton(true)"
-      @mouseleave="setShowActionButton(false)"
     >
       <div
         class="multi-file-commit-panel-header-title"
@@ -95,20 +89,34 @@ export default {
           :size="18"
         />
         {{ titleText }}
-        <span
-          v-show="!showActionButton"
-          class="ide-commit-file-count"
-        >
-          {{ fileList.length }}
-        </span>
-        <button
-          v-show="showActionButton"
-          type="button"
-          class="btn btn-blank btn-link ide-staged-action-btn"
-          @click="actionBtnClicked"
-        >
-          {{ actionBtnText }}
-        </button>
+        <div class="d-flex ml-auto">
+          <button
+            v-show="fileList.length"
+            v-tooltip
+            type="button"
+            class="ide-staged-action-btn p-0 order-1 align-items-center rounded-right border-left-0"
+            :class="{
+              'd-flex': fileList.length
+            }"
+            :title="actionBtnText"
+            data-placement="bottom"
+            @click="actionBtnClicked"
+          >
+            <icon
+              class="ml-auto mr-auto"
+              :name="actionBtnIcon"
+              :size="12"
+            />
+          </button>
+          <span
+            class="ide-commit-file-count order-0 rounded-left text-center"
+            :class="{
+              'rounded-right': !fileList.length
+            }"
+          >
+            {{ fileList.length }}
+          </span>
+        </div>
       </div>
     </header>
     <ul
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 2ecf9af4bf0..040e2ea5375 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -1,5 +1,6 @@
 <script>
 import { mapActions } from 'vuex';
+import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import StageButton from './stage_button.vue';
 import UnstageButton from './unstage_button.vue';
@@ -11,6 +12,9 @@ export default {
     StageButton,
     UnstageButton,
   },
+  directives: {
+    tooltip,
+  },
   props: {
     file: {
       type: Object,
@@ -88,6 +92,8 @@ export default {
     class="multi-file-commit-list-item"
   >
     <button
+      v-tooltip
+      :title="file.path"
       type="button"
       class="multi-file-commit-list-path"
       @dblclick="fileAction"
@@ -98,10 +104,11 @@ export default {
           :name="iconName"
           :size="16"
           :css-classes="iconClass"
-        />{{ file.path }}
+        />{{ file.name }}
       </span>
     </button>
     <component
+      class="d-flex ml-auto"
       :is="actionComponent"
       :path="file.path"
     />
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 a786ec80ac2..60d0023d121 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
@@ -25,7 +25,7 @@ export default {
 <template>
   <div
     v-once
-    class="multi-file-discard-btn"
+    class="multi-file-discard-btn dropdown"
   >
     <button
       v-tooltip
@@ -43,17 +43,27 @@ export default {
     </button>
     <button
       v-tooltip
-      :aria-label="__('Discard changes')"
-      :title="__('Discard changes')"
       type="button"
       class="btn btn-blank"
       data-container="body"
-      @click.stop="discardFileChanges(path)"
+      data-toggle="dropdown"
     >
       <icon
         :size="12"
-        name="remove"
+        name="more"
       />
     </button>
+    <div class="dropdown-menu">
+      <ul>
+        <li>
+          <button
+            type="button"
+            @click.stop="discardFileChanges(path)"
+          >
+            {{ __('Discard changes') }}
+          </button>
+        </li>
+      </ul>
+    </div>
   </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 01df0019fd4..c2c678ff0be 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -93,23 +93,25 @@ export default {
         :title="__('Unstaged')"
         :key-prefix="$options.stageKeys.unstaged"
         :file-list="changedFiles"
-        :action-btn-text="__('Stage all')"
+        :action-btn-text="__('Stage all changes')"
         :active-file-key="activeFileKey"
-        class="is-first"
-        icon-name="unstaged"
         action="stageAllChanges"
+        action-btn-icon="mobile-issue-close"
         item-action-component="stage-button"
+        class="is-first"
+        icon-name="unstaged"
       />
       <commit-files-list
         :title="__('Staged')"
         :key-prefix="$options.stageKeys.staged"
         :file-list="stagedFiles"
-        :action-btn-text="__('Unstage all')"
+        :action-btn-text="__('Unstage all changes')"
         :staged-list="true"
         :active-file-key="activeFileKey"
-        icon-name="staged"
         action="unstageAllChanges"
+        action-btn-icon="history"
         item-action-component="unstage-button"
+        icon-name="staged"
       />
     </template>
     <empty-state
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 4b8a3db1d06..0b0a435b6f4 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -557,16 +557,7 @@
   }
 
   .multi-file-discard-btn {
-    display: none;
     margin-top: -2px;
-    margin-left: auto;
-    color: $gl-link-color;
-  }
-
-  &:hover {
-    .multi-file-discard-btn {
-      display: flex;
-    }
   }
 }
 
@@ -840,18 +831,14 @@
 }
 
 .ide-staged-action-btn {
-  margin-left: auto;
-  line-height: 22px;
+  width: 22px;
+  border: 1px solid $white-dark;
 }
 
 .ide-commit-file-count {
   min-width: 22px;
-  margin-left: auto;
   background-color: $gray-light;
-  border-radius: $border-radius-default;
   border: 1px solid $white-dark;
-  line-height: 20px;
-  text-align: center;
 }
 
 .ide-commit-radios {