3 files changed, 101 insertions, 91 deletions
diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
index 4eb59cc3ca1..1b1a5b91dd6 100644
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -1,64 +1,26 @@
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
-import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import RepoFile from './repo_file.vue';
-import NewDropdown from './new_dropdown/index.vue';
+import IdeTreeList from './ide_tree_list.vue';
 
 export default {
   components: {
-    Icon,
-    RepoFile,
-    SkeletonLoadingContainer,
-    NewDropdown,
-  },
-  computed: {
-    ...mapState(['currentBranchId']),
-    ...mapGetters(['currentProject', 'currentTree']),
-  },
-  mounted() {
-    this.updateViewer('diff');
-  },
-  methods: {
-    ...mapActions(['updateViewer']),
+    IdeTreeList,
   },
 };
 </script>
 
 <template>
-  <div
-    class="ide-file-list"
+  <ide-tree-list
+    viewer-type="diff"
+    header-class="ide-review-header"
+    :disable-action-dropdown="true"
   >
-    <template v-if="!currentTree || currentTree.loading">
-      <div
-        class="multi-file-loading-container"
-        v-for="n in 3"
-        :key="n"
-      >
-        <skeleton-loading-container />
+    <template
+      slot="header"
+    >
+      {{ __('Review') }}
+      <div class="prepend-top-5 ide-review-sub-header">
+        {{ __('Lastest changed') }}
       </div>
     </template>
-    <template v-else>
-      <header class="ide-tree-header ide-review-header">
-        {{ __('Review') }}
-        <div class="prepend-top-5 clgray">
-          {{ __('Lastest changed') }}
-        </div>
-      </header>
-      <repo-file
-        v-for="file in currentTree.tree"
-        :key="file.key"
-        :file="file"
-        :level="0"
-        :disable-action-dropdown="true"
-      />
-    </template>
-  </div>
+  </ide-tree-list>
 </template>
-
-<style>
-.ide-review-header {
-  flex-direction: column;
-  align-items: flex-start;
-}
-</style>
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index 4f33bc81838..7dbedaf2cb2 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -1,58 +1,33 @@
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
-import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import RepoFile from './repo_file.vue';
+import { mapState, mapGetters } from 'vuex';
 import NewDropdown from './new_dropdown/index.vue';
+import IdeTreeList from './ide_tree_list.vue';
 
 export default {
   components: {
-    Icon,
-    RepoFile,
-    SkeletonLoadingContainer,
     NewDropdown,
+    IdeTreeList,
   },
   computed: {
     ...mapState(['currentBranchId']),
-    ...mapGetters(['currentProject', 'currentTree']),
-  },
-  mounted() {
-    this.updateViewer('editor');
-  },
-  methods: {
-    ...mapActions(['updateViewer']),
+    ...mapGetters(['currentProject']),
   },
 };
 </script>
 
 <template>
-  <div
-    class="ide-file-list"
+  <ide-tree-list
+    viewer-type="editor"
   >
-    <template v-if="!currentTree || currentTree.loading">
-      <div
-        class="multi-file-loading-container"
-        v-for="n in 3"
-        :key="n"
-      >
-        <skeleton-loading-container />
-      </div>
-    </template>
-    <template v-else>
-      <header class="ide-tree-header">
-        {{ __('Edit') }}
-        <new-dropdown
-          :project-id="currentProject.name_with_namespace"
-          :branch="currentBranchId"
-          path=""
-        />
-      </header>
-      <repo-file
-        v-for="file in currentTree.tree"
-        :key="file.key"
-        :file="file"
-        :level="0"
+    <template
+      slot="header"
+    >
+      {{ __('Edit') }}
+      <new-dropdown
+        :project-id="currentProject.name_with_namespace"
+        :branch="currentBranchId"
+        path=""
       />
     </template>
-  </div>
+  </ide-tree-list>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
new file mode 100644
index 00000000000..56baba05b74
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -0,0 +1,73 @@
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import RepoFile from './repo_file.vue';
+import NewDropdown from './new_dropdown/index.vue';
+
+export default {
+  components: {
+    Icon,
+    RepoFile,
+    SkeletonLoadingContainer,
+    NewDropdown,
+  },
+  props: {
+    viewerType: {
+      type: String,
+      required: true,
+    },
+    headerClass: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    disableActionDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapState(['currentBranchId']),
+    ...mapGetters(['currentProject', 'currentTree']),
+  },
+  mounted() {
+    this.updateViewer(this.viewerType);
+  },
+  methods: {
+    ...mapActions(['updateViewer']),
+  },
+};
+</script>
+
+<template>
+  <div
+    class="ide-file-list"
+  >
+    <template v-if="!currentTree || currentTree.loading">
+      <div
+        class="multi-file-loading-container"
+        v-for="n in 3"
+        :key="n"
+      >
+        <skeleton-loading-container />
+      </div>
+    </template>
+    <template v-else>
+      <header
+        class="ide-tree-header"
+        :class="headerClass"
+      >
+        <slot name="header"></slot>
+      </header>
+      <repo-file
+        v-for="file in currentTree.tree"
+        :key="file.key"
+        :file="file"
+        :level="0"
+        :disable-action-dropdown="disableActionDropdown"
+      />
+    </template>
+  </div>
+</template>