diff --git a/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx b/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx index 436af62807..3f7b489322 100644 --- a/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx +++ b/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx @@ -20,12 +20,13 @@ import LinkIcon from '@material-ui/icons/Link'; import { Link as RouterLink } from '../Link'; export type IconLinkVerticalProps = { - key?: string; + key?: React.Key; icon?: React.ReactNode; href?: string; - onClick?: React.AnchorHTMLAttributes['onClick']; + onClick?: React.MouseEventHandler; disabled?: boolean; label: string; + testId?: string; color?: 'primary' | 'secondary'; }; @@ -59,6 +60,7 @@ export function IconLinkVertical({ disabled = false, color = 'primary', label, + testId, onClick, }: IconLinkVerticalProps) { const classes = useIconStyles(); @@ -66,6 +68,7 @@ export function IconLinkVertical({ if (disabled) { return ( @@ -77,6 +80,7 @@ export function IconLinkVertical({ return ( { await waitFor(() => !queryByTestId('progress')); expect(getByText('Service Directory')).toBeInTheDocument(); expect(getByText('Create Incident')).toBeInTheDocument(); - const triggerButton = getByTestId('trigger-button'); + const triggerLink = getByTestId('trigger-link'); await act(async () => { - fireEvent.click(triggerButton); + fireEvent.click(triggerLink); }); expect(getByRole('dialog')).toBeInTheDocument(); }); diff --git a/plugins/pagerduty/src/components/PagerDutyCard.tsx b/plugins/pagerduty/src/components/PagerDutyCard.tsx index a5ebd70db6..d9dad09622 100644 --- a/plugins/pagerduty/src/components/PagerDutyCard.tsx +++ b/plugins/pagerduty/src/components/PagerDutyCard.tsx @@ -14,7 +14,12 @@ * limitations under the License. */ import React, { useState, useCallback } from 'react'; -import { useApi, Progress, HeaderIconLinkRow } from '@backstage/core'; +import { + useApi, + Progress, + HeaderIconLinkRow, + IconLinkVerticalProps, +} from '@backstage/core'; import { Entity } from '@backstage/catalog-model'; import { useEntity } from '@backstage/plugin-catalog-react'; import { Card, CardHeader, Divider, CardContent } from '@material-ui/core'; @@ -80,22 +85,23 @@ export const PagerDutyCard = () => { return ; } - const serviceLink = { + const serviceLink: IconLinkVerticalProps = { label: 'Service Directory', href: service!.url, icon: , }; - const triggerLink = { + const triggerLink: IconLinkVerticalProps = { label: 'Create Incident', onClick: showDialog, icon: , - color: 'secondary' as 'secondary', // DUH + color: 'secondary', + testId: 'trigger-link', }; return ( <> - + } @@ -110,6 +116,7 @@ export const PagerDutyCard = () => { void; -} +export type TriggerButtonProps = {}; const useStyles = makeStyles(theme => ({ buttonStyle: { @@ -34,27 +31,12 @@ const useStyles = makeStyles(theme => ({ backgroundColor: theme.palette.error.dark, }, }, - triggerAlarm: { - paddingTop: 0, - paddingBottom: 0, - fontSize: '0.7rem', - textTransform: 'uppercase', - fontWeight: 600, - letterSpacing: 1.2, - lineHeight: 1.5, - '&:hover, &:focus, &.focus': { - backgroundColor: 'transparent', - textDecoration: 'none', - }, - }, })); export function TriggerButton({ - design, - onIncidentCreated, children, }: PropsWithChildren) { - const { buttonStyle, triggerAlarm } = useStyles(); + const { buttonStyle } = useStyles(); const { entity } = useEntity(); const [dialogShown, setDialogShown] = useState(false); @@ -72,9 +54,8 @@ export function TriggerButton({ <>