Commit a3014deb authored by Phil Hughes's avatar Phil Hughes

Added table component for files listing

Part of https://gitlab.com/gitlab-org/gitlab-ce/issues/61578
parent 80130930
<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>
<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>
......@@ -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,
......
import getRef from '../queries/getRef.graphql';
export default {
apollo: {
ref: {
query: getRef,
},
},
data() {
return {
ref: '',
};
},
};
<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>
<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>
query getFiles($path: String!, $ref: String!) {
files(path: $path, ref: $ref) @client {
id
name
fullPath
type
}
}
......@@ -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 ""
......
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);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment