1 files changed, 50 insertions, 15 deletions

diff --git a/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue b/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
index 6feb4c2188f..3dcababb4fd 100644
--- a/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
+++ b/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
@@ -1,5 +1,13 @@
 <script>
-import { GlButton, GlEmptyState, GlLink, GlLoadingIcon, GlTable } from '@gitlab/ui';
+import {
+  GlButton,
+  GlEmptyState,
+  GlIcon,
+  GlLink,
+  GlLoadingIcon,
+  GlTableLite,
+  GlTooltipDirective as GlTooltip,
+} from '@gitlab/ui';
 
 import { s__, __ } from '~/locale';
 import { createAlert } from '~/flash';
@@ -34,15 +42,20 @@ export default {
   components: {
     GlButton,
     GlEmptyState,
+    GlIcon,
     GlLink,
     GlLoadingIcon,
-    GlTable,
+    GlTableLite,
     PaginationBar,
     ImportStatus,
     TimeAgo,
     LocalStorageSync,
   },
 
+  directives: {
+    GlTooltip,
+  },
+
   data() {
     return {
       loading: true,
@@ -58,12 +71,12 @@ export default {
   fields: [
     tableCell({
       key: 'source_full_path',
-      label: s__('BulkImport|Source group'),
+      label: s__('BulkImport|Source'),
       thClass: `${DEFAULT_TH_CLASSES} gl-w-30p`,
     }),
     tableCell({
       key: 'destination_name',
-      label: s__('BulkImport|Destination group'),
+      label: s__('BulkImport|Destination'),
       thClass: `${DEFAULT_TH_CLASSES} gl-w-40p`,
     }),
     tableCell({
@@ -113,12 +126,24 @@ export default {
       }
     },
 
-    getDestinationUrl({ destination_name: name, destination_namespace: namespace }) {
-      return [namespace, name].filter(Boolean).join('/');
+    getFullDestinationUrl(params) {
+      return joinPaths(gon.relative_url_root || '', '/', params.destination_full_path);
     },
 
-    getFullDestinationUrl(params) {
-      return joinPaths(gon.relative_url_root || '', '/', this.getDestinationUrl(params));
+    getPresentationUrl(item) {
+      const suffix = item.entity_type === 'group' ? '/' : '';
+      return `${item.destination_full_path}${suffix}`;
+    },
+
+    getEntityTooltip(item) {
+      switch (item.entity_type) {
+        case 'project':
+          return __('Project');
+        case 'group':
+          return __('Group');
+        default:
+          return '';
+      }
     },
   },
 
@@ -134,26 +159,36 @@ export default {
     >
       <h1 class="gl-my-0 gl-py-4 gl-font-size-h1">
         <img :src="$options.gitlabLogo" class="gl-w-6 gl-h-6 gl-mb-2 gl-display-inline gl-mr-2" />
-        {{ s__('BulkImport|Group import history') }}
+        {{ s__('BulkImport|GitLab Migration history') }}
       </h1>
     </div>
     <gl-loading-icon v-if="loading" size="lg" class="gl-mt-5" />
     <gl-empty-state
       v-else-if="!hasHistoryItems"
       :title="s__('BulkImport|No history is available')"
-      :description="s__('BulkImport|Your imported groups will appear here.')"
+      :description="s__('BulkImport|Your imported groups and projects will appear here.')"
     />
     <template v-else>
-      <gl-table
+      <gl-table-lite
         :fields="$options.fields"
         :items="historyItems"
         data-qa-selector="import_history_table"
         class="gl-w-full"
       >
         <template #cell(destination_name)="{ item }">
-          <gl-link :href="getFullDestinationUrl(item)" target="_blank">
-            {{ getDestinationUrl(item) }}
-          </gl-link>
+          <template v-if="item.destination_full_path">
+            <gl-icon
+              v-gl-tooltip
+              :name="item.entity_type"
+              :title="getEntityTooltip(item)"
+              :aria-label="getEntityTooltip(item)"
+              class="gl-text-gray-500"
+            />
+            <gl-link :href="getFullDestinationUrl(item)" target="_blank">
+              {{ getPresentationUrl(item) }}
+            </gl-link>
+          </template>
+          <gl-loading-icon v-else inline />
         </template>
         <template #cell(created_at)="{ value }">
           <time-ago :time="value" />
@@ -171,7 +206,7 @@ export default {
         <template #row-details="{ item }">
           <pre><code>{{ item.failures }}</code></pre>
         </template>
-      </gl-table>
+      </gl-table-lite>
       <pagination-bar
         :page-info="pageInfo"
         class="gl-m-0 gl-mt-3"