From 3d233a805ba3d999eef064513c4a8e7ffd22e4e8 Mon Sep 17 00:00:00 2001
From: G r e y <grey@coder.com>
Date: Mon, 23 May 2022 20:50:54 +0000
Subject: [PATCH] feat: add retry to ErrorSummary

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
---
 .../ErrorSummary/ErrorSummary.stories.tsx     |  9 +++++++
 .../components/ErrorSummary/ErrorSummary.tsx  | 27 ++++++++++++-------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/site/src/components/ErrorSummary/ErrorSummary.stories.tsx b/site/src/components/ErrorSummary/ErrorSummary.stories.tsx
index af0c07970110e..2788fcbd2d272 100644
--- 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
index 9c528273f5571..4f54daff1d1db 100644
--- 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>
+)