Add latest changes from gitlab-org/gitlab@master

2 files changed, 54 insertions, 41 deletions

diff --git a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
index dfc5b68b820..be09052fb7e 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
@@ -1,5 +1,5 @@
 <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>
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 d448ea44bc7..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,5 +1,5 @@
 <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>