Skip to content

Commit 4587082

Browse files
jaaydenhjaaydenh
authored
chore: update design of External auth section of CreateWorkspacePage (#17683)
contributes to coder/preview#59 Figma: https://www.figma.com/design/SMg6H8VKXnPSkE6h9KPoAD/UX-Presets?node-id=2180-2995&t=RL6ICIf6KUL5YUpB-1 This updates the design of the External authentication section of the create workspace page form for both the existing and the new experimental 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 parent 6b4d3f8 commit 4587082

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
await screen.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) && <ErrorAlert error={error} />}
310310

@@ -397,14 +397,14 @@ export const CreateWorkspacePageViewExperimental: FC<
397397
{externalAuth && externalAuth.length > 0 && (
398398
<section>
399399
<hgroup>
400-
<h2 className="text-xl font-semibold mb-0">
400+
<h2 className="text-xl font-semibold m-0">
401401
External Authentication
402402
</h2>
403403
<p className="text-sm text-content-secondary mt-0">
404404
This template uses external services for authentication.
405405
</p>
406406
</hgroup>
407-
<div>
407+
<div className="flex flex-col gap-4">
408408
{Boolean(error) && !hasAllRequiredExternalAuth && (
409409
<Alert severity="error">
410410
To create a workspace using this template, please connect to

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

Lines changed: 69 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
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";
61
import type { 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
import type { FC } from "react";
1014

1115
export interface ExternalAuthButtonProps {
@@ -24,62 +28,66 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
2428
error,
2529
}) => {
2630
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+
)}
6674

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>
8189
)}
82-
</div>
83-
</>
90+
</span>
91+
</div>
8492
);
8593
};

0 commit comments

Comments
 (0)