Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 6cbc44b

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: replace MUI button on TopbarButton (#16212)
Related to #14978
1 parent d659fd9 commit 6cbc44b

File tree

7 files changed

+56
-120
lines changed

7 files changed

+56
-120
lines changed

‎site/src/components/FullPageLayout/Topbar.tsx

+2-14
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { css } from "@emotion/css";
22
import { useTheme } from "@emotion/react";
3-
import Button, { type ButtonProps } from "@mui/material/Button";
43
import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
54
import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
5+
import { Button, type ButtonProps } from "components/Button/Button";
66
import {
77
type FC,
88
type ForwardedRef,
@@ -54,19 +54,7 @@ export const TopbarIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
5454

5555
export const TopbarButton = forwardRef<HTMLButtonElement, ButtonProps>(
5656
(props: ButtonProps, ref) => {
57-
return (
58-
<Button
59-
ref={ref}
60-
color="neutral"
61-
css={{
62-
height: 28,
63-
fontSize: 13,
64-
borderRadius: 4,
65-
padding: "0 12px",
66-
}}
67-
{...props}
68-
/>
69-
);
57+
return <Button ref={ref} variant="outline" size="sm" {...props} />;
7058
},
7159
);
7260

‎site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type {
55
Experiments,
66
SerpentOption,
77
} from "api/typesGenerated";
8+
import { Link } from "components/Link/Link";
89
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
910
import { Stack } from "components/Stack/Stack";
1011
import type { FC } from "react";
@@ -53,13 +54,13 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
5354
</ul>
5455
It is recommended that you remove these experiments from your
5556
configuration as they have no effect. See{" "}
56-
<a
57+
<Link
5758
href="https://coder.com/docs/cli/server#--experiments"
5859
target="_blank"
5960
rel="noreferrer"
6061
>
6162
the documentation
62-
</a>{" "}
63+
</Link>{" "}
6364
for more details.
6465
</Alert>
6566
)}

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

+7-19
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
22
import CreateIcon from "@mui/icons-material/AddOutlined";
33
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
44
import CloseOutlined from "@mui/icons-material/CloseOutlined";
5-
import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined";
65
import WarningOutlined from "@mui/icons-material/WarningOutlined";
76
import Button from "@mui/material/Button";
8-
import ButtonGroup from "@mui/material/ButtonGroup";
97
import IconButton from "@mui/material/IconButton";
108
import Tooltip from "@mui/material/Tooltip";
119
import { getErrorDetail, getErrorMessage } from "api/errors";
@@ -29,6 +27,7 @@ import {
2927
} from "components/FullPageLayout/Topbar";
3028
import { displayError } from "components/GlobalSnackbar/utils";
3129
import { Loader } from "components/Loader/Loader";
30+
import { PlayIcon } from "lucide-react";
3231
import { linkToTemplate, useLinks } from "modules/navigation";
3332
import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
3433
import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
@@ -260,28 +259,15 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
260259
>
261260
<TemplateVersionStatusBadge version={templateVersion} />
262261

263-
<ButtonGroup
264-
variant="outlined"
265-
css={{
266-
// Workaround to make the border transitions smoothly on button groups
267-
"& > button:hover + button": {
268-
borderLeft: "1px solid #FFF",
269-
},
270-
}}
271-
disabled={!canBuild}
272-
>
262+
<div className="flex gap-1 items-center">
273263
<TopbarButton
274-
startIcon={
275-
<PlayArrowOutlined
276-
css={{ color: theme.palette.success.light }}
277-
/>
278-
}
279264
title="Build template (Ctrl + Enter)"
280265
disabled={!canBuild}
281266
onClick={async () => {
282267
await triggerPreview();
283268
}}
284269
>
270+
<PlayIcon />
285271
Build
286272
</TopbarButton>
287273
<ProvisionerTagsPopover
@@ -298,10 +284,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
298284
onUpdateProvisionerTags(newTags);
299285
}}
300286
/>
301-
</ButtonGroup>
287+
</div>
302288

303289
<TopbarButton
304-
variant="contained"
290+
variant="default"
305291
disabled={dirty || !canPublish}
306292
onClick={onPublish}
307293
>
@@ -555,6 +541,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
555541
}}
556542
>
557543
<button
544+
type="button"
558545
disabled={!buildLogs}
559546
css={styles.tab}
560547
className={selectedTab === "logs" ? "active" : ""}
@@ -566,6 +553,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
566553
</button>
567554

568555
<button
556+
type="button"
569557
disabled={!canPublish}
570558
css={styles.tab}
571559
className={selectedTab === "resources" ? "active" : ""}

