feat(graph): enable opening implementation file from migrate ui

nrwl · Feb 3, 2025 · 009a88e · 009a88e
1 parent d24b83a
commit 009a88e
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 10 deletions.
diff --git a/graph/client/src/app/console-migrate/migrate.app.tsx b/graph/client/src/app/console-migrate/migrate.app.tsx
@@ -83,6 +83,14 @@ export function MigrateApp({
       payload: { migration },
     });
   };
+
+  const onViewImplementation = (migration: MigrationDetailsWithId) => {
+    externalApiService.postEvent({
+      type: 'view-implementation',
+      payload: { migration },
+    });
+  };
+
   return (
     <MigrateUI
       migrations={migrations}
@@ -93,6 +101,7 @@ export function MigrateApp({
       onFinish={onFinish}
       onFileClick={onFileClick}
       onSkipMigration={onSkipMigration}
+      onViewImplementation={onViewImplementation}
     ></MigrateUI>
   );
 }
diff --git a/graph/migrate/src/lib/automatic-migration.machine.ts b/graph/migrate/src/lib/automatic-migration.machine.ts
@@ -315,7 +315,6 @@ function findFirstIncompleteMigration(
   migrations: MigrationDetailsWithId[],
   nxConsoleMetadata: MigrationsJsonMetadata
 ) {
-  console.log('finding first incomplete migration');
   return (
     migrations.find(
       (migration) =>

diff --git a/graph/migrate/src/lib/automatic-migration.tsx b/graph/migrate/src/lib/automatic-migration.tsx
@@ -20,6 +20,7 @@ export function AutomaticMigration(props: {
   nxConsoleMetadata: MigrationsJsonMetadata;
   onRunMigration: (migration: MigrationDetailsWithId) => void;
   onSkipMigration: (migration: MigrationDetailsWithId) => void;
+  onViewImplementation: (migration: MigrationDetailsWithId) => void;
 }) {
   const actor = useInterpret(automaticMigrationMachine, {
     actions: {
@@ -120,6 +121,9 @@ export function AutomaticMigration(props: {
               migration={migration}
               nxConsoleMetadata={props.nxConsoleMetadata}
               onFileClick={() => {}}
+              onViewImplementation={() => {
+                props.onViewImplementation(migration);
+              }}
             />
           ))}
       </div>
@@ -194,6 +198,9 @@ export function AutomaticMigration(props: {
                   nxConsoleMetadata={props.nxConsoleMetadata}
                   onFileClick={() => {}}
                   forceIsRunning={currentMigrationRunning}
+                  onViewImplementation={() => {
+                    props.onViewImplementation(currentMigration);
+                  }}
                 />
               </div>
             )}
@@ -205,6 +212,9 @@ export function AutomaticMigration(props: {
                 migration={migration}
                 nxConsoleMetadata={props.nxConsoleMetadata}
                 onFileClick={() => {}}
+                onViewImplementation={() => {
+                  props.onViewImplementation(migration);
+                }}
               />
             ))}
           </div>

diff --git a/graph/migrate/src/lib/migrate.stories.tsx b/graph/migrate/src/lib/migrate.stories.tsx
@@ -18,6 +18,7 @@ export const Manual: Story = {
         description: 'This is a migration that does a thing labeled with one.',
         version: '1.0.0',
         package: 'nx',
+        implementation: './src/migrations/migration-1.ts',
       },
       {
         id: 'migration-2',
@@ -26,6 +27,7 @@ export const Manual: Story = {
           'Funnily, this is another migration that does a thing labeled with two.',
         version: '1.0.1',
         package: '@nx/react',
+        implementation: './src/migrations/migration-2.ts',
       },
       {
         id: 'migration-3',
@@ -34,13 +36,15 @@ export const Manual: Story = {
           'This is a migration that does a thing labeled with three.',
         version: '1.0.1',
         package: '@nx/js',
+        implementation: './src/migrations/migration-3.ts',
       },
       {
         id: 'migration-4',
         name: 'migration-4',
         description: 'This is a migration that does a thing labeled with four.',
         version: '1.0.2',
         package: 'nx',
+        implementation: './src/migrations/migration-4.ts',
       },
       {
         id: 'migration-3-1',
@@ -49,13 +53,15 @@ export const Manual: Story = {
           'This is a migration that does a thing labeled with three.',
         version: '1.0.1',
         package: '@nx/js',
+        implementation: './src/migrations/migration-3.ts',
       },
       {
         id: 'migration-6',
         name: 'migration-6',
         description: 'This migration performs updates labeled as number six.',
         version: '1.0.3',
         package: '@nx/workspace',
+        implementation: './src/migrations/migration-6.ts',
       },
       {
         id: 'migration-7',
@@ -64,6 +70,7 @@ export const Manual: Story = {
           'Lucky number seven migration that updates configurations.',
         version: '1.0.3',
         package: '@nx/devkit',
+        implementation: './src/migrations/migration-7.ts',
       },
     ],
     nxConsoleMetadata: {
@@ -108,6 +115,9 @@ export const Manual: Story = {
     onFileClick: (file: any) => {
       console.log(file);
     },
+    onViewImplementation: (migration: any) => {
+      console.log(migration);
+    },
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -125,6 +135,7 @@ export const Automatic: Story = {
         description: 'This is a migration that does a thing labeled with one.',
         version: '1.0.0',
         package: 'nx',
+        implementation: './src/migrations/migration-1.ts',
       },
       {
         id: 'migration-2',
@@ -133,6 +144,7 @@ export const Automatic: Story = {
           'Funnily, this is another migration that does a thing labeled with two.',
         version: '1.0.1',
         package: '@nx/react',
+        implementation: './src/migrations/migration-2.ts',
       },
       {
         id: 'migration-3',
@@ -141,13 +153,15 @@ export const Automatic: Story = {
           'This is a migration that does a thing labeled with three.',
         version: '1.0.1',
         package: '@nx/js',
+        implementation: './src/migrations/migration-3.ts',
       },
       {
         id: 'migration-4',
         name: 'migration-4',
         description: 'This is a migration that does a thing labeled with four.',
         version: '1.0.2',
         package: 'nx',
+        implementation: './src/migrations/migration-4.ts',
       },
       {
         id: 'migration-3-1',
@@ -156,13 +170,15 @@ export const Automatic: Story = {
           'This is a migration that does a thing labeled with three.',
         version: '1.0.1',
         package: '@nx/js',
+        implementation: './src/migrations/migration-3.ts',
       },
       {
         id: 'migration-6',
         name: 'migration-6',
         description: 'This migration performs updates labeled as number six.',
         version: '1.0.3',
         package: '@nx/workspace',
+        implementation: './src/migrations/migration-6.ts',
       },
       {
         id: 'migration-7',
@@ -171,6 +187,7 @@ export const Automatic: Story = {
           'Lucky number seven migration that updates configurations.',
         version: '1.0.3',
         package: '@nx/devkit',
+        implementation: './src/migrations/migration-7.ts',
       },
     ],
     nxConsoleMetadata: {

diff --git a/graph/migrate/src/lib/migrate.tsx b/graph/migrate/src/lib/migrate.tsx
@@ -29,6 +29,7 @@ export interface MigrateUIProps {
   onCancel: () => void;
   onFinish: (squashCommits: boolean) => void;
   onFileClick: (file: Omit<FileChange, 'content'>) => void;
+  onViewImplementation: (migration: MigrationDetailsWithId) => void;
 }
 
 export function MigrateUI(props: MigrateUIProps) {
@@ -73,6 +74,9 @@ export function MigrateUI(props: MigrateUIProps) {
             props.onRunMigration(migration, { createCommits })
           }
           onSkipMigration={(migration) => props.onSkipMigration(migration)}
+          onViewImplementation={(migration) =>
+            props.onViewImplementation(migration)
+          }
         />
       ) : (
         <MigrationList
@@ -85,6 +89,9 @@ export function MigrateUI(props: MigrateUIProps) {
             props.onRunMany(migrations, { createCommits })
           }
           onFileClick={props.onFileClick}
+          onViewImplementation={(migration) =>
+            props.onViewImplementation(migration)
+          }
         />
       )}
       <div className="sticky bottom-0 flex justify-end gap-2 bg-white py-4 dark:bg-slate-900">

diff --git a/graph/migrate/src/lib/migration-card.tsx b/graph/migrate/src/lib/migration-card.tsx
@@ -9,6 +9,7 @@ import type { MigrationsJsonMetadata } from 'nx/src/command-line/migrate/migrate
 import {
   ArrowPathIcon,
   CheckCircleIcon,
+  CodeBracketIcon,
   ExclamationCircleIcon,
   PlayIcon,
 } from '@heroicons/react/24/outline';
@@ -22,6 +23,7 @@ export function MigrationCard({
   onSelect,
   onRunMigration,
   onFileClick,
+  onViewImplementation,
   forceIsRunning,
 }: {
   migration: MigrationDetailsWithId;
@@ -30,6 +32,7 @@ export function MigrationCard({
   onSelect?: (isSelected: boolean) => void;
   onRunMigration?: () => void;
   onFileClick: (file: Omit<FileChange, 'content'>) => void;
+  onViewImplementation: () => void;
   forceIsRunning?: boolean;
 }) {
   const migrationResult = nxConsoleMetadata.completedMigrations?.[migration.id];
@@ -102,7 +105,7 @@ export function MigrationCard({
                 />
               ) : null}
             </div>
-            <span className={`text-sm`}>{migration.description}</span>
+            <span className="text-sm">{migration.description}</span>
             <div className="flex gap-2">
               {migration.package && (
                 <Pill
@@ -114,6 +117,13 @@ export function MigrationCard({
                 text={migration.version}
                 color={succeeded ? 'green' : failed ? 'red' : 'grey'}
               />
+              <span
+                onClick={() => onViewImplementation()}
+                className="inline-flex cursor-pointer items-center gap-1 rounded-md border border-slate-300 bg-white px-2 text-sm"
+              >
+                <CodeBracketIcon className="h-4 w-4" />
+                View Source
+              </span>
             </div>
           </div>
         </div>

diff --git a/graph/migrate/src/lib/migration-list.tsx b/graph/migrate/src/lib/migration-list.tsx
@@ -16,6 +16,7 @@ export function MigrationList(props: {
   onRunMigration: (migration: MigrationDetailsWithId) => void;
   onRunMany: (migrations: MigrationDetailsWithId[]) => void;
   onFileClick: (file: Omit<FileChange, 'content'>) => void;
+  onViewImplementation: (migration: MigrationDetailsWithId) => void;
 }) {
   const [selectedMigrations, setSelectedMigrations] = useState<
     Record<string, boolean>
@@ -54,11 +55,6 @@ export function MigrationList(props: {
 
   const handleHeaderCheckboxClick = () => {
     const newSelectedState = !anySelected;
-    console.log('header checkbox clicked', newSelectedState);
-    console.log('selectedMigrations', selectedMigrations);
-    console.log('allSelected', allSelected);
-    console.log('anySelected', anySelected);
-    console.log('numberSelected', numberSelected);
     setSelectedMigrations(
       Object.keys(selectedMigrations).reduce((acc, migrationId) => {
         acc[migrationId] = newSelectedState;
@@ -146,6 +142,9 @@ export function MigrationList(props: {
               })
             }
             onRunMigration={() => props.onRunMigration(migration)}
+            onViewImplementation={() => {
+              props.onViewImplementation(migration);
+            }}
             onFileClick={(file) => {
               props.onFileClick(file);
             }}

diff --git a/packages/nx/src/command-line/migrate/migrate-ui-api.ts b/packages/nx/src/command-line/migrate/migrate-ui-api.ts
@@ -3,7 +3,11 @@ import { existsSync, readFileSync, rmSync, writeFileSync } from 'fs';
 import { join, resolve } from 'path';
 import { MigrationDetailsWithId } from '../../config/misc-interfaces';
 import { FileChange } from '../../generators/tree';
-import { nxCliPath } from './migrate';
+import {
+  getImplementationPath as getMigrationImplementationPath,
+  nxCliPath,
+  readMigrationCollection,
+} from './migrate';
 
 export type MigrationsJsonMetadata = {
   completedMigrations?: Record<
@@ -188,6 +192,24 @@ export async function runSingleMigration(
   }
 }
 
+export async function getImplementationPath(
+  workspacePath: string,
+  migration: MigrationDetailsWithId
+) {
+  const { collection, collectionPath } = readMigrationCollection(
+    migration.package,
+    workspacePath
+  );
+
+  const { path } = getMigrationImplementationPath(
+    collection,
+    collectionPath,
+    migration.name
+  );
+
+  return path;
+}
+
 export function modifyMigrationsJsonMetadata(
   workspacePath: string,
   modify: (

diff --git a/packages/nx/src/command-line/migrate/migrate.ts b/packages/nx/src/command-line/migrate/migrate.ts
@@ -1754,7 +1754,7 @@ export function runMigration() {
   }
 }
 
-function readMigrationCollection(packageName: string, root: string) {
+export function readMigrationCollection(packageName: string, root: string) {
   const collectionPath = readPackageMigrationConfig(
     packageName,
     root
@@ -1767,7 +1767,7 @@ function readMigrationCollection(packageName: string, root: string) {
   };
 }
 
-function getImplementationPath(
+export function getImplementationPath(
   collection: MigrationsJson,
   collectionPath: string,
   name: string

diff --git a/packages/nx/src/config/misc-interfaces.ts b/packages/nx/src/config/misc-interfaces.ts
@@ -83,6 +83,7 @@ export interface GeneratedMigrationDetails {
   version: string;
   package: string;
   description: string;
+  implementation: string;
 }
 
 export interface MigrationsJson {