Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit4587082

Browse files
authored
chore: update design of External auth section of CreateWorkspacePage (#17683)
contributes tocoder/preview#59Figma:https://www.figma.com/design/SMg6H8VKXnPSkE6h9KPoAD/UX-Presets?node-id=2180-2995&t=RL6ICIf6KUL5YUpB-1This updates the design of the External authentication section of thecreate workspace page form for both the existing and the newexperimental create workspace pages.<img width="819" alt="Screenshot 2025-05-05 at 18 15 28"src="https://github.com/user-attachments/assets/8bc419dc-e1db-4188-b920-73010bbe626d"/>
1 parent6b4d3f8 commit4587082

File tree

3 files changed

+73
-65
lines changed

3 files changed

+73
-65
lines changed

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ describe("CreateWorkspacePage", () => {
209209
.mockResolvedValue([MockTemplateVersionExternalAuthGithubAuthenticated]);
210210

211211
awaitscreen.findByText(
212-
"Authenticated with GitHub",
212+
"Authenticated",
213213
{},
214214
{interval:500,timeout:5000},
215215
);

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,7 @@ export const CreateWorkspacePageViewExperimental: FC<
304304
<form
305305
onSubmit={form.handleSubmit}
306306
aria-label="Create workspace form"
307-
className="flex flex-col gap-6 w-full border border-border-default border-solid rounded-lg p-6"
307+
className="flex flex-col gap-10 w-full border border-border-default border-solid rounded-lg p-6"
308308
>
309309
{Boolean(error)&&<ErrorAlerterror={error}/>}
310310

@@ -397,14 +397,14 @@ export const CreateWorkspacePageViewExperimental: FC<
397397
{externalAuth&&externalAuth.length>0&&(
398398
<section>
399399
<hgroup>
400-
<h2className="text-xl font-semiboldmb-0">
400+
<h2className="text-xl font-semiboldm-0">
401401
External Authentication
402402
</h2>
403403
<pclassName="text-sm text-content-secondary mt-0">
404404
This template uses external services for authentication.
405405
</p>
406406
</hgroup>
407-
<div>
407+
<divclassName="flex flex-col gap-4">
408408
{Boolean(error)&&!hasAllRequiredExternalAuth&&(
409409
<Alertseverity="error">
410410
To create a workspace using this template, please connect to
Lines changed: 69 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
importReplayIconfrom"@mui/icons-material/Replay";
2-
importLoadingButtonfrom"@mui/lab/LoadingButton";
3-
importButtonfrom"@mui/material/Button";
4-
importTooltipfrom"@mui/material/Tooltip";
5-
import{visuallyHidden}from"@mui/utils";
61
importtype{TemplateVersionExternalAuth}from"api/typesGenerated";
2+
import{Badge}from"components/Badge/Badge";
3+
import{Button}from"components/Button/Button";
74
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";
913
importtype{FC}from"react";
1014

1115
exportinterfaceExternalAuthButtonProps{
@@ -24,62 +28,66 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
2428
error,
2529
})=>{
2630
return(
27-
<>
28-
<divcss={{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-
<Pilltype={error ?"error" :"info"}css={{marginLeft:12}}>
60-
Required
61-
</Pill>
62-
)}
63-
</>
64-
)}
65-
</LoadingButton>
31+
<divclassName="flex items-center gap-2 border border-border border-solid rounded-md p-3 justify-between">
32+
<spanclassName="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+
<pclassName="font-semibold text-sm m-0">{auth.display_name}</p>
41+
{!auth.optional&&(
42+
<Badgesize="sm"variant={error ?"destructive" :"warning"}>
43+
Required
44+
</Badge>
45+
)}
46+
</span>
47+
48+
<spanclassName="flex flex-row items-center gap-2">
49+
{auth.authenticated ?(
50+
<>
51+
<CheckclassName="w-4 h-4 text-content-success"/>
52+
<pclassName="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+
<Spinnerloading={isLoading}/>
71+
Login with{auth.display_name}
72+
</Button>
73+
)}
6674

67-
{displayRetry&&(
68-
<Tooltiptitle="Retry">
69-
<Button
70-
variant="contained"
71-
size="xlarge"
72-
onClick={onStartPolling}
73-
css={{minWidth:"auto",aspectRatio:"1"}}
74-
>
75-
<ReplayIconcss={{width:20,height:20}}/>
76-
<spanaria-hiddencss={{ ...visuallyHidden}}>
77-
Refresh externalauth
78-
</span>
79-
</Button>
80-
</Tooltip>
75+
{displayRetry&&!auth.authenticated&&(
76+
<TooltipProvider>
77+
<TooltipdelayDuration={100}>
78+
<TooltipTriggerasChild>
79+
<Buttonvariant="outline"size="icon"onClick={onStartPolling}>
80+
<Redo/>
81+
<spanclassName="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>
8189
)}
82-
</div>
83-
</>
90+
</span>
91+
</div>
8492
);
8593
};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp