feat(catalog): migrate DeleteEntityDialog and EntityOrphanWarning to Backstage UI

Migrated DeleteEntityDialog and EntityOrphanWarning components from
Material UI to Backstage UI.

- DeleteEntityDialog now uses BUI Dialog, DialogHeader, DialogFooter,
  and Button components
- EntityOrphanWarning now uses BUI Alert with an action button instead
  of a clickable alert
- Updated translation: removed "Click here to delete" from description
- Added new translation key `deleteEntity.actionButtonTitle`

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.changeset/smart-spoons-scream.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Migrated `DeleteEntityDialog` and `EntityOrphanWarning` components to Backstage UI.
+
+The `deleteEntity.description` translation key no longer includes "Click here to delete" text. A new `deleteEntity.actionButtonTitle` key was added for the action button.

plugins/catalog/package.json

@@ -75,6 +75,7 @@
     "@backstage/plugin-techdocs-common": "workspace:^",
     "@backstage/plugin-techdocs-react": "workspace:^",
     "@backstage/types": "workspace:^",
+    "@backstage/ui": "workspace:^",
     "@backstage/version-bridge": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

plugins/catalog/report-alpha.api.md

@@ -33,10 +33,11 @@ import { TranslationRef } from '@backstage/frontend-plugin-api';
 export const catalogTranslationRef: TranslationRef<
   'catalog',
   {
-    readonly 'deleteEntity.description': 'This entity is not referenced by any location and is therefore not receiving updates. Click here to delete.';
+    readonly 'deleteEntity.description': 'This entity is not referenced by any location and is therefore not receiving updates.';
     readonly 'deleteEntity.cancelButtonTitle': 'Cancel';
     readonly 'deleteEntity.deleteButtonTitle': 'Delete';
     readonly 'deleteEntity.dialogTitle': 'Are you sure you want to delete this entity?';
+    readonly 'deleteEntity.actionButtonTitle': 'Delete entity';
     readonly 'indexPage.title': '{{orgName}} Catalog';
     readonly 'indexPage.createButtonTitle': 'Create';
     readonly 'indexPage.supportButtonContent': 'All your software catalog entities';

plugins/catalog/src/alpha/translation.ts

@@ -126,7 +126,8 @@ export const catalogTranslationRef = createTranslationRef({
       deleteButtonTitle: 'Delete',
       cancelButtonTitle: 'Cancel',
       description:
-        'This entity is not referenced by any location and is therefore not receiving updates. Click here to delete.',
+        'This entity is not referenced by any location and is therefore not receiving updates.',
+      actionButtonTitle: 'Delete entity',
     },
     entityProcessingErrorsDescription: 'The error below originates from',
     entityRelationWarningDescription:

plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.tsx

@@ -16,15 +16,12 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import { useState } from 'react';
 import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 import { assertError } from '@backstage/errors';
 import { catalogTranslationRef } from '../../alpha/translation';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { Button, Dialog, DialogFooter, DialogHeader } from '@backstage/ui';
 
 interface DeleteEntityDialogProps {
   open: boolean;
@@ -55,23 +52,16 @@ export function DeleteEntityDialog(props: DeleteEntityDialogProps) {
   };
 
   return (
-    <Dialog open={open} onClose={onClose}>
-      <DialogTitle id="responsive-dialog-title">
-        {t('deleteEntity.dialogTitle')}
-      </DialogTitle>
-      <DialogActions>
-        <Button
-          variant="contained"
-          color="secondary"
-          disabled={busy}
-          onClick={onDelete}
-        >
-          {t('deleteEntity.deleteButtonTitle')}
-        </Button>
-        <Button onClick={onClose} color="primary">
+    <Dialog isOpen={open} onOpenChange={isOpen => !isOpen && onClose()}>
+      <DialogHeader>{t('deleteEntity.dialogTitle')}</DialogHeader>
+      <DialogFooter>
+        <Button variant="secondary" onPress={onClose}>
           {t('deleteEntity.cancelButtonTitle')}
         </Button>
-      </DialogActions>
+        <Button variant="primary" destructive loading={busy} onPress={onDelete}>
+          {t('deleteEntity.deleteButtonTitle')}
+        </Button>
+      </DialogFooter>
     </Dialog>
   );
 }

plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.test.tsx

@@ -61,8 +61,11 @@ describe('<EntityOrphanWarning />', () => {
     );
     expect(
       screen.getByText(
-        'This entity is not referenced by any location and is therefore not receiving updates. Click here to delete.',
+        'This entity is not referenced by any location and is therefore not receiving updates.',
       ),
     ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Delete entity' }),
+    ).toBeInTheDocument();
   });
 });

plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.tsx

@@ -16,7 +16,6 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import Alert from '@material-ui/lab/Alert';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { DeleteEntityDialog } from './DeleteEntityDialog';
@@ -24,6 +23,7 @@ import { useRouteRef } from '@backstage/core-plugin-api';
 import { rootRouteRef } from '../../routes';
 import { catalogTranslationRef } from '../../alpha/translation';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { Alert, Button } from '@backstage/ui';
 
 /**
  * Returns true if the given entity has the orphan annotation given by the
@@ -55,9 +55,21 @@ export function EntityOrphanWarning() {
 
   return (
     <>
-      <Alert severity="warning" onClick={() => setConfirmationDialogOpen(true)}>
-        {t('deleteEntity.description')}
-      </Alert>
+      <Alert
+        status="warning"
+        icon
+        title={t('deleteEntity.description')}
+        customActions={
+          <Button
+            size="small"
+            variant="tertiary"
+            destructive
+            onPress={() => setConfirmationDialogOpen(true)}
+          >
+            {t('deleteEntity.actionButtonTitle')}
+          </Button>
+        }
+      />
       <DeleteEntityDialog
         open={confirmationDialogOpen}
         entity={entity!}

yarn.lock

@@ -5508,6 +5508,7 @@ __metadata:
     "@backstage/plugin-techdocs-react": "workspace:^"
     "@backstage/test-utils": "workspace:^"
     "@backstage/types": "workspace:^"
+    "@backstage/ui": "workspace:^"
     "@backstage/version-bridge": "workspace:^"
     "@material-ui/core": "npm:^4.12.2"
     "@material-ui/icons": "npm:^4.9.1"