feat: add retry to ErrorSummary (#1690)

greyscaled · web-flow · commit c465f8a8a35e · 2022-05-23T21:07:52.000Z
Summary:

The ErrorSummary accepts a retry callback and received improvements to
style and product copy

Impact:

This allows xstate-controlled pages to send re-fetch events
diff --git a/site/src/components/ErrorSummary/ErrorSummary.stories.tsx b/site/src/components/ErrorSummary/ErrorSummary.stories.tsx
@@ -1,3 +1,4 @@
+import { action } from "@storybook/addon-actions"
 import { ComponentMeta, Story } from "@storybook/react"
 import React from "react"
 import { ErrorSummary, ErrorSummaryProps } from "./ErrorSummary"
@@ -14,4 +15,12 @@ WithError.args = {
   error: new Error("Something went wrong!"),
 }
 
+export const WithRetry = Template.bind({})
+WithRetry.args = {
+  error: new Error("Failed to fetch something!"),
+  retry: () => {
+    action("retry")
+  },
+}
+
 export const WithUndefined = Template.bind({})
diff --git a/site/src/components/ErrorSummary/ErrorSummary.tsx b/site/src/components/ErrorSummary/ErrorSummary.tsx
@@ -1,19 +1,28 @@
+import Button from "@material-ui/core/Button"
+import RefreshIcon from "@material-ui/icons/Refresh"
 import React from "react"
+import { Stack } from "../Stack/Stack"
 
 const Language = {
-  unknownErrorMessage: "Unknown error",
+  retryMessage: "Retry",
+  unknownErrorMessage: "An unknown error has occurred",
 }
 
 export interface ErrorSummaryProps {
   error: Error | unknown
+  retry?: () => void
 }
 
-export const ErrorSummary: React.FC<ErrorSummaryProps> = ({ error }) => {
-  // TODO: More interesting error page
+export const ErrorSummary: React.FC<ErrorSummaryProps> = ({ error, retry }) => (
+  <Stack>
+    {!(error instanceof Error) ? <div>{Language.unknownErrorMessage}</div> : <div>{error.toString()}</div>}
 
-  if (!(error instanceof Error)) {
-    return <div>{Language.unknownErrorMessage}</div>
-  } else {
-    return <div>{error.toString()}</div>
-  }
-}
+    {retry && (
+      <div>
+        <Button onClick={retry} startIcon={<RefreshIcon />} variant="outlined">
+          {Language.retryMessage}
+        </Button>
+      </div>
+    )}
+  </Stack>
+)
