Feat/add suport for scoped oauth

.gitignore

@@ -169,3 +169,4 @@ tsconfig.tmp.json
 !config.d.ts
 !custom.d.ts
 .gitignore
+app-config.dev.yaml

app-config.yaml

@@ -44,12 +44,17 @@ integrations:
     #   token: ${GHE_TOKEN}
 pagerDuty:
   eventsBaseUrl: 'https://events.pagerduty.com/v2'
+  apiToken: ${PAGERDUTY_TOKEN}
+  oauth:
+    clientId: ${PAGERDUTY_CLIENT_ID}
+    clientSecret: ${PAGERDUTY_CLIENT_SECRET}
+    subDomain: ${PAGERDUTY_ACCOUNT}
 
-proxy:
-  '/pagerduty':
-    target: https://api.pagerduty.com
-    headers:
-      Authorization: Token token=${PAGERDUTY_TOKEN}
+# proxy:
+#   '/pagerduty':
+#     target: https://api.pagerduty.com
+#     headers:
+#       Authorization: Token token=${PAGERDUTY_TOKEN}
   ### Example for how to add a proxy endpoint for the frontend.
   ### A typical reason to do this is to handle HTTPS and CORS for internal services.
   # endpoints:

config.d.ts

@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import { PagerDutyOAuthConfig } from "@pagerduty/backstage-plugin-common";
+
 export interface Config {
   /**
    * Configuration for the PagerDuty plugin
@@ -29,5 +32,10 @@ export interface Config {
      * @visibility frontend
      */
     apiToken?: string;
+    /**
+     * Optional PagerDuty Scoped OAuth Token used in API calls from the backend component.
+     * @visibility frontend
+     */
+    oauth?: PagerDutyOAuthConfig;
   };
 }

package.json

