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

Skip to content

refactor: replace MUI button on TopbarButton #16212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 22, 2025
Merged

refactor: replace MUI button on TopbarButton #16212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fe462ce
refactor: replace MUI button on TopbarButton
BrunoQuaresma Jan 21, 2025
e5aeccf
Visual fixes
BrunoQuaresma Jan 21, 2025
42ffe67
Fix story
BrunoQuaresma Jan 21, 2025
f2adf8a
Run fmt
BrunoQuaresma Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 2 additions & 14 deletions site/src/components/FullPageLayout/Topbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { css } from "@emotion/css";
import { useTheme } from "@emotion/react";
import Button, { type ButtonProps } from "@mui/material/Button";
import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
import { Button, type ButtonProps } from "components/Button/Button";
import {
type FC,
type ForwardedRef,
Expand Down Expand Up @@ -54,19 +54,7 @@ export const TopbarIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(

export const TopbarButton = forwardRef<HTMLButtonElement, ButtonProps>(
(props: ButtonProps, ref) => {
return (
<Button
ref={ref}
color="neutral"
css={{
height: 28,
fontSize: 13,
borderRadius: 4,
padding: "0 12px",
}}
{...props}
/>
);
return <Button ref={ref} variant="outline" size="sm" {...props} />;
},
);

Expand Down
5 changes: 3 additions & 2 deletions site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import type {
Experiments,
SerpentOption,
} from "api/typesGenerated";
import { Link } from "components/Link/Link";
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
import { Stack } from "components/Stack/Stack";
import type { FC } from "react";
Expand Down Expand Up @@ -53,13 +54,13 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
</ul>
It is recommended that you remove these experiments from your
configuration as they have no effect. See{" "}
<a
<Link
href="https://coder.com/docs/cli/server#--experiments"
target="_blank"
rel="noreferrer"
>
the documentation
</a>{" "}
</Link>{" "}
for more details.
</Alert>
)}
Expand Down
26 changes: 7 additions & 19 deletions site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,8 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import CreateIcon from "@mui/icons-material/AddOutlined";
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
import CloseOutlined from "@mui/icons-material/CloseOutlined";
import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined";
import WarningOutlined from "@mui/icons-material/WarningOutlined";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import { getErrorDetail, getErrorMessage } from "api/errors";
Expand All @@ -29,6 +27,7 @@ import {
} from "components/FullPageLayout/Topbar";
import { displayError } from "components/GlobalSnackbar/utils";
import { Loader } from "components/Loader/Loader";
import { PlayIcon } from "lucide-react";
import { linkToTemplate, useLinks } from "modules/navigation";
import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
Expand Down Expand Up @@ -260,28 +259,15 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
>
<TemplateVersionStatusBadge version={templateVersion} />

<ButtonGroup
variant="outlined"
css={{
// Workaround to make the border transitions smoothly on button groups
"& > button:hover + button": {
borderLeft: "1px solid #FFF",
},
}}
disabled={!canBuild}
>
<div className="flex gap-1 items-center">
<TopbarButton
startIcon={
<PlayArrowOutlined
css={{ color: theme.palette.success.light }}
/>
}
title="Build template (Ctrl + Enter)"
disabled={!canBuild}
onClick={async () => {
await triggerPreview();
}}
>
<PlayIcon />
Build
</TopbarButton>
<ProvisionerTagsPopover
Expand All @@ -298,10 +284,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
onUpdateProvisionerTags(newTags);
}}
/>
</ButtonGroup>
</div>

<TopbarButton
variant="contained"
variant="default"
disabled={dirty || !canPublish}
onClick={onPublish}
>
Expand Down Expand Up @@ -555,6 +541,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
}}
>
<button
type="button"
disabled={!buildLogs}
css={styles.tab}
className={selectedTab === "logs" ? "active" : ""}
Expand All @@ -566,6 +553,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
</button>

<button
type="button"
disabled={!canPublish}
css={styles.tab}
className={selectedTab === "resources" ? "active" : ""}
Expand Down
7 changes: 3 additions & 4 deletions site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useTheme } from "@emotion/react";
import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
import Button from "@mui/material/Button";
import visuallyHidden from "@mui/utils/visuallyHidden";
import { API } from "api/api";
Expand All @@ -25,6 +24,7 @@ import {
usePopover,
} from "components/deprecated/Popover/Popover";
import { useFormik } from "formik";
import { ChevronDownIcon } from "lucide-react";
import type { FC } from "react";
import { useQuery } from "react-query";
import { docs } from "utils/docs";
Expand Down Expand Up @@ -61,10 +61,9 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
<TopbarButton
data-testid="build-parameters-button"
disabled={disabled}
color="neutral"
css={{ paddingLeft: 0, paddingRight: 0, minWidth: "28px !important" }}
className="min-w-fit"
>
<ExpandMoreOutlined css={{ fontSize: 14 }} />
<ChevronDownIcon />
<span css={{ ...visuallyHidden }}>{label}</span>
</TopbarButton>
</PopoverTrigger>
Expand Down
86 changes: 31 additions & 55 deletions site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import BlockIcon from "@mui/icons-material/Block";
import OutlinedBlockIcon from "@mui/icons-material/BlockOutlined";
import CloudQueueIcon from "@mui/icons-material/CloudQueue";
import CropSquareIcon from "@mui/icons-material/CropSquare";
import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
import ReplayIcon from "@mui/icons-material/Replay";
import Star from "@mui/icons-material/Star";
import StarBorder from "@mui/icons-material/StarBorder";
import ButtonGroup from "@mui/material/ButtonGroup";
import Tooltip from "@mui/material/Tooltip";
import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
import { TopbarButton } from "components/FullPageLayout/Topbar";
import {
BanIcon,
CirclePlayIcon,
CircleStopIcon,
CloudIcon,
PowerIcon,
RotateCcwIcon,
StarIcon,
StarOffIcon,
} from "lucide-react";
import type { FC } from "react";
import { BuildParametersPopover } from "./BuildParametersPopover";

Expand All @@ -29,9 +29,9 @@ export const UpdateButton: FC<ActionButtonProps> = ({
<TopbarButton
disabled={loading}
data-testid="workspace-update-button"
startIcon={<CloudQueueIcon />}
onClick={() => handleAction()}
>
<CloudIcon />
{loading ? <>Updating&hellip;</> : <>Update&hellip;</>}
</TopbarButton>
);
Expand All @@ -42,11 +42,8 @@ export const ActivateButton: FC<ActionButtonProps> = ({
loading,
}) => {
return (
<TopbarButton
disabled={loading}
startIcon={<PowerSettingsNewIcon />}
onClick={() => handleAction()}
>
<TopbarButton disabled={loading} onClick={() => handleAction()}>
<PowerIcon />
{loading ? <>Activating&hellip;</> : "Activate"}
</TopbarButton>
);
Expand All @@ -64,11 +61,8 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
tooltipText,
}) => {
let mainButton = (
<TopbarButton
startIcon={<PlayCircleOutlineIcon />}
onClick={() => handleAction()}
disabled={disabled || loading}
>
<TopbarButton onClick={() => handleAction()} disabled={disabled || loading}>
<CirclePlayIcon />
{loading ? <>Starting&hellip;</> : "Start"}
</TopbarButton>
);
Expand All @@ -78,24 +72,15 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
}

return (
<ButtonGroup
variant="outlined"
sx={{
// Workaround to make the border transitions smoothly on button groups
"& > button:hover + button": {
borderLeft: "1px solid #FFF",
},
}}
disabled={disabled}
>
<div className="flex gap-1 items-center">
{mainButton}
<BuildParametersPopover
label="Start with build parameters"
workspace={workspace}
disabled={loading}
onSubmit={handleAction}
/>
</ButtonGroup>
</div>
);
};

