Adds pager duty specific use hook

.changeset/sour-insects-marry.md

@@ -1,5 +1,8 @@
 ---
+'@backstage/core': patch
 '@backstage/plugin-pagerduty': patch
 ---
 
-Allows the TriggerButton component to render when key is missing
+Adds onClick and other props to IconLinkVertical
+Allows TriggerButton component to render when pager duty key is missing
+Refactors TriggerButton and PagerDutyCard not to have shared state

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

@@ -21,7 +21,6 @@ import {
   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';
 import { Incidents } from '../Incident';
 import { EscalationPolicy } from '../Escalation';
@@ -31,6 +30,7 @@ import { pagerDutyApiRef, UnauthorizedError } from '../../api';
 import AlarmAddIcon from '@material-ui/icons/AlarmAdd';
 import { MissingTokenError } from '../Errors/MissingTokenError';
 import WebIcon from '@material-ui/icons/Web';
+import { usePagerdutyEntity } from '../../hooks';
 import { PAGERDUTY_INTEGRATION_KEY } from '../constants';
 import { TriggerDialog } from '../TriggerDialog';
 
@@ -38,7 +38,7 @@ export const isPluginApplicableToEntity = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[PAGERDUTY_INTEGRATION_KEY]);
 
 export const PagerDutyCard = () => {
-  const { entity } = useEntity();
+  const { integrationKey } = usePagerdutyEntity();
   const api = useApi(pagerDutyApiRef);
   const [refreshIncidents, setRefreshIncidents] = useState<boolean>(false);
   const [dialogShown, setDialogShown] = useState<boolean>(false);
@@ -50,16 +50,14 @@ export const PagerDutyCard = () => {
     setDialogShown(false);
   }, [setDialogShown]);
 
