docs(graph): update Migrate UI docs and link from the feature page (#30881)

This PR updates the Migrate UI recipe to match the experience.
Screenshots are added to provide previews of what it looks like prior to
users trying, and also makes the recipe easier to follow.

Future: It would be great to have a short video going over the process
rather than just text and screenshots. This is good enough for first
iteration, and we'll do a follow up on this.

Preview:
https://nx-dev-git-docs-migrate-ui-nrwl.vercel.app/recipes/nx-console/console-migrate-ui
Also updates:
https://nx-dev-git-docs-migrate-ui-nrwl.vercel.app/features/automate-updating-dependencies

docs/generated/manifests/menus.json

@@ -1414,14 +1414,6 @@
                 "children": [],
                 "disableCollapsible": false
               },
-              {
-                "name": "Migrate UI",
-                "path": "/recipes/nx-console/console-migrate-ui",
-                "id": "console-migrate-ui",
-                "isExternal": false,
-                "children": [],
-                "disableCollapsible": false
-              },
               {
                 "name": "Run Command",
                 "path": "/recipes/nx-console/console-run-command",
@@ -1438,6 +1430,14 @@
                 "children": [],
                 "disableCollapsible": false
               },
+              {
+                "name": "Migrate UI",
+                "path": "/recipes/nx-console/console-migrate-ui",
+                "id": "console-migrate-ui",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              },
               {
                 "name": "Troubleshooting",
                 "path": "/recipes/nx-console/console-troubleshooting",
@@ -2796,14 +2796,6 @@
             "children": [],
             "disableCollapsible": false
           },
-          {
-            "name": "Migrate UI",
-            "path": "/recipes/nx-console/console-migrate-ui",
-            "id": "console-migrate-ui",
-            "isExternal": false,
-            "children": [],
-            "disableCollapsible": false
-          },
           {
             "name": "Run Command",
             "path": "/recipes/nx-console/console-run-command",
@@ -2820,6 +2812,14 @@
             "children": [],
             "disableCollapsible": false
           },
+          {
+            "name": "Migrate UI",
+            "path": "/recipes/nx-console/console-migrate-ui",
+            "id": "console-migrate-ui",
+            "isExternal": false,
+            "children": [],
+            "disableCollapsible": false
+          },
           {
             "name": "Troubleshooting",
             "path": "/recipes/nx-console/console-troubleshooting",
@@ -2855,14 +2855,6 @@
         "children": [],
         "disableCollapsible": false
       },
-      {
-        "name": "Migrate UI",
-        "path": "/recipes/nx-console/console-migrate-ui",
-        "id": "console-migrate-ui",
-        "isExternal": false,
-        "children": [],
-        "disableCollapsible": false
-      },
       {
         "name": "Run Command",
         "path": "/recipes/nx-console/console-run-command",
@@ -2879,6 +2871,14 @@
         "children": [],
         "disableCollapsible": false
       },
+      {
+        "name": "Migrate UI",
+        "path": "/recipes/nx-console/console-migrate-ui",
+        "id": "console-migrate-ui",
+        "isExternal": false,
+        "children": [],
+        "disableCollapsible": false
+      },
       {
         "name": "Troubleshoot Nx Console Issues",
         "path": "/recipes/nx-console/console-troubleshooting",

docs/generated/manifests/nx.json

@@ -1937,17 +1937,6 @@
             "path": "/recipes/nx-console/console-generate-command",
             "tags": ["editor-setup"]
           },
-          {
-            "id": "console-migrate-ui",
-            "name": "Migrate UI",
-            "description": "",
-            "mediaImage": "",
-            "file": "shared/recipes/console-migrate-ui",
-            "itemList": [],
-            "isExternal": false,
-            "path": "/recipes/nx-console/console-migrate-ui",
-            "tags": ["editor-setup"]
-          },
           {
             "id": "console-run-command",
             "name": "Run Command",
@@ -1970,6 +1959,17 @@
             "path": "/recipes/nx-console/console-nx-cloud",
             "tags": ["editor-setup"]
           },
