diff --git a/.changeset/sour-insects-marry.md b/.changeset/sour-insects-marry.md index f52f7fd8be..9ede485869 100644 --- a/.changeset/sour-insects-marry.md +++ b/.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 diff --git a/plugins/pagerduty/src/components/PagerDutyCard/index.tsx b/plugins/pagerduty/src/components/PagerDutyCard/index.tsx index 828cb22e83..772fb0b044 100644 --- a/plugins/pagerduty/src/components/PagerDutyCard/index.tsx +++ b/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(false); const [dialogShown, setDialogShown] = useState(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} /> diff --git a/plugins/pagerduty/src/components/TriggerButton/index.test.tsx b/plugins/pagerduty/src/components/TriggerButton/index.test.tsx index 390c8143a5..a6fd494472 100644 --- a/plugins/pagerduty/src/components/TriggerButton/index.test.tsx +++ b/plugins/pagerduty/src/components/TriggerButton/index.test.tsx @@ -66,7 +66,7 @@ describe('TriggerButton', () => { const { queryByRole, getByRole, getByTestId } = await renderInTestApp( - + , ); @@ -108,7 +108,7 @@ describe('TriggerButton', () => { const { getByTestId } = await renderInTestApp( - Send an alert + Send an alert , ); @@ -129,7 +129,7 @@ describe('TriggerButton', () => { const { queryByRole, getByTestId } = await renderInTestApp( - + , ); diff --git a/plugins/pagerduty/src/components/TriggerButton/index.tsx b/plugins/pagerduty/src/components/TriggerButton/index.tsx index fc9b16da92..b3f7188142 100644 --- a/plugins/pagerduty/src/components/TriggerButton/index.tsx +++ b/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) { const { buttonStyle } = useStyles(); - const { entity } = useEntity(); + const { integrationKey } = usePagerdutyEntity(); const [dialogShown, setDialogShown] = useState(false); const showDialog = useCallback(() => { @@ -47,9 +46,6 @@ export function TriggerButton({ setDialogShown(false); }, [setDialogShown]); - const integrationKey = - entity.metadata.annotations?.[PAGERDUTY_INTEGRATION_KEY]; - return ( <>