Merge pull request #9113 from gabrie30/master

Fixes: Change Events Unable to be Listed

.changeset/tall-rats-lie.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-pagerduty': patch
+---
+
+Fix change events tab error when change events exist

plugins/pagerduty/README.md

@@ -7,6 +7,7 @@
 
 - The Backstage PagerDuty plugin allows PagerDuty information about a Backstage entity to be displayed within Backstage. This includes active incidents, recent change events, as well as the current on-call responders' names, email addresses, and links to their profiles in PagerDuty.
 - Incidents can be manually triggered via the plugin with a user-provided description, which will in turn notify the current on-call responders.
+- Change events will be displayed in a separate tab. If the change event payload has additional links the first link only will be rendered.
 
 # Requirements
 

plugins/pagerduty/src/components/ChangeEvents/ChangeEventListItem.tsx

@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import { Link } from '@backstage/core-components';
 import {
   ListItem,
   ListItemSecondaryAction,
@@ -28,7 +29,6 @@ import { DateTime, Duration } from 'luxon';
 import { ChangeEvent } from '../types';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
 import { BackstageTheme } from '@backstage/theme';
-import { Link } from '@backstage/core-components';
 
 const useStyles = makeStyles<BackstageTheme>({
   denseListIcon: {
@@ -86,15 +86,17 @@ export const ChangeEventListItem = ({ changeEvent }: Props) => {
       />
       <ListItemSecondaryAction>
         {externalLinkElem}
-        <Tooltip title="View in PagerDuty" placement="top">
-          <IconButton
-            component={Link}
-            to={changeEvent.html_url}
-            color="primary"
-          >
-            <OpenInBrowserIcon />
-          </IconButton>
-        </Tooltip>
+        {changeEvent.html_url === undefined ? null : (
+          <Tooltip title="View in PagerDuty" placement="top">
+            <IconButton
+              component={Link}
+              to={changeEvent.html_url}
+              color="primary"
+            >
+              <OpenInBrowserIcon />
+            </IconButton>
+          </Tooltip>
+        )}
       </ListItemSecondaryAction>
     </ListItem>
   );

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

@@ -92,6 +92,54 @@ describe('Incidents', () => {
     expect(getAllByTitle('View in PagerDuty').length).toEqual(2);
   });
 
+  it('Does not render a pagerduty link when html_url is not present in response', async () => {
+    mockPagerDutyApi.getChangeEventsByServiceId = jest
+      .fn()
+      .mockImplementationOnce(
+        async () =>
+          [
+            {
+              id: 'id1',
+              source: 'changeSource1',
+              links: [
+                {
+                  href: 'www.externalLink1.com',
+                  text: 'link1',
+                },
+              ],
+              summary: 'summary of event',
+              timestamp: '2020-07-17T08:42:58.315+0000',
+            },
+            {
+              id: 'id2',
+              source: 'changeSource1',
+              html_url: 'www.pdlink.com/link',
+              links: [
+                {
+                  href: 'www.externalLink1.com',
+                  text: 'link1',
+                },
+              ],
+              summary: 'sum of EVENT',
+              timestamp: '2020-07-18T08:42:58.315+0000',
+            },
+          ] as ChangeEvent[],
+      );
+    const { getByText, getAllByTitle, queryByTestId } = render(
+      wrapInTestApp(
+        <ApiProvider apis={apis}>
+          <ChangeEvents serviceId="abc" refreshEvents={false} />
+        </ApiProvider>,
+      ),
+    );
+    await waitFor(() => !queryByTestId('progress'));
+    expect(getByText('summary of event')).toBeInTheDocument();
+    expect(getByText('sum of EVENT')).toBeInTheDocument();
+
+    // assert links, mailto and hrefs, date calculation
+    expect(getAllByTitle('View in PagerDuty').length).toEqual(1);
+  });
+
   it('Handle errors', async () => {
     mockPagerDutyApi.getChangeEventsByServiceId = jest
       .fn()