+          {
+            "id": "console-migrate-ui",
+            "name": "Migrate UI",
+            "description": "",
+            "mediaImage": "",
+            "file": "shared/recipes/console-migrate-ui",
+            "itemList": [],
+            "isExternal": false,
+            "path": "/recipes/nx-console/console-migrate-ui",
+            "tags": ["editor-setup"]
+          },
           {
             "id": "console-troubleshooting",
             "name": "Troubleshooting",
@@ -3831,17 +3831,6 @@
         "path": "/recipes/nx-console/console-generate-command",
         "tags": ["editor-setup"]
       },
-      {
-        "id": "console-migrate-ui",
-        "name": "Migrate UI",
-        "description": "",
-        "mediaImage": "",
-        "file": "shared/recipes/console-migrate-ui",
-        "itemList": [],
-        "isExternal": false,
-        "path": "/recipes/nx-console/console-migrate-ui",
-        "tags": ["editor-setup"]
-      },
       {
         "id": "console-run-command",
         "name": "Run Command",
@@ -3864,6 +3853,17 @@
         "path": "/recipes/nx-console/console-nx-cloud",
         "tags": ["editor-setup"]
       },
+      {
+        "id": "console-migrate-ui",
+        "name": "Migrate UI",
+        "description": "",
+        "mediaImage": "",
+        "file": "shared/recipes/console-migrate-ui",
+        "itemList": [],
+        "isExternal": false,
+        "path": "/recipes/nx-console/console-migrate-ui",
+        "tags": ["editor-setup"]
+      },
       {
         "id": "console-troubleshooting",
         "name": "Troubleshooting",
@@ -3913,17 +3913,6 @@
     "path": "/recipes/nx-console/console-generate-command",
     "tags": ["editor-setup"]
   },
-  "/recipes/nx-console/console-migrate-ui": {
-    "id": "console-migrate-ui",
-    "name": "Migrate UI",
-    "description": "",
-    "mediaImage": "",
-    "file": "shared/recipes/console-migrate-ui",
-    "itemList": [],
-    "isExternal": false,
-    "path": "/recipes/nx-console/console-migrate-ui",
-    "tags": ["editor-setup"]
-  },
   "/recipes/nx-console/console-run-command": {
     "id": "console-run-command",
     "name": "Run Command",
@@ -3946,6 +3935,17 @@
     "path": "/recipes/nx-console/console-nx-cloud",
     "tags": ["editor-setup"]
   },
+  "/recipes/nx-console/console-migrate-ui": {
+    "id": "console-migrate-ui",
+    "name": "Migrate UI",
+    "description": "",
+    "mediaImage": "",
+    "file": "shared/recipes/console-migrate-ui",
+    "itemList": [],
+    "isExternal": false,
+    "path": "/recipes/nx-console/console-migrate-ui",
+    "tags": ["editor-setup"]
+  },
   "/recipes/nx-console/console-troubleshooting": {
     "id": "console-troubleshooting",
     "name": "Troubleshoot Nx Console Issues",

docs/generated/manifests/tags.json

@@ -28,13 +28,6 @@
       "name": "Generate Command",
       "path": "/recipes/nx-console/console-generate-command"
     },
-    {
-      "description": "",
-      "file": "shared/recipes/console-migrate-ui",
-      "id": "console-migrate-ui",
-      "name": "Migrate UI",
-      "path": "/recipes/nx-console/console-migrate-ui"
-    },
     {
       "description": "",
       "file": "shared/recipes/console-run-command",
@@ -48,6 +41,13 @@
       "id": "console-nx-cloud",
       "name": "Nx Cloud Integration",
       "path": "/recipes/nx-console/console-nx-cloud"
+    },
+    {
+      "description": "",
+      "file": "shared/recipes/console-migrate-ui",
+      "id": "console-migrate-ui",
+      "name": "Migrate UI",
+      "path": "/recipes/nx-console/console-migrate-ui"
     }
   ],
   "run-tasks": [

docs/map.json

@@ -631,12 +631,6 @@
                   "tags": ["editor-setup"],
                   "file": "shared/recipes/console-generate-command"
                 },
