release: 0.11.0 (#90)

### Description This release introduces several minor features that were part of our roadmap. - Users can now optionally disable the on-call section of the PagerDutyCard. - The `Create new incident` button is hidden automatically if users don't provide the `integration-key` as part of the entity configuration. - Fixed a styling issue on recent changes component that introduced a misalignment in the buttons when a change event doesn't include the url to PagerDuty. - Added documentation on the option to disable the change events tab. - Bumped a few dependencies versions. ## Acknowledgement By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice. **Disclaimer:** We value your time and bandwidth. As such, any pull requests created on non-triaged issues might not be successful.
PagerDuty · Apr 3, 2024 · f3ef850 · f3ef850
2 parents 9a88ea0 + 303c0e2
commit f3ef850
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 41 deletions.
diff --git a/src/components/ChangeEvents/ChangeEventListItem.tsx b/src/components/ChangeEvents/ChangeEventListItem.tsx
@@ -44,11 +44,15 @@ const useStyles = makeStyles<BackstageTheme>((theme) => ({
     fontWeight: "bold",
   },
   smallExternalLinkIconStyle: {
-    color: theme.palette.text.primary
+    color: theme.palette.text.primary,
+  },
+  smallExternalLinkWithoutMarginIconStyle: {
+    color: theme.palette.text.primary,
+    marginRight: "-20px",
   },
   smallIconStyle: {
     color: theme.palette.text.primary,
-    marginRight: "-20px"
+    marginRight: "-20px",
   },
 }));
 
