diff --git a/plugins/catalog-react/src/alpha/blueprints/EntityContextMenuItemBlueprint.tsx b/plugins/catalog-react/src/alpha/blueprints/EntityContextMenuItemBlueprint.tsx index aeb0d7e3b4..b5c9896696 100644 --- a/plugins/catalog-react/src/alpha/blueprints/EntityContextMenuItemBlueprint.tsx +++ b/plugins/catalog-react/src/alpha/blueprints/EntityContextMenuItemBlueprint.tsx @@ -17,10 +17,8 @@ import React from 'react'; import { createExtensionBlueprint, - ApiHolder, createExtensionDataRef, - dialogApiRef, - useApiHolder, + ExtensionBoundary, } from '@backstage/frontend-plugin-api'; import MenuItem from '@material-ui/core/MenuItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; @@ -69,11 +67,11 @@ export const EntityContextMenuItemBlueprint = createExtensionBlueprint({ kind: 'entity-context-menu-item', attachTo: { id: 'page:catalog/entity', input: 'contextMenuItems' }, output: [contextMenuItemComponentDataRef], - *factory(params: EntityContextMenuItemParams, { apis }) { - const loaderFactory = (): ContextMenuItemComponent => { + *factory(params: EntityContextMenuItemParams, { node }) { + const loader = async (): Promise => { if ('useOnClick' in params) { return ({ onClose }) => { - const onClick = params.useOnClick({ apis }); + const onClick = params.useOnClick(); const title = params.useTitle(); return ( @@ -105,6 +103,8 @@ export const EntityContextMenuItemBlueprint = createExtensionBlueprint({ }; }; - yield contextMenuItemComponentDataRef(loaderFactory()); + yield contextMenuItemComponentDataRef( + ExtensionBoundary.lazyComponent(node, loader), + ); }, }); diff --git a/plugins/catalog/src/alpha/components/EntityHeader/EntityHeader.tsx b/plugins/catalog/src/alpha/components/EntityHeader/EntityHeader.tsx index 7fa6471d3e..d53e8d63f3 100644 --- a/plugins/catalog/src/alpha/components/EntityHeader/EntityHeader.tsx +++ b/plugins/catalog/src/alpha/components/EntityHeader/EntityHeader.tsx @@ -179,7 +179,7 @@ export function EntityHeader(props: { UNSTABLE_contextMenuOptions?: { disableUnregister: boolean | 'visible' | 'hidden' | 'disable'; }; - extraMenuItems?: ContextMenuItemComponent[]; + contextMenuItems?: ContextMenuItemComponent[]; /** * An array of relation types used to determine the parent entities in the hierarchy. * These relations are prioritized in the order provided, allowing for flexible @@ -197,7 +197,7 @@ export function EntityHeader(props: { const { UNSTABLE_extraContextMenuItems, UNSTABLE_contextMenuOptions, - extraMenuItems, + contextMenuItems, parentEntityRelations, title, subtitle, @@ -284,7 +284,7 @@ export function EntityHeader(props: { diff --git a/plugins/catalog/src/alpha/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/alpha/components/EntityLayout/EntityLayout.tsx index 5c92981fa5..750c8567ee 100644 --- a/plugins/catalog/src/alpha/components/EntityLayout/EntityLayout.tsx +++ b/plugins/catalog/src/alpha/components/EntityLayout/EntityLayout.tsx @@ -62,7 +62,7 @@ export interface EntityLayoutProps { UNSTABLE_extraContextMenuItems?: ComponentProps< typeof EntityHeader >['UNSTABLE_extraContextMenuItems']; - extraMenuItems?: ComponentProps['extraMenuItems']; + contextMenuItems?: ComponentProps['contextMenuItems']; children?: ReactNode; header?: JSX.Element; NotFoundComponent?: ReactNode; @@ -100,7 +100,7 @@ export const EntityLayout = (props: EntityLayoutProps) => { const { UNSTABLE_extraContextMenuItems, UNSTABLE_contextMenuOptions, - extraMenuItems, + contextMenuItems, children, header, NotFoundComponent, @@ -147,7 +147,7 @@ export const EntityLayout = (props: EntityLayoutProps) => { parentEntityRelations={parentEntityRelations} UNSTABLE_contextMenuOptions={UNSTABLE_contextMenuOptions} UNSTABLE_extraContextMenuItems={UNSTABLE_extraContextMenuItems} - extraMenuItems={extraMenuItems} + contextMenuItems={contextMenuItems} /> )} diff --git a/plugins/catalog/src/alpha/pages.tsx b/plugins/catalog/src/alpha/pages.tsx index 74ea49f685..64287dbd77 100644 --- a/plugins/catalog/src/alpha/pages.tsx +++ b/plugins/catalog/src/alpha/pages.tsx @@ -101,7 +101,7 @@ export const catalogEntityPage = PageBlueprint.makeWithOverrides({ const header = inputs.header?.get( EntityHeaderBlueprint.dataRefs.element, - ) ?? ; + ) ?? ; let groups = Object.entries(defaultEntityContentGroups).reduce( (rest, group) => { @@ -140,7 +140,7 @@ export const catalogEntityPage = PageBlueprint.makeWithOverrides({ const Component = () => { return ( - + {Object.values(groups).flatMap(({ title, items }) => items.map(output => ( void; onInspectEntity: () => void; } @@ -71,7 +71,7 @@ export function EntityContextMenu(props: EntityContextMenuProps) { const { UNSTABLE_extraContextMenuItems, UNSTABLE_contextMenuOptions, - extraMenuItems, + contextMenuItems, onUnregisterEntity, onInspectEntity, } = props; @@ -148,37 +148,46 @@ export function EntityContextMenu(props: EntityContextMenuProps) { > {extraItems} - {extraMenuItems?.map(ExtraMenuItem => ( - - ))} - - { - onClose(); - onInspectEntity(); - }} - > - - - - - - { - onClose(); - copyToClipboard(window.location.toString()); - }} - > - - - - - + {contextMenuItems === undefined ? ( + <> + + { + onClose(); + onInspectEntity(); + }} + > + + + + + + { + onClose(); + copyToClipboard(window.location.toString()); + }} + > + + + + + + + ) : ( + contextMenuItems.map(ExtraMenuItem => ( + + )) + )} diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx index ce0ed55363..f088a2d320 100644 --- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx +++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx @@ -246,7 +246,6 @@ export const EntityLayout = (props: EntityLayoutProps) => { const { UNSTABLE_extraContextMenuItems, UNSTABLE_contextMenuOptions, - extraMenuItems, children, NotFoundComponent, parentEntityRelations, @@ -362,7 +361,6 @@ export const EntityLayout = (props: EntityLayoutProps) => { setConfirmationDialogOpen(true)} onInspectEntity={() => setSearchParams('inspect')} />