add useIsDisabled hook

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

plugins/catalog-react/src/alpha/blueprints/EntityContextMenuItemBlueprint.tsx

@@ -30,11 +30,13 @@ export type FactoryHrefParams =
       useTitle: () => string;
       icon: React.JSX.Element;
       useHref: () => string;
+      useIsDisabled?: () => boolean;
     }
   | {
       useTitle: () => string;
       icon: React.JSX.Element;
       href: string;
+      useIsDisabled?: () => boolean;
     };
 
 /** @alpha */
@@ -42,6 +44,7 @@ export type FactoryDialogParams = {
   useOnClick: () => React.MouseEventHandler<HTMLLIElement>;
   useTitle: () => string;
   icon: React.JSX.Element;
+  useIsDisabled?: () => boolean;
 };
 
 /** @alpha */
@@ -73,9 +76,11 @@ export const EntityContextMenuItemBlueprint = createExtensionBlueprint({
         return ({ onClose }) => {
           const onClick = params.useOnClick();
           const title = params.useTitle();
+          const disabled = params.useIsDisabled?.() ?? false;
 
           return (
             <MenuItem
+              disabled={disabled}
               onClick={e => {
                 onClose();
                 onClick(e);
@@ -93,9 +98,10 @@ export const EntityContextMenuItemBlueprint = createExtensionBlueprint({
       return () => {
         const href = useHref();
         const title = params.useTitle();
+        const disabled = params.useIsDisabled?.() ?? false;
 
         return (
-          <MenuItem component="a" href={href}>
+          <MenuItem disabled={disabled} component="a" href={href}>
             <ListItemIcon>{params.icon}</ListItemIcon>
             <ListItemText primary={title} />
           </MenuItem>

plugins/catalog/src/alpha/contextMenuItems.tsx

@@ -15,15 +15,28 @@
  */
 
 import React from 'react';
-import { EntityContextMenuItemBlueprint } from '@backstage/plugin-catalog-react/alpha';
+import {
+  EntityContextMenuItemBlueprint,
+  useEntityPermission,
+} from '@backstage/plugin-catalog-react/alpha';
 import FileCopyTwoToneIcon from '@material-ui/icons/FileCopyTwoTone';
 import BugReportIcon from '@material-ui/icons/BugReport';
 import CancelIcon from '@material-ui/icons/Cancel';
 import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
-import { alertApiRef, useApi } from '@backstage/core-plugin-api';
-import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
+import {
+  dialogApiRef,
+  useTranslationRef,
+  type DialogApiDialog,
+} from '@backstage/frontend-plugin-api';
 import { catalogTranslationRef } from './translation';
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import {
+  UnregisterEntityDialog,
+  useEntity,
+} from '@backstage/plugin-catalog-react';
+import { rootRouteRef, unregisterRedirectRouteRef } from '../routes';
+import { catalogEntityDeletePermission } from '@backstage/plugin-catalog-common/alpha';
 
 export const copyEntityUrlContextMenuItem = EntityContextMenuItemBlueprint.make(
   {
@@ -86,10 +99,36 @@ export const unregisterEntityContextMenuItem =
         const { t } = useTranslationRef(catalogTranslationRef);
         return t('entityContextMenu.unregisterMenuTitle');
       },
+      useIsDisabled: () => {
+        const unregisterPermission = useEntityPermission(
+          catalogEntityDeletePermission,
+        );
+
+        return !unregisterPermission.allowed;
+      },
       useOnClick: () => {
-        return () => {
-          // eslint-disable-next-line no-alert
-          window.alert('unregister clicked');
+        const { entity } = useEntity();
+        const dialogApi = useApi(dialogApiRef);
+        const navigate = useNavigate();
+        const catalogRoute = useRouteRef(rootRouteRef);
+        const unregisterRedirectRoute = useRouteRef(unregisterRedirectRouteRef);
+
+        return async () => {
+          dialogApi.showModal(({ dialog }: { dialog: DialogApiDialog }) => (
+            <UnregisterEntityDialog
+              open
+              entity={entity}
+              onClose={() => dialog.close()}
+              onConfirm={() => {
+                dialog.close();
+                navigate(
+                  unregisterRedirectRoute
+                    ? unregisterRedirectRoute()
+                    : catalogRoute(),
+                );
+              }}
+            />
+          ));
         };
       },
     },