diff --git a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue index 750f16bbe57..816d7ac7abf 100644 --- a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue +++ b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue @@ -1,6 +1,8 @@ @@ -68,14 +74,28 @@ export default { v-for="(version, index) in allVersions" :key="version.id" :is-check-item="true" + :is-check-centered="true" :is-checked="findVersionId(version.id) === currentVersionId" + :avatar-url="getAvatarUrl(version)" @click="routeToVersion(version.id)" > - - - + + + + + + +
+
{{ version.author.name }}
+ +
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 d94c5a8ae07..db44be2bcd7 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 @@ -11,7 +11,7 @@ import { GlSprintf, GlSafeHtmlDirective as SafeHtml, GlTable, - GlTooltip, + GlFormCheckbox, } from '@gitlab/ui'; import { s__, __, n__ } from '~/locale'; import PaginationLinks from '~/vue_shared/components/pagination_links.vue'; @@ -40,8 +40,8 @@ export default { GlLink, GlLoadingIcon, GlSearchBoxByClick, + GlFormCheckbox, GlSprintf, - GlTooltip, GlTable, ImportStatus, ImportTargetCell, @@ -71,6 +71,7 @@ export default { filter: '', page: 1, perPage: DEFAULT_PAGE_SIZE, + selectedGroups: [], }; }, @@ -85,11 +86,20 @@ export default { }, fields: [ + { + key: 'selected', + label: '', + // eslint-disable-next-line @gitlab/require-i18n-strings + thClass: `${DEFAULT_TH_CLASSES} gl-w-3 gl-pr-3!`, + // eslint-disable-next-line @gitlab/require-i18n-strings + tdClass: `${DEFAULT_TD_CLASSES} gl-pr-3!`, + }, { key: 'web_url', label: s__('BulkImport|From source group'), - thClass: `${DEFAULT_TH_CLASSES} import-jobs-from-col`, - tdClass: DEFAULT_TD_CLASSES, + thClass: `${DEFAULT_TH_CLASSES} gl-pl-0! import-jobs-from-col`, + // eslint-disable-next-line @gitlab/require-i18n-strings + tdClass: `${DEFAULT_TD_CLASSES} gl-pl-0!`, }, { key: 'import_target', @@ -117,16 +127,16 @@ export default { return this.bulkImportSourceGroups?.nodes ?? []; }, - hasGroupsWithValidationError() { - return this.groups.some((g) => g.validation_errors.length); + hasSelectedGroups() { + return this.selectedGroups.length > 0; + }, + + hasAllAvailableGroupsSelected() { + return this.selectedGroups.length === this.availableGroupsForImport.length; }, availableGroupsForImport() { - return this.groups.filter((g) => g.progress.status === STATUSES.NONE); - }, - - isImportAllButtonDisabled() { - return this.hasGroupsWithValidationError || this.availableGroupsForImport.length === 0; + return this.groups.filter((g) => g.progress.status === STATUSES.NONE && !this.isInvalid(g)); }, humanizedTotal() { @@ -156,7 +166,7 @@ export default { total: 0, }; const start = (page - 1) * perPage + 1; - const end = start + (this.bulkImportSourceGroups.nodes?.length ?? 0) - 1; + const end = start + this.groups.length - 1; return { start, end, total }; }, @@ -166,6 +176,17 @@ export default { filter() { this.page = 1; }, + groups() { + const table = this.getTableRef(); + this.groups.forEach((g, idx) => { + if (this.selectedGroups.includes(g)) { + this.$nextTick(() => { + table.selectRow(idx); + }); + } + }); + this.selectedGroups = []; + }, }, methods: { @@ -210,13 +231,33 @@ export default { }); }, - importAllGroups() { - this.importGroups(this.availableGroupsForImport.map((g) => g.id)); + importSelectedGroups() { + this.importGroups(this.selectedGroups.map((g) => g.id)); }, setPageSize(size) { this.perPage = size; }, + + getTableRef() { + // Acquire reference to BTable to manipulate selection + // issue: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1531 + // refs are not reactive, so do not use computed here + return this.$refs.table?.$children[0]; + }, + + preventSelectingAlreadyImportedGroups(updatedSelection) { + if (updatedSelection) { + this.selectedGroups = updatedSelection; + } + + const table = this.getTableRef(); + this.groups.forEach((group, idx) => { + if (table.isRowSelected(idx) && (this.isAlreadyImported(group) || this.isInvalid(group))) { + table.unselectRow(idx); + } + }); + }, }, gitlabLogo: window.gon.gitlab_logo, @@ -231,28 +272,6 @@ export default { > {{ s__('BulkImport|Import groups from GitLab') }} -
- - - - - -
- - - -