-                {
-                  "name": "Migrate UI",
-                  "id": "console-migrate-ui",
-                  "tags": ["editor-setup"],
-                  "file": "shared/recipes/console-migrate-ui"
-                },
                 {
                   "name": "Run Command",
                   "id": "console-run-command",
@@ -649,6 +643,12 @@
                   "tags": ["editor-setup"],
                   "file": "shared/recipes/console-nx-cloud"
                 },
+                {
+                  "name": "Migrate UI",
+                  "id": "console-migrate-ui",
+                  "tags": ["editor-setup"],
+                  "file": "shared/recipes/console-migrate-ui"
+                },
                 {
                   "name": "Troubleshooting",
                   "id": "console-troubleshooting",

docs/shared/features/automate-updating-dependencies.md

@@ -23,6 +23,10 @@ To update your workspace, run:
 npx nx migrate latest
 ```
 
+{% callout type="note" title="Visual migration tool from Nx Console" %}
+Want a more visual and guided way to migrate? Check out the [Migrate UI](/recipes/nx-console/console-migrate-ui) that comes with the [Nx Console extension](/getting-started/editor-setup).
+{% /callout %}
+
 ## How Does It Work?
 
 Nx knows where its configuration files are located and ensures they match the expected format. This automated update process, commonly referred to as "migration," becomes even **more powerful when you leverage [Nx plugins](/nx-api)**. Each plugin can provide migrations for its area of competency.

docs/shared/recipes/console-migrate-ui.md

@@ -1,40 +1,50 @@
 ---
-title: 'Nx Console Migrate UI'
+title: Nx Console Migrate UI
-description: Overview over the Migrate UI feature for guided migrations in Nx Console
+description: Learn how to use the Nx Console Migrate UI to interactively update package dependencies, configuration files, and source code to match new package versions.
 ---
 
 # Nx Console Migrate UI
 
-The Nx Console Migrate UI provides a visual, guided way to execute migrations in your workspace while following Nx best practices. This tool simplifies the process of upgrading your Nx workspace by offering an easy-to-use interface that walks you through each step of the migration process.
+The Nx Console Migrate UI provides a visual, guided way to apply migrations in your Nx workspace. This tool simplifies the process of updating your workspace by offering an easy-to-use interface that walks you through each step of the migration process.
 
-## Accessing the Migrate UI
+## Starting the Migration
 
-The Migrate UI is available on the latest version of Nx Console in VSCode or Cursor if you have enabled the `nxConsole.enableMigrateUi` setting. If enabled, a dedicated `Nx Migrate` view will appear in the sidebar. Unless you're on the latest version of Nx, you'll notice a button prompting you to start the migration.
+The Migrate UI is available for VSCode and Cursor editors. Make sure you have the [Nx Console extension](/getting-started/editor-setup) installed before you continue.
 
-{% callout type="note" %}
+When an update to Nx is available, a badge will appear on the Nx Console icon in your Activity Bar. Bring up the Nx Console view (Hint: type in `> Show Nx Console` in the Command Palette), and you'll see a `Nx Migrate` section in the sidebar. Clicking `Start Migration` starts the migration process.
-Ensure you have stashed or committed all your changes before initiating a migration.
+
+![](/shared/images/nx-console/console-migrate-1-start.avif)
+
+By default, clicking the migration button starts the migration process by upgrading to the recommended Nx version — the latest version of the next major release. This method ensures you upgrade one major version at a time in order to [avoid breakages](recipes/tips-n-tricks/advanced-update#one-major-version-at-a-time-small-steps). To customize the version, click the pencil icon to provide a specific version to update to. You may also provide additional CLI options such as `--to` or `--from`.
+
+![](/shared/images/nx-console/console-migrate-2-customize-version.avif)
+
+{% callout type="note" title="Ensure clean git status" %}
+If you have uncommitted changes, stash or commit them before initiating a migration. Otherwise, the migration button will be disabled.
 {% /callout %}
 
-## Starting a Migration
+Once you start the migration, Nx Console runs the `nx migrate` command to update your dependency versions and generate a `migrations.json` file. You'll be prompted to inspect the changes made to your `package.json` before installing them and proceeding.
 
-By default, clicking the migration button starts the migration process by upgrading to the recommended Nx version — the latest version of the next major release. This method ensures you upgrade one major version at a time in order to [avoid breakages](recipes/tips-n-tricks/advanced-update#one-major-version-at-a-time-small-steps)
+![](/shared/images/nx-console/console-migrate-3-confirm.avif)
-
-{%callout type="note"%}
-If you need more control, a smaller edit button is provided. You can use it to customize the migration process by specifying an exact version and passing custom CLI options like `--to` or `--from`.
-{% /callout %}
-
-Once you start the migration, Nx Console runs the `nx migrate` command to update your dependency versions and generate a `migrations.json` file. You'll be prompted to inspect the changes made to your `package.json` before installing them and proceedig.
 
 ## The Migration Process
 
-After confirming the changes, the Migrate UI opens and guides you step-by-step through each migration action. Simply click on `Run Migrations` and each migration will be executed in order.
+After confirming the `package.json` changes, the Migrate UI opens and guides you step-by-step through each migration action. Each migration will be executed in the order as they appear in `migration.json`. If a migration results in file changes, you will be prompted to review the changes before continuing. You can either `Accept` or `Undo` the migration.
+
+![](/shared/images/nx-console/console-migrate-4-approve.avif)
 
 If a migration step encounters an error, the process pauses so you can inspect the error details.
-You can click through to view the migration source code, giving you the opportunity to patch it for your specific use-case or make necessary adjustments to your repository before rerunning the migration.
-Alternatively, you may choose to skip a problematic migration.
 
-For successful migration steps that modify files, the UI pauses to let you review the changes. You must approve these changes before the migration continues.
+![](/shared/images/nx-console/console-migrate-5-error.avif)
+
+You can click through to view the migration source code, giving you the opportunity to patch it for your specific use-case or make necessary adjustments to your repository before rerunning the migration.
+
+Alternatively, you may choose to skip a problematic migration.
 
 ## Finalizing the Migration
 
-When all migration steps are complete or you don't want to run further migrations, you can finish the process by clicking the Finish button. By default, this will squash all commits created during the migration together, but you can opt into preserving them.
+When all migrations are done, or you don't want to run further migrations, you can finish the process by clicking the Finish button. By default, this will squash all commits created during the migration together, but you can opt into preserving them.
+
+You will be prompted for the git commit message, once you enter it the `migrations.json` file is removed and the migration process is finished.
+
+![](/shared/images/nx-console/console-migrate-6-finish.avif)

docs/shared/reference/sitemap.md

@@ -96,9 +96,9 @@
       - [Telemetry](/recipes/nx-console/console-telemetry)
       - [Project Details View](/recipes/nx-console/console-project-details)
       - [Generate Command](/recipes/nx-console/console-generate-command)
-      - [Migrate UI](/recipes/nx-console/console-migrate-ui)
       - [Run Command](/recipes/nx-console/console-run-command)
       - [Nx Cloud Integration](/recipes/nx-console/console-nx-cloud)
+      - [Migrate UI](/recipes/nx-console/console-migrate-ui)
       - [Troubleshooting](/recipes/nx-console/console-troubleshooting)
     - [React](/recipes/react)
       - [React Native with Nx](/recipes/react/react-native)