diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 12:55:51 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 12:55:51 +0300 |
commit | e8d2c2579383897a1dd7f9debd359abe8ae8373d (patch) | |
tree | c42be41678c2586d49a75cabce89322082698334 /app/assets/javascripts/import_entities | |
parent | fc845b37ec3a90aaa719975f607740c22ba6a113 (diff) |
Add latest changes from gitlab-org/gitlab@14-1-stable-eev14.1.0-rc42
Diffstat (limited to 'app/assets/javascripts/import_entities')
6 files changed, 107 insertions, 44 deletions
diff --git a/app/assets/javascripts/import_entities/components/group_dropdown.vue b/app/assets/javascripts/import_entities/components/group_dropdown.vue new file mode 100644 index 00000000000..44d6d17232f --- /dev/null +++ b/app/assets/javascripts/import_entities/components/group_dropdown.vue @@ -0,0 +1,40 @@ +<script> +import { GlDropdown, GlSearchBoxByType } from '@gitlab/ui'; + +export default { + components: { + GlDropdown, + GlSearchBoxByType, + }, + inheritAttrs: false, + props: { + namespaces: { + type: Array, + required: true, + }, + }, + data() { + return { searchTerm: '' }; + }, + computed: { + filteredNamespaces() { + return this.namespaces.filter((ns) => + ns.toLowerCase().includes(this.searchTerm.toLowerCase()), + ); + }, + }, +}; +</script> +<template> + <gl-dropdown + toggle-class="gl-rounded-top-right-none! gl-rounded-bottom-right-none!" + class="import-entities-namespace-dropdown gl-h-7 gl-flex-fill-1" + data-qa-selector="target_namespace_selector_dropdown" + v-bind="$attrs" + > + <template #header> + <gl-search-box-by-type v-model.trim="searchTerm" /> + </template> + <slot :namespaces="filteredNamespaces"></slot> + </gl-dropdown> +</template> 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 3daa5eebcb6..cb7e3ef9632 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 @@ -227,7 +227,12 @@ export default { </template> </gl-sprintf> </span> - <gl-search-box-by-click class="gl-ml-auto" @submit="filter = $event" @clear="filter = ''" /> + <gl-search-box-by-click + class="gl-ml-auto" + :placeholder="s__('BulkImport|Filter by source group')" + @submit="filter = $event" + @clear="filter = ''" + /> </div> <gl-loading-icon v-if="$apollo.loading" size="md" class="gl-mt-5" /> <template v-else> diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_table_row.vue b/app/assets/javascripts/import_entities/import_groups/components/import_table_row.vue index 63c18f4d78e..1c3ede769e0 100644 --- a/app/assets/javascripts/import_entities/import_groups/components/import_table_row.vue +++ b/app/assets/javascripts/import_entities/import_groups/components/import_table_row.vue @@ -1,7 +1,6 @@ <script> import { GlButton, - GlDropdown, GlDropdownDivider, GlDropdownItem, GlDropdownSectionHeader, @@ -11,6 +10,7 @@ import { } from '@gitlab/ui'; import { joinPaths } from '~/lib/utils/url_utility'; import { s__ } from '~/locale'; +import ImportGroupDropdown from '../../components/group_dropdown.vue'; import ImportStatus from '../../components/import_status.vue'; import { STATUSES } from '../../constants'; import addValidationErrorMutation from '../graphql/mutations/add_validation_error.mutation.graphql'; @@ -22,8 +22,8 @@ const DEBOUNCE_INTERVAL = 300; export default { components: { ImportStatus, + ImportGroupDropdown, GlButton, - GlDropdown, GlDropdownDivider, GlDropdownItem, GlDropdownSectionHeader, @@ -83,6 +83,10 @@ export default { }, computed: { + availableNamespaceNames() { + return this.availableNamespaces.map((ns) => ns.full_path); + }, + importTarget() { return this.group.import_target; }, @@ -153,9 +157,11 @@ export default { disabled: isAlreadyImported, }" > - <gl-dropdown + <import-group-dropdown + #default="{ namespaces }" :text="importTarget.target_namespace" :disabled="isAlreadyImported" + :namespaces="availableNamespaceNames" toggle-class="gl-rounded-top-right-none! gl-rounded-bottom-right-none!" class="import-entities-namespace-dropdown gl-h-7 gl-flex-grow-1" data-qa-selector="target_namespace_selector_dropdown" @@ -163,22 +169,22 @@ export default { <gl-dropdown-item @click="$emit('update-target-namespace', '')">{{ s__('BulkImport|No parent') }}</gl-dropdown-item> - <template v-if="availableNamespaces.length"> + <template v-if="namespaces.length"> <gl-dropdown-divider /> <gl-dropdown-section-header> {{ s__('BulkImport|Existing groups') }} </gl-dropdown-section-header> <gl-dropdown-item - v-for="ns in availableNamespaces" - :key="ns.full_path" + v-for="ns in namespaces" + :key="ns" data-qa-selector="target_group_dropdown_item" - :data-qa-group-name="ns.full_path" - @click="$emit('update-target-namespace', ns.full_path)" + :data-qa-group-name="ns" + @click="$emit('update-target-namespace', ns)" > - {{ ns.full_path }} + {{ ns }} </gl-dropdown-item> </template> - </gl-dropdown> + </import-group-dropdown> <div class="import-entities-target-select-separator gl-h-7 gl-px-3 gl-display-flex gl-align-items-center gl-border-solid gl-border-0 gl-border-t-1 gl-border-b-1" > diff --git a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue index be09052fb7e..14d08caef34 100644 --- a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue +++ b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue @@ -47,18 +47,7 @@ export default { }, availableNamespaces() { - const serializedNamespaces = this.namespaces.map(({ fullPath }) => ({ - id: fullPath, - text: fullPath, - })); - - return [ - { text: __('Groups'), children: serializedNamespaces }, - { - text: __('Users'), - children: [{ id: this.defaultTargetNamespace, text: this.defaultTargetNamespace }], - }, - ]; + return this.namespaces.map(({ fullPath }) => fullPath); }, importAllButtonText() { @@ -179,6 +168,7 @@ export default { :key="repo.importSource.providerLink" :repo="repo" :available-namespaces="availableNamespaces" + :user-namespace="defaultTargetNamespace" /> </template> </tbody> diff --git a/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue index a803afeb901..e2fd608d9db 100644 --- a/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue +++ b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue @@ -1,8 +1,17 @@ <script> -import { GlIcon, GlBadge, GlFormInput, GlButton, GlLink } from '@gitlab/ui'; +import { + GlIcon, + GlBadge, + GlFormInput, + GlButton, + GlLink, + GlDropdownItem, + GlDropdownDivider, + GlDropdownSectionHeader, +} from '@gitlab/ui'; import { mapState, mapGetters, mapActions } from 'vuex'; import { __ } from '~/locale'; -import Select2Select from '~/vue_shared/components/select2_select.vue'; +import ImportGroupDropdown from '../../components/group_dropdown.vue'; import ImportStatus from '../../components/import_status.vue'; import { STATUSES } from '../../constants'; import { isProjectImportable, isIncompatible, getImportStatus } from '../utils'; @@ -10,10 +19,13 @@ import { isProjectImportable, isIncompatible, getImportStatus } from '../utils'; export default { name: 'ProviderRepoTableRow', components: { - Select2Select, + ImportGroupDropdown, ImportStatus, GlFormInput, GlButton, + GlDropdownItem, + GlDropdownDivider, + GlDropdownSectionHeader, GlIcon, GlBadge, GlLink, @@ -23,6 +35,10 @@ export default { type: Object, required: true, }, + userNamespace: { + type: String, + required: true, + }, availableNamespaces: { type: Array, required: true, @@ -61,22 +77,6 @@ export default { return this.ciCdOnly ? __('Connect') : __('Import'); }, - select2Options() { - return { - data: this.availableNamespaces, - containerCssClass: 'import-namespace-select qa-project-namespace-select gl-w-auto', - }; - }, - - targetNamespaceSelect: { - get() { - return this.importTarget.targetNamespace; - }, - set(value) { - this.updateImportTarget({ targetNamespace: value }); - }, - }, - newNameInput: { get() { return this.importTarget.newName; @@ -118,7 +118,29 @@ export default { <template v-if="repo.importSource.target">{{ repo.importSource.target }}</template> <template v-else-if="isImportNotStarted"> <div class="import-entities-target-select gl-display-flex gl-align-items-stretch gl-w-full"> - <select2-select v-model="targetNamespaceSelect" :options="select2Options" /> + <import-group-dropdown + #default="{ namespaces }" + :text="importTarget.targetNamespace" + :namespaces="availableNamespaces" + > + <template v-if="namespaces.length"> + <gl-dropdown-section-header>{{ __('Groups') }}</gl-dropdown-section-header> + <gl-dropdown-item + v-for="ns in namespaces" + :key="ns" + data-qa-selector="target_group_dropdown_item" + :data-qa-group-name="ns" + @click="updateImportTarget({ targetNamespace: ns })" + > + {{ ns }} + </gl-dropdown-item> + <gl-dropdown-divider /> + </template> + <gl-dropdown-section-header>{{ __('Users') }}</gl-dropdown-section-header> + <gl-dropdown-item @click="updateImportTarget({ targetNamespace: ns })">{{ + userNamespace + }}</gl-dropdown-item> + </import-group-dropdown> <div class="import-entities-target-select-separator gl-px-3 gl-display-flex gl-align-items-center gl-border-solid gl-border-0 gl-border-t-1 gl-border-b-1" > diff --git a/app/assets/javascripts/import_entities/import_projects/index.js b/app/assets/javascripts/import_entities/import_projects/index.js index 6b7fe23ed60..110cc77b20d 100644 --- a/app/assets/javascripts/import_entities/import_projects/index.js +++ b/app/assets/javascripts/import_entities/import_projects/index.js @@ -38,7 +38,7 @@ export function initStoreFromElement(element) { export function initPropsFromElement(element) { return { - providerTitle: element.dataset.providerTitle, + providerTitle: element.dataset.provider, filterable: parseBoolean(element.dataset.filterable), paginatable: parseBoolean(element.dataset.paginatable), }; |