Add retry button in login dialog to refetch auth preferences (#46664)

* Add a retry button for fetching auth preferences * Fix types
gravitational · Sep 18, 2024 · d918006 · d918006
1 parent c7cec8d
commit d918006
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.story.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.story.tsx
@@ -45,6 +45,7 @@ function makeProps(): ClusterLoginPresentationProps {
       status: '',
       statusText: '',
     } as Attempt<void>,
+    init: () => null,
     initAttempt: {
       status: 'success',
       statusText: '',

diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.tsx
@@ -18,7 +18,7 @@
 
 import React from 'react';
 import * as Alerts from 'design/Alert';
-import { ButtonIcon, Text, Indicator, Box, H2 } from 'design';
+import { ButtonIcon, Text, Indicator, Box, H2, ButtonPrimary } from 'design';
 import * as Icons from 'design/Icon';
 import { DialogHeader, DialogContent } from 'design/Dialog';
 import { PrimaryAuthType } from 'shared/services';
@@ -43,6 +43,7 @@ export type ClusterLoginPresentationProps = State & {
 export function ClusterLoginPresentation({
   title,
   initAttempt,
+  init,
   loginAttempt,
   clearLoginAttempt,
   onLoginWithLocal,
@@ -69,10 +70,12 @@ export function ClusterLoginPresentation({
         {reason && <Reason reason={reason} />}
 
         {initAttempt.status === 'error' && (
-          <Alerts.Danger m={4}>
-            Unable to retrieve cluster auth preferences,{' '}
-            {initAttempt.statusText}
-          </Alerts.Danger>
+          <Box m={4}>
+            <Alerts.Danger details={initAttempt.statusText}>
+              Unable to retrieve cluster auth preferences
+            </Alerts.Danger>
+            <ButtonPrimary onClick={init}>Retry</ButtonPrimary>
+          </Box>
         )}
         {initAttempt.status === 'processing' && (
           <Box textAlign="center" m={4}>

diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/useClusterLogin.ts b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/useClusterLogin.ts
@@ -184,6 +184,7 @@ export default function useClusterLogin(props: Props) {
     onAbort,
     loginAttempt,
     initAttempt,
+    init,
     clearLoginAttempt,
   };
 }