replace contextMenuItemComponentDataRef with coreExtensionData.reactElement

Signed-off-by: Mark Dunphy <markd@spotify.com>

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: {};

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<ContextMenuItemComponent>().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<ContextMenuItemComponent> => {
-      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({
           </MenuItem>
         );
       };
+
+      return <Component />;
     };
 
-    yield contextMenuItemComponentDataRef(
-      ExtensionBoundary.lazyComponent(node, loader),
-    );
+    yield coreExtensionData.reactElement(ExtensionBoundary.lazy(node, loader));
   },
 });

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';

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<JSX_2.Element, 'core.reactElement', {}>,
           {
             singleton: false;
             optional: false;

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

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<

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) {
             </>
           ) : (
             <EntityContextMenuProvider onMenuClose={onClose}>
-              {contextMenuItems.map((ContextMenuItem, idx) => (
-                <ContextMenuItem key={`context-menu-item-${idx}`} />
-              ))}
+              {contextMenuItems}
             </EntityContextMenuProvider>
           )}
         </MenuList>