implement change requests
Signed-off-by: secustor <sebastian@poxhofer.at>
This commit is contained in:
@@ -52,12 +52,12 @@ Import `catalogUnprocessedEntitiesPlugin` in your `App.tsx` and add it to your a
|
||||
|
||||
```typescript
|
||||
import catalogUnprocessedEntitiesPlugin from '@backstage/plugin-catalog-unprocessed-entities';
|
||||
import { unprocessedEntitiesDevToolsRoute } from '@backstage/plugin-catalog-unprocessed-entities/alpha';
|
||||
import { unprocessedEntitiesDevToolsContent } from '@backstage/plugin-catalog-unprocessed-entities/alpha';
|
||||
|
||||
// Optionally add unprocessed entities route to devtools
|
||||
const appFeature = createFrontendModule({
|
||||
pluginId: 'app',
|
||||
extensions: [unprocessedEntitiesDevToolsRoute],
|
||||
extensions: [unprocessedEntitiesDevToolsContent],
|
||||
});
|
||||
|
||||
export const app = createApp({
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import { AnyApiFactory } from '@backstage/frontend-plugin-api';
|
||||
import { AnyRouteRefParams } from '@backstage/frontend-plugin-api';
|
||||
import { ApiFactory } from '@backstage/frontend-plugin-api';
|
||||
import { DevToolsRouteBlueprintParams } from '@backstage/plugin-devtools-react';
|
||||
import { DevToolsContentBlueprintParams } from '@backstage/plugin-devtools-react';
|
||||
import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
|
||||
import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
|
||||
import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
|
||||
@@ -111,9 +111,9 @@ export const unprocessedEntitiesDevToolsContent: ExtensionDefinition<{
|
||||
optional: true;
|
||||
}
|
||||
>
|
||||
| ExtensionDataRef<string, 'devtools.content-title', {}>;
|
||||
| ExtensionDataRef<string, 'core.title', {}>;
|
||||
inputs: {};
|
||||
params: DevToolsRouteBlueprintParams;
|
||||
params: DevToolsContentBlueprintParams;
|
||||
}>;
|
||||
|
||||
// (No @packageDocumentation comment for this package)
|
||||
|
||||
@@ -4,23 +4,15 @@
|
||||
|
||||
```ts
|
||||
import { AnyRouteRefParams } from '@backstage/frontend-plugin-api';
|
||||
import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
|
||||
import { ExtensionBlueprint } from '@backstage/frontend-plugin-api';
|
||||
import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
|
||||
import { JSX as JSX_2 } from 'react';
|
||||
import { RouteRef } from '@backstage/frontend-plugin-api';
|
||||
|
||||
// @public (undocumented)
|
||||
export const contentTitleDataRef: ConfigurableExtensionDataRef<
|
||||
string,
|
||||
'devtools.content-title',
|
||||
{}
|
||||
>;
|
||||
|
||||
// @public
|
||||
export const DevToolsContentBlueprint: ExtensionBlueprint<{
|
||||
kind: 'devtools-content';
|
||||
params: DevToolsRouteBlueprintParams;
|
||||
params: DevToolsContentBlueprintParams;
|
||||
output:
|
||||
| ExtensionDataRef<string, 'core.routing.path', {}>
|
||||
| ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
|
||||
@@ -31,7 +23,7 @@ export const DevToolsContentBlueprint: ExtensionBlueprint<{
|
||||
optional: true;
|
||||
}
|
||||
>
|
||||
| ExtensionDataRef<string, 'devtools.content-title', {}>;
|
||||
| ExtensionDataRef<string, 'core.title', {}>;
|
||||
inputs: {};
|
||||
config: {
|
||||
path: string | undefined;
|
||||
@@ -41,13 +33,11 @@ export const DevToolsContentBlueprint: ExtensionBlueprint<{
|
||||
title?: string | undefined;
|
||||
path?: string | undefined;
|
||||
};
|
||||
dataRefs: {
|
||||
title: ConfigurableExtensionDataRef<string, 'devtools.content-title', {}>;
|
||||
};
|
||||
dataRefs: never;
|
||||
}>;
|
||||
|
||||
// @public
|
||||
export interface DevToolsRouteBlueprintParams {
|
||||
export interface DevToolsContentBlueprintParams {
|
||||
// (undocumented)
|
||||
loader: () => Promise<JSX_2.Element>;
|
||||
// (undocumented)
|
||||
|
||||
@@ -21,13 +21,12 @@ import {
|
||||
RouteRef,
|
||||
} from '@backstage/frontend-plugin-api';
|
||||
import { JSX } from 'react';
|
||||
import { contentTitleDataRef } from './extensionData';
|
||||
|
||||
/**
|
||||
* Parameters for creating a DevTools route extension
|
||||
* @public
|
||||
*/
|
||||
export interface DevToolsRouteBlueprintParams {
|
||||
export interface DevToolsContentBlueprintParams {
|
||||
path: string;
|
||||
title: string;
|
||||
loader: () => Promise<JSX.Element>;
|
||||
@@ -35,11 +34,11 @@ export interface DevToolsRouteBlueprintParams {
|
||||
}
|
||||
|
||||
/**
|
||||
* Extension blueprint for creating DevTools routes
|
||||
* Extension blueprint for creating DevTools content pages (appearing as tabs)
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* const myDevToolsRoute = DevToolsRouteBlueprint.make({
|
||||
* const myDevToolsRoute = DevToolsContentBlueprint.make({
|
||||
* params: {
|
||||
* path: 'my-feature',
|
||||
* title: 'My Feature',
|
||||
@@ -56,18 +55,15 @@ export const DevToolsContentBlueprint = createExtensionBlueprint({
|
||||
coreExtensionData.reactElement,
|
||||
coreExtensionData.routePath,
|
||||
coreExtensionData.routeRef.optional(),
|
||||
contentTitleDataRef,
|
||||
coreExtensionData.title,
|
||||
],
|
||||
dataRefs: {
|
||||
title: contentTitleDataRef,
|
||||
},
|
||||
config: {
|
||||
schema: {
|
||||
path: z => z.string().optional(),
|
||||
title: z => z.string().optional(),
|
||||
},
|
||||
},
|
||||
*factory(params: DevToolsRouteBlueprintParams, { node, config }) {
|
||||
*factory(params: DevToolsContentBlueprintParams, { node, config }) {
|
||||
const path = config.path ?? params.path;
|
||||
const title = config.title ?? params.title;
|
||||
|
||||
@@ -77,7 +73,7 @@ export const DevToolsContentBlueprint = createExtensionBlueprint({
|
||||
|
||||
yield coreExtensionData.routePath(path);
|
||||
|
||||
yield contentTitleDataRef(title);
|
||||
yield coreExtensionData.title(title);
|
||||
|
||||
if (params.routeRef) {
|
||||
yield coreExtensionData.routeRef(params.routeRef);
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
/*
|
||||
* Copyright 2025 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { createExtensionDataRef } from '@backstage/frontend-plugin-api';
|
||||
|
||||
/** @public */
|
||||
export const contentTitleDataRef = createExtensionDataRef<string>().with({
|
||||
id: 'devtools.content-title',
|
||||
});
|
||||
@@ -20,7 +20,6 @@
|
||||
* @packageDocumentation
|
||||
*/
|
||||
export {
|
||||
type DevToolsRouteBlueprintParams,
|
||||
type DevToolsContentBlueprintParams,
|
||||
DevToolsContentBlueprint,
|
||||
} from './devToolsContentBlueprint.tsx';
|
||||
export { contentTitleDataRef } from './extensionData';
|
||||
|
||||
+14
-12
@@ -169,23 +169,25 @@ yarn --cwd plugins/<your-plugin> add @backstage/plugin-devtools-react
|
||||
```
|
||||
|
||||
```tsx
|
||||
import { DevToolsRouteBlueprint } from '@backstage/plugin-devtools-react';
|
||||
import { DevToolsContentBlueprint } from '@backstage/plugin-devtools-react';
|
||||
|
||||
export const unprocessedEntitiesDevToolsRoute = DevToolsRouteBlueprint.make({
|
||||
params: {
|
||||
path: 'unprocessed-entities',
|
||||
title: 'Unprocessed Entities',
|
||||
loader: () =>
|
||||
import('../components/UnprocessedEntities').then(
|
||||
({ UnprocessedEntitiesContent }) =>
|
||||
createElement(UnprocessedEntitiesContent),
|
||||
),
|
||||
export const unprocessedEntitiesDevToolsContent = DevToolsContentBlueprint.make(
|
||||
{
|
||||
params: {
|
||||
path: 'unprocessed-entities',
|
||||
title: 'Unprocessed Entities',
|
||||
loader: () =>
|
||||
import('../components/UnprocessedEntities').then(
|
||||
({ UnprocessedEntitiesContent }) =>
|
||||
createElement(UnprocessedEntitiesContent),
|
||||
),
|
||||
},
|
||||
},
|
||||
});
|
||||
);
|
||||
|
||||
const appFeature = createFrontendModule({
|
||||
pluginId: 'app',
|
||||
extensions: [unprocessedEntitiesDevToolsRoute],
|
||||
extensions: [unprocessedEntitiesDevToolsContent],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@@ -78,6 +78,7 @@ const _default: OverridableFrontendPlugin<
|
||||
>;
|
||||
inputs: {
|
||||
contents: ExtensionInput<
|
||||
| ConfigurableExtensionDataRef<string, 'core.title', {}>
|
||||
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
|
||||
| ConfigurableExtensionDataRef<string, 'core.routing.path', {}>
|
||||
| ConfigurableExtensionDataRef<
|
||||
@@ -86,8 +87,7 @@ const _default: OverridableFrontendPlugin<
|
||||
{
|
||||
optional: true;
|
||||
}
|
||||
>
|
||||
| ConfigurableExtensionDataRef<string, 'devtools.content-title', {}>,
|
||||
>,
|
||||
{
|
||||
singleton: false;
|
||||
optional: true;
|
||||
@@ -99,7 +99,8 @@ const _default: OverridableFrontendPlugin<
|
||||
params: {
|
||||
defaultPath?: [Error: `Use the 'path' param instead`];
|
||||
path: string;
|
||||
loader: () => Promise<JSX.Element>;
|
||||
loader: () => Promise</** @alpha */
|
||||
JSX.Element>;
|
||||
routeRef?: RouteRef;
|
||||
};
|
||||
}>;
|
||||
|
||||
@@ -32,7 +32,6 @@ import {
|
||||
} from '@backstage/core-compat-api';
|
||||
import BuildIcon from '@material-ui/icons/Build';
|
||||
import { rootRouteRef } from '../routes';
|
||||
import { contentTitleDataRef } from '@backstage/plugin-devtools-react';
|
||||
|
||||
/** @alpha */
|
||||
export const devToolsApi = ApiBlueprint.make({
|
||||
@@ -56,7 +55,7 @@ export const devToolsPage = PageBlueprint.makeWithOverrides({
|
||||
coreExtensionData.reactElement,
|
||||
coreExtensionData.routePath,
|
||||
coreExtensionData.routeRef.optional(),
|
||||
contentTitleDataRef,
|
||||
coreExtensionData.title,
|
||||
],
|
||||
{
|
||||
optional: true,
|
||||
@@ -70,7 +69,7 @@ export const devToolsPage = PageBlueprint.makeWithOverrides({
|
||||
loader: () => {
|
||||
const extensions = inputs.contents.map(content => ({
|
||||
path: content.get(coreExtensionData.routePath),
|
||||
title: content.get(contentTitleDataRef),
|
||||
title: content.get(coreExtensionData.title),
|
||||
children: content.get(coreExtensionData.reactElement),
|
||||
}));
|
||||
return import('../components/DevToolsPage').then(m =>
|
||||
|
||||
Reference in New Issue
Block a user