1 files changed, 51 insertions, 14 deletions

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>