Refactor import_projects app to use gitlab-ui

- Use gitlab-ui CSS styles and components

app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue

 <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

 <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">
+        <div class="import-entities-target-select gl-display-flex gl-align-items-stretch gl-w-full">
           <select2-select v-model="targetNamespaceSelect" :options="select2Options" />
-        <span class="px-2 import-slash-divider d-flex justify-content-center align-items-center"
-          >/</span
+          <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"
           >
-        <input
+            /
+          </div>
+          <gl-form-input
             v-model="newNameInput"
-          type="text"
-          class="form-control import-project-name-input qa-project-path-field"
+            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

@@ -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

@@ -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

-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

-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();