‎site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useTheme } from "@emotion/react";
2-
import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
32
import Button from "@mui/material/Button";
43
import visuallyHidden from "@mui/utils/visuallyHidden";
54
import { API } from "api/api";
@@ -25,6 +24,7 @@ import {
2524
usePopover,
2625
} from "components/deprecated/Popover/Popover";
2726
import { useFormik } from "formik";
27+
import { ChevronDownIcon } from "lucide-react";
2828
import type { FC } from "react";
2929
import { useQuery } from "react-query";
3030
import { docs } from "utils/docs";
@@ -61,10 +61,9 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
6161
<TopbarButton
6262
data-testid="build-parameters-button"
6363
disabled={disabled}
64-
color="neutral"
65-
css={{ paddingLeft: 0, paddingRight: 0, minWidth: "28px !important" }}
64+
className="min-w-fit"
6665
>
67-
<ExpandMoreOutlined css={{ fontSize: 14 }} />
66+
<ChevronDownIcon />
6867
<span css={{ ...visuallyHidden }}>{label}</span>
6968
</TopbarButton>
7069
</PopoverTrigger>

‎site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx

+31-55
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import BlockIcon from "@mui/icons-material/Block";
2-
import OutlinedBlockIcon from "@mui/icons-material/BlockOutlined";
3-
import CloudQueueIcon from "@mui/icons-material/CloudQueue";
4-
import CropSquareIcon from "@mui/icons-material/CropSquare";
5-
import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
6-
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
7-
import ReplayIcon from "@mui/icons-material/Replay";
8-
import Star from "@mui/icons-material/Star";
9-
import StarBorder from "@mui/icons-material/StarBorder";
10-
import ButtonGroup from "@mui/material/ButtonGroup";
111
import Tooltip from "@mui/material/Tooltip";
122
import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
133
import { TopbarButton } from "components/FullPageLayout/Topbar";
4+
import {
5+
BanIcon,
6+
CirclePlayIcon,
7+
CircleStopIcon,
8+
CloudIcon,
9+
PowerIcon,
10+
RotateCcwIcon,
11+
StarIcon,
12+
StarOffIcon,
13+
} from "lucide-react";
1414
import type { FC } from "react";
1515
import { BuildParametersPopover } from "./BuildParametersPopover";
1616

@@ -29,9 +29,9 @@ export const UpdateButton: FC<ActionButtonProps> = ({
2929
<TopbarButton
3030
disabled={loading}
3131
data-testid="workspace-update-button"
32-
startIcon={<CloudQueueIcon />}
3332
onClick={() => handleAction()}
3433
>
34+
<CloudIcon />
3535
{loading ? <>Updating&hellip;</> : <>Update&hellip;</>}
3636
</TopbarButton>
3737
);
@@ -42,11 +42,8 @@ export const ActivateButton: FC<ActionButtonProps> = ({
4242
loading,
4343
}) => {
4444
return (
45-
<TopbarButton
46-
disabled={loading}
47-
startIcon={<PowerSettingsNewIcon />}
48-
onClick={() => handleAction()}
49-
>
45+
<TopbarButton disabled={loading} onClick={() => handleAction()}>
46+
<PowerIcon />
5047
{loading ? <>Activating&hellip;</> : "Activate"}
5148
</TopbarButton>
5249
);
@@ -64,11 +61,8 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
6461
tooltipText,
6562
}) => {
6663
let mainButton = (
67-
<TopbarButton
68-
startIcon={<PlayCircleOutlineIcon />}
69-
onClick={() => handleAction()}
70-
disabled={disabled || loading}
71-
>
64+
<TopbarButton onClick={() => handleAction()} disabled={disabled || loading}>
65+
<CirclePlayIcon />
7266
{loading ? <>Starting&hellip;</> : "Start"}
7367
</TopbarButton>
7468
);
@@ -78,24 +72,15 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
7872
}
7973

8074
return (
81-
<ButtonGroup
82-
variant="outlined"
83-
sx={{
84-
// Workaround to make the border transitions smoothly on button groups
85-
"& > button:hover + button": {
86-
borderLeft: "1px solid #FFF",
87-
},
88-
}}
89-
disabled={disabled}
90-
>
75+
<div className="flex gap-1 items-center">
9176
{mainButton}
9277
<BuildParametersPopover
9378
label="Start with build parameters"
9479
workspace={workspace}
9580
disabled={loading}
9681
onSubmit={handleAction}
9782
/>
98-
</ButtonGroup>
83+
</div>
9984
);
10085
};
10186

