Adds testId to 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}
         />
       )}
     </>