Update import statuses icons and texts

* use gitlab-ui

app/assets/javascripts/import_entities/components/import_status.vue

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

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',
   },
 };
 

changelogs/unreleased/271505-update-the-status-icons-for-migrating-groups-and-projects.yml

+---
+title: Update import statuses texts and icons
+merge_request: 54957
+author:
+type: changed

ee/spec/features/projects/new_project_spec.rb

@@ -136,7 +136,7 @@ RSpec.describe 'New project', :js do
         click_button 'Connect'
         wait_for_requests
 
-        expect(page).to have_text('Done')
+        expect(page).to have_text('Complete')
 
         created_project = Project.last
         expect(created_project.name).to eq('some-github-repo')

locale/gitlab.pot

@@ -5519,6 +5519,9 @@ msgstr ""
 msgid "Canceled deployment to"
 msgstr ""
 
+msgid "Cancelled"
+msgstr ""
+
 msgid "Cancelling Preview"
 msgstr ""
 
@@ -15739,6 +15742,9 @@ msgid_plural "Importing %d repositories"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "Importing..."
+msgstr ""
+
 msgid "Improve customer support with Service Desk"
 msgstr ""
 
@@ -26322,9 +26328,6 @@ msgstr ""
 msgid "Running"
 msgstr ""
 
-msgid "Running…"
-msgstr ""
-
 msgid "Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects."
 msgstr ""
 
@@ -26466,9 +26469,6 @@ msgstr ""
 msgid "Schedules to merge this merge request (%{strategy})."
 msgstr ""
 
-msgid "Scheduling"
-msgstr ""
-
 msgid "Scheduling Pipelines"
 msgstr ""
 

spec/features/import/manifest_import_spec.rb

@@ -37,7 +37,7 @@ RSpec.describe 'Import multiple repositories by uploading a manifest file', :js
     wait_for_requests
 
     page.within(second_row) do
-      expect(page).to have_content 'Done'
+      expect(page).to have_content 'Complete'
       expect(page).to have_content("#{group.full_path}/build/blueprint")
     end
   end