@@ -63,6 +67,7 @@ export const ChangeEventListItem = ({ changeEvent }: Props) => {
   const changedAt = DateTime.local()
     .minus(Duration.fromMillis(duration))
     .toRelative({ locale: 'en' });
+
   let externalLinkElem: JSX.Element | undefined;
   if (changeEvent.links.length > 0) {
     const text: string = changeEvent.links[0].text;
@@ -71,7 +76,11 @@ export const ChangeEventListItem = ({ changeEvent }: Props) => {
         <IconButton
           component={Link}
           to={changeEvent.links[0].href}
-          className={classes.smallExternalLinkIconStyle}
+          className={
+            changeEvent.html_url === undefined
+              ? classes.smallExternalLinkWithoutMarginIconStyle
+              : classes.smallExternalLinkIconStyle
+          }
         >
           <LinkIcon />
         </IconButton>

diff --git a/src/components/EntityPagerDutyCard/index.test.tsx b/src/components/EntityPagerDutyCard/index.test.tsx
@@ -282,7 +282,7 @@ describe("EntityPagerDutyCard", () => {
       );
       await waitFor(() => !queryByTestId("progress"));
       expect(getByText("Open service in PagerDuty")).toBeInTheDocument();
-      expect(getByText("Create new incident")).toBeInTheDocument();
+      expect(queryByTestId("trigger-incident-button")).not.toBeInTheDocument();
       expect(getByText("Nice! No incidents found!")).toBeInTheDocument();
       expect(
         getByText("No one is on-call. Update the escalation policy.")
@@ -349,12 +349,12 @@ describe("EntityPagerDutyCard", () => {
       ).toBeInTheDocument();
     });
 
-    it("disables the Create new incident button", async () => {
+    it("hides the Create new incident button", async () => {
       mockPagerDutyApi.getServiceByPagerDutyEntity = jest
         .fn()
         .mockImplementationOnce(async () => ({ service }));
 
-      const { queryByTestId, getByLabelText } = render(
+      const { queryByTestId } = render(
         wrapInTestApp(
           <ApiProvider apis={apis}>
             <EntityProvider entity={entityWithServiceId}>
@@ -364,7 +364,7 @@ describe("EntityPagerDutyCard", () => {
         )
       );
       await waitFor(() => !queryByTestId("progress"));
-      expect(getByLabelText("create-incident").className).toMatch("disabled");
+      expect(queryByTestId("trigger-incident-button")).not.toBeInTheDocument();
     });
   });
 
@@ -393,6 +393,54 @@ describe("EntityPagerDutyCard", () => {
     });
   });
 
+  describe("when entity has all annotations but the plugin has been configured to disable change events", () => {
+    it("must hide change events tab", async () => {
+      mockPagerDutyApi.getServiceByPagerDutyEntity = jest
+        .fn()
+        .mockImplementationOnce(async () => ({ service }));
+
+      const { getByText, queryByTestId } = render(
+        wrapInTestApp(
+          <ApiProvider apis={apis}>
+            <EntityProvider entity={entityWithAllAnnotations}>
+              <EntityPagerDutyCard disableChangeEvents />
+            </EntityProvider>
+          </ApiProvider>
+        )
+      );
+      await waitFor(() => !queryByTestId("progress"));
+      expect(getByText("Open service in PagerDuty")).toBeInTheDocument();
+      expect(queryByTestId("change-events")).not.toBeInTheDocument();
+      expect(getByText("Nice! No incidents found!")).toBeInTheDocument();
+      expect(
+        getByText("No one is on-call. Update the escalation policy.")
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("when entity has all annotations but the plugin has been configured to disable on-call", () => {
+    it("must hide on-call component", async () => {
+      mockPagerDutyApi.getServiceByPagerDutyEntity = jest
+        .fn()
+        .mockImplementationOnce(async () => ({ service }));
+
+      const { getByText, queryByTestId } = render(
+        wrapInTestApp(
+          <ApiProvider apis={apis}>
+            <EntityProvider entity={entityWithAllAnnotations}>
+              <EntityPagerDutyCard disableOnCall />
+            </EntityProvider>
+          </ApiProvider>
+        )
+      );
+      await waitFor(() => !queryByTestId("progress"));
+      expect(getByText("Open service in PagerDuty")).toBeInTheDocument();
+      expect(getByText("Change Events")).toBeInTheDocument();
+      expect(getByText("Nice! No incidents found!")).toBeInTheDocument();
+      expect(queryByTestId("oncall-card")).not.toBeInTheDocument();
+    });
+  });
+
   describe('when entity has all annotations but the plugin has been configured to be "read only"', () => {
     it('queries by integration key but does not render the "Create new incident" button', async () => {
       mockPagerDutyApi.getServiceByPagerDutyEntity = jest

diff --git a/src/components/EntityPagerDutyCard/index.tsx b/src/components/EntityPagerDutyCard/index.tsx
@@ -32,18 +32,20 @@ export const isPluginApplicableToEntity = (entity: Entity) =>
 export type EntityPagerDutyCardProps = {
   readOnly?: boolean;
   disableChangeEvents?: boolean;
+  disableOnCall?: boolean;
 };
 
 /** @public */
 export const EntityPagerDutyCard = (props: EntityPagerDutyCardProps) => {
-  const { readOnly, disableChangeEvents } = props;
+  const { readOnly, disableChangeEvents, disableOnCall } = props;
   const { entity } = useEntity();
   const pagerDutyEntity = getPagerDutyEntity(entity);
   return (
     <PagerDutyCard
       {...pagerDutyEntity}
       readOnly={readOnly}
       disableChangeEvents={disableChangeEvents}
+      disableOnCall={disableOnCall}
     />
   );
 };
diff --git a/src/components/PagerDutyCard/StatusCard.tsx b/src/components/PagerDutyCard/StatusCard.tsx
@@ -124,7 +124,7 @@ function StatusCard({ serviceId, refreshStatus }: Props) {
     <Card className={cardStyle}>
       {status !== undefined ? (
         <Typography className={largeTextStyle}>
-          {labelFromStatus(status!)}
+          {labelFromStatus(status)}
         </Typography>
       ) : (
         <Typography className={largeTextStyle}>Unable to get status</Typography>

diff --git a/src/components/PagerDutyCard/index.test.tsx b/src/components/PagerDutyCard/index.test.tsx
@@ -265,20 +265,20 @@ describe("PagerDutyCard", () => {
       ).toBeInTheDocument();
     });
 
-    it("disables the Create new incident button", async () => {
+    it("hides the Create new incident button", async () => {
       mockPagerDutyApi.getServiceByPagerDutyEntity = jest
         .fn()
         .mockImplementationOnce(async () => ({ service }));
 
-      const { queryByTestId, getByLabelText } = render(
+      const { queryByTestId } = render(
         wrapInTestApp(
           <ApiProvider apis={apis}>
             <PagerDutyCard name="blah" serviceId="def123" />
           </ApiProvider>
         )
       );
       await waitFor(() => !queryByTestId("progress"));
-      expect(getByLabelText("create-incident").className).toMatch("disabled");
+      expect(queryByTestId("trigger-incident-button")).not.toBeInTheDocument();
     });
   });
 

diff --git a/src/components/PagerDutyCard/index.tsx b/src/components/PagerDutyCard/index.tsx
@@ -100,14 +100,15 @@ const BasicCard = ({ children }: { children: ReactNode }) => (
 export type PagerDutyCardProps = PagerDutyEntity & {
   readOnly?: boolean;
   disableChangeEvents?: boolean;
+  disableOnCall?: boolean;
 };
 
 /** @public */
 export const PagerDutyCard = (props: PagerDutyCardProps) => {
   const classes = useStyles();
 
   const theme = useTheme();
-  const { readOnly, disableChangeEvents } = props;
+  const { readOnly, disableChangeEvents, disableOnCall } = props;
   const api = useApi(pagerDutyApiRef);
   const [refreshIncidents, setRefreshIncidents] = useState<boolean>(false);
   const [refreshChangeEvents, setRefreshChangeEvents] =
@@ -191,9 +192,10 @@ export const PagerDutyCard = (props: PagerDutyCardProps) => {
           )
         }
         action={
-          !readOnly ? (
+          (!readOnly && props.integrationKey) ? (
             <div>
               <TriggerIncidentButton
+                data-testid="trigger-incident-button"
                 integrationKey={props.integrationKey}
                 entityName={props.name}
                 handleRefresh={handleRefresh}
@@ -236,7 +238,7 @@ export const PagerDutyCard = (props: PagerDutyCardProps) => {
             <InsightsCard
               count={
                 service?.metrics !== undefined && service.metrics.length > 0
-                  ? service?.metrics![0].total_interruptions
+                  ? service?.metrics[0].total_interruptions
                   : undefined
               }
               label="interruptions"
@@ -247,7 +249,7 @@ export const PagerDutyCard = (props: PagerDutyCardProps) => {
             <InsightsCard
               count={
                 service?.metrics !== undefined && service.metrics.length > 0
-                  ? service?.metrics![0].total_high_urgency_incidents
+                  ? service?.metrics[0].total_high_urgency_incidents
                   : undefined
               }
               label="high urgency"
@@ -269,13 +271,11 @@ export const PagerDutyCard = (props: PagerDutyCardProps) => {
         <Grid item md={3}>
           <ServiceStandardsCard
             total={
-              service?.standards !== undefined &&
               service?.standards?.score !== undefined
                 ? service?.standards?.score?.total
                 : undefined
             }
             completed={
-              service?.standards !== undefined &&
               service?.standards?.score !== undefined
                 ? service?.standards?.score?.passing
                 : undefined
@@ -301,6 +301,7 @@ export const PagerDutyCard = (props: PagerDutyCardProps) => {
           {disableChangeEvents !== true ? (
             <CardTab label="Change Events">
               <ChangeEvents
+                data-testid="change-events"
                 serviceId={service!.id}
                 refreshEvents={refreshChangeEvents}
               />
@@ -309,11 +310,16 @@ export const PagerDutyCard = (props: PagerDutyCardProps) => {
             <></>
           )}
         </TabbedCard>
+        {disableOnCall !== true ? (
         <EscalationPolicy
+          data-testid="oncall-card"
           policyId={service!.policyId}
           policyUrl={service!.policyLink}
           policyName={service!.policyName}
         />
+        ) : (
+          <></>
+        )}
       </CardContent>
     </Card>
   );

diff --git a/yarn.lock b/yarn.lock
@@ -6949,23 +6949,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"body-parser@npm:1.20.1":
-  version: 1.20.1
-  resolution: "body-parser@npm:1.20.1"
+"body-parser@npm:1.20.2":
+  version: 1.20.2
+  resolution: "body-parser@npm:1.20.2"
   dependencies:
     bytes: 3.1.2
-    content-type: ~1.0.4
+    content-type: ~1.0.5
     debug: 2.6.9
     depd: 2.0.0
     destroy: 1.2.0
     http-errors: 2.0.0
     iconv-lite: 0.4.24
     on-finished: 2.4.1
     qs: 6.11.0
-    raw-body: 2.5.1
+    raw-body: 2.5.2
     type-is: ~1.6.18
     unpipe: 1.0.0
-  checksum: f1050dbac3bede6a78f0b87947a8d548ce43f91ccc718a50dd774f3c81f2d8b04693e52acf62659fad23101827dd318da1fb1363444ff9a8482b886a3e4a5266
+  checksum: 14d37ec638ab5c93f6099ecaed7f28f890d222c650c69306872e00b9efa081ff6c596cd9afb9930656aae4d6c4e1c17537bea12bb73c87a217cb3cfea8896737
   languageName: node
   linkType: hard
 
@@ -7780,7 +7780,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"content-type@npm:~1.0.4":
+"content-type@npm:~1.0.4, content-type@npm:~1.0.5":
   version: 1.0.5
   resolution: "content-type@npm:1.0.5"
   checksum: 566271e0a251642254cde0f845f9dd4f9856e52d988f4eb0d0dcffbb7a1f8ec98de7a5215fc628f3bce30fe2fb6fd2bc064b562d721658c59b544e2d34ea2766
@@ -7840,10 +7840,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cookie@npm:0.5.0":
-  version: 0.5.0
-  resolution: "cookie@npm:0.5.0"
-  checksum: 1f4bd2ca5765f8c9689a7e8954183f5332139eb72b6ff783d8947032ec1fdf43109852c178e21a953a30c0dd42257828185be01b49d1eb1a67fd054ca588a180
+"cookie@npm:0.6.0":
+  version: 0.6.0
+  resolution: "cookie@npm:0.6.0"
+  checksum: f56a7d32a07db5458e79c726b77e3c2eff655c36792f2b6c58d351fb5f61531e5b1ab7f46987150136e366c65213cbe31729e02a3eaed630c3bf7334635fb410
   languageName: node
   linkType: hard
 
@@ -9880,15 +9880,15 @@ __metadata:
   linkType: hard
 
 "express@npm:^4.17.1, express@npm:^4.17.3":
-  version: 4.18.2
-  resolution: "express@npm:4.18.2"
+  version: 4.19.2
+  resolution: "express@npm:4.19.2"
   dependencies:
     accepts: ~1.3.8
     array-flatten: 1.1.1
-    body-parser: 1.20.1
+    body-parser: 1.20.2
     content-disposition: 0.5.4
     content-type: ~1.0.4
-    cookie: 0.5.0
+    cookie: 0.6.0
     cookie-signature: 1.0.6
     debug: 2.6.9
     depd: 2.0.0
@@ -9914,7 +9914,7 @@ __metadata:
     type-is: ~1.6.18
     utils-merge: 1.0.1
     vary: ~1.1.2
-  checksum: 3c4b9b076879442f6b968fe53d85d9f1eeacbb4f4c41e5f16cc36d77ce39a2b0d81b3f250514982110d815b2f7173f5561367f9110fcc541f9371948e8c8b037
+  checksum: 212dbd6c2c222a96a61bc927639c95970a53b06257080bb9e2838adb3bffdb966856551fdad1ab5dd654a217c35db94f987d0aa88d48fb04d306340f5f34dca5
   languageName: node
   linkType: hard
 
@@ -15812,15 +15812,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"raw-body@npm:2.5.1":
-  version: 2.5.1
-  resolution: "raw-body@npm:2.5.1"
+"raw-body@npm:2.5.2":
+  version: 2.5.2
+  resolution: "raw-body@npm:2.5.2"
   dependencies:
     bytes: 3.1.2
     http-errors: 2.0.0
     iconv-lite: 0.4.24
     unpipe: 1.0.0
-  checksum: 5362adff1575d691bb3f75998803a0ffed8c64eabeaa06e54b4ada25a0cd1b2ae7f4f5ec46565d1bec337e08b5ac90c76eaa0758de6f72a633f025d754dec29e
+  checksum: ba1583c8d8a48e8fbb7a873fdbb2df66ea4ff83775421bfe21ee120140949ab048200668c47d9ae3880012f6e217052690628cf679ddfbd82c9fc9358d574676
   languageName: node
   linkType: hard
 
@@ -19019,8 +19019,8 @@ __metadata:
   linkType: hard
 
 "webpack-dev-middleware@npm:^5.3.1":
-  version: 5.3.3
-  resolution: "webpack-dev-middleware@npm:5.3.3"
+  version: 5.3.4
+  resolution: "webpack-dev-middleware@npm:5.3.4"
   dependencies:
     colorette: ^2.0.10
     memfs: ^3.4.3
@@ -19029,7 +19029,7 @@ __metadata:
     schema-utils: ^4.0.0
   peerDependencies:
     webpack: ^4.0.0 || ^5.0.0
-  checksum: dd332cc6da61222c43d25e5a2155e23147b777ff32fdf1f1a0a8777020c072fbcef7756360ce2a13939c3f534c06b4992a4d659318c4a7fe2c0530b52a8a6621
+  checksum: 90cf3e27d0714c1a745454a1794f491b7076434939340605b9ee8718ba2b85385b120939754e9fdbd6569811e749dee53eec319e0d600e70e0b0baffd8e3fb13
   languageName: node
   linkType: hard