diff --git a/.changeset/smart-spoons-scream.md b/.changeset/smart-spoons-scream.md new file mode 100644 index 0000000000..5abebc3ec5 --- /dev/null +++ b/.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. diff --git a/plugins/catalog/package.json b/plugins/catalog/package.json index adfa7e15c0..75ecca801c 100644 --- a/plugins/catalog/package.json +++ b/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", diff --git a/plugins/catalog/report-alpha.api.md b/plugins/catalog/report-alpha.api.md index e83089b611..950b7a4383 100644 --- a/plugins/catalog/report-alpha.api.md +++ b/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'; diff --git a/plugins/catalog/src/alpha/translation.ts b/plugins/catalog/src/alpha/translation.ts index 2dc2f2d34e..498104db45 100644 --- a/plugins/catalog/src/alpha/translation.ts +++ b/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: diff --git a/plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.tsx b/plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.tsx index e435ac2c48..2c350aebc5 100644 --- a/plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.tsx +++ b/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 ( - - - {t('deleteEntity.dialogTitle')} - - - - - + + ); } diff --git a/plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.test.tsx b/plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.test.tsx index bcf75ad08b..0b9f5889a0 100644 --- a/plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.test.tsx +++ b/plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.test.tsx @@ -61,8 +61,11 @@ describe('', () => { ); 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(); }); }); diff --git a/plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.tsx b/plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.tsx index 582e1a0a44..c179cd8662 100644 --- a/plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.tsx +++ b/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 ( <> - setConfirmationDialogOpen(true)}> - {t('deleteEntity.description')} - + setConfirmationDialogOpen(true)} + > + {t('deleteEntity.actionButtonTitle')} + + } + />