1
- import ReplayIcon from "@mui/icons-material/Replay" ;
2
- import LoadingButton from "@mui/lab/LoadingButton" ;
3
- import Button from "@mui/material/Button" ;
4
- import Tooltip from "@mui/material/Tooltip" ;
5
- import { visuallyHidden } from "@mui/utils" ;
6
1
import type { TemplateVersionExternalAuth } from "api/typesGenerated" ;
2
+ import { Badge } from "components/Badge/Badge" ;
3
+ import { Button } from "components/Button/Button" ;
7
4
import { ExternalImage } from "components/ExternalImage/ExternalImage" ;
8
- import { Pill } from "components/Pill/Pill" ;
5
+ import { Spinner } from "components/Spinner/Spinner" ;
6
+ import {
7
+ Tooltip ,
8
+ TooltipContent ,
9
+ TooltipProvider ,
10
+ TooltipTrigger ,
11
+ } from "components/Tooltip/Tooltip" ;
12
+ import { Check , Redo } from "lucide-react" ;
9
13
import type { FC } from "react" ;
10
14
11
15
export interface ExternalAuthButtonProps {
@@ -24,62 +28,66 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
24
28
error,
25
29
} ) => {
26
30
return (
27
- < >
28
- < div css = { { display : "flex" , alignItems : "center" , gap : 8 } } >
29
- < LoadingButton
30
- fullWidth
31
- loading = { isLoading }
32
- variant = "contained"
33
- size = "xlarge"
34
- startIcon = {
35
- auth . display_icon && (
36
- < ExternalImage
37
- src = { auth . display_icon }
38
- alt = { `${ auth . display_name } Icon` }
39
- css = { { width : 16 , height : 16 } }
40
- />
41
- )
42
- }
43
- disabled = { auth . authenticated }
44
- onClick = { ( ) => {
45
- window . open (
46
- auth . authenticate_url ,
47
- "_blank" ,
48
- "width=900,height=600" ,
49
- ) ;
50
- onStartPolling ( ) ;
51
- } }
52
- >
53
- { auth . authenticated ? (
54
- `Authenticated with ${ auth . display_name } `
55
- ) : (
56
- < >
57
- Login with { auth . display_name }
58
- { ! auth . optional && (
59
- < Pill type = { error ? "error" : "info" } css = { { marginLeft : 12 } } >
60
- Required
61
- </ Pill >
62
- ) }
63
- </ >
64
- ) }
65
- </ LoadingButton >
31
+ < div className = "flex items-center gap-2 border border-border border-solid rounded-md p-3 justify-between" >
32
+ < span className = "flex flex-row items-center gap-2" >
33
+ { auth . display_icon && (
34
+ < ExternalImage
35
+ className = "w-5 h-5"
36
+ src = { auth . display_icon }
37
+ alt = { `${ auth . display_name } Icon` }
38
+ />
39
+ ) }
40
+ < p className = "font-semibold text-sm m-0" > { auth . display_name } </ p >
41
+ { ! auth . optional && (
42
+ < Badge size = "sm" variant = { error ? "destructive" : "warning" } >
43
+ Required
44
+ </ Badge >
45
+ ) }
46
+ </ span >
47
+
48
+ < span className = "flex flex-row items-center gap-2" >
49
+ { auth . authenticated ? (
50
+ < >
51
+ < Check className = "w-4 h-4 text-content-success" />
52
+ < p className = "text-xs font-semibold text-content-secondary m-0" >
53
+ Authenticated
54
+ </ p >
55
+ </ >
56
+ ) : (
57
+ < Button
58
+ variant = "default"
59
+ size = "sm"
60
+ disabled = { isLoading || auth . authenticated }
61
+ onClick = { ( ) => {
62
+ window . open (
63
+ auth . authenticate_url ,
64
+ "_blank" ,
65
+ "width=900,height=600" ,
66
+ ) ;
67
+ onStartPolling ( ) ;
68
+ } }
69
+ >
70
+ < Spinner loading = { isLoading } />
71
+ Login with { auth . display_name }
72
+ </ Button >
73
+ ) }
66
74
67
- { displayRetry && (
68
- < Tooltip title = "Retry" >
69
- < Button
70
- variant = "contained"
71
- size = "xlarge"
72
- onClick = { onStartPolling }
73
- css = { { minWidth : "auto" , aspectRatio : "1" } }
74
- >
75
- < ReplayIcon css = { { width : 20 , height : 20 } } / >
76
- < span aria-hidden css = { { ... visuallyHidden } } >
77
- Refresh external auth
78
- </ span >
79
- </ Button >
80
- </ Tooltip >
75
+ { displayRetry && ! auth . authenticated && (
76
+ < TooltipProvider >
77
+ < Tooltip delayDuration = { 100 } >
78
+ < TooltipTrigger asChild >
79
+ < Button variant = "outline" size = "icon" onClick = { onStartPolling } >
80
+ < Redo />
81
+ < span className = "sr-only" > Refresh external auth </ span >
82
+ </ Button >
83
+ </ TooltipTrigger >
84
+ < TooltipContent >
85
+ Retry login with { auth . display_name }
86
+ </ TooltipContent >
87
+ </ Tooltip >
88
+ </ TooltipProvider >
81
89
) }
82
- </ div >
83
- </ >
90
+ </ span >
91
+ </ div >
84
92
) ;
85
93
} ;
0 commit comments