@@ -104,10 +89,8 @@ export const UpdateAndStartButton: FC<ActionButtonProps> = ({
10489
}) => {
10590
return (
10691
<Tooltip title="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
107-
<TopbarButton
108-
startIcon={<PlayCircleOutlineIcon />}
109-
onClick={() => handleAction()}
110-
>
92+
<TopbarButton onClick={() => handleAction()}>
93+
<CirclePlayIcon />
11194
Update and start&hellip;
11295
</TopbarButton>
11396
</Tooltip>
@@ -121,10 +104,10 @@ export const StopButton: FC<ActionButtonProps> = ({
121104
return (
122105
<TopbarButton
123106
disabled={loading}
124-
startIcon={<CropSquareIcon />}
125107
onClick={() => handleAction()}
126108
data-testid="workspace-stop-button"
127109
>
110+
<CircleStopIcon />
128111
{loading ? <>Stopping&hellip;</> : "Stop"}
129112
</TopbarButton>
130113
);
@@ -136,21 +119,13 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
136119
workspace,
137120
}) => {
138121
return (
139-
<ButtonGroup
140-
variant="outlined"
141-
css={{
142-
// Workaround to make the border transitions smoothly on button groups
143-
"& > button:hover + button": {
144-
borderLeft: "1px solid #FFF",
145-
},
146-
}}
147-
>
122+
<div className="flex gap-1 items-center">
148123
<TopbarButton
149-
startIcon={<ReplayIcon />}
150124
onClick={() => handleAction()}
151125
data-testid="workspace-restart-button"
152126
disabled={loading}
153127
>
128+
<RotateCcwIcon />
154129
{loading ? <>Restarting&hellip;</> : <>Restart&hellip;</>}
155130
</TopbarButton>
156131
<BuildParametersPopover
@@ -159,7 +134,7 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
159134
disabled={loading}
160135
onSubmit={handleAction}
161136
/>
162-
</ButtonGroup>
137+
</div>
163138
);
164139
};
165140

@@ -168,7 +143,8 @@ export const UpdateAndRestartButton: FC<ActionButtonProps> = ({
168143
}) => {
169144
return (
170145
<Tooltip title="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
171-
<TopbarButton startIcon={<ReplayIcon />} onClick={() => handleAction()}>
146+
<TopbarButton onClick={() => handleAction()}>
147+
<RotateCcwIcon />
172148
Update and restart&hellip;
173149
</TopbarButton>
174150
</Tooltip>
@@ -177,7 +153,8 @@ export const UpdateAndRestartButton: FC<ActionButtonProps> = ({
177153

178154
export const CancelButton: FC<ActionButtonProps> = ({ handleAction }) => {
179155
return (
180-
<TopbarButton startIcon={<BlockIcon />} onClick={() => handleAction()}>
156+
<TopbarButton onClick={() => handleAction()}>
157+
<BanIcon />
181158
Cancel
182159
</TopbarButton>
183160
);
@@ -189,7 +166,8 @@ interface DisabledButtonProps {
189166

190167
export const DisabledButton: FC<DisabledButtonProps> = ({ label }) => {
191168
return (
192-
<TopbarButton startIcon={<OutlinedBlockIcon />} disabled>
169+
<TopbarButton disabled>
170+
<BanIcon />
193171
{label}
194172
</TopbarButton>
195173
);
@@ -207,10 +185,8 @@ export const FavoriteButton: FC<FavoriteButtonProps> = ({
207185
isFavorite,
208186
}) => {
209187
return (
210-
<TopbarButton
211-
startIcon={isFavorite ? <Star /> : <StarBorder />}
212-
onClick={() => onToggle(workspaceID)}
213-
>
188+
<TopbarButton onClick={() => onToggle(workspaceID)}>
189+
{isFavorite ? <StarOffIcon /> : <StarIcon />}
214190
{isFavorite ? "Unfavorite" : "Favorite"}
215191
</TopbarButton>
216192
);

‎site/src/pages/WorkspacePage/WorkspaceActions/DebugButton.tsx

+5-13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import DebugIcon from "@mui/icons-material/BugReportOutlined";
2-
import ButtonGroup from "@mui/material/ButtonGroup";
31
import type { Workspace } from "api/typesGenerated";
42
import { TopbarButton } from "components/FullPageLayout/Topbar";
3+
import { BugIcon } from "lucide-react";
54
import type { FC } from "react";
65
import { BuildParametersPopover } from "./BuildParametersPopover";
76
import type { ActionButtonProps } from "./Buttons";
@@ -17,7 +16,8 @@ export const DebugButton: FC<DebugButtonProps> = ({
1716
enableBuildParameters,
1817
}) => {
1918
const mainAction = (
20-
<TopbarButton startIcon={<DebugIcon />} onClick={() => handleAction()}>
19+
<TopbarButton onClick={() => handleAction()}>
20+
<BugIcon />
2121
Debug
2222
</TopbarButton>
2323
);
@@ -27,21 +27,13 @@ export const DebugButton: FC<DebugButtonProps> = ({
2727
}
2828

2929
return (
30-
<ButtonGroup
31-
variant="outlined"
32-
css={{
33-
// Workaround to make the border transitions smoothly on button groups
34-
"& > button:hover + button": {
35-
borderLeft: "1px solid #FFF",
36-
},
37-
}}
38-
>
30+
<div className="flex gap-1 items-center">
3931
{mainAction}
4032
<BuildParametersPopover
4133
label="Debug with build parameters"
4234
workspace={workspace}
4335
onSubmit={handleAction}
4436
/>
45-
</ButtonGroup>
37+
</div>
4638
);
4739
};

0 commit comments

Comments
 (0)