Expand All @@ -104,10 +89,8 @@ export const UpdateAndStartButton: FC<ActionButtonProps> = ({
}) => {
return (
<Tooltip title="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
<TopbarButton
startIcon={<PlayCircleOutlineIcon />}
onClick={() => handleAction()}
>
<TopbarButton onClick={() => handleAction()}>
<CirclePlayIcon />
Update and start&hellip;
</TopbarButton>
</Tooltip>
Expand All @@ -121,10 +104,10 @@ export const StopButton: FC<ActionButtonProps> = ({
return (
<TopbarButton
disabled={loading}
startIcon={<CropSquareIcon />}
onClick={() => handleAction()}
data-testid="workspace-stop-button"
>
<CircleStopIcon />
{loading ? <>Stopping&hellip;</> : "Stop"}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you link to the Figma designs you are referencing for these changes? I see a the square stop icon being used instead of the circle stop icon.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There aren’t any design references; I’m simply replacing the MUI buttons and keeping design changes minimal. Waiting for designs for every page or component with buttons could take years to complete.

Regarding the icon, I switched to CircleStopIcon for consistency since we use CirclePlayIcon for the start action. However, if you feel this change is too disruptive, I can revert it and restore the old square icon.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just feel like its harder to see the circle icons compared to without the circles but we can always get christin's opinion at some point

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let’s defer to the design master @chrifro for their expert opinion 😆

</TopbarButton>
);
Expand All @@ -136,21 +119,13 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
workspace,
}) => {
return (
<ButtonGroup
variant="outlined"
css={{
// Workaround to make the border transitions smoothly on button groups
"& > button:hover + button": {
borderLeft: "1px solid #FFF",
},
}}
>
<div className="flex gap-1 items-center">
<TopbarButton
startIcon={<ReplayIcon />}
onClick={() => handleAction()}
data-testid="workspace-restart-button"
disabled={loading}
>
<RotateCcwIcon />
{loading ? <>Restarting&hellip;</> : <>Restart&hellip;</>}
</TopbarButton>
<BuildParametersPopover
Expand All @@ -159,7 +134,7 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
disabled={loading}
onSubmit={handleAction}
/>
</ButtonGroup>
</div>
);
};

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

export const CancelButton: FC<ActionButtonProps> = ({ handleAction }) => {
return (
<TopbarButton startIcon={<BlockIcon />} onClick={() => handleAction()}>
<TopbarButton onClick={() => handleAction()}>
<BanIcon />
Cancel
</TopbarButton>
);
Expand All @@ -189,7 +166,8 @@ interface DisabledButtonProps {

export const DisabledButton: FC<DisabledButtonProps> = ({ label }) => {
return (
<TopbarButton startIcon={<OutlinedBlockIcon />} disabled>
<TopbarButton disabled>
<BanIcon />
{label}
</TopbarButton>
);
Expand All @@ -207,10 +185,8 @@ export const FavoriteButton: FC<FavoriteButtonProps> = ({
isFavorite,
}) => {
return (
<TopbarButton
startIcon={isFavorite ? <Star /> : <StarBorder />}
onClick={() => onToggle(workspaceID)}
>
<TopbarButton onClick={() => onToggle(workspaceID)}>
{isFavorite ? <StarOffIcon /> : <StarIcon />}
{isFavorite ? "Unfavorite" : "Favorite"}
</TopbarButton>
);
Expand Down
18 changes: 5 additions & 13 deletions site/src/pages/WorkspacePage/WorkspaceActions/DebugButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import DebugIcon from "@mui/icons-material/BugReportOutlined";
import ButtonGroup from "@mui/material/ButtonGroup";
import type { Workspace } from "api/typesGenerated";
import { TopbarButton } from "components/FullPageLayout/Topbar";
import { BugIcon } from "lucide-react";
import type { FC } from "react";
import { BuildParametersPopover } from "./BuildParametersPopover";
import type { ActionButtonProps } from "./Buttons";
Expand All @@ -17,7 +16,8 @@ export const DebugButton: FC<DebugButtonProps> = ({
enableBuildParameters,
}) => {
const mainAction = (
<TopbarButton startIcon={<DebugIcon />} onClick={() => handleAction()}>
<TopbarButton onClick={() => handleAction()}>
<BugIcon />
Debug
</TopbarButton>
);
Expand All @@ -27,21 +27,13 @@ export const DebugButton: FC<DebugButtonProps> = ({
}

return (
<ButtonGroup
variant="outlined"
css={{
// Workaround to make the border transitions smoothly on button groups
"& > button:hover + button": {
borderLeft: "1px solid #FFF",
},
}}
>
<div className="flex gap-1 items-center">
{mainAction}
<BuildParametersPopover
label="Debug with build parameters"
workspace={workspace}
onSubmit={handleAction}
/>
</ButtonGroup>
</div>
);
};
Loading
Loading