-  const integrationKey = entity.metadata.annotations![
-    PAGERDUTY_INTEGRATION_KEY
-  ];
-
   const handleRefresh = useCallback(() => {
     setRefreshIncidents(x => !x);
   }, []);
 
   const { value: service, loading, error } = useAsync(async () => {
-    const services = await api.getServiceByIntegrationKey(integrationKey);
+    const services = await api.getServiceByIntegrationKey(
+      integrationKey as string,
+    );
 
     return {
       id: services[0].id,
@@ -119,8 +117,6 @@ export const PagerDutyCard = () => {
         data-testid="trigger-dialog"
         showDialog={dialogShown}
         handleDialog={hideDialog}
-        name={entity.metadata.name}
-        integrationKey={integrationKey}
         onIncidentCreated={handleRefresh}
       />
     </>

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

@@ -66,7 +66,7 @@ describe('TriggerButton', () => {
     const { queryByRole, getByRole, getByTestId } = await renderInTestApp(
       <ApiProvider apis={apis}>
         <EntityProvider entity={entity}>
-          <TriggerButton design="button" />
+          <TriggerButton />
         </EntityProvider>
       </ApiProvider>,
     );
@@ -108,7 +108,7 @@ describe('TriggerButton', () => {
     const { getByTestId } = await renderInTestApp(
       <ApiProvider apis={apis}>
         <EntityProvider entity={entity}>
-          <TriggerButton design="button">Send an alert</TriggerButton>
+          <TriggerButton>Send an alert</TriggerButton>
         </EntityProvider>
       </ApiProvider>,
     );
@@ -129,7 +129,7 @@ describe('TriggerButton', () => {
     const { queryByRole, getByTestId } = await renderInTestApp(
       <ApiProvider apis={apis}>
         <EntityProvider entity={entity}>
-          <TriggerButton design="button" />
+          <TriggerButton />
         </EntityProvider>
       </ApiProvider>,
     );

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

@@ -15,11 +15,10 @@
  */
 import React, { useCallback, PropsWithChildren, useState } from 'react';
 import { makeStyles, Button } from '@material-ui/core';
-import { useEntity } from '@backstage/plugin-catalog-react';
 import { BackstageTheme } from '@backstage/theme';
 
+import { usePagerdutyEntity } from '../../hooks';
 import { TriggerDialog } from '../TriggerDialog';
-import { PAGERDUTY_INTEGRATION_KEY } from '../constants';
 
 export type TriggerButtonProps = {};
 
@@ -37,7 +36,7 @@ export function TriggerButton({
   children,
 }: PropsWithChildren<TriggerButtonProps>) {
   const { buttonStyle } = useStyles();
-  const { entity } = useEntity();
+  const { integrationKey } = usePagerdutyEntity();
   const [dialogShown, setDialogShown] = useState<boolean>(false);
 
   const showDialog = useCallback(() => {
@@ -47,9 +46,6 @@ export function TriggerButton({
     setDialogShown(false);
   }, [setDialogShown]);
 
-  const integrationKey =
-    entity.metadata.annotations?.[PAGERDUTY_INTEGRATION_KEY];
-
   return (
     <>
       <Button
@@ -63,12 +59,7 @@ export function TriggerButton({
           : 'Missing integration key'}
       </Button>
       {integrationKey && (
-        <TriggerDialog
-          showDialog={dialogShown}
-          handleDialog={hideDialog}
-          name={entity.metadata.name}
-          integrationKey={integrationKey}
-        />
+        <TriggerDialog showDialog={dialogShown} handleDialog={hideDialog} />
       )}
     </>
   );

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

@@ -26,6 +26,7 @@ import {
 } from '@backstage/core';
 import { pagerDutyApiRef } from '../../api';
 import { Entity } from '@backstage/catalog-model';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { TriggerDialog } from './TriggerDialog';
 
 describe('TriggerDialog', () => {
@@ -64,13 +65,13 @@ describe('TriggerDialog', () => {
 
     const { getByText, getByRole, getByTestId } = await renderInTestApp(
       <ApiProvider apis={apis}>
-        <TriggerDialog
-          showDialog
-          handleDialog={() => {}}
-          name={entity.metadata.name}
-          integrationKey="abc123"
-          onIncidentCreated={() => {}}
-        />
+        <EntityProvider entity={entity}>
+          <TriggerDialog
+            showDialog
+            handleDialog={() => {}}
+            onIncidentCreated={() => {}}
+          />
+        </EntityProvider>
       </ApiProvider>,
     );
 

plugins/pagerduty/src/components/TriggerDialog/TriggerDialog.tsx

@@ -29,22 +29,20 @@ import { useApi, alertApiRef, identityApiRef } from '@backstage/core';
 import { useAsyncFn } from 'react-use';
 import { pagerDutyApiRef } from '../../api';
 import { Alert } from '@material-ui/lab';
+import { usePagerdutyEntity } from '../../hooks';
 
 type Props = {
-  name: string;
-  integrationKey: string;
   showDialog: boolean;
   handleDialog: () => void;
   onIncidentCreated?: () => void;
 };
 
 export const TriggerDialog = ({
-  name,
-  integrationKey,
   showDialog,
   handleDialog,
   onIncidentCreated: onIncidentCreated,
 }: Props) => {
+  const { name, integrationKey } = usePagerdutyEntity();
   const alertApi = useApi(alertApiRef);
   const identityApi = useApi(identityApiRef);
   const userName = identityApi.getUserId();
@@ -54,7 +52,7 @@ export const TriggerDialog = ({
   const [{ value, loading, error }, handleTriggerAlarm] = useAsyncFn(
     async (descriptions: string) =>
       await api.triggerAlarm({
-        integrationKey,
+        integrationKey: integrationKey as string,
         source: window.location.toString(),
         description: descriptions,
         userName,

plugins/pagerduty/src/hooks/index.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEntity } from '@backstage/plugin-catalog-react';
+
+import { PAGERDUTY_INTEGRATION_KEY } from '../components/constants';
+
+export function usePagerdutyEntity() {
+  const { entity } = useEntity();
+  const integrationKey =
+    entity.metadata.annotations?.[PAGERDUTY_INTEGRATION_KEY];
+  const name = entity.metadata.name;
+
+  return { integrationKey, name };
+}