From fcc3ada247c66f69371092c406fcc6b1eb5b21b1 Mon Sep 17 00:00:00 2001
From: Joel Low <joel@joelsplace.sg>
Date: Fri, 19 Mar 2021 16:23:54 +0800
Subject: [PATCH] feat(errors): Reuse ResponseErrorList for non ResponseErrors

Signed-off-by: Joel Low <joel@joelsplace.sg>
---
 .changeset/shy-owls-grab.md                   |   5 +
 .../ResponseErrorPanel/ResponseErrorPanel.tsx | 136 +++++++++++-------
 2 files changed, 89 insertions(+), 52 deletions(-)
 create mode 100644 .changeset/shy-owls-grab.md

diff --git a/.changeset/shy-owls-grab.md b/.changeset/shy-owls-grab.md
new file mode 100644
index 0000000000..ccee56c153
--- /dev/null
+++ b/.changeset/shy-owls-grab.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+Reuse ResponseErrorList for non ResponseErrors
diff --git a/packages/core/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx b/packages/core/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx
index c36be78f08..52f7ab03f9 100644
--- a/packages/core/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx
+++ b/packages/core/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx
@@ -39,6 +39,78 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
+type ResponseErrorListProps = {
+  error: string;
+  message: string;
+  request?: string;
+  stack?: string;
+  json?: string;
+};
+
+const ResponseErrorList = ({
+  error,
+  request,
+  message,
+  stack,
+  json,
+}: ResponseErrorListProps) => {
+  const classes = useStyles();
+
+  return (
+    <List dense>
+      <ListItem alignItems="flex-start">
+        <ListItemText
+          classes={{ secondary: classes.text }}
+          primary="Error"
+          secondary={error}
+        />
+        <CopyTextButton text={error} />
+      </ListItem>
+      <ListItem alignItems="flex-start">
+        <ListItemText
+          classes={{ secondary: classes.text }}
+          primary="Message"
+          secondary={message}
+        />
+        <CopyTextButton text={message} />
+      </ListItem>
+      {request && (
+        <ListItem alignItems="flex-start">
+          <ListItemText
+            classes={{ secondary: classes.text }}
+            primary="Request"
+            secondary={request}
+          />
+          <CopyTextButton text={request} />
+        </ListItem>
+      )}
+      {stack && (
+        <ListItem alignItems="flex-start">
+          <ListItemText
+            classes={{ secondary: classes.text }}
+            primary="Stack Trace"
+            secondary={stack}
+          />
+          <CopyTextButton text={stack} />
+        </ListItem>
+      )}
+      {json && (
+        <>
+          <Divider component="li" className={classes.divider} />
+          <ListItem alignItems="flex-start">
+            <ListItemText
+              classes={{ secondary: classes.text }}
+              primary="Full Error as JSON"
+              secondary={<CodeSnippet language="json" text={json} />}
+            />
+            <CopyTextButton text={json} />
+          </ListItem>
+        </>
+      )}
+    </List>
+  );
+};
+
 type Props = {
   error: Error;
 };
@@ -50,13 +122,13 @@ type Props = {
  * server-provided information about what happened.
  */
 export const ResponseErrorDetails = ({ error }: Props) => {
-  const classes = useStyles();
-
   if (error.name !== 'ResponseError') {
     return (
-      <List dense>
-        <ListItemText primary="Message" secondary={error.message} />
-      </List>
+      <ResponseErrorList
+        error={error.name}
+        message={error.message}
+        stack={error.stack}
+      />
     );
   }
 
@@ -70,53 +142,13 @@ export const ResponseErrorDetails = ({ error }: Props) => {
   const jsonString = JSON.stringify(data, undefined, 2);
 
   return (
-    <List dense>
-      <ListItem alignItems="flex-start">
-        <ListItemText
-          classes={{ secondary: classes.text }}
-          primary="Error"
-          secondary={errorString}
-        />
-        <CopyTextButton text={errorString} />
-      </ListItem>
-      <ListItem alignItems="flex-start">
-        <ListItemText
-          classes={{ secondary: classes.text }}
-          primary="Message"
-          secondary={messageString}
-        />
-        <CopyTextButton text={messageString} />
-      </ListItem>
-      {requestString && (
-        <ListItem alignItems="flex-start">
-          <ListItemText
-            classes={{ secondary: classes.text }}
-            primary="Request"
-            secondary={requestString}
-          />
-          <CopyTextButton text={requestString} />
-        </ListItem>
-      )}
-      {stackString && (
-        <ListItem alignItems="flex-start">
-          <ListItemText
-            classes={{ secondary: classes.text }}
-            primary="Stack Trace"
-            secondary={stackString}
-          />
-          <CopyTextButton text={stackString} />
-        </ListItem>
-      )}
-      <Divider component="li" className={classes.divider} />
-      <ListItem alignItems="flex-start">
-        <ListItemText
-          classes={{ secondary: classes.text }}
-          primary="Full Error as JSON"
-          secondary={<CodeSnippet language="json" text={jsonString} />}
-        />
-        <CopyTextButton text={jsonString} />
-      </ListItem>
-    </List>
+    <ResponseErrorList
+      error={errorString}
+      message={messageString}
+      request={requestString}
+      stack={stackString}
+      json={jsonString}
+    />
   );
 };