diff options
Diffstat (limited to 'app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue')
-rw-r--r-- | app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue | 61 |
1 files changed, 34 insertions, 27 deletions
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 983abda57f7..289c83979bb 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,8 @@ <script> +import { GlIcon, GlBadge, GlFormInput, GlButton, GlLink } from '@gitlab/ui'; import { mapState, mapGetters, mapActions } from 'vuex'; -import { GlIcon, GlBadge } from '@gitlab/ui'; -import Select2Select from '~/vue_shared/components/select2_select.vue'; import { __ } from '~/locale'; +import Select2Select from '~/vue_shared/components/select2_select.vue'; import ImportStatus from '../../components/import_status.vue'; import { STATUSES } from '../../constants'; import { isProjectImportable, isIncompatible, getImportStatus } from '../utils'; @@ -12,8 +12,11 @@ export default { components: { Select2Select, ImportStatus, + GlFormInput, + GlButton, GlIcon, GlBadge, + GlLink, }, props: { repo: { @@ -61,7 +64,7 @@ export default { select2Options() { return { data: this.availableNamespaces, - containerCssClass: 'import-namespace-select qa-project-namespace-select w-auto', + containerCssClass: 'import-namespace-select qa-project-namespace-select gl-w-auto', }; }, @@ -97,52 +100,56 @@ export default { </script> <template> - <tr class="qa-project-import-row import-row"> - <td> - <a - :href="repo.importSource.providerLink" - rel="noreferrer noopener" - target="_blank" - data-testid="providerLink" + <tr + class="qa-project-import-row gl-h-11 gl-border-0 gl-border-solid gl-border-t-1 gl-border-gray-100 gl-h-11" + > + <td class="gl-p-4"> + <gl-link :href="repo.importSource.providerLink" target="_blank" data-testid="providerLink" >{{ repo.importSource.fullName }} <gl-icon v-if="repo.importSource.providerLink" name="external-link" /> - </a> + </gl-link> </td> - <td class="d-flex flex-wrap flex-lg-nowrap" data-testid="fullPath"> + <td + class="gl-display-flex gl-flex-sm-wrap gl-p-4 gl-pt-5 gl-vertical-align-top" + data-testid="fullPath" + > <template v-if="repo.importSource.target">{{ repo.importSource.target }}</template> <template v-else-if="isImportNotStarted"> - <select2-select v-model="targetNamespaceSelect" :options="select2Options" /> - <span class="px-2 import-slash-divider d-flex justify-content-center align-items-center" - >/</span - > - <input - v-model="newNameInput" - type="text" - class="form-control import-project-name-input qa-project-path-field" - /> + <div class="import-entities-target-select gl-display-flex gl-align-items-stretch gl-w-full"> + <select2-select v-model="targetNamespaceSelect" :options="select2Options" /> + <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" + > + / + </div> + <gl-form-input + v-model="newNameInput" + class="gl-rounded-top-left-none gl-rounded-bottom-left-none qa-project-path-field" + /> + </div> </template> <template v-else-if="repo.importedProject">{{ displayFullPath }}</template> </td> - <td> + <td class="gl-p-4"> <import-status :status="importStatus" /> </td> <td data-testid="actions"> - <a + <gl-button v-if="isFinished" class="btn btn-default" :href="repo.importedProject.fullPath" rel="noreferrer noopener" target="_blank" >{{ __('Go to project') }} - </a> - <button + </gl-button> + <gl-button v-if="isImportNotStarted" type="button" - class="qa-import-button btn btn-default" + class="qa-import-button" @click="fetchImport(repo.importSource.id)" > {{ importButtonText }} - </button> + </gl-button> <gl-badge v-else-if="isIncompatible" variant="danger">{{ __('Incompatible project') }}</gl-badge> |