diff --git a/plugins/catalog-react/report-alpha.api.md b/plugins/catalog-react/report-alpha.api.md index 6245c7c5c8..e70fc34ed8 100644 --- a/plugins/catalog-react/report-alpha.api.md +++ b/plugins/catalog-react/report-alpha.api.md @@ -88,16 +88,6 @@ export const catalogReactTranslationRef: TranslationRef< } >; -// @alpha (undocumented) -export type ContextMenuItemComponent = (props: {}) => React_2.JSX.Element; - -// @alpha (undocumented) -export const contextMenuItemComponentDataRef: ConfigurableExtensionDataRef< - ContextMenuItemComponent, - 'catalog.contextMenuItemComponent', - {} ->; - // @alpha (undocumented) export function convertLegacyEntityCardExtension( LegacyExtension: ComponentType<{}>, @@ -342,8 +332,8 @@ export const EntityContextMenuItemBlueprint: ExtensionBlueprint<{ name: undefined; params: EntityContextMenuItemParams; output: ConfigurableExtensionDataRef< - ContextMenuItemComponent, - 'catalog.contextMenuItemComponent', + React_2.JSX.Element, + 'core.reactElement', {} >; inputs: {}; diff --git a/plugins/catalog-react/src/alpha/blueprints/EntityContextMenuItemBlueprint.tsx b/plugins/catalog-react/src/alpha/blueprints/EntityContextMenuItemBlueprint.tsx index 82d1028964..43bf4213f9 100644 --- a/plugins/catalog-react/src/alpha/blueprints/EntityContextMenuItemBlueprint.tsx +++ b/plugins/catalog-react/src/alpha/blueprints/EntityContextMenuItemBlueprint.tsx @@ -16,8 +16,8 @@ import React from 'react'; import { + coreExtensionData, createExtensionBlueprint, - createExtensionDataRef, ExtensionBoundary, } from '@backstage/frontend-plugin-api'; import MenuItem from '@material-ui/core/MenuItem'; @@ -44,23 +44,14 @@ export type EntityContextMenuItemParams = { icon: React.JSX.Element; }; -/** @alpha */ -export type ContextMenuItemComponent = (props: {}) => React.JSX.Element; - -/** @alpha */ -export const contextMenuItemComponentDataRef = - createExtensionDataRef().with({ - id: 'catalog.contextMenuItemComponent', - }); - /** @alpha */ export const EntityContextMenuItemBlueprint = createExtensionBlueprint({ kind: 'entity-context-menu-item', attachTo: { id: 'page:catalog/entity', input: 'contextMenuItems' }, - output: [contextMenuItemComponentDataRef], + output: [coreExtensionData.reactElement], *factory(params: EntityContextMenuItemParams, { node }) { - const loader = async (): Promise => { - return () => { + const loader = async () => { + const Component = () => { const { onMenuClose } = useEntityContextMenu(); const { title, ...menuItemProps } = params.useProps(); let handleClick = undefined; @@ -83,10 +74,10 @@ export const EntityContextMenuItemBlueprint = createExtensionBlueprint({ ); }; + + return ; }; - yield contextMenuItemComponentDataRef( - ExtensionBoundary.lazyComponent(node, loader), - ); + yield coreExtensionData.reactElement(ExtensionBoundary.lazy(node, loader)); }, }); diff --git a/plugins/catalog-react/src/alpha/blueprints/index.ts b/plugins/catalog-react/src/alpha/blueprints/index.ts index 65cc45c946..b21522331d 100644 --- a/plugins/catalog-react/src/alpha/blueprints/index.ts +++ b/plugins/catalog-react/src/alpha/blueprints/index.ts @@ -24,9 +24,7 @@ export { EntityHeaderBlueprint } from './EntityHeaderBlueprint'; export { defaultEntityContentGroups } from './extensionData'; export type { EntityCardType } from './extensionData'; export { - contextMenuItemComponentDataRef, EntityContextMenuItemBlueprint, - type ContextMenuItemComponent, type EntityContextMenuItemParams, type UseProps, } from './EntityContextMenuItemBlueprint'; diff --git a/plugins/catalog/report-alpha.api.md b/plugins/catalog/report-alpha.api.md index 98fc27fc2c..54d4187536 100644 --- a/plugins/catalog/report-alpha.api.md +++ b/plugins/catalog/report-alpha.api.md @@ -7,7 +7,6 @@ import { AnyApiFactory } from '@backstage/frontend-plugin-api'; import { AnyExtensionDataRef } from '@backstage/frontend-plugin-api'; import { AnyRouteRefParams } from '@backstage/frontend-plugin-api'; import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api'; -import { ContextMenuItemComponent } from '@backstage/plugin-catalog-react/alpha'; import { defaultEntityContentGroups } from '@backstage/plugin-catalog-react/alpha'; import { Entity } from '@backstage/catalog-model'; import { EntityCardType } from '@backstage/plugin-catalog-react/alpha'; @@ -867,8 +866,8 @@ const _default: FrontendPlugin< config: {}; configInput: {}; output: ConfigurableExtensionDataRef< - ContextMenuItemComponent, - 'catalog.contextMenuItemComponent', + JSX_2.Element, + 'core.reactElement', {} >; inputs: {}; @@ -880,8 +879,8 @@ const _default: FrontendPlugin< config: {}; configInput: {}; output: ConfigurableExtensionDataRef< - ContextMenuItemComponent, - 'catalog.contextMenuItemComponent', + JSX_2.Element, + 'core.reactElement', {} >; inputs: {}; @@ -893,8 +892,8 @@ const _default: FrontendPlugin< config: {}; configInput: {}; output: ConfigurableExtensionDataRef< - ContextMenuItemComponent, - 'catalog.contextMenuItemComponent', + JSX_2.Element, + 'core.reactElement', {} >; inputs: {}; @@ -1046,11 +1045,7 @@ const _default: FrontendPlugin< } >; contextMenuItems: ExtensionInput< - ConfigurableExtensionDataRef< - ContextMenuItemComponent, - 'catalog.contextMenuItemComponent', - {} - >, + ConfigurableExtensionDataRef, { singleton: false; optional: false; diff --git a/plugins/catalog/src/alpha/components/EntityHeader/EntityHeader.tsx b/plugins/catalog/src/alpha/components/EntityHeader/EntityHeader.tsx index d53e8d63f3..75e0baa113 100644 --- a/plugins/catalog/src/alpha/components/EntityHeader/EntityHeader.tsx +++ b/plugins/catalog/src/alpha/components/EntityHeader/EntityHeader.tsx @@ -55,7 +55,6 @@ import { import { EntityLabels } from '../EntityLabels'; import { EntityContextMenu } from '../../../components/EntityContextMenu'; import { rootRouteRef, unregisterRedirectRouteRef } from '../../../routes'; -import { ContextMenuItemComponent } from '@backstage/plugin-catalog-react/alpha'; function headerProps( paramKind: string | undefined, @@ -179,7 +178,7 @@ export function EntityHeader(props: { UNSTABLE_contextMenuOptions?: { disableUnregister: boolean | 'visible' | 'hidden' | 'disable'; }; - contextMenuItems?: ContextMenuItemComponent[]; + contextMenuItems?: React.JSX.Element[]; /** * 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 diff --git a/plugins/catalog/src/alpha/pages.tsx b/plugins/catalog/src/alpha/pages.tsx index 64287dbd77..b39fe510e6 100644 --- a/plugins/catalog/src/alpha/pages.tsx +++ b/plugins/catalog/src/alpha/pages.tsx @@ -31,7 +31,6 @@ import { EntityHeaderBlueprint, EntityContentBlueprint, defaultEntityContentGroups, - contextMenuItemComponentDataRef, } from '@backstage/plugin-catalog-react/alpha'; import { rootRouteRef } from '../routes'; import { useEntityFromUrl } from '../components/CatalogEntityPage/useEntityFromUrl'; @@ -73,7 +72,7 @@ export const catalogEntityPage = PageBlueprint.makeWithOverrides({ EntityContentBlueprint.dataRefs.filterExpression.optional(), EntityContentBlueprint.dataRefs.group.optional(), ]), - contextMenuItems: createExtensionInput([contextMenuItemComponentDataRef]), + contextMenuItems: createExtensionInput([coreExtensionData.reactElement]), }, config: { schema: { @@ -91,7 +90,7 @@ export const catalogEntityPage = PageBlueprint.makeWithOverrides({ const { EntityLayout } = await import('./components/EntityLayout'); const menuItems = inputs.contextMenuItems.map(item => - item.get(contextMenuItemComponentDataRef), + item.get(coreExtensionData.reactElement), ); type Groups = Record< diff --git a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx index a5a4f8d8cc..fd8d76c052 100644 --- a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx @@ -35,7 +35,6 @@ import { useApi, alertApiRef } from '@backstage/core-plugin-api'; import useCopyToClipboard from 'react-use/esm/useCopyToClipboard'; import { catalogTranslationRef } from '../../alpha/translation'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; -import type { ContextMenuItemComponent } from '@backstage/plugin-catalog-react/alpha'; import { EntityContextMenuProvider } from '@backstage/plugin-catalog-react'; /** @public */ @@ -63,7 +62,7 @@ interface ExtraContextMenuItem { interface EntityContextMenuProps { UNSTABLE_extraContextMenuItems?: ExtraContextMenuItem[]; UNSTABLE_contextMenuOptions?: UnregisterEntityOptions; - contextMenuItems?: ContextMenuItemComponent[]; + contextMenuItems?: React.JSX.Element[]; onUnregisterEntity: () => void; onInspectEntity: () => void; } @@ -189,9 +188,7 @@ export function EntityContextMenu(props: EntityContextMenuProps) { ) : ( - {contextMenuItems.map((ContextMenuItem, idx) => ( - - ))} + {contextMenuItems} )}