fix: show errors on SSH Key page

AbhineetJain · AbhineetJain · commit 6ae13b12f12e · 2022-07-26T23:00:52.000Z
diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.test.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.test.tsx
@@ -85,7 +85,7 @@ describe("SSH keys Page", () => {
         fireEvent.click(confirmButton)
 
         // Check if the error message is displayed
-        await screen.findByText(authXServiceLanguage.errorRegenerateSSHKey)
+        await screen.findByText(SSHKeysPageLanguage.errorRegenerateSSHKey)
 
         // Check if the API was called correctly
         expect(API.regenerateUserSSHKey).toBeCalledTimes(1)
diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx
@@ -2,6 +2,7 @@ import Box from "@material-ui/core/Box"
 import Button from "@material-ui/core/Button"
 import CircularProgress from "@material-ui/core/CircularProgress"
 import { useActor } from "@xstate/react"
+import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import React, { useContext, useEffect } from "react"
 import { CodeExample } from "../../../components/CodeExample/CodeExample"
 import { ConfirmDialog } from "../../../components/ConfirmDialog/ConfirmDialog"
@@ -19,12 +20,13 @@ export const Language = {
     "You will need to replace the public SSH key on services you use it with, and you'll need to rebuild existing workspaces.",
   confirmLabel: "Confirm",
   cancelLabel: "Cancel",
+  errorRegenerateSSHKey: "Error on regenerate the SSH Key",
 }
 
 export const SSHKeysPage: React.FC = () => {
   const xServices = useContext(XServiceContext)
   const [authState, authSend] = useActor(xServices.authXService)
-  const { sshKey } = authState.context
+  const { sshKey, getSSHKeyError, regenerateSSHKeyError } = authState.context
 
   useEffect(() => {
     authSend({ type: "GET_SSH_KEY" })
@@ -33,27 +35,39 @@ export const SSHKeysPage: React.FC = () => {
   return (
     <>
       <Section title={Language.title} description={Language.description}>
-        {!sshKey && (
+        {authState.matches("signedIn.ssh.gettingSSHKey") && (
           <Box p={4}>
             <CircularProgress size={26} />
           </Box>
         )}
 
-        {sshKey && (
-          <Stack>
-            <CodeExample code={sshKey.public_key.trim()} />
-            <div>
-              <Button
-                variant="outlined"
-                onClick={() => {
-                  authSend({ type: "REGENERATE_SSH_KEY" })
-                }}
-              >
-                {Language.regenerateLabel}
-              </Button>
-            </div>
-          </Stack>
-        )}
+        <Stack>
+          {/* Regenerating the key is not an option if getSSHKey fails.
+           Only one of the error messages will exist at a single time */}
+          {getSSHKeyError && <ErrorSummary error={getSSHKeyError} />}
+          {regenerateSSHKeyError && (
+            <ErrorSummary
+              error={regenerateSSHKeyError}
+              defaultMessage={Language.errorRegenerateSSHKey}
+              dismissible
+            />
+          )}
+          {authState.matches("signedIn.ssh.loaded") && sshKey && (
+            <>
+              <CodeExample code={sshKey.public_key.trim()} />
+              <div>
+                <Button
+                  variant="outlined"
+                  onClick={() => {
+                    authSend({ type: "REGENERATE_SSH_KEY" })
+                  }}
+                >
+                  {Language.regenerateLabel}
+                </Button>
+              </div>
+            </>
+          )}
+        </Stack>
       </Section>
 
       <ConfirmDialog
diff --git a/site/src/xServices/auth/authXService.ts b/site/src/xServices/auth/authXService.ts
@@ -1,13 +1,12 @@
 import { assign, createMachine } from "xstate"
 import * as API from "../../api/api"
 import * as TypesGen from "../../api/typesGenerated"
-import { displayError, displaySuccess } from "../../components/GlobalSnackbar/utils"
+import { displaySuccess } from "../../components/GlobalSnackbar/utils"
 
 export const Language = {
   successProfileUpdate: "Updated settings.",
   successSecurityUpdate: "Updated password.",
   successRegenerateSSHKey: "SSH Key regenerated successfully",
-  errorRegenerateSSHKey: "Error on regenerate the SSH Key",
 }
 
 export const checks = {
@@ -130,7 +129,7 @@ const sshState = {
             ],
             onError: [
               {
-                actions: ["assignRegenerateSSHKeyError", "notifySSHKeyRegenerationError"],
+                actions: ["assignRegenerateSSHKeyError"],
                 target: "#authState.signedIn.ssh.loaded.idle",
               },
             ],
@@ -488,9 +487,6 @@ export const authMachine =
         notifySuccessSSHKeyRegenerated: () => {
           displaySuccess(Language.successRegenerateSSHKey)
         },
-        notifySSHKeyRegenerationError: () => {
-          displayError(Language.errorRegenerateSSHKey)
-        },
       },
     },
   )
