1 files changed, 79 insertions, 0 deletions
diff --git a/app/assets/javascripts/diffs/components/diffs_file_tree.vue b/app/assets/javascripts/diffs/components/diffs_file_tree.vue
new file mode 100644
index 00000000000..34cd901dd0c
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diffs_file_tree.vue
@@ -0,0 +1,79 @@
+<script>
+// eslint-disable-next-line no-restricted-imports
+import { mapActions, mapState } from 'vuex';
+import { Mousetrap } from '~/lib/mousetrap';
+import { keysFor, MR_TOGGLE_FILE_BROWSER } from '~/behaviors/shortcuts/keybindings';
+import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import {
+  INITIAL_TREE_WIDTH,
+  MIN_TREE_WIDTH,
+  TREE_HIDE_STATS_WIDTH,
+  TREE_LIST_WIDTH_STORAGE_KEY,
+} from '../constants';
+import TreeList from './tree_list.vue';
+
+export default {
+  name: 'DiffsFileTree',
+  components: { TreeList, PanelResizer },
+  mixins: [glFeatureFlagsMixin()],
+  minTreeWidth: MIN_TREE_WIDTH,
+  maxTreeWidth: window.innerWidth / 2,
+  props: {
+    renderDiffFiles: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    const treeWidth =
+      parseInt(localStorage.getItem(TREE_LIST_WIDTH_STORAGE_KEY), 10) || INITIAL_TREE_WIDTH;
+
+    return {
+      treeWidth,
+    };
+  },
+  computed: {
+    ...mapState('diffs', ['showTreeList']),
+    renderFileTree() {
+      return this.renderDiffFiles && this.showTreeList;
+    },
+    hideFileStats() {
+      return this.treeWidth <= TREE_HIDE_STATS_WIDTH;
+    },
+  },
+  watch: {
+    renderFileTree() {
+      this.$emit('toggled');
+    },
+  },
+  mounted() {
+    Mousetrap.bind(keysFor(MR_TOGGLE_FILE_BROWSER), this.toggleTreeList);
+  },
+  beforeDestroy() {
+    Mousetrap.unbind(keysFor(MR_TOGGLE_FILE_BROWSER), this.toggleTreeList);
+  },
+  methods: {
+    ...mapActions('diffs', ['cacheTreeListWidth', 'toggleTreeList']),
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="renderFileTree"
+    :style="{ width: `${treeWidth}px` }"
+    :class="{ 'is-sidebar-moved': glFeatures.movedMrSidebar }"
+    class="diff-tree-list gl-px-5"
+  >
+    <panel-resizer
+      :size.sync="treeWidth"
+      :start-size="treeWidth"
+      :min-size="$options.minTreeWidth"
+      :max-size="$options.maxTreeWidth"
+      side="right"
+      @resize-end="cacheTreeListWidth"
+    />
+    <tree-list :hide-file-stats="hideFileStats" />
+  </div>
+</template>