Browse Source

docs: Update admin ui docs with deprecation notices

Michael Bromley 3 months ago
parent
commit
ab79e3ad5d

+ 1 - 1
docs/docs/guides/extending-the-admin-ui/getting-started/index.md

@@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem';
 The Angular-based Admin UI has been replaced by the new [React Admin Dashboard](/guides/extending-the-dashboard/getting-started/). The Angular Admin UI will not be maintained after **July 2026**. 
 The Angular-based Admin UI has been replaced by the new [React Admin Dashboard](/guides/extending-the-dashboard/getting-started/). The Angular Admin UI will not be maintained after **July 2026**. 
 Until then, we will continue patching critical bugs and security issues. Community contributions will always be merged and released.
 Until then, we will continue patching critical bugs and security issues. Community contributions will always be merged and released.
 
 
-**For new projects, we strongly recommend using the [React Admin Dashboard](/guides/extending-the-dashboard/getting-started/) instead.**
+**For new projects, use the [React Admin Dashboard](/guides/extending-the-dashboard/getting-started/) instead.**
 
 
 If you want to use the Admin UI and the Dashboard together please change the [compatibilityMode](/reference/core-plugins/admin-ui-plugin/admin-ui-plugin-options#compatibilitymode) to true.
 If you want to use the Admin UI and the Dashboard together please change the [compatibilityMode](/reference/core-plugins/admin-ui-plugin/admin-ui-plugin-options#compatibilitymode) to true.
 :::
 :::

+ 23 - 2
docs/docs/guides/extending-the-dashboard/migration/index.md

@@ -8,6 +8,26 @@ sidebar_position: 1
 If you have existing extensions to the legacy Angular-based Admin UI, you will want to migrate to the new Dashboard to enjoy
 If you have existing extensions to the legacy Angular-based Admin UI, you will want to migrate to the new Dashboard to enjoy
 an improved developer experience, many more customization options, and ongoing support from the Vendure team.
 an improved developer experience, many more customization options, and ongoing support from the Vendure team.
 
 
+:::warning
+The Angular Admin UI will not be maintained after **July 2026**. Until then, we will continue patching critical bugs and security issues. 
+Community contributions will always be merged and released.
+:::
+
+## Running In Parallel
+
+A recommended approach to migrating is to run both the Admin UI _and_ the new Dashboard in parallel. This allows you to start building
+new features right away with the new Dashboard while maintaining access to existing features that have not yet been migrated.
+
+To do so, follow the instructions to [set up the Dashboard](/guides/extending-the-dashboard/getting-started/#installation--setup),
+and then make sure you set the [AdminUiPlugin compatibilityMode](/reference/core-plugins/admin-ui-plugin/admin-ui-plugin-options#compatibilitymode) option to `true`:
+
+```ts
+AdminUiPlugin.init({
+    // ... existing config
+    compatibilityMode: true,
+}),
+```
+
 ## AI-Assisted Migration
 ## AI-Assisted Migration
 
 
 We highly recommend using AI tools such as Claude Code, Codex etc to assist with migrations from the legacy Angular-based UI extensions
 We highly recommend using AI tools such as Claude Code, Codex etc to assist with migrations from the legacy Angular-based UI extensions
@@ -15,7 +35,7 @@ to the new React-based Dashboard.
 
 
 :::info
 :::info
 The results of AI-assisted migration are heavily dependent on the model that you use. We tested with
 The results of AI-assisted migration are heavily dependent on the model that you use. We tested with
-Claude Code using Sonnet 4.5, and had good results
+Claude Code using Sonnet 4.5 & Codex using gpt-5-codex
 :::
 :::
 
 
 In our testing, we were able to perform complete migrations quickly using the following approach:
 In our testing, we were able to perform complete migrations quickly using the following approach:
@@ -38,7 +58,7 @@ to use the new dashboard.
 
 
 Then paste the following prompt in full:
 Then paste the following prompt in full:
 
 
-<div style={{ width: '100%', height: '500px', overflow: 'auto' }}>
+<div style={{ width: '100%', height: '500px', overflow: 'auto', marginBottom: '20px' }}>
 
 
 <!-- Note: the following code block should not be edited. It is auto-generated from the files in the 
 <!-- Note: the following code block should not be edited. It is auto-generated from the files in the 
      `.claude/skills/vendure-dashboard-migration` dir, by running the npm script `generate-migration-prompt` from
      `.claude/skills/vendure-dashboard-migration` dir, by running the npm script `generate-migration-prompt` from
@@ -1543,6 +1563,7 @@ defineDashboardExtension({
 :::tip
 :::tip
 The full prompt is quite large, so it can make sense to first clear the current LLM context,
 The full prompt is quite large, so it can make sense to first clear the current LLM context,
 e.g. with `/clear` in Claude Code or `/new` in Codex CLI
 e.g. with `/clear` in Claude Code or `/new` in Codex CLI
+:::
 
 
 ### Claude Skills
 ### Claude Skills
 
 

+ 7 - 1
docs/docs/reference/core-plugins/admin-ui-plugin/index.md

@@ -11,7 +11,13 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 
 ## AdminUiPlugin
 ## AdminUiPlugin
 
 
-<GenerationInfo sourceFile="packages/admin-ui-plugin/src/plugin.ts" sourceLine="139" packageName="@vendure/admin-ui-plugin" />
+<GenerationInfo sourceFile="packages/admin-ui-plugin/src/plugin.ts" sourceLine="146" packageName="@vendure/admin-ui-plugin" />
+
+:::warning Deprecated
+From Vendure v3.5.0, the Angular-based Admin UI has been replaced by the new [React Admin Dashboard](/guides/extending-the-dashboard/getting-started/).
+The Angular Admin UI will not be maintained after **July 2026**. Until then, we will continue patching critical bugs and security issues.
+Community contributions will always be merged and released.
+:::
 
 
 This plugin starts a static server for the Admin UI app, and proxies it via the `/admin/` path of the main Vendure server.
 This plugin starts a static server for the Admin UI app, and proxies it via the `/admin/` path of the main Vendure server.
 
 

+ 8 - 2
docs/docs/reference/index.mdx

@@ -27,6 +27,12 @@ These are the TypeScript APIs for the core Vendure plugins.
 
 
 These are the GraphQL APIs you will use to build your storefront (Shop API) or admin integrations (Admin API).
 These are the GraphQL APIs you will use to build your storefront (Shop API) or admin integrations (Admin API).
 
 
-### Admin UI API
+### Dashboard API
 
 
-These are the Angular components and services you can use when building Admin UI extensions.
+These are the React components & hooks you can use when building Dashboard extensions.
+Also see the [Storybook component library](https://storybook.vendure.io) for interactive examples.
+
+### Admin UI API (Deprecated)
+
+These are the Angular components and services you can use when building Admin UI extensions with the deprecated
+Admin UI.

+ 14 - 7
docs/sidebars.js

@@ -34,6 +34,8 @@ const icon = {
     clockFiles: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-clock-icon lucide-file-clock"><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 22h2a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3"/><path d="M8 14v2.2l1.6 1"/><circle cx="8" cy="16" r="6"/></svg>`,
     clockFiles: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-clock-icon lucide-file-clock"><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 22h2a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3"/><path d="M8 14v2.2l1.6 1"/><circle cx="8" cy="16" r="6"/></svg>`,
 };
 };
 
 
+const htmlSeparator = '<hr style="margin: 0; background-color: rgba(150, 150, 150, 0.2);" />';
+
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
 const sidebars = {
     // By default, Docusaurus generates a sidebar from the docs folder structure
     // By default, Docusaurus generates a sidebar from the docs folder structure
@@ -234,7 +236,7 @@ const sidebars = {
         },
         },
         {
         {
             type: 'html',
             type: 'html',
-            value: '<hr style="margin: 0; background-color: rgba(150, 150, 150, 0.2);" />', // The HTML to be rendered
+            value: htmlSeparator,
             defaultStyle: true, // Use the default menu item styling
             defaultStyle: true, // Use the default menu item styling
         },
         },
         {
         {
@@ -411,18 +413,23 @@ const sidebars = {
         },
         },
         {
         {
             type: 'category',
             type: 'category',
-            label: 'Admin UI API',
-            items: [{ type: 'autogenerated', dirName: 'reference/admin-ui-api' }],
+            label: 'Dashboard API',
+            items: [{ type: 'autogenerated', dirName: 'reference/dashboard' }],
             customProps: {
             customProps: {
-                icon: icon.computer,
+                icon: icon.reactLogo,
             },
             },
         },
         },
+        {
+            type: 'html',
+            value: htmlSeparator,
+            defaultStyle: true, // Use the default menu item styling
+        },
         {
         {
             type: 'category',
             type: 'category',
-            label: 'Dashboard API',
-            items: [{ type: 'autogenerated', dirName: 'reference/dashboard' }],
+            label: 'Admin UI API',
+            items: [{ type: 'autogenerated', dirName: 'reference/admin-ui-api' }],
             customProps: {
             customProps: {
-                icon: icon.reactLogo,
+                icon: icon.computer,
             },
             },
         },
         },
     ],
     ],

+ 7 - 0
packages/admin-ui-plugin/src/plugin.ts

@@ -90,6 +90,13 @@ export interface AdminUiPluginOptions {
 
 
 /**
 /**
  * @description
  * @description
+ *
+ * :::warning Deprecated
+ * From Vendure v3.5.0, the Angular-based Admin UI has been replaced by the new [React Admin Dashboard](/guides/extending-the-dashboard/getting-started/).
+ * The Angular Admin UI will not be maintained after **July 2026**. Until then, we will continue patching critical bugs and security issues.
+ * Community contributions will always be merged and released.
+ * :::
+ *
  * This plugin starts a static server for the Admin UI app, and proxies it via the `/admin/` path of the main Vendure server.
  * This plugin starts a static server for the Admin UI app, and proxies it via the `/admin/` path of the main Vendure server.
  *
  *
  * The Admin UI allows you to administer all aspects of your store, from inventory management to order tracking. It is the tool used by
  * The Admin UI allows you to administer all aspects of your store, from inventory management to order tracking. It is the tool used by