Просмотр исходного кода

docs: Update admin ui docs with deprecation notices

Michael Bromley 2 месяцев назад
Родитель
Сommit
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**. 
 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.
 :::

+ 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
 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
 
 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
 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:
@@ -38,7 +58,7 @@ to use the new dashboard.
 
 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 
      `.claude/skills/vendure-dashboard-migration` dir, by running the npm script `generate-migration-prompt` from
@@ -1543,6 +1563,7 @@ defineDashboardExtension({
 :::tip
 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
+:::
 
 ### 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
 
-<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.
 

+ 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).
 
-### 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>`,
 };
 
+const htmlSeparator = '<hr style="margin: 0; background-color: rgba(150, 150, 150, 0.2);" />';
+
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
     // By default, Docusaurus generates a sidebar from the docs folder structure
@@ -234,7 +236,7 @@ const sidebars = {
         },
         {
             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
         },
         {
@@ -411,18 +413,23 @@ const sidebars = {
         },
         {
             type: 'category',
-            label: 'Admin UI API',
-            items: [{ type: 'autogenerated', dirName: 'reference/admin-ui-api' }],
+            label: 'Dashboard API',
+            items: [{ type: 'autogenerated', dirName: 'reference/dashboard' }],
             customProps: {
-                icon: icon.computer,
+                icon: icon.reactLogo,
             },
         },
+        {
+            type: 'html',
+            value: htmlSeparator,
+            defaultStyle: true, // Use the default menu item styling
+        },
         {
             type: 'category',
-            label: 'Dashboard API',
-            items: [{ type: 'autogenerated', dirName: 'reference/dashboard' }],
+            label: 'Admin UI API',
+            items: [{ type: 'autogenerated', dirName: 'reference/admin-ui-api' }],
             customProps: {
-                icon: icon.reactLogo,
+                icon: icon.computer,
             },
         },
     ],

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

@@ -90,6 +90,13 @@ export interface AdminUiPluginOptions {
 
 /**
  * @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.
  *
  * The Admin UI allows you to administer all aspects of your store, from inventory management to order tracking. It is the tool used by