Adds testId to IconLinkVertical

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<HTMLAnchorElement>['onClick'];
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   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 (
       <Link
+        data-testid={testId}
         className={classnames(classes.link, classes.disabled)}
         underline="none"
       >
@@ -77,6 +80,7 @@ export function IconLinkVertical({
 
   return (
     <Link
+      data-testid={testId}
       className={classnames(classes.link, classes[color])}
       to={href}
       component={RouterLink}

packages/core/src/components/HeaderIconLinkRow/index.ts

@@ -15,3 +15,5 @@
  */
 
 export { HeaderIconLinkRow } from './HeaderIconLinkRow';
+export type { HeaderIconLinkRowProps } from './HeaderIconLinkRow';
+export type { IconLinkVerticalProps } from './IconLinkVertical';

plugins/pagerduty/src/components/PagerDutyCard.test.tsx

@@ -150,9 +150,9 @@ describe('PageDutyCard', () => {
     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();
   });

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 <Progress />;
   }
 
-  const serviceLink = {
+  const serviceLink: IconLinkVerticalProps = {
     label: 'Service Directory',
     href: service!.url,
     icon: <WebIcon />,
   };
 
-  const triggerLink = {
+  const triggerLink: IconLinkVerticalProps = {
     label: 'Create Incident',
     onClick: showDialog,
     icon: <AlarmAddIcon />,
-    color: 'secondary' as 'secondary', // DUH
+    color: 'secondary',
+    testId: 'trigger-link',
   };
 
   return (
     <>
-      <Card>
+      <Card data-testid="pagerduty-card">
         <CardHeader
           title="PagerDuty"
           subheader={<HeaderIconLinkRow links={[serviceLink, triggerLink]} />}
@@ -110,6 +116,7 @@ export const PagerDutyCard = () => {
         </CardContent>
       </Card>
       <TriggerDialog
+        data-testid="trigger-dialog"
         showDialog={dialogShown}
         handleDialog={hideDialog}
         name={entity.metadata.name}

plugins/pagerduty/src/components/TriggerButton/index.tsx

@@ -21,10 +21,7 @@ import { BackstageTheme } from '@backstage/theme';
 import { TriggerDialog } from '../TriggerDialog';
 import { PAGERDUTY_INTEGRATION_KEY } from '../constants';
 
-export interface TriggerButtonProps {
-  design: 'link' | 'button';
-  onIncidentCreated?: () => void;
-}
+export type TriggerButtonProps = {};
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   buttonStyle: {
@@ -34,27 +31,12 @@ const useStyles = makeStyles<BackstageTheme>(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<TriggerButtonProps>) {
-  const { buttonStyle, triggerAlarm } = useStyles();
+  const { buttonStyle } = useStyles();
   const { entity } = useEntity();
   const [dialogShown, setDialogShown] = useState<boolean>(false);
 
@@ -72,9 +54,8 @@ export function TriggerButton({
     <>
       <Button
         data-testid="trigger-button"
-        {...(design === 'link' && { color: 'secondary' })}
         onClick={showDialog}
-        className={design === 'link' ? triggerAlarm : buttonStyle}
+        className={buttonStyle}
         disabled={!integrationKey}
       >
         {integrationKey
@@ -87,7 +68,6 @@ export function TriggerButton({
           handleDialog={hideDialog}
           name={entity.metadata.name}
           integrationKey={integrationKey}
-          onIncidentCreated={onIncidentCreated}
         />
       )}
     </>