From 2d00e7fce5b33f2a8c89dccd33d5d1758cc846c7 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 8 Oct 2018 11:50:22 +0100
Subject: Add list mode to file browser in diffs

This adds toggle buttons to switch between file & tree list.
For file list, it renders the truncated paths with the ellipsis
at the start of the path.

When focusing the input, it hides the toggle buttons.
On blur, the buttons get shown again.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/51859
---
 .../javascripts/diffs/components/tree_list.vue     | 101 ++++++++++++++++-----
 app/assets/javascripts/diffs/store/utils.js        |  13 +++
 .../javascripts/vue_shared/components/file_row.vue |   8 +-
 app/assets/stylesheets/pages/diff.scss             |  14 ++-
 changelogs/unreleased/mr-file-list.yml             |   5 +
 locale/gitlab.pot                                  |   6 ++
 .../javascripts/diffs/components/tree_list_spec.js |  70 ++++++++++++++
 spec/javascripts/diffs/store/utils_spec.js         |  28 ++++++
 8 files changed, 221 insertions(+), 24 deletions(-)
 create mode 100644 changelogs/unreleased/mr-file-list.yml

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"
         />
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index a482a2b82c0..7c093dcf1fe 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -275,6 +275,18 @@ export function isDiscussionApplicableToLine({ discussion, diffPosition, latestD
   return latestDiff && discussion.active && lineCode === discussion.line_code;
 }
 
+export const truncatedName = path => {
+  const maxLength = 30;
+
+  if (path.length > maxLength) {
+    const start = path.length - maxLength;
+    const end = start + maxLength;
+    return `...${path.slice(start, end)}`;
+  }
+
+  return path;
+};
+
 export const generateTreeList = files =>
   files.reduce(
     (acc, file) => {
@@ -290,6 +302,7 @@ export const generateTreeList = files =>
           acc.treeEntries[path] = {
             key: path,
             path,
+            truncatedPath: truncatedName(path),
             name,
             type,
             tree: [],
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 36a345130c0..7c34d776c7f 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -34,6 +34,11 @@ export default {
       required: false,
       default: false,
     },
+    displayTextKey: {
+      type: String,
+      required: false,
+      default: 'name',
+    },
   },
   data() {
     return {
@@ -156,7 +161,7 @@ export default {
             :size="16"
             class="append-right-5"
           />
-          {{ file.name }}
+          {{ file[displayTextKey] }}
         </span>
         <component
           :is="extraComponent"
@@ -175,6 +180,7 @@ export default {
         :hide-extra-on-tree="hideExtraOnTree"
         :extra-component="extraComponent"
         :show-changed-icon="showChangedIcon"
+        :display-text-key="displayTextKey"
         @toggleTreeOpen="toggleTreeOpen"
         @clickFile="clickedFile"
       />
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 8d884ad6891..52c91266ff4 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -1027,8 +1027,12 @@
   overflow-x: auto;
 }
 
-.tree-list-search .form-control {
-  padding-left: 30px;
+.tree-list-search {
+  flex: 0 0 34px;
+
+  .form-control {
+    padding-left: 30px;
+  }
 }
 
 .tree-list-icon {
@@ -1063,3 +1067,9 @@
     }
   }
 }
+
+.tree-list-view-toggle {
+  svg {
+    top: 0;
+  }
+}
diff --git a/changelogs/unreleased/mr-file-list.yml b/changelogs/unreleased/mr-file-list.yml
new file mode 100644
index 00000000000..6596a0dd3e3
--- /dev/null
+++ b/changelogs/unreleased/mr-file-list.yml
@@ -0,0 +1,5 @@
+---
+title: Switch between tree list & file list in diffs file browser
+merge_request:
+author:
+type: added
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bb18d4eccd8..dfed77dbb36 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -5823,6 +5823,12 @@ msgstr ""
 msgid "Switch branch/tag"
 msgstr ""
 
+msgid "Switch to file list"
+msgstr ""
+
+msgid "Switch to tree list"
+msgstr ""
+
 msgid "System Hooks"
 msgstr ""
 
diff --git a/spec/javascripts/diffs/components/tree_list_spec.js b/spec/javascripts/diffs/components/tree_list_spec.js
index 08e25d2004e..86e2b03292d 100644
--- a/spec/javascripts/diffs/components/tree_list_spec.js
+++ b/spec/javascripts/diffs/components/tree_list_spec.js
@@ -54,6 +54,7 @@ describe('Diffs tree list component', () => {
           key: 'index.js',
           name: 'index.js',
           path: 'index.js',
+          truncatedPath: '../index.js',
           removedLines: 0,
           tempFile: true,
           type: 'blob',
@@ -106,6 +107,55 @@ describe('Diffs tree list component', () => {
 
       expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', 'index.js');
     });
+
+    it('renders as file list when renderTreeList is false', done => {
+      vm.renderTreeList = false;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelectorAll('.file-row').length).toBe(1);
+
+        done();
+      });
+    });
+
+    it('renders file paths when renderTreeList is false', done => {
+      vm.renderTreeList = false;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.file-row').textContent).toContain('../index.js');
+
+        done();
+      });
+    });
+
+    it('hides render buttons when input is focused', done => {
+      const focusEvent = new Event('focus');
+
+      vm.$el.querySelector('.form-control').dispatchEvent(focusEvent);
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.tree-list-view-toggle').style.display).toBe('none');
+
+        done();
+      });
+    });
+
+    it('shows render buttons when input is blurred', done => {
+      const blurEvent = new Event('blur');
+      vm.focusSearch = true;
+
+      vm
+        .$nextTick()
+        .then(() => {
+          vm.$el.querySelector('.form-control').dispatchEvent(blurEvent);
+        })
+        .then(vm.$nextTick)
+        .then(() => {
+          expect(vm.$el.querySelector('.tree-list-view-toggle').style.display).not.toBe('none');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
   });
 
   describe('clearSearch', () => {
@@ -117,4 +167,24 @@ describe('Diffs tree list component', () => {
       expect(vm.search).toBe('');
     });
   });
+
+  describe('toggleRenderTreeList', () => {
+    it('updates renderTreeList', () => {
+      expect(vm.renderTreeList).toBe(true);
+
+      vm.toggleRenderTreeList(false);
+
+      expect(vm.renderTreeList).toBe(false);
+    });
+  });
+
+  describe('toggleFocusSearch', () => {
+    it('updates focusSearch', () => {
+      expect(vm.focusSearch).toBe(false);
+
+      vm.toggleFocusSearch(true);
+
+      expect(vm.focusSearch).toBe(true);
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index ef367fc09fa..6a0a69967fa 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -444,6 +444,14 @@ describe('DiffsStoreUtils', () => {
           addedLines: 0,
           fileHash: 'test',
         },
+        {
+          newPath: 'app/test/filepathneedstruncating.js',
+          deletedFile: false,
+          newFile: true,
+          removedLines: 0,
+          addedLines: 0,
+          fileHash: 'test',
+        },
         {
           newPath: 'package.json',
           deletedFile: true,
@@ -462,6 +470,7 @@ describe('DiffsStoreUtils', () => {
         {
           key: 'app',
           path: 'app',
+          truncatedPath: 'app',
           name: 'app',
           type: 'tree',
           tree: [
@@ -473,6 +482,7 @@ describe('DiffsStoreUtils', () => {
               key: 'app/index.js',
               name: 'index.js',
               path: 'app/index.js',
+              truncatedPath: 'app/index.js',
               removedLines: 10,
               tempFile: false,
               type: 'blob',
@@ -481,6 +491,7 @@ describe('DiffsStoreUtils', () => {
             {
               key: 'app/test',
               path: 'app/test',
+              truncatedPath: 'app/test',
               name: 'test',
               type: 'tree',
               opened: true,
@@ -493,6 +504,21 @@ describe('DiffsStoreUtils', () => {
                   key: 'app/test/index.js',
                   name: 'index.js',
                   path: 'app/test/index.js',
+                  truncatedPath: 'app/test/index.js',
+                  removedLines: 0,
+                  tempFile: true,
+                  type: 'blob',
+                  tree: [],
+                },
+                {
+                  addedLines: 0,
+                  changed: true,
+                  deleted: false,
+                  fileHash: 'test',
+                  key: 'app/test/filepathneedstruncating.js',
+                  name: 'filepathneedstruncating.js',
+                  path: 'app/test/filepathneedstruncating.js',
+                  truncatedPath: '...est/filepathneedstruncating.js',
                   removedLines: 0,
                   tempFile: true,
                   type: 'blob',
@@ -506,6 +532,7 @@ describe('DiffsStoreUtils', () => {
         {
           key: 'package.json',
           path: 'package.json',
+          truncatedPath: 'package.json',
           name: 'package.json',
           type: 'blob',
           changed: true,
@@ -527,6 +554,7 @@ describe('DiffsStoreUtils', () => {
         'app/index.js',
         'app/test',
         'app/test/index.js',
+        'app/test/filepathneedstruncating.js',
         'package.json',
       ]);
     });
-- 
cgit v1.2.1


From d95465db2cf79c0c95584e23c005a14302fc2c88 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 15 Oct 2018 11:06:54 +0100
Subject: Dynamically truncate the text in the file row

---
 .../javascripts/diffs/components/tree_list.vue     |  3 ++-
 app/assets/javascripts/diffs/store/utils.js        | 13 -----------
 .../javascripts/vue_shared/components/file_row.vue | 26 +++++++++++++++++++++-
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index ea1a73d40cd..84b5f45300a 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -35,7 +35,7 @@ export default {
         return 'name';
       }
 
-      return 'truncatedPath';
+      return 'path';
     },
   },
   methods: {
@@ -131,6 +131,7 @@ export default {
           :extra-component="$options.FileRowStats"
           :show-changed-icon="true"
           :display-text-key="rowDisplayTextKey"
+          :should-truncate-start="true"
           @toggleTreeOpen="toggleTreeOpen"
           @clickFile="scrollToFile"
         />
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index 7c093dcf1fe..a482a2b82c0 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -275,18 +275,6 @@ export function isDiscussionApplicableToLine({ discussion, diffPosition, latestD
   return latestDiff && discussion.active && lineCode === discussion.line_code;
 }
 
-export const truncatedName = path => {
-  const maxLength = 30;
-
-  if (path.length > maxLength) {
-    const start = path.length - maxLength;
-    const end = start + maxLength;
-    return `...${path.slice(start, end)}`;
-  }
-
-  return path;
-};
-
 export const generateTreeList = files =>
   files.reduce(
     (acc, file) => {
@@ -302,7 +290,6 @@ export const generateTreeList = files =>
           acc.treeEntries[path] = {
             key: path,
             path,
-            truncatedPath: truncatedName(path),
             name,
             type,
             tree: [],
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 7c34d776c7f..510c5eb5fca 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -39,10 +39,16 @@ export default {
       required: false,
       default: 'name',
     },
+    shouldTruncateStart: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
       mouseOver: false,
+      truncateStart: 0,
     };
   },
   computed: {
@@ -65,6 +71,13 @@ export default {
         'is-open': this.file.opened,
       };
     },
+    outputText() {
+      const text = this.file[this.displayTextKey];
+
+      if (this.truncateStart === 0) return text;
+
+      return `...${text.substring(this.truncateStart, text.length)}`;
+    },
   },
   watch: {
     'file.active': function fileActiveWatch(active) {
@@ -77,6 +90,15 @@ export default {
     if (this.hasPathAtCurrentRoute()) {
       this.scrollIntoView(true);
     }
+
+    if (this.shouldTruncateStart) {
+      const { scrollWidth, offsetWidth } = this.$refs.textOutput;
+      const textOverflow = scrollWidth - offsetWidth;
+
+      if (textOverflow > 0) {
+        this.truncateStart = Math.ceil(textOverflow / 5) + 3;
+      }
+    }
   },
   methods: {
     toggleTreeOpen(path) {
@@ -144,6 +166,7 @@ export default {
         class="file-row-name-container"
       >
         <span
+          ref="textOutput"
           :style="levelIndentation"
           class="file-row-name str-truncated"
         >
@@ -161,7 +184,7 @@ export default {
             :size="16"
             class="append-right-5"
           />
-          {{ file[displayTextKey] }}
+          {{ outputText }}
         </span>
         <component
           :is="extraComponent"
@@ -181,6 +204,7 @@ export default {
         :extra-component="extraComponent"
         :show-changed-icon="showChangedIcon"
         :display-text-key="displayTextKey"
+        :should-truncate-start="shouldTruncateStart"
         @toggleTreeOpen="toggleTreeOpen"
         @clickFile="clickedFile"
       />
-- 
cgit v1.2.1


From 9fd5a78d8bb8be1146574fdda5920bc2ec72620a Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 16 Oct 2018 12:05:19 +0100
Subject: Fixed failing specs

Added tests to file row truncated text computed prop
---
 .../javascripts/diffs/components/tree_list_spec.js | 10 +++---
 spec/javascripts/diffs/store/utils_spec.js         |  6 ----
 .../vue_shared/components/file_row_spec.js         | 36 ++++++++++++++++++++++
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/spec/javascripts/diffs/components/tree_list_spec.js b/spec/javascripts/diffs/components/tree_list_spec.js
index 86e2b03292d..fc94d0bab5b 100644
--- a/spec/javascripts/diffs/components/tree_list_spec.js
+++ b/spec/javascripts/diffs/components/tree_list_spec.js
@@ -53,8 +53,7 @@ describe('Diffs tree list component', () => {
           fileHash: 'test',
           key: 'index.js',
           name: 'index.js',
-          path: 'index.js',
-          truncatedPath: '../index.js',
+          path: 'app/index.js',
           removedLines: 0,
           tempFile: true,
           type: 'blob',
@@ -105,7 +104,7 @@ describe('Diffs tree list component', () => {
 
       vm.$el.querySelector('.file-row').click();
 
-      expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', 'index.js');
+      expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', 'app/index.js');
     });
 
     it('renders as file list when renderTreeList is false', done => {
@@ -122,7 +121,7 @@ describe('Diffs tree list component', () => {
       vm.renderTreeList = false;
 
       vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.file-row').textContent).toContain('../index.js');
+        expect(vm.$el.querySelector('.file-row').textContent).toContain('app/index.js');
 
         done();
       });
@@ -144,8 +143,7 @@ describe('Diffs tree list component', () => {
       const blurEvent = new Event('blur');
       vm.focusSearch = true;
 
-      vm
-        .$nextTick()
+      vm.$nextTick()
         .then(() => {
           vm.$el.querySelector('.form-control').dispatchEvent(blurEvent);
         })
diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index 6a0a69967fa..f49dee3696d 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -470,7 +470,6 @@ describe('DiffsStoreUtils', () => {
         {
           key: 'app',
           path: 'app',
-          truncatedPath: 'app',
           name: 'app',
           type: 'tree',
           tree: [
@@ -482,7 +481,6 @@ describe('DiffsStoreUtils', () => {
               key: 'app/index.js',
               name: 'index.js',
               path: 'app/index.js',
-              truncatedPath: 'app/index.js',
               removedLines: 10,
               tempFile: false,
               type: 'blob',
@@ -491,7 +489,6 @@ describe('DiffsStoreUtils', () => {
             {
               key: 'app/test',
               path: 'app/test',
-              truncatedPath: 'app/test',
               name: 'test',
               type: 'tree',
               opened: true,
@@ -504,7 +501,6 @@ describe('DiffsStoreUtils', () => {
                   key: 'app/test/index.js',
                   name: 'index.js',
                   path: 'app/test/index.js',
-                  truncatedPath: 'app/test/index.js',
                   removedLines: 0,
                   tempFile: true,
                   type: 'blob',
@@ -518,7 +514,6 @@ describe('DiffsStoreUtils', () => {
                   key: 'app/test/filepathneedstruncating.js',
                   name: 'filepathneedstruncating.js',
                   path: 'app/test/filepathneedstruncating.js',
-                  truncatedPath: '...est/filepathneedstruncating.js',
                   removedLines: 0,
                   tempFile: true,
                   type: 'blob',
@@ -532,7 +527,6 @@ describe('DiffsStoreUtils', () => {
         {
           key: 'package.json',
           path: 'package.json',
-          truncatedPath: 'package.json',
           name: 'package.json',
           type: 'blob',
           changed: true,
diff --git a/spec/javascripts/vue_shared/components/file_row_spec.js b/spec/javascripts/vue_shared/components/file_row_spec.js
index 9914c0b70f3..67752c1c455 100644
--- a/spec/javascripts/vue_shared/components/file_row_spec.js
+++ b/spec/javascripts/vue_shared/components/file_row_spec.js
@@ -71,4 +71,40 @@ describe('RepoFile', () => {
 
     expect(vm.$el.querySelector('.file-row-name').style.marginLeft).toBe('32px');
   });
+
+  describe('outputText', () => {
+    beforeEach(done => {
+      createComponent({
+        file: {
+          ...file(),
+          path: 'app/assets/index.js',
+        },
+        level: 0,
+      });
+
+      vm.displayTextKey = 'path';
+
+      vm.$nextTick(done);
+    });
+
+    it('returns text if truncateStart is 0', done => {
+      vm.truncateStart = 0;
+
+      vm.$nextTick(() => {
+        expect(vm.outputText).toBe('app/assets/index.js');
+
+        done();
+      });
+    });
+
+    it('returns text truncated at start', done => {
+      vm.truncateStart = 5;
+
+      vm.$nextTick(() => {
+        expect(vm.outputText).toBe('...ssets/index.js');
+
+        done();
+      });
+    });
+  });
 });
-- 
cgit v1.2.1


From c7969568b707b100c349e344d34695bb538c35bf Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 17 Oct 2018 09:14:45 +0100
Subject: Store tree list preference in localStorage

Fixed clear search button not clearing
---
 .../javascripts/diffs/components/tree_list.vue     | 25 ++++++++++++++++------
 locale/gitlab.pot                                  | 12 +++++------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 84b5f45300a..1402cb510f7 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -5,6 +5,8 @@ import Icon from '~/vue_shared/components/icon.vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import FileRowStats from './file_row_stats.vue';
 
+const treeListStorageKey = 'mr_diff_tree_list';
+
 export default {
   directives: {
     Tooltip,
@@ -14,9 +16,11 @@ export default {
     FileRow,
   },
   data() {
+    const treeListStored = localStorage.getItem(treeListStorageKey);
+
     return {
       search: '',
-      renderTreeList: true,
+      renderTreeList: treeListStored !== null ? treeListStored === 'true' : true,
       focusSearch: false,
     };
   },
@@ -42,13 +46,20 @@ export default {
     ...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile']),
     clearSearch() {
       this.search = '';
+      this.toggleFocusSearch(false)
     },
     toggleRenderTreeList(toggle) {
       this.renderTreeList = toggle;
+      localStorage.setItem(treeListStorageKey, this.renderTreeList);
     },
     toggleFocusSearch(toggle) {
       this.focusSearch = toggle;
     },
+    blurSearch() {
+      if (this.search.trim() === '') {
+        this.toggleFocusSearch(false);
+      }
+    },
   },
   FileRowStats,
 };
@@ -68,13 +79,13 @@ export default {
           type="search"
           class="form-control"
           @focus="toggleFocusSearch(true)"
-          @blur="toggleFocusSearch(false)"
+          @blur="blurSearch"
         />
         <button
           v-show="search"
           :aria-label="__('Clear search')"
           type="button"
-          class="position-absolute tree-list-icon tree-list-clear-icon border-0 p-0"
+          class="position-absolute bg-transparent tree-list-icon tree-list-clear-icon border-0 p-0"
           @click="clearSearch"
         >
           <icon
@@ -88,8 +99,8 @@ export default {
       >
         <button
           v-tooltip.hover
-          :aria-label="__('Switch to file list')"
-          :title="__('Switch to file list')"
+          :aria-label="__('File view')"
+          :title="__('File view')"
           :class="{
             active: !renderTreeList
           }"
@@ -103,8 +114,8 @@ export default {
         </button>
         <button
           v-tooltip.hover
-          :aria-label="__('Switch to tree list')"
-          :title="__('Switch to tree list')"
+          :aria-label="__('Tree view')"
+          :title="__('Tree view')"
           :class="{
             active: renderTreeList
           }"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index dfed77dbb36..5bd1ba3c556 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2783,6 +2783,9 @@ msgstr ""
 msgid "File templates"
 msgstr ""
 
+msgid "File view"
+msgstr ""
+
 msgid "Files"
 msgstr ""
 
@@ -5823,12 +5826,6 @@ msgstr ""
 msgid "Switch branch/tag"
 msgstr ""
 
-msgid "Switch to file list"
-msgstr ""
-
-msgid "Switch to tree list"
-msgstr ""
-
 msgid "System Hooks"
 msgstr ""
 
@@ -6510,6 +6507,9 @@ msgstr ""
 msgid "Track time with quick actions"
 msgstr ""
 
+msgid "Tree view"
+msgstr ""
+
 msgid "Trending"
 msgstr ""
 
-- 
cgit v1.2.1


From 687b96e82f58f29bca99f0bca45bbdc577d0047c Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 23 Oct 2018 09:11:45 +0100
Subject: Updated file tree icon

---
 app/assets/javascripts/diffs/components/tree_list.vue | 4 ++--
 changelogs/unreleased/mr-file-list.yml                | 2 +-
 package.json                                          | 2 +-
 yarn.lock                                             | 7 ++++++-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 1402cb510f7..21621491317 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -46,7 +46,7 @@ export default {
     ...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile']),
     clearSearch() {
       this.search = '';
-      this.toggleFocusSearch(false)
+      this.toggleFocusSearch(false);
     },
     toggleRenderTreeList(toggle) {
       this.renderTreeList = toggle;
@@ -124,7 +124,7 @@ export default {
           @click="toggleRenderTreeList(true)"
         >
           <icon
-            name="hamburger"
+            name="file-tree"
           />
         </button>
       </div>
diff --git a/changelogs/unreleased/mr-file-list.yml b/changelogs/unreleased/mr-file-list.yml
index 6596a0dd3e3..0a2a5e0c1cc 100644
--- a/changelogs/unreleased/mr-file-list.yml
+++ b/changelogs/unreleased/mr-file-list.yml
@@ -1,5 +1,5 @@
 ---
 title: Switch between tree list & file list in diffs file browser
-merge_request:
+merge_request: 22191
 author:
 type: added
diff --git a/package.json b/package.json
index 5b0a92ee7a1..086617dc265 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
-    "@gitlab-org/gitlab-svgs": "^1.32.0",
+    "@gitlab-org/gitlab-svgs": "^1.33.0",
     "@gitlab-org/gitlab-ui": "^1.8.0",
     "autosize": "^4.0.0",
     "axios": "^0.17.1",
diff --git a/yarn.lock b/yarn.lock
index 544bd4a05bd..5da401c1d43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -616,11 +616,16 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@gitlab-org/gitlab-svgs@^1.23.0", "@gitlab-org/gitlab-svgs@^1.32.0":
+"@gitlab-org/gitlab-svgs@^1.23.0":
   version "1.32.0"
   resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.32.0.tgz#a65ab7724fa7d55be8e5cc9b2dbe3f0757432fd3"
   integrity sha512-L3o8dFUd2nSkVZBwh2hCJWzNzADJ3dTBZxamND8NLosZK9/ohNhccmsQOZGyMCUHaOzm4vifaaXkAXh04UtMKA==
 
+"@gitlab-org/gitlab-svgs@^1.33.0":
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.33.0.tgz#068566e8ee00795f6f09f58236f08e1716f9f04a"
+  integrity sha512-8ajtUHk6gQ1xosL/CO5IzHSFM/t18hx5pfzQ3cd0VuQXcyR6QKGuXTLwbYdmJDYOw1Etoo5DqDWxPEClHyZpiA==
+
 "@gitlab-org/gitlab-ui@^1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.8.0.tgz#dee33d78f68c91644273dbd51734b796108263ee"
-- 
cgit v1.2.1


From b07a0167d03f792c9e44152d96d9245d252538db Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 23 Oct 2018 11:14:04 +0100
Subject: Changed list view tooltip

---
 app/assets/javascripts/diffs/components/tree_list.vue | 4 ++--
 locale/gitlab.pot                                     | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 21621491317..a801dbedb12 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -99,8 +99,8 @@ export default {
       >
         <button
           v-tooltip.hover
-          :aria-label="__('File view')"
-          :title="__('File view')"
+          :aria-label="__('List view')"
+          :title="__('List view')"
           :class="{
             active: !renderTreeList
           }"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 5bd1ba3c556..24d89de7b77 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2783,9 +2783,6 @@ msgstr ""
 msgid "File templates"
 msgstr ""
 
-msgid "File view"
-msgstr ""
-
 msgid "Files"
 msgstr ""
 
@@ -3602,6 +3599,9 @@ msgstr ""
 msgid "List available repositories"
 msgstr ""
 
+msgid "List view"
+msgstr ""
+
 msgid "List your Bitbucket Server repositories"
 msgstr ""
 
-- 
cgit v1.2.1


From 3b3aa28c4cf73ec166d915117b589afb87cbd8ab Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 23 Oct 2018 19:24:48 +0100
Subject: Use convertPermissionToBoolean to get a boolean

---
 app/assets/javascripts/diffs/components/tree_list.vue     | 5 ++++-
 app/assets/javascripts/vue_shared/components/file_row.vue | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index a801dbedb12..34e836a570a 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { TooltipDirective as Tooltip } from '@gitlab-org/gitlab-ui';
+import { convertPermissionToBoolean } from '~/lib/utils/common_utils';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import FileRowStats from './file_row_stats.vue';
@@ -17,10 +18,12 @@ export default {
   },
   data() {
     const treeListStored = localStorage.getItem(treeListStorageKey);
+    const renderTreeList = treeListStored !== null ?
+      convertPermissionToBoolean(treeListStored) : true;
 
     return {
       search: '',
-      renderTreeList: treeListStored !== null ? treeListStored === 'true' : true,
+      renderTreeList,
       focusSearch: false,
     };
   },
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 510c5eb5fca..2d89a156117 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -74,7 +74,9 @@ export default {
     outputText() {
       const text = this.file[this.displayTextKey];
 
-      if (this.truncateStart === 0) return text;
+      if (this.truncateStart === 0) {
+        return text;
+      }
 
       return `...${text.substring(this.truncateStart, text.length)}`;
     },
-- 
cgit v1.2.1