paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 41 Packages Projects Releases Wiki Activity

Merge pull request #20535 from backstage/mob/external-routes

Browse Source 
frontend-*-api: add support for route bindings
This commit is contained in:
Patrik Oldsberg
2023-10-11 19:59:50 +02:00
committed by GitHub
parent 5a52a8eb48 45193226aa
commit 1fb652ffb5
17 changed files with 130 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/many-impalas-wait.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/frontend-plugin-api': patch
---
Plugins can now be assigned `routes` and `externalRoutes` when created.
.changeset/orange-cycles-wait.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/frontend-app-api': patch
---
Added the `bindRoutes` option to `createApp`.
packages/app-next-example-plugin/api-report.md
+3 -1
View File
@@ -3,11 +3,13 @@
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { AnyExternalRoutes } from '@backstage/core-plugin-api';
import { AnyRoutes } from '@backstage/core-plugin-api';
import { BackstagePlugin } from '@backstage/frontend-plugin-api';
import { default as React_2 } from 'react';
// @public (undocumented)
const examplePlugin: BackstagePlugin;
const examplePlugin: BackstagePlugin<AnyRoutes, AnyExternalRoutes>;
export default examplePlugin;
// @public (undocumented)
packages/app-next/src/App.tsx
+3 -8
View File
@@ -72,14 +72,9 @@ const app = createApp({
extensions: [entityPageExtension],
}),
],
// bindRoutes({ bind }) {
// bind(catalogPlugin.externalRoutes, {
// createComponent: scaffolderPlugin.routes.root,
// });
// bind(scaffolderPlugin.externalRoutes, {
// registerComponent: catalogImportPlugin.routes.importPage,
// });
// },
bindRoutes({ bind }) {
bind(pagesPlugin.externalRoutes, { pageX: pagesPlugin.routes.pageX });
},
});
// const legacyApp = createLegacyApp({ plugins: [legacyGraphiqlPlugin] });
packages/app-next/src/examples/pagesPlugin.tsx
+37 -2
View File
@@ -20,11 +20,17 @@ import {
createPageExtension,
createPlugin,
} from '@backstage/frontend-plugin-api';
import { useRouteRef, createRouteRef } from '@backstage/core-plugin-api';
import {
useRouteRef,
createRouteRef,
createExternalRouteRef,
} from '@backstage/core-plugin-api';
import { Route, Routes } from 'react-router-dom';
const indexRouteRef = createRouteRef({ id: 'index' });
const page1RouteRef = createRouteRef({ id: 'page1' });
export const externalPageXRouteRef = createExternalRouteRef({ id: 'pageX' });
export const pageXRouteRef = createRouteRef({ id: 'pageX' });
// const page2RouteRef = createSubRouteRef({
// id: 'page2',
// parent: page1RouteRef,
@@ -67,6 +73,7 @@ const Page1 = createPageExtension({
loader: async () => {
const Component = () => {
const indexLink = useRouteRef(indexRouteRef);
const xLink = useRouteRef(externalPageXRouteRef);
// const page2Link = useRouteRef(page2RouteRef);
return (
@@ -75,6 +82,7 @@ const Page1 = createPageExtension({
<Link to={indexLink()}>Go back</Link>
<Link to="./page2">Page 2</Link>
{/* <Link to={page2Link()}>Page 2</Link> */}
<Link to={xLink()}>Page X</Link>
<div>
Sub-page content:
@@ -92,6 +100,26 @@ const Page1 = createPageExtension({
},
});
const ExternalPage = createPageExtension({
id: 'pageX',
defaultPath: '/pageX',
routeRef: pageXRouteRef,
loader: async () => {
const Component = () => {
const indexLink = useRouteRef(indexRouteRef);
// const pageXLink = useRouteRef(pageXRouteRef);
return (
<div>
<h1>This is page X</h1>
<Link to={indexLink()}>Go back</Link>
</div>
);
};
return <Component />;
},
});
export const pagesPlugin = createPlugin({
id: 'pages',
// routes: {
@@ -101,5 +129,12 @@ export const pagesPlugin = createPlugin({
// // OR
// // 'page1'
// },
extensions: [IndexPage, Page1],
routes: {
page1: page1RouteRef,
pageX: pageXRouteRef,
},
externalRoutes: {
pageX: externalPageXRouteRef,
},
extensions: [IndexPage, Page1, ExternalPage],
});
packages/frontend-app-api/api-report.md
+2
View File
@@ -3,6 +3,7 @@
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { AppRouteBinder } from '@backstage/core-app-api';
import { BackstagePlugin } from '@backstage/frontend-plugin-api';
import { Config } from '@backstage/config';
import { ConfigApi } from '@backstage/core-plugin-api';
@@ -14,6 +15,7 @@ import { JSX as JSX_2 } from 'react';
export function createApp(options: {
features?: (BackstagePlugin | ExtensionOverrides)[];
configLoader?: () => Promise<ConfigApi>;
bindRoutes?(context: { bind: AppRouteBinder }): void;
featureLoader?: (ctx: {
config: ConfigApi;
}) => Promise<(BackstagePlugin | ExtensionOverrides)[]>;
packages/frontend-app-api/src/wiring/createApp.tsx
+5 -1
View File
@@ -57,6 +57,7 @@ import {
ApiFactoryRegistry,
ApiProvider,
ApiResolver,
AppRouteBinder,
AppThemeSelector,
} from '@backstage/core-app-api';
@@ -76,6 +77,8 @@ import { overrideBaseUrlConfigs } from '../../../core-app-api/src/app/overrideBa
// eslint-disable-next-line @backstage/no-relative-monorepo-imports
import { RoutingProvider } from '../../../core-app-api/src/routing/RoutingProvider';
// eslint-disable-next-line @backstage/no-relative-monorepo-imports
import { resolveRouteBindings } from '../../../core-app-api/src/app/resolveRouteBindings';
// eslint-disable-next-line @backstage/no-relative-monorepo-imports
import { AppLanguageSelector } from '../../../core-app-api/src/apis/implementations/AppLanguageApi/AppLanguageSelector';
// eslint-disable-next-line @backstage/no-relative-monorepo-imports
import { I18nextTranslationApi } from '../../../core-app-api/src/apis/implementations/TranslationApi/I18nextTranslationApi';
@@ -269,6 +272,7 @@ export function createInstances(options: {
export function createApp(options: {
features?: (BackstagePlugin | ExtensionOverrides)[];
configLoader?: () => Promise<ConfigApi>;
bindRoutes?(context: { bind: AppRouteBinder }): void;
featureLoader?: (ctx: {
config: ConfigApi;
}) => Promise<(BackstagePlugin | ExtensionOverrides)[]>;
@@ -309,7 +313,7 @@ export function createApp(options: {
<AppThemeProvider>
<RoutingProvider
{...extractRouteInfoFromInstanceTree(coreInstance)}
routeBindings={new Map(/* TODO */)}
routeBindings={resolveRouteBindings(options.bindRoutes)}
>
{/* TODO: set base path using the logic from AppRouter */}
<BrowserRouter>
packages/frontend-plugin-api/api-report.md
+24 -3
View File
@@ -7,6 +7,8 @@
import { AnyApiFactory } from '@backstage/core-plugin-api';
import { AnyApiRef } from '@backstage/core-plugin-api';
import { AnyExternalRoutes } from '@backstage/core-plugin-api';
import { AnyRoutes } from '@backstage/core-plugin-api';
import { AppTheme } from '@backstage/core-plugin-api';
import { IconComponent } from '@backstage/core-plugin-api';
import { JsonObject } from '@backstage/types';
@@ -40,13 +42,20 @@ export type AnyExtensionInputMap = {
};
// @public (undocumented)
export interface BackstagePlugin {
export interface BackstagePlugin<
Routes extends AnyRoutes = AnyRoutes,
ExternalRoutes extends AnyExternalRoutes = AnyExternalRoutes,
> {
// (undocumented)
$$type: '@backstage/BackstagePlugin';
// (undocumented)
extensions: Extension<unknown>[];
// (undocumented)
externalRoutes: ExternalRoutes;
// (undocumented)
id: string;
// (undocumented)
routes: Routes;
}
// @public (undocumented)
@@ -205,7 +214,12 @@ export function createPageExtension<
): Extension<TConfig>;
// @public (undocumented)
export function createPlugin(options: PluginOptions): BackstagePlugin;
export function createPlugin<
Routes extends AnyRoutes = AnyRoutes,
ExternalRoutes extends AnyExternalRoutes = AnyExternalRoutes,
>(
options: PluginOptions<Routes, ExternalRoutes>,
): BackstagePlugin<Routes, ExternalRoutes>;
// @public (undocumented)
export function createSchemaFromZod<TOutput, TInput>(
@@ -338,11 +352,18 @@ export type NavTarget = {
};
// @public (undocumented)
export interface PluginOptions {
export interface PluginOptions<
Routes extends AnyRoutes,
ExternalRoutes extends AnyExternalRoutes,
> {
// (undocumented)
extensions?: Extension<unknown>[];
// (undocumented)
externalRoutes?: ExternalRoutes;
// (undocumented)
id: string;
// (undocumented)
routes?: Routes;
}
// @public (undocumented)
packages/frontend-plugin-api/src/wiring/createPlugin.ts
+22 -4
View File
@@ -14,26 +14,44 @@
* limitations under the License.
*/
import { AnyExternalRoutes, AnyRoutes } from '@backstage/core-plugin-api';
import { Extension } from './createExtension';
/** @public */
export interface PluginOptions {
export interface PluginOptions<
Routes extends AnyRoutes,
ExternalRoutes extends AnyExternalRoutes,
> {
id: string;
routes?: Routes;
externalRoutes?: ExternalRoutes;
extensions?: Extension<unknown>[];
}
/** @public */
export interface BackstagePlugin {
export interface BackstagePlugin<
Routes extends AnyRoutes = AnyRoutes,
ExternalRoutes extends AnyExternalRoutes = AnyExternalRoutes,
> {
$$type: '@backstage/BackstagePlugin';
id: string;
extensions: Extension<unknown>[];
routes: Routes;
externalRoutes: ExternalRoutes;
}
/** @public */
export function createPlugin(options: PluginOptions): BackstagePlugin {
export function createPlugin<
Routes extends AnyRoutes = AnyRoutes,
ExternalRoutes extends AnyExternalRoutes = AnyExternalRoutes,
>(
options: PluginOptions<Routes, ExternalRoutes>,
): BackstagePlugin<Routes, ExternalRoutes> {
return {
...options,
$$type: '@backstage/BackstagePlugin',
routes: options.routes ?? ({} as Routes),
externalRoutes: options.externalRoutes ?? ({} as ExternalRoutes),
extensions: options.extensions ?? [],
$$type: '@backstage/BackstagePlugin',
};
}
plugins/adr/alpha-api-report.md
+3 -1
View File
@@ -3,6 +3,8 @@
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { AnyExternalRoutes } from '@backstage/core-plugin-api';
import { AnyRoutes } from '@backstage/core-plugin-api';
import { BackstagePlugin } from '@backstage/frontend-plugin-api';
import { Extension } from '@backstage/frontend-plugin-api';
import { TranslationRef } from '@backstage/core-plugin-api/alpha';
@@ -24,7 +26,7 @@ export const adrTranslationRef: TranslationRef<
>;
// @alpha (undocumented)
const _default: BackstagePlugin;
const _default: BackstagePlugin<AnyRoutes, AnyExternalRoutes>;
export default _default;
// (No @packageDocumentation comment for this package)
plugins/catalog/alpha-api-report.md
+3 -1
View File
@@ -3,6 +3,8 @@
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { AnyExternalRoutes } from '@backstage/core-plugin-api';
import { AnyRoutes } from '@backstage/core-plugin-api';
import { BackstagePlugin } from '@backstage/frontend-plugin-api';
import { Extension } from '@backstage/frontend-plugin-api';
@@ -15,7 +17,7 @@ export const CatalogSearchResultListItemExtension: Extension<{
}>;
// @alpha (undocumented)
const _default: BackstagePlugin;
const _default: BackstagePlugin<AnyRoutes, AnyExternalRoutes>;
export default _default;
// @alpha (undocumented)
plugins/explore/alpha-api-report.md
+3 -1
View File
@@ -3,11 +3,13 @@
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { AnyExternalRoutes } from '@backstage/core-plugin-api';
import { AnyRoutes } from '@backstage/core-plugin-api';
import { BackstagePlugin } from '@backstage/frontend-plugin-api';
import { Extension } from '@backstage/frontend-plugin-api';
// @alpha (undocumented)
const _default: BackstagePlugin;
const _default: BackstagePlugin<AnyRoutes, AnyExternalRoutes>;
export default _default;
// @alpha (undocumented)
plugins/graphiql/alpha-api-report.md
+3 -1
View File
@@ -3,6 +3,8 @@
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { AnyExternalRoutes } from '@backstage/core-plugin-api';
import { AnyRoutes } from '@backstage/core-plugin-api';
import { BackstagePlugin } from '@backstage/frontend-plugin-api';
import { Extension } from '@backstage/frontend-plugin-api';
import { GraphQLEndpoint } from '@backstage/plugin-graphiql';
@@ -19,7 +21,7 @@ export function createEndpointExtension<TConfig extends {}>(options: {
}): Extension<TConfig>;
// @alpha (undocumented)
const _default: BackstagePlugin;
const _default: BackstagePlugin<AnyRoutes, AnyExternalRoutes>;
export default _default;
// @alpha (undocumented)
plugins/search/alpha-api-report.md
+3 -1
View File
@@ -3,11 +3,13 @@
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { AnyExternalRoutes } from '@backstage/core-plugin-api';
import { AnyRoutes } from '@backstage/core-plugin-api';
import { BackstagePlugin } from '@backstage/frontend-plugin-api';
import { Extension } from '@backstage/frontend-plugin-api';
// @alpha (undocumented)
const _default: BackstagePlugin;
const _default: BackstagePlugin<AnyRoutes, AnyExternalRoutes>;
export default _default;
// @alpha (undocumented)
plugins/tech-radar/alpha-api-report.md
+3 -1
View File
@@ -3,11 +3,13 @@
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { AnyExternalRoutes } from '@backstage/core-plugin-api';
import { AnyRoutes } from '@backstage/core-plugin-api';
import { BackstagePlugin } from '@backstage/frontend-plugin-api';
import { Extension } from '@backstage/frontend-plugin-api';
// @alpha (undocumented)
const _default: BackstagePlugin;
const _default: BackstagePlugin<AnyRoutes, AnyExternalRoutes>;
export default _default;
// @alpha (undocumented)
plugins/techdocs/alpha-api-report.md
+3 -1
View File
@@ -3,11 +3,13 @@
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { AnyExternalRoutes } from '@backstage/core-plugin-api';
import { AnyRoutes } from '@backstage/core-plugin-api';
import { BackstagePlugin } from '@backstage/frontend-plugin-api';
import { Extension } from '@backstage/frontend-plugin-api';
// @alpha (undocumented)
const _default: BackstagePlugin;
const _default: BackstagePlugin<AnyRoutes, AnyExternalRoutes>;
export default _default;
// @alpha (undocumented)
plugins/user-settings/alpha-api-report.md
+3 -1
View File
@@ -3,12 +3,14 @@
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { AnyExternalRoutes } from '@backstage/core-plugin-api';
import { AnyRoutes } from '@backstage/core-plugin-api';
import { BackstagePlugin } from '@backstage/frontend-plugin-api';
import { RouteRef } from '@backstage/core-plugin-api';
import { TranslationRef } from '@backstage/core-plugin-api/alpha';
// @alpha (undocumented)
const _default: BackstagePlugin;
const _default: BackstagePlugin<AnyRoutes, AnyExternalRoutes>;
export default _default;
// @alpha (undocumented)