@@ -48,7 +48,7 @@
     "react-use": "^17.2.4"
   },
   "peerDependencies": {
-    "@pagerduty/backstage-plugin-common": "^0.0.2",
+    "@pagerduty/backstage-plugin-common": "^0.1.0",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
@@ -60,7 +60,7 @@
     "@backstage/test-utils": "^1.4.5",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@pagerduty/backstage-plugin-common": "^0.0.2",
+    "@pagerduty/backstage-plugin-common": "^0.1.0",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^12.1.3",

src/components/ChangeEvents/ChangeEvents.test.tsx

@@ -47,7 +47,7 @@ describe('Incidents', () => {
   it("Renders a forbidden state when change events is undefined", async () => {
     mockPagerDutyApi.getChangeEventsByServiceId = jest
       .fn()
-      .mockImplementationOnce(async () => {throw new Error("Forbidden: You allowed to perform this action");});
+      .mockImplementationOnce(async () => {throw new Error("Forbidden: You are not allowed to perform this action");});
 
     const { getByText, queryByTestId } = render(
       wrapInTestApp(

src/components/EntityPagerDutyCard/index.test.tsx

@@ -199,8 +199,8 @@ describe('EntityPagerDutyCard', () => {
 
     expect(
       getByText(
-        'Error encountered while fetching information. An error occurred',
-      ),
+        "You don't have the required permissions to perform this action. See README for more details."
+      )
     ).toBeInTheDocument();
   });
 
@@ -305,8 +305,8 @@ describe('EntityPagerDutyCard', () => {
 
       expect(
         getByText(
-          'Error encountered while fetching information. An error occurred',
-        ),
+          "You don't have the required permissions to perform this action. See README for more details."
+        )
       ).toBeInTheDocument();
     });
 

src/components/Errors/ForbiddenError.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * 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.
+ */
+// eslint-disable-next-line @backstage/no-undeclared-imports
+import React from 'react';
+import { Button } from '@material-ui/core';
+import { EmptyState } from '@backstage/core-components';
+
+export const ForbiddenError = () => (
+  <EmptyState
+    missing="info"
+    title="Unauthorized"
+    description="You don't have the required permissions to perform this action. See README for more details."
+    action={
+      <Button
+        color="primary"
+        variant="contained"
+        href="https://pagerduty.github.io/backstage-plugin-docs/getting-started/pagerduty/"
+      >
+        Read More
+      </Button>
+    }
+  />
+);

src/components/Escalation/Escalation.test.tsx

@@ -46,6 +46,30 @@ describe("Escalation", () => {
     expect(mockPagerDutyApi.getOnCallByPolicyId).toHaveBeenCalledWith("456");
   });
 
+  it("Renders a forbidden state when change events is undefined", async () => {
+    mockPagerDutyApi.getOnCallByPolicyId = jest
+      .fn()
+      .mockImplementationOnce(async () => {
+        throw new Error(
+          "Forbidden: You are not allowed to perform this action"
+        );
+      });
+
+    const { getByText, queryByTestId } = render(
+      wrapInTestApp(
+        <ApiProvider apis={apis}>
+          <EscalationPolicy policyId="abc" />
+        </ApiProvider>
+      )
+    );
+    await waitFor(() => !queryByTestId("progress"));
+    expect(
+      getByText(
+        "You don't permissions to list on-calls. Check your OAuth token permissions."
+      )
+    ).toBeInTheDocument();
+  });
+
   it("Render a list of users", async () => {
     mockPagerDutyApi.getOnCallByPolicyId = jest
       .fn()

src/components/Escalation/EscalationPolicy.tsx

@@ -17,6 +17,7 @@
 import React from 'react';
 import { List, ListSubheader } from '@material-ui/core';
 import { EscalationUsersEmptyState } from './EscalationUsersEmptyState';
+import { EscalationUsersForbiddenState } from './EscalationUsersForbiddenState';
 import { EscalationUser } from './EscalationUser';
 import useAsync from 'react-use/lib/useAsync';
 import { pagerDutyApiRef } from '../../api';
@@ -41,6 +42,14 @@ export const EscalationPolicy = ({ policyId }: Props) => {
   });
 
   if (error) {
+    if (error.message.includes("Forbidden")) {
+      return (
+        <List dense subheader={<ListSubheader>ON CALL</ListSubheader>}>
+          <EscalationUsersForbiddenState />
+        </List>
+      );
+    }
+
     return (
       <Alert severity="error">
         Error encountered while fetching information. {error.message}

src/components/Escalation/EscalationUsersForbiddenState.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * 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.
+ */
+// eslint-disable-next-line @backstage/no-undeclared-imports
+import React from 'react';
+import {
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  makeStyles,
+} from '@material-ui/core';
+import { StatusError } from '@backstage/core-components';
+
+const useStyles = makeStyles({
+  denseListIcon: {
+    marginRight: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export const EscalationUsersForbiddenState = () => {
+  const classes = useStyles();
+  return (
+    <ListItem>
+      <ListItemIcon>
+        <div className={classes.denseListIcon}>
+          <StatusError />
+        </div>
+      </ListItemIcon>
+      <ListItemText primary="You don't permissions to list on-calls. Check your OAuth token permissions." />
+    </ListItem>
+  );
+};

src/components/Incident/IncidentForbiddenState.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * 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.
+ */
+
+// eslint-disable-next-line @backstage/no-undeclared-imports
+import React from 'react';
+import { Grid, Typography } from '@material-ui/core';
+import ForbiddenStateImage from '../../assets/forbiddenstate.svg';
+
+export const IncidentForbiddenState = () => {
+  return (
+    <Grid container justify="center" direction="column" alignItems="center">
+      <Grid item xs={12}>
+        <Typography variant="h5">Feature not available with your account or token.</Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <img
+          src={ForbiddenStateImage}
+          alt="ForbiddenState"
+          data-testid="forbiddenStateImg"
+        />
+      </Grid>
+    </Grid>
+  );
+};

src/components/Incident/Incidents.test.tsx

@@ -44,6 +44,26 @@ describe('Incidents', () => {
     expect(screen.getByText('Nice! No incidents found!')).toBeInTheDocument();
   });
 
+  it("Renders a forbidden state when incidents is undefined", async () => {
+    mockPagerDutyApi.getIncidentsByServiceId = jest
+      .fn()
+      .mockImplementationOnce(async () => {
+        throw new Error("Forbidden: You are not allowed to perform this action");
+      });
+
+    const { getByText, queryByTestId } = render(
+      wrapInTestApp(
+        <ApiProvider apis={apis}>
+          <Incidents serviceId="abc" refreshIncidents={false} />
+        </ApiProvider>
+      )
+    );
+    await waitFor(() => !queryByTestId("progress"));
+    expect(
+      getByText("Feature not available with your account or token.")
+    ).toBeInTheDocument();
+  });
+
   it('Renders all incidents', async () => {
     mockPagerDutyApi.getIncidentsByServiceId = jest
       .fn()

src/components/Incident/Incidents.tsx

@@ -24,6 +24,7 @@ import { Alert } from '@material-ui/lab';
 
 import { useApi } from '@backstage/core-plugin-api';
 import { Progress } from '@backstage/core-components';
+import { IncidentForbiddenState } from './IncidentForbiddenState';
 
 type Props = {
   serviceId: string;
@@ -47,6 +48,10 @@ export const Incidents = ({ serviceId, refreshIncidents }: Props) => {
   }, [refreshIncidents, getIncidents]);
 
   if (error) {
+    if (error.message.includes('Forbidden')) {
+      return <IncidentForbiddenState />;
+    }
+
     return (
       <Alert severity="error">
         Error encountered while fetching information. {error.message}

src/components/PagerDutyCard/index.test.tsx

@@ -114,8 +114,8 @@ describe('PagerDutyCard', () => {
 
     expect(
       getByText(
-        'Error encountered while fetching information. An error occurred',
-      ),
+        "You don't have the required permissions to perform this action. See README for more details."
+      )
     ).toBeInTheDocument();
   });
 
@@ -222,7 +222,7 @@ describe('PagerDutyCard', () => {
 
       expect(
         getByText(
-          'Error encountered while fetching information. An error occurred',
+          "You don't have the required permissions to perform this action. See README for more details.",
         ),
       ).toBeInTheDocument();
     });

src/components/PagerDutyCard/index.tsx

@@ -19,7 +19,6 @@ import { Card, CardHeader, Divider, CardContent } from '@material-ui/core';
 import { Incidents } from '../Incident';
 import { EscalationPolicy } from '../Escalation';
 import useAsync from 'react-use/lib/useAsync';
-import { Alert } from '@material-ui/lab';
 import { pagerDutyApiRef, UnauthorizedError } from '../../api';
 import AlarmAddIcon from '@material-ui/icons/AlarmAdd';
 import { MissingTokenError, ServiceNotFoundError } from '../Errors';
@@ -39,6 +38,7 @@ import {
   InfoCard,
 } from '@backstage/core-components';
 import { PagerDutyEntity } from '../../types';
+import { ForbiddenError } from '../Errors/ForbiddenError';
 
 const BasicCard = ({ children }: { children: ReactNode }) => (
   <InfoCard title="PagerDuty">{children}</InfoCard>
@@ -100,11 +100,7 @@ export const PagerDutyCard = (props: PagerDutyCardProps) => {
         errorNode = <ServiceNotFoundError />;
         break;
       default:
-        errorNode = (
-          <Alert severity="error">
-            Error encountered while fetching information. {error.message}
-          </Alert>
-        );
+        errorNode = <ForbiddenError />;
     }
 
     return <BasicCard>{errorNode}</BasicCard>;