Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 2x 135x 135x 86x 135x 135x 1x 1x | <script> import { GlFormInput } from '@gitlab/ui'; import ImportTargetDropdown from '../../components/import_target_dropdown.vue'; import { validationMessageFor } from '../utils'; import { NEW_NAME_FIELD, TARGET_NAMESPACE_FIELD } from '../constants'; export default { components: { ImportTargetDropdown, GlFormInput, }, props: { group: { type: Object, required: true, }, }, computed: { selectedImportTarget() { return this.group.importTarget?.targetNamespace?.fullPath; }, importTargetNewName() { return this.group.importTarget?.newName; }, validationMessage() { return ( this.group.progress?.message || validationMessageFor(this.group.importTarget, TARGET_NAMESPACE_FIELD) || validationMessageFor(this.group.importTarget, NEW_NAME_FIELD) ); }, validNameState() { // bootstrap-vue requires null for "indifferent" state, if we return true // this will highlight field in green like "passed validation" return this.group.flags.isInvalid && this.isPathSelectionAvailable ? false : null; }, isPathSelectionAvailable() { return this.group.flags.isAvailableForImport; }, }, methods: { focusNewName() { this.$refs.newName.$el.focus(); }, onImportTargetSelect(namespace) { this.$emit('update-target-namespace', namespace); }, }, }; </script> <template> <div> <div class="gl-display-flex gl-align-items-stretch"> <import-target-dropdown :selected="selectedImportTarget" :toggle-text="s__('BulkImport|Select parent group')" :disabled="!isPathSelectionAvailable" @select="onImportTargetSelect" /> <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': !isPathSelectionAvailable, 'gl-border-gray-200': isPathSelectionAvailable, }" > / </div> <div class="gl-flex-grow-1"> <gl-form-input ref="newName" class="gl-rounded-top-left-none gl-rounded-bottom-left-none" :class="{ 'gl-inset-border-1-gray-200!': isPathSelectionAvailable, 'gl-inset-border-1-gray-100!': !isPathSelectionAvailable, }" debounce="500" data-testid="target-namespace-input" :disabled="!isPathSelectionAvailable" :value="importTargetNewName" :aria-label="__('New name')" :state="validNameState" @input="$emit('update-new-name', $event)" /> </div> </div> <div v-if="isPathSelectionAvailable && (group.flags.isInvalid || validationMessage)" class="gl-text-red-500 gl-m-0 gl-mt-2" role="alert" > {{ validationMessage }} </div> </div> </template> |