From 10e78b3c58d8394b592476ca44e3c23d57959caa Mon Sep 17 00:00:00 2001
From: Juan Lulkin <jmaiz@spotify.com>
Date: Wed, 24 Feb 2021 13:55:21 +0100
Subject: [PATCH] Allows HeaderIconLinkRow to handle onClicks

---
 .../HeaderIconLinkRow/IconLinkVertical.tsx    | 39 ++++++-------
 .../src/components/PagerDutyCard.tsx          | 56 ++++++++++++-------
 2 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx b/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx
index 7a9078c3e4..436af62807 100644
--- a/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx
+++ b/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx
@@ -20,11 +20,13 @@ import LinkIcon from '@material-ui/icons/Link';
 import { Link as RouterLink } from '../Link';
 
 export type IconLinkVerticalProps = {
+  key?: string;
   icon?: React.ReactNode;
   href?: string;
+  onClick?: React.AnchorHTMLAttributes<HTMLAnchorElement>['onClick'];
   disabled?: boolean;
   label: string;
-  action?: React.ReactNode;
+  color?: 'primary' | 'secondary';
 };
 
 const useIconStyles = makeStyles(theme => ({
@@ -37,23 +39,27 @@ const useIconStyles = makeStyles(theme => ({
   disabled: {
     color: 'gray',
   },
+  primary: {
+    color: theme.palette.primary.main,
+  },
+  secondary: {
+    color: theme.palette.secondary.main,
+  },
   label: {
     fontSize: '0.7rem',
     textTransform: 'uppercase',
     fontWeight: 600,
     letterSpacing: 1.2,
   },
-  linkStyle: {
-    color: theme.palette.secondary.main,
-  },
 }));
 
 export function IconLinkVertical({
   icon = <LinkIcon />,
   href = '#',
   disabled = false,
-  action,
-  ...props
+  color = 'primary',
+  label,
+  onClick,
 }: IconLinkVerticalProps) {
   const classes = useIconStyles();
 
@@ -62,27 +68,22 @@ export function IconLinkVertical({
       <Link
         className={classnames(classes.link, classes.disabled)}
         underline="none"
-        {...props}
       >
         {icon}
-        <span className={classes.label}>{props.label}</span>
-      </Link>
-    );
-  }
-
-  if (action) {
-    return (
-      <Link className={classnames(classes.link, classes.linkStyle)} {...props}>
-        {icon}
-        {action}
+        <span className={classes.label}>{label}</span>
       </Link>
     );
   }
 
   return (
-    <Link className={classes.link} to={href} component={RouterLink} {...props}>
+    <Link
+      className={classnames(classes.link, classes[color])}
+      to={href}
+      component={RouterLink}
+      onClick={onClick}
+    >
       {icon}
-      <span className={classes.label}>{props.label}</span>
+      <span className={classes.label}>{label}</span>
     </Link>
   );
 }
diff --git a/plugins/pagerduty/src/components/PagerDutyCard.tsx b/plugins/pagerduty/src/components/PagerDutyCard.tsx
index 7ec425a062..a5ebd70db6 100644
--- a/plugins/pagerduty/src/components/PagerDutyCard.tsx
+++ b/plugins/pagerduty/src/components/PagerDutyCard.tsx
@@ -27,7 +27,7 @@ import AlarmAddIcon from '@material-ui/icons/AlarmAdd';
 import { MissingTokenError } from './Errors/MissingTokenError';
 import WebIcon from '@material-ui/icons/Web';
 import { PAGERDUTY_INTEGRATION_KEY } from './constants';
-import { TriggerButton, useShowDialog } from './TriggerButton';
+import { TriggerDialog } from './TriggerDialog';
 
 export const isPluginApplicableToEntity = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[PAGERDUTY_INTEGRATION_KEY]);
@@ -36,14 +36,18 @@ export const PagerDutyCard = () => {
   const { entity } = useEntity();
   const api = useApi(pagerDutyApiRef);
   const [refreshIncidents, setRefreshIncidents] = useState<boolean>(false);
+  const [dialogShown, setDialogShown] = useState<boolean>(false);
+
+  const showDialog = useCallback(() => {
+    setDialogShown(true);
+  }, [setDialogShown]);
+  const hideDialog = useCallback(() => {
+    setDialogShown(false);
+  }, [setDialogShown]);
+
   const integrationKey = entity.metadata.annotations![
     PAGERDUTY_INTEGRATION_KEY
   ];
-  const setShowDialog = useShowDialog()[1];
-
-  const showDialog = useCallback(() => {
-    setShowDialog(true);
-  }, [setShowDialog]);
 
   const handleRefresh = useCallback(() => {
     setRefreshIncidents(x => !x);
@@ -84,24 +88,34 @@ export const PagerDutyCard = () => {
 
   const triggerLink = {
     label: 'Create Incident',
-    action: <TriggerButton design="link" onIncidentCreated={handleRefresh} />,
-    icon: <AlarmAddIcon onClick={showDialog} />,
+    onClick: showDialog,
+    icon: <AlarmAddIcon />,
+    color: 'secondary' as 'secondary', // DUH
   };
 
   return (
-    <Card>
-      <CardHeader
-        title="PagerDuty"
-        subheader={<HeaderIconLinkRow links={[serviceLink, triggerLink]} />}
-      />
-      <Divider />
-      <CardContent>
-        <Incidents
-          serviceId={service!.id}
-          refreshIncidents={refreshIncidents}
+    <>
+      <Card>
+        <CardHeader
+          title="PagerDuty"
+          subheader={<HeaderIconLinkRow links={[serviceLink, triggerLink]} />}
         />
-        <EscalationPolicy policyId={service!.policyId} />
-      </CardContent>
-    </Card>
+        <Divider />
+        <CardContent>
+          <Incidents
+            serviceId={service!.id}
+            refreshIncidents={refreshIncidents}
+          />
+          <EscalationPolicy policyId={service!.policyId} />
+        </CardContent>
+      </Card>
+      <TriggerDialog
+        showDialog={dialogShown}
+        handleDialog={hideDialog}
+        name={entity.metadata.name}
+        integrationKey={integrationKey}
+        onIncidentCreated={handleRefresh}
+      />
+    </>
   );
 };