diff options
Diffstat (limited to 'app/assets/javascripts/import_entities/import_groups/components/import_table.vue')
| -rw-r--r-- | app/assets/javascripts/import_entities/import_groups/components/import_table.vue | 92 |
1 files changed, 79 insertions, 13 deletions
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue index 7c5f48dcafc..f337520b0db 100644 --- a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue +++ b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue @@ -1,13 +1,15 @@ <script> import { GlEmptyState, + GlDropdown, + GlDropdownItem, GlIcon, GlLink, GlLoadingIcon, GlSearchBoxByClick, GlSprintf, } from '@gitlab/ui'; -import { s__ } from '~/locale'; +import { s__, __ } from '~/locale'; import PaginationLinks from '~/vue_shared/components/pagination_links.vue'; import importGroupMutation from '../graphql/mutations/import_group.mutation.graphql'; import setNewNameMutation from '../graphql/mutations/set_new_name.mutation.graphql'; @@ -16,9 +18,14 @@ import availableNamespacesQuery from '../graphql/queries/available_namespaces.qu import bulkImportSourceGroupsQuery from '../graphql/queries/bulk_import_source_groups.query.graphql'; import ImportTableRow from './import_table_row.vue'; +const PAGE_SIZES = [20, 50, 100]; +const DEFAULT_PAGE_SIZE = PAGE_SIZES[0]; + export default { components: { GlEmptyState, + GlDropdown, + GlDropdownItem, GlIcon, GlLink, GlLoadingIcon, @@ -33,12 +40,17 @@ export default { type: String, required: true, }, + groupPathRegex: { + type: RegExp, + required: true, + }, }, data() { return { filter: '', page: 1, + perPage: DEFAULT_PAGE_SIZE, }; }, @@ -46,13 +58,17 @@ export default { bulkImportSourceGroups: { query: bulkImportSourceGroupsQuery, variables() { - return { page: this.page, filter: this.filter }; + return { page: this.page, filter: this.filter, perPage: this.perPage }; }, }, availableNamespaces: availableNamespacesQuery, }, computed: { + humanizedTotal() { + return this.paginationInfo.total >= 1000 ? __('1000+') : this.paginationInfo.total; + }, + hasGroups() { return this.bulkImportSourceGroups?.nodes?.length > 0; }, @@ -113,14 +129,20 @@ export default { variables: { sourceGroupId }, }); }, + + setPageSize(size) { + this.perPage = size; + }, }, + + PAGE_SIZES, }; </script> <template> <div> <div - class="gl-py-5 gl-border-solid gl-border-gray-200 gl-border-0 gl-border-b-1 gl-display-flex gl-align-items-center" + class="gl-py-5 gl-border-solid gl-border-gray-200 gl-border-0 gl-border-b-1 gl-display-flex" > <span> <gl-sprintf v-if="!$apollo.loading && hasGroups" :message="statusMessage"> @@ -147,12 +169,17 @@ export default { </div> <gl-loading-icon v-if="$apollo.loading" size="md" class="gl-mt-5" /> <template v-else> - <gl-empty-state v-if="hasEmptyFilter" :title="__('Sorry, your filter produced no results')" /> + <gl-empty-state + v-if="hasEmptyFilter" + :title="__('Sorry, your filter produced no results')" + :description="__('To widen your search, change or remove filters above.')" + /> <gl-empty-state v-else-if="!hasGroups" - :title="s__('BulkImport|No groups available for import')" + :title="s__('BulkImport|You have no groups to import')" + :description="s__('Check your source instance permissions.')" /> - <div v-else class="gl-display-flex gl-flex-direction-column gl-align-items-center"> + <template v-else> <table class="gl-w-full"> <thead class="gl-border-solid gl-border-gray-200 gl-border-0 gl-border-b-1"> <th class="gl-py-4 import-jobs-from-col">{{ s__('BulkImport|From source group') }}</th> @@ -160,12 +187,13 @@ export default { <th class="gl-py-4 import-jobs-status-col">{{ __('Status') }}</th> <th class="gl-py-4 import-jobs-cta-col"></th> </thead> - <tbody> + <tbody class="gl-vertical-align-top"> <template v-for="group in bulkImportSourceGroups.nodes"> <import-table-row :key="group.id" :group="group" :available-namespaces="availableNamespaces" + :group-path-regex="groupPathRegex" @update-target-namespace="updateTargetNamespace(group.id, $event)" @update-new-name="updateNewName(group.id, $event)" @import-group="importGroup(group.id)" @@ -173,12 +201,50 @@ export default { </template> </tbody> </table> - <pagination-links - :change="setPage" - :page-info="bulkImportSourceGroups.pageInfo" - class="gl-mt-3" - /> - </div> + <div v-if="hasGroups" class="gl-display-flex gl-mt-3 gl-align-items-center"> + <pagination-links + :change="setPage" + :page-info="bulkImportSourceGroups.pageInfo" + class="gl-m-0" + /> + <gl-dropdown category="tertiary" class="gl-ml-auto"> + <template #button-content> + <span class="font-weight-bold"> + <gl-sprintf :message="__('%{count} items per page')"> + <template #count> + {{ perPage }} + </template> + </gl-sprintf> + </span> + <gl-icon class="gl-button-icon dropdown-chevron" name="chevron-down" /> + </template> + <gl-dropdown-item + v-for="size in $options.PAGE_SIZES" + :key="size" + @click="setPageSize(size)" + > + <gl-sprintf :message="__('%{count} items per page')"> + <template #count> + {{ size }} + </template> + </gl-sprintf> + </gl-dropdown-item> + </gl-dropdown> + <div class="gl-ml-2"> + <gl-sprintf :message="s__('BulkImport|Showing %{start}-%{end} of %{total}')"> + <template #start> + {{ paginationInfo.start }} + </template> + <template #end> + {{ paginationInfo.end }} + </template> + <template #total> + {{ humanizedTotal }} + </template> + </gl-sprintf> + </div> + </div> + </template> </template> </div> </template> |