Skip to content

Commit

Permalink
feat(ui-devkit): Add prefix option to route config to allow overrides
Browse files Browse the repository at this point in the history
Relates to #2705. This option allows you to define custom routes which will override
the built-in routes in the Admin UI.
  • Loading branch information
michaelbromley committed Mar 12, 2024
1 parent 8b936a2 commit babe4f4
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 2 deletions.
5 changes: 4 additions & 1 deletion packages/ui-devkit/scaffold/src/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ export const routes: Route[] = [
breadcrumb: _('breadcrumb.dashboard'),
},
children: [
// Defining the extension routes before the built-in routes allows
// the extension routes to take precedence over the built-in routes, enabling
// the extensions to override built-in functionality.
...extensionRoutes,
{
path: '',
pathMatch: 'full',
Expand Down Expand Up @@ -43,7 +47,6 @@ export const routes: Route[] = [
path: 'system',
loadChildren: () => import('@vendure/admin-ui/system').then(m => m.SystemModule),
},
...extensionRoutes,
],
},
];
3 changes: 2 additions & 1 deletion packages/ui-devkit/src/compiler/scaffold.ts
Original file line number Diff line number Diff line change
Expand Up @@ -183,8 +183,9 @@ function generateLazyExtensionRoutes(extensions: AdminUiExtensionWithId[]): stri
}
}
for (const route of extension.routes ?? []) {
const prefix = route.prefix === '' ? '' : `${route.prefix ?? 'extensions'}/`;
routes.push(` {
path: 'extensions/${route.route}',
path: '${prefix}${route.route}',
loadChildren: () => import('./extensions/${extension.id}/${path.basename(route.filePath, '.ts')}'),
}`);
}
Expand Down
20 changes: 20 additions & 0 deletions packages/ui-devkit/src/compiler/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -136,8 +136,28 @@ export interface AdminUiExtension
* relative to the `extensionPath` which exports an array of Angular route definitions.
*/
routes?: Array<{
/**
* @description
* The name of the route. This will be used as the path in the URL.
*/
route: string;
/**
* @description
* The path to the file which exports an array of Angular route definitions.
*/
filePath: string;
/**
* @description
* All extensions will be mounted under the `/extensions/` route. This option allows you to specify a
* custom prefix rather than `/extensions/`. For example, setting this to `custom` would cause the extension
* to be mounted at `/custom/<route>` instead.
*
* A common use case for this is to mount the extension at the root of the Admin UI, by setting this to an empty string.
* This is useful when the extension is intended to replace the default Admin UI, rather than extend it.
*
* @since 2.2.0
*/
prefix?: string;
}>;

/**
Expand Down

0 comments on commit babe4f4

Please sign in to comment.