From d918006fc97a83012a6bf86c2163e2c648779db8 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <gzdunek@users.noreply.github.com>
Date: Wed, 18 Sep 2024 09:33:29 +0200
Subject: [PATCH] Add retry button in login dialog to refetch auth preferences
 (#46664)

* Add a retry button for fetching auth preferences

* Fix types
---
 .../ClusterLogin/ClusterLogin.story.tsx             |  1 +
 .../ui/ClusterConnect/ClusterLogin/ClusterLogin.tsx | 13 ++++++++-----
 .../ClusterConnect/ClusterLogin/useClusterLogin.ts  |  1 +
 3 files changed, 10 insertions(+), 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
index c5dc2c8566cb7..bd1541cb499e8 100644
--- 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
index 90b6f90cd0045..ec09da2030e39 100644
--- 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
index 3c9c58f07d855..b63a91b26e857 100644
--- 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,
   };
 }