diff --git a/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx b/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx index c3c817362a..b3e665820a 100644 --- a/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx +++ b/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx @@ -35,6 +35,9 @@ const useIconStyles = makeStyles(theme => ({ justifyItems: 'center', gridGap: 4, textAlign: 'center', + '&:active': { + cursor: 'grabbing', + }, }, disabled: { color: 'gray', diff --git a/plugins/splunk-on-call/src/components/SplunkOnCallCard.test.tsx b/plugins/splunk-on-call/src/components/SplunkOnCallCard.test.tsx index b1280ab21c..8a32dc58b2 100644 --- a/plugins/splunk-on-call/src/components/SplunkOnCallCard.test.tsx +++ b/plugins/splunk-on-call/src/components/SplunkOnCallCard.test.tsx @@ -132,6 +132,7 @@ describe('SplunkOnCallCard', () => { ), ).toBeInTheDocument(); }); + it('opens the dialog when trigger button is clicked', async () => { mockSplunkOnCallApi.getUsers = jest .fn() @@ -146,7 +147,7 @@ describe('SplunkOnCallCard', () => { ); await waitFor(() => !queryByTestId('progress')); expect(getByText('Create Incident')).toBeInTheDocument(); - const triggerButton = getByTestId('trigger-button'); + const triggerButton = getByText('Create Incident'); await act(async () => { fireEvent.click(triggerButton); }); diff --git a/plugins/splunk-on-call/src/components/SplunkOnCallCard.tsx b/plugins/splunk-on-call/src/components/SplunkOnCallCard.tsx index 84d94d60d3..ae6b0420b0 100644 --- a/plugins/splunk-on-call/src/components/SplunkOnCallCard.tsx +++ b/plugins/splunk-on-call/src/components/SplunkOnCallCard.tsx @@ -21,6 +21,7 @@ import { MissingAnnotationEmptyState, configApiRef, EmptyState, + IconLinkVerticalProps, } from '@backstage/core'; import { Entity } from '@backstage/catalog-model'; import { @@ -159,19 +160,11 @@ export const SplunkOnCallCard = ({ entity }: Props) => { ); }; - const triggerLink = { + const triggerLink: IconLinkVerticalProps = { label: 'Create Incident', - action: ( - - ), - icon: , + onClick: handleDialog, + color: 'secondary', + icon: , }; return (