diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_actions_cell.vue b/app/assets/javascripts/import_entities/import_groups/components/import_actions_cell.vue new file mode 100644 index 00000000000..104c84173fc --- /dev/null +++ b/app/assets/javascripts/import_entities/import_groups/components/import_actions_cell.vue @@ -0,0 +1,69 @@ + + + diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_source_cell.vue b/app/assets/javascripts/import_entities/import_groups/components/import_source_cell.vue new file mode 100644 index 00000000000..2de9bd4f868 --- /dev/null +++ b/app/assets/javascripts/import_entities/import_groups/components/import_source_cell.vue @@ -0,0 +1,53 @@ + + + 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 db44be2bcd7..04b037ecc2b 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 @@ -9,19 +9,19 @@ import { GlLoadingIcon, GlSearchBoxByClick, GlSprintf, - GlSafeHtmlDirective as SafeHtml, GlTable, GlFormCheckbox, } from '@gitlab/ui'; import { s__, __, n__ } from '~/locale'; import PaginationLinks from '~/vue_shared/components/pagination_links.vue'; -import ImportStatus from '../../components/import_status.vue'; -import { STATUSES } from '../../constants'; +import ImportStatusCell from '../../components/import_status.vue'; import importGroupsMutation from '../graphql/mutations/import_groups.mutation.graphql'; import setImportTargetMutation from '../graphql/mutations/set_import_target.mutation.graphql'; import availableNamespacesQuery from '../graphql/queries/available_namespaces.query.graphql'; import bulkImportSourceGroupsQuery from '../graphql/queries/bulk_import_source_groups.query.graphql'; -import { isInvalid } from '../utils'; +import { isInvalid, isFinished, isAvailableForImport } from '../utils'; +import ImportActionsCell from './import_actions_cell.vue'; +import ImportSourceCell from './import_source_cell.vue'; import ImportTargetCell from './import_target_cell.vue'; const PAGE_SIZES = [20, 50, 100]; @@ -43,13 +43,12 @@ export default { GlFormCheckbox, GlSprintf, GlTable, - ImportStatus, + ImportSourceCell, ImportTargetCell, + ImportStatusCell, + ImportActionsCell, PaginationLinks, }, - directives: { - SafeHtml, - }, props: { sourceUrl: { @@ -136,7 +135,7 @@ export default { }, availableGroupsForImport() { - return this.groups.filter((g) => g.progress.status === STATUSES.NONE && !this.isInvalid(g)); + return this.groups.filter((g) => isAvailableForImport(g) && !this.isInvalid(g)); }, humanizedTotal() { @@ -190,6 +189,24 @@ export default { }, methods: { + isUnselectable(group) { + return !this.isAvailableForImport(group) || this.isInvalid(group); + }, + + rowClasses(group) { + const DEFAULT_CLASSES = [ + 'gl-border-gray-200', + 'gl-border-0', + 'gl-border-b-1', + 'gl-border-solid', + ]; + const result = [...DEFAULT_CLASSES]; + if (this.isUnselectable(group)) { + result.push('gl-cursor-default!'); + } + return result; + }, + qaRowAttributes(group, type) { if (type === 'row') { return { @@ -201,10 +218,8 @@ export default { return {}; }, - isAlreadyImported(group) { - return group.progress.status !== STATUSES.NONE; - }, - + isAvailableForImport, + isFinished, isInvalid(group) { return isInvalid(group, this.groupPathRegex); }, @@ -253,7 +268,7 @@ export default { const table = this.getTableRef(); this.groups.forEach((group, idx) => { - if (table.isRowSelected(idx) && (this.isAlreadyImported(group) || this.isInvalid(group))) { + if (table.isRowSelected(idx) && this.isUnselectable(group)) { table.unselectRow(idx); } }); @@ -291,7 +306,7 @@ export default { {{ filter }} @@ -338,7 +353,7 @@ export default { ref="table" class="gl-w-full" data-qa-selector="import_table" - tbody-tr-class="gl-border-gray-200 gl-border-0 gl-border-b-1 gl-border-solid" + :tbody-tr-class="rowClasses" :tbody-tr-attr="qaRowAttributes" :items="groups" :fields="$options.fields" @@ -360,18 +375,12 @@ export default { -