CloudMigrations: add basic resource component and update migration message with many resource types (#94423)

* CloudMigrations: display generic success message with more than 4 resource types

* CloudMigrations: create generic named resource component

public/app/features/migrate-to-cloud/onprem/NameCell.tsx

@@ -37,16 +37,9 @@ function ResourceInfo({ data }: { data: ResourceTableItem }) {
       return <FolderInfo data={data} />;
     case 'LIBRARY_ELEMENT':
       return <LibraryElementInfo data={data} />;
-    case 'ALERT_RULE':
-      return null;
-    case 'CONTACT_POINT':
-      return null;
-    case 'NOTIFICATION_POLICY':
-      return null;
-    case 'NOTIFICATION_TEMPLATE':
-      return null;
-    case 'MUTE_TIMING':
-      return null;
+    // Starting from 11.4.x, new resources have both `name` and optionally a `parentName`, so we can use this catch-all component.
+    default:
+      return <BasicResourceInfo data={data} />;
   }
 }
 
@@ -200,23 +193,35 @@ function InfoSkeleton() {
   );
 }
 
+function BasicResourceInfo({ data }: { data: ResourceTableItem }) {
+  return (
+    <>
+      <span>{data.name}</span>
+      {data.parentName && <Text color="secondary">{data.parentName}</Text>}
+    </>
+  );
+}
+
 function ResourceIcon({ resource }: { resource: ResourceTableItem }) {
   const styles = useStyles2(getIconStyles);
   const datasource = useDatasource(resource.type === 'DATASOURCE' ? resource.refId : undefined);
 
-  if (resource.type === 'DASHBOARD') {
-    return <Icon size="xl" name="dashboard" />;
-  } else if (resource.type === 'FOLDER') {
-    return <Icon size="xl" name="folder" />;
-  } else if (resource.type === 'DATASOURCE' && datasource?.meta?.info?.logos?.small) {
-    return <img className={styles.icon} src={datasource.meta.info.logos.small} alt="" />;
-  } else if (resource.type === 'DATASOURCE') {
-    return <Icon size="xl" name="database" />;
-  } else if (resource.type === 'LIBRARY_ELEMENT') {
-    return <Icon size="xl" name="library-panel" />;
-  }
+  switch (resource.type) {
+    case 'DASHBOARD':
+      return <Icon size="xl" name="dashboard" />;
+    case 'FOLDER':
+      return <Icon size="xl" name="folder" />;
+    case 'DATASOURCE':
+      if (datasource?.meta?.info?.logos?.small) {
+        return <img className={styles.icon} src={datasource.meta.info.logos.small} alt="" />;
+      }
 
-  return undefined;
+      return <Icon size="xl" name="database" />;
+    case 'LIBRARY_ELEMENT':
+      return <Icon size="xl" name="library-panel" />;
+    default:
+      return undefined;
+  }
 }
 
 function getIconStyles() {

public/app/features/migrate-to-cloud/onprem/useNotifyOnSuccess.tsx

@@ -5,6 +5,9 @@ import { useAppNotification } from 'app/core/copy/appNotification';
 
 import { GetSnapshotResponseDto, SnapshotDto } from '../api';
 
+// After the number of distinct resource types migrated exceeeds this value, we display a generic success message.
+const SUCCESS_MESSAGE_ITEM_TYPES_THRESHOLD = 4;
+
 export function useNotifySuccessful(snapshot: GetSnapshotResponseDto | undefined) {
   const previousStatusRef = useRef<SnapshotDto['status']>(undefined);
   const notifyApp = useAppNotification();
@@ -32,6 +35,8 @@ export function useNotifySuccessful(snapshot: GetSnapshotResponseDto | undefined
 function getTranslatedMessage(snapshot: GetSnapshotResponseDto) {
   const types: string[] = [];
 
+  let distinctItems = 0;
+
   for (const [type, count] of Object.entries(snapshot.stats?.types ?? {})) {
     if (count <= 0) {
       continue;
@@ -48,15 +53,23 @@ function getTranslatedMessage(snapshot: GetSnapshotResponseDto) {
     } else if (type === 'LIBRARY_ELEMENT') {
       types.push(t('migrate-to-cloud.migrated-counts.library_elements', 'library elements'));
     }
+
+    distinctItems += 1;
   }
 
   const successCount = snapshot?.stats?.statuses?.['OK'] ?? 0;
 
-  const message = t(
+  if (distinctItems > SUCCESS_MESSAGE_ITEM_TYPES_THRESHOLD) {
+    return t(
+      'migrate-to-cloud.onprem.success-message-generic',
+      'Successfully migrated {{successCount}} resources to your Grafana Cloud instance.',
+      { successCount }
+    );
+  }
+
+  return t(
     'migrate-to-cloud.onprem.success-message',
     'Successfully migrated {{successCount}} {{types, list}} to your Grafana Cloud instance.',
     { successCount, types }
   );
-
-  return message;
 }

public/locales/en-US/grafana.json

@@ -1442,6 +1442,7 @@
       "snapshot-error-status-body": "There was an error creating the snapshot or starting the migration process. See the Grafana server logs for more details",
       "snapshot-error-status-title": "Error migrating resources",
       "success-message": "Successfully migrated {{successCount}} {{types, list}} to your Grafana Cloud instance.",
+      "success-message-generic": "Successfully migrated {{successCount}} resources to your Grafana Cloud instance.",
       "success-title": "Migration completed!",
       "upload-snapshot-error-title": "Error uploading snapshot"
     },

public/locales/pseudo-LOCALE/grafana.json

@@ -1442,6 +1442,7 @@
       "snapshot-error-status-body": "Ŧĥęřę ŵäş äʼn ęřřőř čřęäŧįʼnģ ŧĥę şʼnäpşĥőŧ őř şŧäřŧįʼnģ ŧĥę mįģřäŧįőʼn přőčęşş. Ŝęę ŧĥę Ğřäƒäʼnä şęřvęř ľőģş ƒőř mőřę đęŧäįľş",
       "snapshot-error-status-title": "Ēřřőř mįģřäŧįʼnģ řęşőūřčęş",
       "success-message": "Ŝūččęşşƒūľľy mįģřäŧęđ {{successCount}} {{types, list}} ŧő yőūř Ğřäƒäʼnä Cľőūđ įʼnşŧäʼnčę.",
+      "success-message-generic": "Ŝūččęşşƒūľľy mįģřäŧęđ {{successCount}} řęşőūřčęş ŧő yőūř Ğřäƒäʼnä Cľőūđ įʼnşŧäʼnčę.",
       "success-title": "Mįģřäŧįőʼn čőmpľęŧęđ!",
       "upload-snapshot-error-title": "Ēřřőř ūpľőäđįʼnģ şʼnäpşĥőŧ"
     },