diff options
Diffstat (limited to 'app/assets/javascripts/import_projects/components')
4 files changed, 160 insertions, 15 deletions
diff --git a/app/assets/javascripts/import_projects/components/bitbucket_status_table.vue b/app/assets/javascripts/import_projects/components/bitbucket_status_table.vue new file mode 100644 index 00000000000..1a9974db727 --- /dev/null +++ b/app/assets/javascripts/import_projects/components/bitbucket_status_table.vue @@ -0,0 +1,74 @@ +<script> +import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui'; +import ImportProjectsTable from './import_projects_table.vue'; + +export default { + components: { + ImportProjectsTable, + GlAlert, + GlSprintf, + GlLink, + }, + props: { + providerTitle: { + type: String, + required: true, + }, + }, + data() { + return { + isWarningDismissed: false, + }; + }, + computed: { + currentPage() { + return window.location.href; + }, + }, +}; +</script> +<template> + <import-projects-table provider-title="providerTitle"> + <template #actions> + <slot name="actions"></slot> + </template> + <template #incompatible-repos-warning> + <gl-alert + v-if="!isWarningDismissed" + variant="warning" + class="gl-my-2" + @dismiss="isWarningDismissed = true" + > + <gl-sprintf + :message=" + __( + 'One or more of your %{provider} projects cannot be imported into GitLab directly because they use Subversion or Mercurial for version control, rather than Git.', + ) + " + > + <template #provider> + {{ providerTitle }} + </template> + </gl-sprintf> + <gl-sprintf + :message=" + __( + 'Please convert %{linkStart}them to Git%{linkEnd}, and go through the %{linkToImportFlow} again.', + ) + " + > + <template #link="{ content }"> + <gl-link + href="https://www.atlassian.com/git/tutorials/migrating-overview" + target="_blank" + >{{ content }}</gl-link + > + </template> + <template #linkToImportFlow> + <gl-link :href="currentPage">{{ __('import flow') }}</gl-link> + </template> + </gl-sprintf> + </gl-alert> + </template> + </import-projects-table> +</template> diff --git a/app/assets/javascripts/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_projects/components/import_projects_table.vue index 849bda28d03..6a467fb8c6a 100644 --- a/app/assets/javascripts/import_projects/components/import_projects_table.vue +++ b/app/assets/javascripts/import_projects/components/import_projects_table.vue @@ -1,11 +1,11 @@ <script> import { throttle } from 'lodash'; import { mapActions, mapState, mapGetters } from 'vuex'; -import { GlLoadingIcon } from '@gitlab/ui'; -import LoadingButton from '~/vue_shared/components/loading_button.vue'; +import { GlButton, GlLoadingIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import ImportedProjectTableRow from './imported_project_table_row.vue'; import ProviderRepoTableRow from './provider_repo_table_row.vue'; +import IncompatibleRepoTableRow from './incompatible_repo_table_row.vue'; import eventHub from '../event_hub'; const reposFetchThrottleDelay = 1000; @@ -15,19 +15,42 @@ export default { components: { ImportedProjectTableRow, ProviderRepoTableRow, - LoadingButton, + IncompatibleRepoTableRow, GlLoadingIcon, + GlButton, }, props: { providerTitle: { type: String, required: true, }, + filterable: { + type: Boolean, + required: false, + default: true, + }, }, computed: { - ...mapState(['importedProjects', 'providerRepos', 'isLoadingRepos', 'filter']), - ...mapGetters(['isImportingAnyRepo', 'hasProviderRepos', 'hasImportedProjects']), + ...mapState([ + 'importedProjects', + 'providerRepos', + 'incompatibleRepos', + 'isLoadingRepos', + 'filter', + ]), + ...mapGetters([ + 'isImportingAnyRepo', + 'hasProviderRepos', + 'hasImportedProjects', + 'hasIncompatibleRepos', + ]), + + importAllButtonText() { + return this.hasIncompatibleRepos + ? __('Import all compatible repositories') + : __('Import all repositories'); + }, emptyStateText() { return sprintf(__('No %{providerTitle} repositories found'), { @@ -68,7 +91,6 @@ export default { }, throttledFetchRepos: throttle(function fetch() { - eventHub.$off('importAll'); this.fetchRepos(); }, reposFetchThrottleDelay), }, @@ -80,17 +102,24 @@ export default { <p class="light text-nowrap mt-2"> {{ s__('ImportProjects|Select the projects you want to import') }} </p> - - <div class="d-flex justify-content-between align-items-end flex-wrap mb-3"> - <loading-button - container-class="btn btn-success js-import-all" + <template v-if="hasIncompatibleRepos"> + <slot name="incompatible-repos-warning"> </slot> + </template> + <div + v-if="!isLoadingRepos" + class="d-flex justify-content-between align-items-end flex-wrap mb-3" + > + <gl-button + variant="success" :loading="isImportingAnyRepo" - :label="__('Import all repositories')" :disabled="!hasProviderRepos" type="button" @click="importAll" - /> - <form novalidate @submit.prevent> + > + {{ importAllButtonText }} + </gl-button> + <slot name="actions"></slot> + <form v-if="filterable" class="gl-ml-auto" novalidate @submit.prevent> <input :value="filter" data-qa-selector="githubish_import_filter_field" @@ -109,7 +138,10 @@ export default { class="js-loading-button-icon import-projects-loading-icon" size="md" /> - <div v-else-if="hasProviderRepos || hasImportedProjects" class="table-responsive"> + <div + v-else-if="hasProviderRepos || hasImportedProjects || hasIncompatibleRepos" + class="table-responsive" + > <table class="table import-table"> <thead> <th class="import-jobs-from-col">{{ fromHeaderText }}</th> @@ -124,6 +156,11 @@ export default { :project="project" /> <provider-repo-table-row v-for="repo in providerRepos" :key="repo.id" :repo="repo" /> + <incompatible-repo-table-row + v-for="repo in incompatibleRepos" + :key="repo.id" + :repo="repo" + /> </tbody> </table> </div> diff --git a/app/assets/javascripts/import_projects/components/incompatible_repo_table_row.vue b/app/assets/javascripts/import_projects/components/incompatible_repo_table_row.vue new file mode 100644 index 00000000000..fa2fb439eac --- /dev/null +++ b/app/assets/javascripts/import_projects/components/incompatible_repo_table_row.vue @@ -0,0 +1,30 @@ +<script> +import { GlBadge } from '@gitlab/ui'; + +export default { + components: { + GlBadge, + }, + props: { + repo: { + type: Object, + required: true, + }, + }, +}; +</script> + +<template> + <tr class="import-row"> + <td> + <a :href="repo.providerLink" rel="noreferrer noopener" target="_blank"> + {{ repo.fullName }} + </a> + </td> + <td></td> + <td></td> + <td> + <gl-badge variant="danger">{{ __('Incompatible project') }}</gl-badge> + </td> + </tr> +</template> diff --git a/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue b/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue index 6e227ab3d82..63524d61146 100644 --- a/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue +++ b/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue @@ -53,7 +53,11 @@ export default { }, created() { - eventHub.$on('importAll', () => this.importRepo()); + eventHub.$on('importAll', this.importRepo); + }, + + beforeDestroy() { + eventHub.$off('importAll', this.importRepo); }, methods: { |