Merge branch '4572-open-staged-files-in-editor' into 'master'

Open staged files from Web IDE right sidebar

Closes #4572

See merge request gitlab-org/gitlab-ee!4704

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

 <script>
   import { mapActions } from 'vuex';
+  import router from '~/ide/ide_router';
   import icon from '../../../vue_shared/components/icon.vue';
 
   export default {
@@ -24,20 +25,27 @@
       ...mapActions([
         'discardFileChanges',
       ]),
+      openFileInEditor(file) {
+        router.push(`/project${file.url}`);
+      },
     },
   };
 </script>
 
 <template>
   <div class="multi-file-commit-list-item">
-    <icon
-      :name="iconName"
-      :size="16"
-      :css-classes="iconClass"
-    />
-    <span class="multi-file-commit-list-path">
-      {{ file.path }}
-    </span>
+    <button
+      type="button"
+      class="multi-file-commit-list-path"
+      @click="openFileInEditor(file)">
+      <span class="multi-file-commit-list-file-path">
+        <icon
+          :name="iconName"
+          :size="16"
+          :css-classes="iconClass"
+        />{{ file.path }}
+      </span>
+    </button>
     <button
       type="button"
       class="btn btn-blank multi-file-discard-btn"

app/assets/stylesheets/pages/repo.scss

@@ -409,25 +409,30 @@ table.table tr td.multi-file-table-name {
 .multi-file-commit-list {
   flex: 1;
   overflow: auto;
-  padding: $gl-padding;
+  padding: $gl-padding 0;
+  min-height: 60px;
 }
 
 .multi-file-commit-list-item {
   display: flex;
-  margin-bottom: $grid-size;
+  padding: 0;
   align-items: center;
 
-  > svg {
-    min-width: 16px;
-  }
-
   .multi-file-discard-btn {
     display: none;
     margin-left: auto;
     color: $gl-link-color;
+    padding: 0 2px;
+
+    &:focus,
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   &:hover {
+    background: $white-normal;
+
     .multi-file-discard-btn {
       display: block;
     }
@@ -460,7 +465,36 @@ table.table tr td.multi-file-table-name {
 }
 
 .multi-file-commit-list-path {
+  padding: $grid-size / 2;
+  padding-left: $gl-padding;
+  background: none;
+  border: 0;
+  text-align: left;
+  width: 100%;
+  min-width: 0;
+
+  svg {
+    min-width: 16px;
+    vertical-align: middle;
+    display: inline-block;
+  }
+
+  &:hover,
+  &:focus {
+    outline: 0;
+  }
+}
+
+.multi-file-commit-list-file-path {
   @include str-truncated(100%);
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:active {
+    text-decoration: none;
+  }
 }
 
 .multi-file-commit-form {

ee/changelogs/unreleased/4572-open-staged-files-in-editor.yml

+---
+title: Allow clicking on Staged Files in WebIDE to open them in the Editor
+merge_request:
+author:
+type: other

spec/javascripts/repo/components/commit_sidebar/list_item_spec.js

 import Vue from 'vue';
 import listItem from '~/ide/components/commit_sidebar/list_item.vue';
+import router from '~/ide/ide_router';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { file } from '../../helpers';
 
@@ -33,6 +34,16 @@ describe('Multi-file editor commit sidebar list item', () => {
     expect(vm.discardFileChanges).toHaveBeenCalled();
   });
 
+  it('opens a closed file in the editor when clicking the file path', () => {
+    spyOn(vm, 'openFileInEditor').and.callThrough();
+    spyOn(router, 'push');
+
+    vm.$el.querySelector('.multi-file-commit-list-path').click();
+
+    expect(vm.openFileInEditor).toHaveBeenCalled();
+    expect(router.push).toHaveBeenCalled();
+  });
+
   describe('computed', () => {
     describe('iconName', () => {
       it('returns modified when not a tempFile', () => {