diff --git a/.changeset/thick-cats-kiss.md b/.changeset/thick-cats-kiss.md new file mode 100644 index 0000000000..8817115ec3 --- /dev/null +++ b/.changeset/thick-cats-kiss.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Adding ability to customize the "unregister entity" menu item in the entity context menu on the entity page with options 'visible','hidden','disabled'.With this three new options, one can hide the "unregister entity" menu item from the list, disable or keep it enabled. + +The boolean input for "unregister entity" will be deprecated later in favour of the above three options. diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index 1958aabd2e..155dc071ff 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -167,7 +167,12 @@ const EntityLayoutWrapper = (props: { children?: ReactNode }) => { return ( <> - + {props.children} { it('should call onUnregisterEntity on button click', async () => { const mockCallback = jest.fn(); - await render( { expect(mockCallback).toBeCalled(); }); + it('check Unregister entity button is disabled', async () => { + const mockCallback = jest.fn(); + + const { getByText } = await render( + {}} + />, + ); + + const button = await screen.findByTestId('menu-button'); + expect(button).toBeInTheDocument(); + fireEvent.click(button); + + const unregister = await screen.getByText('Unregister entity'); + expect(unregister).toBeInTheDocument(); + + const unregisterSpanItem = getByText(/Unregister entity/); + const unregisterMenuListItem = + unregisterSpanItem?.parentElement?.parentElement; + expect(unregisterMenuListItem).toHaveAttribute('aria-disabled'); + }); + it('should call onInspectEntity on button click', async () => { const mockCallback = jest.fn(); diff --git a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx index db50eeab84..e37362a1e3 100644 --- a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx @@ -24,7 +24,6 @@ import { Popover, } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -import CancelIcon from '@material-ui/icons/Cancel'; import BugReportIcon from '@material-ui/icons/BugReport'; import MoreVert from '@material-ui/icons/MoreVert'; import React, { useState } from 'react'; @@ -32,6 +31,7 @@ import { IconComponent } from '@backstage/core-plugin-api'; import { useEntityPermission } from '@backstage/plugin-catalog-react'; import { catalogEntityDeletePermission } from '@backstage/plugin-catalog-common'; import { BackstageTheme } from '@backstage/theme'; +import { UnregisterEntity, UnregisterEntityOptions } from './UnregisterEntity'; /** @public */ export type EntityContextMenuClassKey = 'button'; @@ -55,14 +55,9 @@ interface ExtraContextMenuItem { onClick: () => void; } -// unstable context menu option, eg: disable the unregister entity menu -interface contextMenuOptions { - disableUnregister: boolean; -} - interface EntityContextMenuProps { UNSTABLE_extraContextMenuItems?: ExtraContextMenuItem[]; - UNSTABLE_contextMenuOptions?: contextMenuOptions; + UNSTABLE_contextMenuOptions?: UnregisterEntityOptions; onUnregisterEntity: () => void; onInspectEntity: () => void; } @@ -79,6 +74,7 @@ export function EntityContextMenu(props: EntityContextMenuProps) { const unregisterPermission = useEntityPermission( catalogEntityDeletePermission, ); + const isAllowed = unregisterPermission.allowed; const onOpen = (event: React.SyntheticEvent) => { setAnchorEl(event.currentTarget); @@ -106,11 +102,6 @@ export function EntityContextMenu(props: EntityContextMenuProps) { , ]; - const disableUnregister = - (!unregisterPermission.allowed || - UNSTABLE_contextMenuOptions?.disableUnregister) ?? - false; - return ( <> {extraItems} - { - onClose(); - onUnregisterEntity(); - }} - disabled={disableUnregister} - > - - - - - + { onClose(); diff --git a/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.test.tsx b/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.test.tsx new file mode 100644 index 0000000000..70b75c7bae --- /dev/null +++ b/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.test.tsx @@ -0,0 +1,80 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { EntityProvider } from '@backstage/plugin-catalog-react'; +import { permissionApiRef } from '@backstage/plugin-permission-react'; +import { + MockPermissionApi, + renderInTestApp, + TestApiProvider, +} from '@backstage/test-utils'; +import { fireEvent, screen } from '@testing-library/react'; +import * as React from 'react'; +import { UnregisterEntity } from './UnregisterEntity'; + +const mockPermissionApi = new MockPermissionApi(); + +function render(children: React.ReactNode) { + return renderInTestApp( + + + , + ); +} + +describe('ComponentContextMenu', () => { + it('should call onUnregisterEntity on button click', async () => { + const mockCallback = jest.fn(); + await render( + {}} + />, + ); + + const unregister = await screen.findByText('Unregister entity'); + expect(unregister).toBeInTheDocument(); + fireEvent.click(unregister); + + expect(mockCallback).toBeCalled(); + }); + + it('check Unregister entity button is disabled', async () => { + const mockCallback = jest.fn(); + + const { getByText } = await render( + {}} + />, + ); + + const unregister = await screen.getByText('Unregister entity'); + expect(unregister).toBeInTheDocument(); + + const unregisterSpanItem = getByText(/Unregister entity/); + const unregisterMenuListItem = + unregisterSpanItem?.parentElement?.parentElement; + expect(unregisterMenuListItem).toHaveAttribute('aria-disabled'); + }); +}); diff --git a/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.tsx b/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.tsx new file mode 100644 index 0000000000..05044bf935 --- /dev/null +++ b/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.tsx @@ -0,0 +1,72 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { ListItemIcon, ListItemText, MenuItem } from '@material-ui/core'; +import CancelIcon from '@material-ui/icons/Cancel'; + +type VisibleType = 'visible' | 'hidden' | 'disable'; + +export type UnregisterEntityOptions = { + disableUnregister: boolean | VisibleType; +}; + +interface UnregisterEntityProps { + unregisterEntityOptions?: UnregisterEntityOptions; + isUnregisterAllowed: boolean; + onUnregisterEntity: () => void; + onClose: () => void; +} + +export function UnregisterEntity(props: UnregisterEntityProps) { + const { + unregisterEntityOptions, + isUnregisterAllowed, + onUnregisterEntity, + onClose, + } = props; + + const isBoolean = + typeof unregisterEntityOptions?.disableUnregister === 'boolean'; + + const isDisabled = + (!isUnregisterAllowed || + (isBoolean + ? !!unregisterEntityOptions?.disableUnregister + : unregisterEntityOptions?.disableUnregister === 'disable')) ?? + false; + + let unregisterButton = <>; + + if (unregisterEntityOptions?.disableUnregister !== 'hidden') { + unregisterButton = ( + { + onClose(); + onUnregisterEntity(); + }} + disabled={isDisabled} + > + + + + + + ); + } + + return <>{unregisterButton}; +} diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx index 693137fe21..2295034905 100644 --- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx +++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx @@ -142,15 +142,18 @@ interface ExtraContextMenuItem { onClick: () => void; } +type VisibleType = 'visible' | 'hidden' | 'disable'; + +// NOTE(blam): Intentionally not exported at this point, since it's part of // unstable context menu option, eg: disable the unregister entity menu -interface contextMenuOptions { - disableUnregister: boolean; +interface EntityContextMenuOptions { + disableUnregister: boolean | VisibleType; } /** @public */ export interface EntityLayoutProps { UNSTABLE_extraContextMenuItems?: ExtraContextMenuItem[]; - UNSTABLE_contextMenuOptions?: contextMenuOptions; + UNSTABLE_contextMenuOptions?: EntityContextMenuOptions; children?: React.ReactNode; NotFoundComponent?: React.ReactNode; }