1 files changed, 80 insertions, 21 deletions

diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index cfe4273742f..ea1a73d40cd 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -1,10 +1,14 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
+import { TooltipDirective as Tooltip } from '@gitlab-org/gitlab-ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import FileRowStats from './file_row_stats.vue';
 
 export default {
+  directives: {
+    Tooltip,
+  },
   components: {
     Icon,
     FileRow,
@@ -12,6 +16,8 @@ export default {
   data() {
     return {
       search: '',
+      renderTreeList: true,
+      focusSearch: false,
     };
   },
   computed: {
@@ -20,16 +26,29 @@ export default {
     filteredTreeList() {
       const search = this.search.toLowerCase().trim();
 
-      if (search === '') return this.tree;
+      if (search === '') return this.renderTreeList ? this.tree : this.allBlobs;
 
       return this.allBlobs.filter(f => f.name.toLowerCase().indexOf(search) >= 0);
     },
+    rowDisplayTextKey() {
+      if (this.renderTreeList && this.search.trim() === '') {
+        return 'name';
+      }
+
+      return 'truncatedPath';
+    },
   },
   methods: {
     ...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile']),
     clearSearch() {
       this.search = '';
     },
+    toggleRenderTreeList(toggle) {
+      this.renderTreeList = toggle;
+    },
+    toggleFocusSearch(toggle) {
+      this.focusSearch = toggle;
+    },
   },
   FileRowStats,
 };
@@ -37,28 +56,67 @@ export default {
 
 <template>
   <div class="tree-list-holder d-flex flex-column">
-    <div class="append-bottom-8 position-relative tree-list-search">
-      <icon
-        name="search"
-        class="position-absolute tree-list-icon"
-      />
-      <input
-        v-model="search"
-        :placeholder="s__('MergeRequest|Filter files')"
-        type="search"
-        class="form-control"
-      />
-      <button
-        v-show="search"
-        :aria-label="__('Clear search')"
-        type="button"
-        class="position-absolute tree-list-icon tree-list-clear-icon border-0 p-0"
-        @click="clearSearch"
-      >
+    <div class="append-bottom-8 position-relative tree-list-search d-flex">
+      <div class="flex-fill d-flex">
         <icon
-          name="close"
+          name="search"
+          class="position-absolute tree-list-icon"
+        />
+        <input
+          v-model="search"
+          :placeholder="s__('MergeRequest|Filter files')"
+          type="search"
+          class="form-control"
+          @focus="toggleFocusSearch(true)"
+          @blur="toggleFocusSearch(false)"
         />
-      </button>
+        <button
+          v-show="search"
+          :aria-label="__('Clear search')"
+          type="button"
+          class="position-absolute tree-list-icon tree-list-clear-icon border-0 p-0"
+          @click="clearSearch"
+        >
+          <icon
+            name="close"
+          />
+        </button>
+      </div>
+      <div
+        v-show="!focusSearch"
+        class="btn-group prepend-left-8 tree-list-view-toggle"
+      >
+        <button
+          v-tooltip.hover
+          :aria-label="__('Switch to file list')"
+          :title="__('Switch to file list')"
+          :class="{
+            active: !renderTreeList
+          }"
+          class="btn btn-default pt-0 pb-0 d-flex align-items-center"
+          type="button"
+          @click="toggleRenderTreeList(false)"
+        >
+          <icon
+            name="hamburger"
+          />
+        </button>
+        <button
+          v-tooltip.hover
+          :aria-label="__('Switch to tree list')"
+          :title="__('Switch to tree list')"
+          :class="{
+            active: renderTreeList
+          }"
+          class="btn btn-default pt-0 pb-0 d-flex align-items-center"
+          type="button"
+          @click="toggleRenderTreeList(true)"
+        >
+          <icon
+            name="hamburger"
+          />
+        </button>
+      </div>
     </div>
     <div
       class="tree-list-scroll"
@@ -72,6 +130,7 @@ export default {
           :hide-extra-on-tree="true"
           :extra-component="$options.FileRowStats"
           :show-changed-icon="true"
+          :display-text-key="rowDisplayTextKey"
           @toggleTreeOpen="toggleTreeOpen"
           @clickFile="scrollToFile"
         />