diff --git a/.changeset/tricky-buses-lead.md b/.changeset/tricky-buses-lead.md new file mode 100644 index 0000000000..f2bc8ec5dc --- /dev/null +++ b/.changeset/tricky-buses-lead.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Auto-focus the first menu item in `EntityContextMenu`, and do not render a divider if an empty array is passed to `UNSTABLE_extraContextMenuItems`. diff --git a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx index 640bb75e49..2d9c392322 100644 --- a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx @@ -103,22 +103,58 @@ export function EntityContextMenu(props: EntityContextMenuProps) { } }, [copyState, alertApi, t]); - const extraItems = UNSTABLE_extraContextMenuItems && [ - ...UNSTABLE_extraContextMenuItems.map(item => ( - { - onClose(); - item.onClick(); - }} - > - - - - - - )), - , + const extraItems = UNSTABLE_extraContextMenuItems?.length + ? [ + ...UNSTABLE_extraContextMenuItems.map(item => ( + { + onClose(); + item.onClick(); + }} + > + + + + + + )), + , + ] + : null; + + const defaultMenuItems = [ + , + { + onClose(); + onInspectEntity(); + }} + key="inspect-entity" + > + + + + + , + { + onClose(); + copyToClipboard(window.location.toString()); + }} + key="copy-url" + > + + + + + , ]; return ( @@ -152,40 +188,7 @@ export function EntityContextMenu(props: EntityContextMenuProps) { {extraItems} {contextMenuItems === undefined ? ( - <> - - { - onClose(); - onInspectEntity(); - }} - > - - - - - - { - onClose(); - copyToClipboard(window.location.toString()); - }} - > - - - - - - + defaultMenuItems ) : ( {contextMenuItems} diff --git a/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.tsx b/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.tsx index dd41d9272d..cdf974a75b 100644 --- a/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.tsx @@ -20,6 +20,7 @@ import MenuItem from '@material-ui/core/MenuItem'; import CancelIcon from '@material-ui/icons/Cancel'; import { catalogTranslationRef } from '../../alpha/translation'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; +import { forwardRef } from 'react'; type VisibleType = 'visible' | 'hidden' | 'disable'; @@ -34,7 +35,11 @@ interface UnregisterEntityProps { onClose: () => void; } -export function UnregisterEntity(props: UnregisterEntityProps) { +// TODO: When Backstage supports only React 19+, remove the forwardRef +export const UnregisterEntity = forwardRef< + HTMLLIElement, + UnregisterEntityProps +>((props, ref) => { const { unregisterEntityOptions, isUnregisterAllowed, @@ -53,16 +58,16 @@ export function UnregisterEntity(props: UnregisterEntityProps) { : unregisterEntityOptions?.disableUnregister === 'disable')) ?? false; - let unregisterButton = <>; - if (unregisterEntityOptions?.disableUnregister !== 'hidden') { - unregisterButton = ( + return ( { onClose(); onUnregisterEntity(); }} disabled={isDisabled} + {...props} > @@ -72,5 +77,5 @@ export function UnregisterEntity(props: UnregisterEntityProps) { ); } - return <>{unregisterButton}; -} + return null; +});