fixed hover styling caused by dropdown

fixed karma specs
added CHANGELOG item

7 files changed, 47 insertions, 41 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 72c02d1584f..62bff60cbd8 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -94,7 +94,7 @@ export default {
             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="btn btn-default ide-staged-action-btn p-0 order-1 align-items-center"
             :class="{
               'd-flex': fileList.length
             }"
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 040e2ea5375..5390b21cb57 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -54,6 +54,9 @@ export default {
     isActive() {
       return this.activeFileKey === this.fullKey;
     },
+    tooltipTitle() {
+      return this.file.path === this.file.name ? '' : this.file.path;
+    },
   },
   methods: {
     ...mapActions([
@@ -85,17 +88,15 @@ export default {
 </script>
 
 <template>
-  <div
-    :class="{
-      'is-active': isActive
-    }"
-    class="multi-file-commit-list-item"
-  >
+  <div class="multi-file-commit-list-item position-relative">
     <button
       v-tooltip
-      :title="file.path"
+      :title="tooltipTitle"
+      :class="{
+        'is-active': isActive
+      }"
       type="button"
-      class="multi-file-commit-list-path"
+      class="multi-file-commit-list-path w-100 border-0 ml-0 mr-0"
       @dblclick="fileAction"
       @click="openFileInEditor"
     >
@@ -108,9 +109,9 @@ export default {
       </span>
     </button>
     <component
-      class="d-flex ml-auto"
       :is="actionComponent"
       :path="file.path"
+      class="d-flex position-absolute"
     />
   </div>
 </template>
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 0b0a435b6f4..36a514a5055 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -540,27 +540,12 @@
   margin-right: -$grid-size;
   min-height: 60px;
 
-  .multi-file-commit-list-item {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
   &.form-text.text-muted {
     margin-left: 0;
     right: 0;
   }
 }
 
-.multi-file-commit-list-item {
-  &.is-active {
-    background-color: $white-normal;
-  }
-
-  .multi-file-discard-btn {
-    margin-top: -2px;
-  }
-}
-
 .multi-file-addition,
 .multi-file-addition-solid {
   color: $green-500;
@@ -590,7 +575,7 @@
   }
 }
 
-.multi-file-commit-list-item,
+.multi-file-commit-list-path,
 .ide-file-list .file {
   display: flex;
   align-items: center;
@@ -607,11 +592,9 @@
 }
 
 .multi-file-commit-list-path {
-  padding: 0;
-  background: none;
-  border: 0;
-  text-align: left;
-  width: 100%;
+  &.is-active {
+    background-color: $white-normal;
+  }
 
   &:hover,
   &:focus {
@@ -637,6 +620,12 @@
   }
 }
 
+.multi-file-discard-btn {
+  top: 0;
+  right: 8px;
+  bottom: 0;
+}
+
 .multi-file-commit-form {
   position: relative;
   background-color: $white-light;
@@ -832,7 +821,13 @@
 
 .ide-staged-action-btn {
   width: 22px;
-  border: 1px solid $white-dark;
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
+  > svg {
+    top: 0;
+  }
 }
 
 .ide-commit-file-count {
diff --git a/changelogs/unreleased/ide-commit-actions-update.yml b/changelogs/unreleased/ide-commit-actions-update.yml
new file mode 100644
index 00000000000..35bee94e156
--- /dev/null
+++ b/changelogs/unreleased/ide-commit-actions-update.yml
@@ -0,0 +1,5 @@
+---
+title: Improve Web IDE commit flow
+merge_request:
+author:
+type: changed
diff --git a/spec/javascripts/ide/components/commit_sidebar/list_spec.js b/spec/javascripts/ide/components/commit_sidebar/list_spec.js
index 6fb52378386..b994488af87 100644
--- a/spec/javascripts/ide/components/commit_sidebar/list_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/list_spec.js
@@ -16,6 +16,7 @@ describe('Multi-file editor commit sidebar list', () => {
       iconName: 'staged',
       action: 'stageAllChanges',
       actionBtnText: 'stage all',
+      actionBtnIcon: 'history',
       itemActionComponent: 'stage-button',
       activeFileKey: 'staged-testing',
       keyPrefix: 'staged',
diff --git a/spec/javascripts/ide/components/commit_sidebar/stage_button_spec.js b/spec/javascripts/ide/components/commit_sidebar/stage_button_spec.js
index 6bf8710bda7..a5b906da8a1 100644
--- a/spec/javascripts/ide/components/commit_sidebar/stage_button_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/stage_button_spec.js
@@ -39,7 +39,7 @@ describe('IDE stage file button', () => {
   });
 
   it('calls store with discard button', () => {
-    vm.$el.querySelectorAll('.btn')[1].click();
+    vm.$el.querySelector('.dropdown-menu button').click();
 
     expect(vm.discardFileChanges).toHaveBeenCalledWith(f.path);
   });
diff --git a/spec/javascripts/ide/components/repo_commit_section_spec.js b/spec/javascripts/ide/components/repo_commit_section_spec.js
index 531bcd6e540..6bf309fb4bf 100644
--- a/spec/javascripts/ide/components/repo_commit_section_spec.js
+++ b/spec/javascripts/ide/components/repo_commit_section_spec.js
@@ -111,7 +111,7 @@ describe('RepoCommitSection', () => {
   });
 
   it('renders a commit section', () => {
-    const changedFileElements = [...vm.$el.querySelectorAll('.multi-file-commit-list li')];
+    const changedFileElements = [...vm.$el.querySelectorAll('.multi-file-commit-list > li')];
     const allFiles = vm.$store.state.changedFiles.concat(vm.$store.state.stagedFiles);
 
     expect(changedFileElements.length).toEqual(4);
@@ -140,22 +140,26 @@ describe('RepoCommitSection', () => {
     vm.$el.querySelector('.multi-file-discard-btn .btn').click();
 
     Vue.nextTick(() => {
-      expect(vm.$el.querySelector('.ide-commit-list-container').querySelectorAll('li').length).toBe(
-        1,
-      );
+      expect(
+        vm.$el
+          .querySelector('.ide-commit-list-container')
+          .querySelectorAll('.multi-file-commit-list > li').length,
+      ).toBe(1);
 
       done();
     });
   });
 
   it('discards a single file', done => {
-    vm.$el.querySelectorAll('.multi-file-discard-btn .btn')[1].click();
+    vm.$el.querySelector('.multi-file-discard-btn .dropdown-menu button').click();
 
     Vue.nextTick(() => {
       expect(vm.$el.querySelector('.ide-commit-list-container').textContent).not.toContain('file1');
-      expect(vm.$el.querySelector('.ide-commit-list-container').querySelectorAll('li').length).toBe(
-        1,
-      );
+      expect(
+        vm.$el
+          .querySelector('.ide-commit-list-container')
+          .querySelectorAll('.multi-file-commit-list > li').length,
+      ).toBe(1);
 
       done();
     });