Skip to content

G
gitlab-ce
Commit 7d25a6e6 authored by Natalia Tepluhina's avatar Natalia Tepluhina
Browse files
Options

Merge branch '235977-migrate-import_projects-application-to-gitlab-ui' into 'master' 

Migrate import_projects application to gitlab-ui

See merge request gitlab-org/gitlab!53976
parents ea39dd87 d4914d44
Hide whitespace changes
Inline Side-by-side
Showing with 63 additions and 77 deletions
app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
View file @ 7d25a6e6
<script>
import { GlButton, GlLoadingIcon, GlIntersectionObserver, GlModal } from '@gitlab/ui';
import { GlButton, GlLoadingIcon, GlIntersectionObserver, GlModal, GlFormInput } from '@gitlab/ui';
import { mapActions, mapState, mapGetters } from 'vuex';
import { n__, __, sprintf } from '~/locale';
import ProviderRepoTableRow from './provider_repo_table_row.vue';
......@@ -12,6 +12,7 @@ export default {
GlButton,
GlModal,
GlIntersectionObserver,
GlFormInput,
},
props: {
providerTitle: {
......@@ -115,13 +116,13 @@ export default {
<template>
<div>
<p class="light text-nowrap mt-2">
<p class="gl-text-gray-900 gl-white-space-nowrap gl-mt-3">
{{ s__('ImportProjects|Select the repositories you want to import') }}
</p>
<template v-if="hasIncompatibleRepos">
<slot name="incompatible-repos-warning"></slot>
</template>
<div class="d-flex justify-content-between align-items-end flex-wrap mb-3">
<div class="gl-display-flex gl-justify-content-space-between gl-flex-wrap gl-mb-5">
<gl-button
variant="success"
:loading="isImportingAnyRepo"
......@@ -148,24 +149,29 @@ export default {
<slot name="actions"></slot>
<form v-if="filterable" class="gl-ml-auto" novalidate @submit.prevent>
<input
<gl-form-input
data-qa-selector="githubish_import_filter_field"
class="form-control"
name="filter"
:placeholder="__('Filter your repositories by name')"
autofocus
size="40"
size="lg"
@keyup.enter="setFilter($event.target.value)"
/>
</form>
</div>
<div v-if="repositories.length" class="table-responsive">
<table class="table import-table">
<thead>
<th class="import-jobs-from-col">{{ fromHeaderText }}</th>
<th class="import-jobs-to-col">{{ __('To GitLab') }}</th>
<th class="import-jobs-status-col">{{ __('Status') }}</th>
<th class="import-jobs-cta-col"></th>
<div v-if="repositories.length" class="gl-w-full">
<table>
<thead class="gl-border-0 gl-border-solid gl-border-t-1 gl-border-gray-100">
<th class="import-jobs-from-col gl-p-4 gl-vertical-align-top gl-border-b-1">
{{ fromHeaderText }}
</th>
<th class="import-jobs-to-col gl-p-4 gl-vertical-align-top gl-border-b-1">
{{ __('To GitLab') }}
</th>
<th class="import-jobs-status-col gl-p-4 gl-vertical-align-top gl-border-b-1">
{{ __('Status') }}
</th>
<th class="import-jobs-cta-col gl-p-4 gl-vertical-align-top gl-border-b-1"></th>
</thead>
<tbody>
<template v-for="repo in repositories">
......@@ -183,9 +189,9 @@ export default {
:key="pagePaginationStateKey"
@appear="fetchRepos"
/>
<gl-loading-icon v-if="isLoading" class="import-projects-loading-icon" size="md" />
<gl-loading-icon v-if="isLoading" class="gl-mt-7" size="md" />
<div v-if="!isLoading && repositories.length === 0" class="text-center">
<div v-if="!isLoading && repositories.length === 0" class="gl-text-center">
<strong>{{ emptyStateText }}</strong>
</div>
</div>
......
app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
View file @ 7d25a6e6
<script>
import { GlIcon, GlBadge } from '@gitlab/ui';
import { GlIcon, GlBadge, GlFormInput, GlButton, GlLink } from '@gitlab/ui';
import { mapState, mapGetters, mapActions } from 'vuex';
import { __ } from '~/locale';
import Select2Select from '~/vue_shared/components/select2_select.vue';
......@@ -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>
......
app/assets/stylesheets/page_bundles/import.scss
View file @ 7d25a6e6
......@@ -12,35 +12,6 @@
width: 1%;
}
.import-project-name-input {
border-radius: 0 $border-radius-default $border-radius-default 0;
position: relative;
left: -1px;
max-width: 300px;
}
.import-slash-divider {
background-color: $gray-lightest;
border: 1px solid $border-color;
}
.import-row {
height: 55px;
}
.import-table {
.import-jobs-from-col,
.import-jobs-to-col,
.import-jobs-status-col,
.import-jobs-cta-col {
border-bottom-width: 1px;
padding-left: $gl-padding;
}
}
.import-projects-loading-icon {
margin-top: $gl-padding-32;
}
.import-entities-target-select {
&.disabled {
......
spec/features/import/manifest_import_spec.rb
View file @ 7d25a6e6
......@@ -52,6 +52,6 @@ RSpec.describe 'Import multiple repositories by uploading a manifest file', :js
end
def second_row
page.all('table.import-table tbody tr')[1]
page.all('table tbody tr')[1]
end
end
spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js
View file @ 7d25a6e6
import { GlLoadingIcon, GlButton, GlIntersectionObserver } from '@gitlab/ui';
import { GlLoadingIcon, GlButton, GlIntersectionObserver, GlFormInput } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import Vuex from 'vuex';
......@@ -12,7 +12,9 @@ describe('ImportProjectsTable', () => {
let wrapper;
const findFilterField = () =>
wrapper.find('input[data-qa-selector="githubish_import_filter_field"]');
wrapper
.findAllComponents(GlFormInput)
.wrappers.find((w) => w.attributes('placeholder') === 'Filter your repositories by name');
const providerTitle = 'THE PROVIDER';
const providerRepo = {
......@@ -205,7 +207,7 @@ describe('ImportProjectsTable', () => {
it('does not render filtering input field when filterable is false', () => {
createComponent({ filterable: false });
expect(findFilterField().exists()).toBe(false);
expect(findFilterField()).toBeUndefined();
});
describe('when paginatable is set to true', () => {
......
spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js
View file @ 7d25a6e6
import { GlBadge } from '@gitlab/ui';
import { GlBadge, GlButton } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import Vuex from 'vuex';
......@@ -34,7 +34,7 @@ describe('ProviderRepoTableRow', () => {
}
const findImportButton = () => {
const buttons = wrapper.findAll('button').filter((node) => node.text() === 'Import');
const buttons = wrapper.findAllComponents(GlButton).filter((node) => node.text() === 'Import');
return buttons.length ? buttons.at(0) : buttons;
};
......@@ -91,7 +91,7 @@ describe('ProviderRepoTableRow', () => {
});
it('imports repo when clicking import button', async () => {
findImportButton().trigger('click');
findImportButton().vm.$emit('click');
await nextTick();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7