diff options
Diffstat (limited to 'app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue')
-rw-r--r-- | app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue b/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue new file mode 100644 index 00000000000..7359d4f239e --- /dev/null +++ b/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue @@ -0,0 +1,162 @@ +<script> +import { + GlDropdownDivider, + GlDropdownItem, + GlDropdownSectionHeader, + GlLink, + GlFormInput, +} from '@gitlab/ui'; +import { joinPaths } from '~/lib/utils/url_utility'; +import { s__ } from '~/locale'; +import ImportGroupDropdown from '../../components/group_dropdown.vue'; +import { STATUSES } from '../../constants'; +import { isInvalid, getInvalidNameValidationMessage, isNameValid } from '../utils'; + +export default { + components: { + ImportGroupDropdown, + GlDropdownDivider, + GlDropdownItem, + GlDropdownSectionHeader, + GlLink, + GlFormInput, + }, + props: { + group: { + type: Object, + required: true, + }, + availableNamespaces: { + type: Array, + required: true, + }, + groupPathRegex: { + type: RegExp, + required: true, + }, + groupUrlErrorMessage: { + type: String, + required: true, + }, + }, + + computed: { + availableNamespaceNames() { + return this.availableNamespaces.map((ns) => ns.full_path); + }, + + importTarget() { + return this.group.import_target; + }, + + invalidNameValidationMessage() { + return getInvalidNameValidationMessage(this.group); + }, + + isInvalid() { + return isInvalid(this.group, this.groupPathRegex); + }, + + isNameValid() { + return isNameValid(this.group, this.groupPathRegex); + }, + + isAlreadyImported() { + return this.group.progress.status !== STATUSES.NONE; + }, + + isFinished() { + return this.group.progress.status === STATUSES.FINISHED; + }, + + fullPath() { + return `${this.importTarget.target_namespace}/${this.importTarget.new_name}`; + }, + + absolutePath() { + return joinPaths(gon.relative_url_root || '/', this.fullPath); + }, + }, + + i18n: { + NAME_ALREADY_EXISTS: s__('BulkImport|Name already exists.'), + }, +}; +</script> + +<template> + <gl-link + v-if="isFinished" + class="gl-display-inline-flex gl-align-items-center gl-h-7" + :href="absolutePath" + > + {{ fullPath }} + </gl-link> + + <div + v-else + class="gl-display-flex gl-align-items-stretch" + :class="{ + disabled: isAlreadyImported, + }" + > + <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="gl-h-7 gl-flex-grow-1" + data-qa-selector="target_namespace_selector_dropdown" + > + <gl-dropdown-item @click="$emit('update-target-namespace', '')">{{ + s__('BulkImport|No parent') + }}</gl-dropdown-item> + <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 namespaces" + :key="ns" + data-qa-selector="target_group_dropdown_item" + :data-qa-group-name="ns" + @click="$emit('update-target-namespace', ns)" + > + {{ ns }} + </gl-dropdown-item> + </template> + </import-group-dropdown> + <div + class="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 gl-bg-gray-10" + :class="{ + 'gl-text-gray-400 gl-border-gray-100': isAlreadyImported, + 'gl-border-gray-200': !isAlreadyImported, + }" + > + / + </div> + <div class="gl-flex-grow-1"> + <gl-form-input + class="gl-rounded-top-left-none gl-rounded-bottom-left-none" + :class="{ + 'gl-inset-border-1-gray-200!': !isAlreadyImported, + 'gl-inset-border-1-gray-100!': isAlreadyImported, + 'is-invalid': isInvalid && !isAlreadyImported, + }" + :disabled="isAlreadyImported" + :value="importTarget.new_name" + @input="$emit('update-new-name', $event)" + /> + <p v-if="isInvalid" class="gl-text-red-500 gl-m-0 gl-mt-2"> + <template v-if="!isNameValid"> + {{ groupUrlErrorMessage }} + </template> + <template v-else-if="invalidNameValidationMessage"> + {{ invalidNameValidationMessage }} + </template> + </p> + </div> + </div> +</template> |