From d996458580de4b63f9c07ebacac98626efab4125 Mon Sep 17 00:00:00 2001 From: sjeyaraman Date: Sun, 5 Jun 2022 12:40:43 -0700 Subject: [PATCH 1/3] customize unregister entity menuitem Signed-off-by: sjeyaraman --- .../app/src/components/catalog/EntityPage.tsx | 15 ++++++- .../EntityContextMenu.test.tsx | 25 ++++++++++- .../EntityContextMenu/EntityContextMenu.tsx | 43 +++++++++++++------ .../components/EntityLayout/EntityLayout.tsx | 4 +- 4 files changed, 70 insertions(+), 17 deletions(-) diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index 799fe3e4d9..ab8c02c168 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -161,9 +161,22 @@ const EntityLayoutWrapper = (props: { children?: ReactNode }) => { ]; }, []); + type VisibleType = 'visible' | 'hidden' | 'disabled'; + + type contextMenuOptions = { + disableUnregister: boolean | VisibleType; + }; + + const options: contextMenuOptions = { + disableUnregister: false, + }; + 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 5664186ab1..955c42b95a 100644 --- a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx @@ -47,9 +47,11 @@ interface ExtraContextMenuItem { onClick: () => void; } +type VisibleType = 'visible' | 'hidden' | 'disabled'; + // unstable context menu option, eg: disable the unregister entity menu interface contextMenuOptions { - disableUnregister: boolean; + disableUnregister: boolean | VisibleType; } interface EntityContextMenuProps { @@ -98,11 +100,35 @@ export function EntityContextMenu(props: EntityContextMenuProps) { , ]; + const isBoolean = + typeof UNSTABLE_contextMenuOptions?.disableUnregister === 'boolean'; + const disableUnregister = (!unregisterPermission.allowed || - UNSTABLE_contextMenuOptions?.disableUnregister) ?? + (isBoolean + ? UNSTABLE_contextMenuOptions?.disableUnregister + : UNSTABLE_contextMenuOptions?.disableUnregister === 'disabled')) ?? false; + let unregisterButton = <>; + + if (UNSTABLE_contextMenuOptions?.disableUnregister !== 'hidden') { + unregisterButton = ( + { + onClose(); + onUnregisterEntity(); + }} + disabled={disableUnregister} + > + + + + + + ); + } + return ( <> {extraItems} - { - onClose(); - onUnregisterEntity(); - }} - disabled={disableUnregister} - > - - - - - + {unregisterButton} { onClose(); diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx index 693137fe21..4cbb72db5c 100644 --- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx +++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx @@ -142,9 +142,11 @@ interface ExtraContextMenuItem { onClick: () => void; } +type VisibleType = 'visible' | 'hidden' | 'disabled'; + // unstable context menu option, eg: disable the unregister entity menu interface contextMenuOptions { - disableUnregister: boolean; + disableUnregister: boolean | VisibleType; } /** @public */ From 9083fae0885053988fed87d64c124f1a6e70ba47 Mon Sep 17 00:00:00 2001 From: sjeyaraman Date: Sun, 5 Jun 2022 17:10:23 -0700 Subject: [PATCH 2/3] add-change-set Signed-off-by: sjeyaraman --- .changeset/cold-apples-film.md | 9 +++++++++ packages/app/src/components/catalog/EntityPage.tsx | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 .changeset/cold-apples-film.md diff --git a/.changeset/cold-apples-film.md b/.changeset/cold-apples-film.md new file mode 100644 index 0000000000..d8c7ec283d --- /dev/null +++ b/.changeset/cold-apples-film.md @@ -0,0 +1,9 @@ +--- +'example-app': patch +'@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 ab8c02c168..fc17ccf909 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -168,7 +168,7 @@ const EntityLayoutWrapper = (props: { children?: ReactNode }) => { }; const options: contextMenuOptions = { - disableUnregister: false, + disableUnregister: 'visible', }; return ( From 79b5110b99b520733dc00779558426ad7b3c941a Mon Sep 17 00:00:00 2001 From: sjeyaraman Date: Fri, 24 Jun 2022 15:09:54 -0700 Subject: [PATCH 3/3] fix-tsc Signed-off-by: sjeyaraman --- .../src/components/EntityContextMenu/EntityContextMenu.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.test.tsx b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.test.tsx index 9906cd9c12..0e981bb1fc 100644 --- a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.test.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.test.tsx @@ -65,7 +65,7 @@ describe('ComponentContextMenu', () => { const { getByText } = await render( {}} />,