create MissingTokenError and flatten error

plugins/pagerduty/src/components/MissingTokenError.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 React from 'react';
+import { EmptyState } from '@backstage/core';
+import { Button } from '@material-ui/core';
+
+export const MissingTokenError = () => (
+  <EmptyState
+    missing="info"
+    title="Missing or invalid PagerDuty Token"
+    description="The request to fetch data needs a valid token. See README for more details."
+    action={
+      <Button
+        color="primary"
+        variant="contained"
+        href="https://github.com/backstage/backstage/blob/master/plugins/pagerduty/README.md"
+      >
+        Read More
+      </Button>
+    }
+  />
+);

plugins/pagerduty/src/components/PagerdutyCard.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React, { useState } from 'react';
-import { useApi, EmptyState } from '@backstage/core';
+import { useApi } from '@backstage/core';
 import { Entity } from '@backstage/catalog-model';
 import {
   Button,
@@ -31,9 +31,10 @@ import { useAsync } from 'react-use';
 import { Alert } from '@material-ui/lab';
 import { pagerDutyApiRef, UnauthorizedError } from '../api';
 import { IconLinkVertical } from '@backstage/plugin-catalog';
-import PagerDutyIcon from './PagerDutyIcon';
+import { PagerDutyIcon } from './PagerDutyIcon';
 import AlarmAddIcon from '@material-ui/icons/AlarmAdd';
 import { TriggerDialog } from './TriggerDialog';
+import { MissingTokenError } from './MissingTokenError';
 
 const useStyles = makeStyles(theme => ({
   links: {
@@ -93,26 +94,11 @@ export const PagerDutyCard = ({ entity }: Props) => {
     setShowDialog(!showDialog);
   };
 
-  if (error) {
-    if (error instanceof UnauthorizedError) {
-      return (
-        <EmptyState
-          missing="info"
-          title="Missing or invalid PagerDuty Token"
-          description="The request to fetch data needs a valid token. See README for more details."
-          action={
-            <Button
-              color="primary"
-              variant="contained"
-              href="https://github.com/backstage/backstage/blob/master/plugins/pagerduty/README.md"
-            >
-              Read More
-            </Button>
-          }
-        />
-      );
-    }
+  if (error instanceof UnauthorizedError) {
+    return <MissingTokenError />;
+  }
 
+  if (error) {
     return (
       <Alert severity="error">
         Error encountered while fetching information. {error.message}