diff --git a/graph/migrate/src/lib/components/migration-card.tsx b/graph/migrate/src/lib/components/migration-card.tsx
index 8b0b95b469..8b315a6efd 100644
--- a/graph/migrate/src/lib/components/migration-card.tsx
+++ b/graph/migrate/src/lib/components/migration-card.tsx
@@ -12,7 +12,13 @@ import {
PlayIcon,
} from '@heroicons/react/24/outline';
import { Pill } from '@nx/graph-internal/ui-project-details';
-import { useState, forwardRef, useImperativeHandle, useEffect } from 'react';
+import {
+ useState,
+ forwardRef,
+ useImperativeHandle,
+ useEffect,
+ type ReactNode,
+} from 'react';
import { AnimatePresence, motion } from 'framer-motion';
export interface MigrationCardHandle {
@@ -21,6 +27,30 @@ export interface MigrationCardHandle {
toggle: () => void;
}
+function convertUrlsToLinks(text: string): ReactNode[] {
+ const urlRegex = /(https?:\/\/[^\s]+)/g;
+ const parts = text.split(urlRegex);
+ const urls = text.match(urlRegex) || [];
+ const result: ReactNode[] = [];
+ for (let i = 0; i < parts.length; i++) {
+ if (urls[i - 1]) {
+ result.push(
+
+ {urls[i - 1]}
+
+ );
+ } else if (parts[i]) {
+ result.push(parts[i]);
+ }
+ }
+ return result;
+}
+
export const MigrationCard = forwardRef<
MigrationCardHandle,
{
@@ -200,6 +230,23 @@ export const MigrationCard = forwardRef<
)}
+ {succeeded && migrationResult?.nextSteps?.length ? (
+
+
+
+ More Information & Next Steps
+
+
+ {migrationResult?.nextSteps.map((step, idx) => (
+ -
+ {convertUrlsToLinks(step)}
+
+ ))}
+
+
+
+ ) : null}
+