Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

3 files changed, 35 insertions, 52 deletions

diff --git a/app/assets/javascripts/import_entities/components/import_status.vue b/app/assets/javascripts/import_entities/components/import_status.vue
index 8df51ef7f9b..cc6a057f587 100644
--- a/app/assets/javascripts/import_entities/components/import_status.vue
+++ b/app/assets/javascripts/import_entities/components/import_status.vue
@@ -1,13 +1,11 @@
 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import STATUS_MAP from '../constants';
 
 export default {
   name: 'ImportStatus',
   components: {
-    CiIcon,
-    GlLoadingIcon,
+    GlIcon,
   },
   props: {
     status: {
@@ -20,28 +18,13 @@ export default {
     mappedStatus() {
       return STATUS_MAP[this.status];
     },
-
-    ciIconStatus() {
-      const { icon } = this.mappedStatus;
-
-      return {
-        icon: `status_${icon}`,
-        group: icon,
-      };
-    },
   },
 };
 </script>
 
 <template>
-  <div class="gl-display-flex gl-h-7 gl-align-items-center">
-    <gl-loading-icon
-      v-if="mappedStatus.loadingIcon"
-      :inline="true"
-      :class="mappedStatus.textClass"
-      class="align-middle mr-2"
-    />
-    <ci-icon v-else css-classes="align-middle mr-2" :status="ciIconStatus" />
-    <span :class="mappedStatus.textClass">{{ mappedStatus.text }}</span>
+  <div>
+    <gl-icon :name="mappedStatus.icon" :class="mappedStatus.iconClass" :size="12" class="gl-mr-2" />
+    <span>{{ mappedStatus.text }}</span>
   </div>
 </template>
diff --git a/app/assets/javascripts/import_entities/constants.js b/app/assets/javascripts/import_entities/constants.js
index c2f398cb8a8..156e92e2d00 100644
--- a/app/assets/javascripts/import_entities/constants.js
+++ b/app/assets/javascripts/import_entities/constants.js
@@ -11,43 +11,43 @@ export const STATUSES = {
   STARTED: 'started',
   NONE: 'none',
   SCHEDULING: 'scheduling',
+  CANCELLED: 'cancelled',
+};
+
+const SCHEDULED_STATUS = {
+  icon: 'status-scheduled',
+  text: __('Pending'),
+  iconClass: 'gl-text-orange-400',
 };
 
 const STATUS_MAP = {
+  [STATUSES.NONE]: {
+    icon: 'status-waiting',
+    text: __('Not started'),
+    iconClass: 'gl-text-gray-400',
+  },
+  [STATUSES.SCHEDULING]: SCHEDULED_STATUS,
+  [STATUSES.SCHEDULED]: SCHEDULED_STATUS,
+  [STATUSES.CREATED]: SCHEDULED_STATUS,
+  [STATUSES.STARTED]: {
+    icon: 'status-running',
+    text: __('Importing...'),
+    iconClass: 'gl-text-blue-400',
+  },
   [STATUSES.FINISHED]: {
-    icon: 'success',
-    text: __('Done'),
-    textClass: 'text-success',
+    icon: 'status-success',
+    text: __('Complete'),
+    iconClass: 'gl-text-green-400',
   },
   [STATUSES.FAILED]: {
-    icon: 'failed',
+    icon: 'status-failed',
     text: __('Failed'),
-    textClass: 'text-danger',
-  },
-  [STATUSES.CREATED]: {
-    icon: 'pending',
-    text: __('Scheduled'),
-    textClass: 'text-warning',
-  },
-  [STATUSES.SCHEDULED]: {
-    icon: 'pending',
-    text: __('Scheduled'),
-    textClass: 'text-warning',
-  },
-  [STATUSES.STARTED]: {
-    icon: 'running',
-    text: __('Running…'),
-    textClass: 'text-info',
-  },
-  [STATUSES.NONE]: {
-    icon: 'created',
-    text: __('Not started'),
-    textClass: 'text-muted',
+    iconClass: 'gl-text-red-600',
   },
-  [STATUSES.SCHEDULING]: {
-    loadingIcon: true,
-    text: __('Scheduling'),
-    textClass: 'text-warning',
+  [STATUSES.CANCELLED]: {
+    icon: 'status-stopped',
+    text: __('Cancelled'),
+    iconClass: 'gl-text-red-600',
   },
 };
 
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 ebb09947663..a803afeb901 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
@@ -111,7 +111,7 @@ export default {
       </gl-link>
     </td>
     <td
-      class="gl-display-flex gl-flex-sm-wrap gl-p-4 gl-pt-5 gl-vertical-align-top"
+      class="gl-display-flex gl-sm-flex-wrap gl-p-4 gl-pt-5 gl-vertical-align-top"
       data-testid="fullPath"
       data-qa-selector="project_path_content"
     >