Added table component for files listing

Part of https://gitlab.com/gitlab-org/gitlab-ce/issues/61578

9 files changed, 163 insertions, 12 deletions

diff --git a/app/assets/javascripts/repository/components/table/header.vue b/app/assets/javascripts/repository/components/table/header.vue
new file mode 100644
index 00000000000..9d30aa88155
--- /dev/null
+++ b/app/assets/javascripts/repository/components/table/header.vue
@@ -0,0 +1,9 @@
+<template>
+  <thead>
+    <tr>
+      <th id="name" scope="col">{{ s__('ProjectFileTree|Name') }}</th>
+      <th id="last-commit" scope="col" class="d-none d-sm-table-cell">{{ __('Last commit') }}</th>
+      <th id="last-update" scope="col" class="text-right">{{ __('Last update') }}</th>
+    </tr>
+  </thead>
+</template>
diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
new file mode 100644
index 00000000000..7119861c7b3
--- /dev/null
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -0,0 +1,65 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import { sprintf, __ } from '../../../locale';
+import getRefMixin from '../../mixins/get_ref';
+import getFiles from '../../queries/getFiles.graphql';
+import TableHeader from './header.vue';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    TableHeader,
+  },
+  mixins: [getRefMixin],
+  apollo: {
+    files: {
+      query: getFiles,
+      variables() {
+        return {
+          ref: this.ref,
+          path: this.path,
+        };
+      },
+    },
+  },
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      files: [],
+    };
+  },
+  computed: {
+    tableCaption() {
+      return sprintf(
+        __('Files, directories, and submodules in the path %{path} for commit reference %{ref}'),
+        { path: this.path, ref: this.ref },
+      );
+    },
+    isLoadingFiles() {
+      return this.$apollo.queries.files.loading;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="tree-content-holder">
+    <div class="table-holder bordered-box">
+      <table class="table tree-table qa-file-tree" aria-live="polite">
+        <caption class="sr-only">
+          {{
+            tableCaption
+          }}
+        </caption>
+        <table-header />
+        <tbody></tbody>
+      </table>
+      <gl-loading-icon v-if="isLoadingFiles" class="my-3" size="md" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/repository/graphql.js b/app/assets/javascripts/repository/graphql.js
index febfcce780c..0aedc73fc12 100644
--- a/app/assets/javascripts/repository/graphql.js
+++ b/app/assets/javascripts/repository/graphql.js
@@ -4,7 +4,13 @@ import createDefaultClient from '~/lib/graphql';
 
 Vue.use(VueApollo);
 
-const defaultClient = createDefaultClient({});
+const defaultClient = createDefaultClient({
+  Query: {
+    files() {
+      return [];
+    },
+  },
+});
 
 export default new VueApollo({
   defaultClient,
diff --git a/app/assets/javascripts/repository/mixins/get_ref.js b/app/assets/javascripts/repository/mixins/get_ref.js
new file mode 100644
index 00000000000..b06087d6f42
--- /dev/null
+++ b/app/assets/javascripts/repository/mixins/get_ref.js
@@ -0,0 +1,14 @@
+import getRef from '../queries/getRef.graphql';
+
+export default {
+  apollo: {
+    ref: {
+      query: getRef,
+    },
+  },
+  data() {
+    return {
+      ref: '',
+    };
+  },
+};
diff --git a/app/assets/javascripts/repository/pages/index.vue b/app/assets/javascripts/repository/pages/index.vue
index fdbf195f0f6..2d92e9174ca 100644
--- a/app/assets/javascripts/repository/pages/index.vue
+++ b/app/assets/javascripts/repository/pages/index.vue
@@ -1,11 +1,9 @@
 <script>
-import getRef from '../queries/getRef.graphql';
+import FileTable from '../components/table/index.vue';
 
 export default {
-  apollo: {
-    ref: {
-      query: getRef,
-    },
+  components: {
+    FileTable,
   },
   data() {
     return {
@@ -16,9 +14,5 @@ export default {
 </script>
 
 <template>
-  <div>
-    <router-link :to="{ path: `/tree/${ref}/app` }">
-      Go to tree
-    </router-link>
-  </div>
+  <file-table path="/" />
 </template>
diff --git a/app/assets/javascripts/repository/pages/tree.vue b/app/assets/javascripts/repository/pages/tree.vue
index f51aafee775..413102b2cd3 100644
--- a/app/assets/javascripts/repository/pages/tree.vue
+++ b/app/assets/javascripts/repository/pages/tree.vue
@@ -1,5 +1,10 @@
 <script>
+import FileTable from '../components/table/index.vue';
+
 export default {
+  component: {
+    FileTable,
+  },
   props: {
     path: {
       type: String,
@@ -11,5 +16,5 @@ export default {
 </script>
 
 <template>
-  <div>{{ path }}</div>
+  <file-table :path="path" />
 </template>
diff --git a/app/assets/javascripts/repository/queries/getFiles.graphql b/app/assets/javascripts/repository/queries/getFiles.graphql
new file mode 100644
index 00000000000..5ceaf67ea82
--- /dev/null
+++ b/app/assets/javascripts/repository/queries/getFiles.graphql
@@ -0,0 +1,8 @@
+query getFiles($path: String!, $ref: String!) {
+  files(path: $path, ref: $ref) @client {
+    id
+    name
+    fullPath
+    type
+  }
+}
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b7aea0254a9..68cfb5c8b3b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4327,6 +4327,9 @@ msgstr ""
 msgid "Files"
 msgstr ""
 
+msgid "Files, directories, and submodules in the path %{path} for commit reference %{ref}"
+msgstr ""
+
 msgid "Filter"
 msgstr ""
 
diff --git a/spec/frontend/repository/components/table/index_spec.js b/spec/frontend/repository/components/table/index_spec.js
new file mode 100644
index 00000000000..6f52cffe077
--- /dev/null
+++ b/spec/frontend/repository/components/table/index_spec.js
@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
+import Table from '~/repository/components/table/index.vue';
+
+let vm;
+
+function factory(path, loading = false) {
+  vm = shallowMount(Table, {
+    propsData: {
+      path,
+    },
+    mocks: {
+      $apollo: {
+        queries: {
+          files: { loading },
+        },
+      },
+    },
+  });
+}
+
+describe('Repository table component', () => {
+  afterEach(() => {
+    vm.destroy();
+  });
+
+  it.each`
+    path            | ref
+    ${'/'}          | ${'master'}
+    ${'app/assets'} | ${'master'}
+    ${'/'}          | ${'test'}
+  `('renders table caption for $ref in $path', ({ path, ref }) => {
+    factory(path);
+
+    vm.setData({ ref });
+
+    expect(vm.find('caption').text()).toEqual(
+      `Files, directories, and submodules in the path ${path} for commit reference ${ref}`,
+    );
+  });
+
+  it('renders loading icon', () => {
+    factory('/', true);
+
+    expect(vm.find(GlLoadingIcon).exists()).toBe(true);
+  });
+});