petru/coder-server
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

fix: remove all mui <IconButton /> instances (#24045)

Browse Source 
This pull-request removes all instances of `<IconButton />` being
imported from `@mui/material/IconButton`. This means that we've removed
one whole dependency from MUI and replaced all instances with the local
variant.
This commit is contained in:
Jake Howell
2026-04-07 01:38:21 +10:00
committed by GitHub
parent 5ff1058f30
commit 0060dee222
12 changed files with 72 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/FileUpload/FileUpload.tsx
+8 -3
View File
@@ -1,8 +1,8 @@
import { css, type Interpolation, type Theme } from "@emotion/react";
import CircularProgress from "@mui/material/CircularProgress";
import IconButton from "@mui/material/IconButton";
import { CloudUploadIcon, FolderIcon, TrashIcon } from "lucide-react";
import { type DragEvent, type FC, type ReactNode, useRef } from "react";
import { Button } from "#/components/Button/Button";
import { Stack } from "#/components/Stack/Stack";
import { useClickable } from "#/hooks/useClickable";
@@ -46,9 +46,14 @@ export const FileUpload: FC<FileUploadProps> = ({
<span>{file.name}</span>
</Stack>
<IconButton title={removeLabel} size="small" onClick={onRemove}>
<Button
variant="subtle"
size="icon-lg"
onClick={onRemove}
title={removeLabel}
>
<TrashIcon className="size-icon-sm" />
</IconButton>
</Button>
</Stack>
);
}
site/src/components/FullPageLayout/Topbar.tsx
+11 -6
View File
@@ -1,5 +1,4 @@
import { useTheme } from "@emotion/react";
import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
import {
cloneElement,
type FC,
@@ -26,15 +25,21 @@ export const Topbar: FC<HTMLAttributes<HTMLElement>> = ({
);
};
export const TopbarIconButton = (({ className, ...props }: IconButtonProps) => {
type TopbarIconButtonProps = ButtonProps;
export const TopbarIconButton = ({
className,
...props
}: TopbarIconButtonProps) => {
return (
<IconButton
<Button
{...props}
size="small"
className={cn("p-0 rounded-none size-12 [&_svg]:size-icon-sm", className)}
size="icon-lg"
variant="subtle"
className={cn("p-0 rounded-none size-12", className)}
/>
);
}) as typeof IconButton;
};
export const TopbarButton: React.FC<ButtonProps> = ({ ...props }) => {
return <Button variant="outline" size="sm" {...props} />;
site/src/modules/provisioners/ProvisionerTag.tsx
+6 -5
View File
@@ -1,7 +1,7 @@
import type { Interpolation, Theme } from "@emotion/react";
import IconButton from "@mui/material/IconButton";
import { CircleCheckIcon, CircleMinusIcon, TagIcon, XIcon } from "lucide-react";
import type { ComponentProps, FC } from "react";
import { Button } from "#/components/Button/Button";
import { Pill } from "#/components/Pill/Pill";
const parseBool = (s: string): { valid: boolean; value: boolean } => {
@@ -41,16 +41,17 @@ export const ProvisionerTag: FC<ProvisionerTagProps> = ({
const content = onDelete ? (
<>
{kv}
<IconButton
size="small"
color="secondary"
<Button
size="icon"
variant="subtle"
onClick={() => {
onDelete(tagName);
}}
className="size-6"
>
<XIcon className="size-icon-xs" />
<span className="sr-only">Delete {tagName}</span>
</IconButton>
</Button>
</>
) : (
kv
site/src/modules/resources/ResourceCard.tsx
+5 -4
View File
@@ -1,8 +1,8 @@
import type { Interpolation, Theme } from "@emotion/react";
import IconButton from "@mui/material/IconButton";
import { Children, type FC, type JSX, useState } from "react";
import type { WorkspaceAgent, WorkspaceResource } from "#/api/typesGenerated";
import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
import { Button } from "#/components/Button/Button";
import { CopyableValue } from "#/components/CopyableValue/CopyableValue";
import { MemoizedInlineMarkdown } from "#/components/Markdown/Markdown";
import { Stack } from "#/components/Stack/Stack";
@@ -165,14 +165,15 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
{mLength > 4 && (
<Tooltip>
<TooltipTrigger asChild>
<IconButton
<Button
onClick={() => {
setShouldDisplayAllMetadata((value) => !value);
}}
size="large"
size="icon-lg"
variant="subtle"
>
<ChevronDownIcon open={shouldDisplayAllMetadata} />
</IconButton>
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">
{shouldDisplayAllMetadata ? "Hide metadata" : "Show all metadata"}
site/src/modules/resources/SensitiveValue.tsx
+6 -5
View File
@@ -1,6 +1,6 @@
import IconButton from "@mui/material/IconButton";
import { EyeIcon, EyeOffIcon } from "lucide-react";
import { type FC, useState } from "react";
import { Button } from "#/components/Button/Button";
import { CopyableValue } from "#/components/CopyableValue/CopyableValue";
import {
Tooltip,
@@ -32,16 +32,17 @@ export const SensitiveValue: FC<SensitiveValueProps> = ({ value }) => {
</CopyableValue>
<Tooltip>
<TooltipTrigger asChild>
<IconButton
className="text-inherit"
<Button
onClick={() => {
setShouldDisplay((value) => !value);
}}
size="small"
size="icon"
variant="subtle"
className="size-6"
aria-label={buttonLabel}
>
{icon}
</IconButton>
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">{buttonLabel}</TooltipContent>
</Tooltip>
site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
+3 -4
View File
@@ -1,6 +1,5 @@
import type { Interpolation, Theme } from "@emotion/react";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import { TriangleAlertIcon, XIcon } from "lucide-react";
import type { FC } from "react";
import { JobError } from "#/api/queries/templates";
@@ -43,10 +42,10 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
<div css={styles.root}>
<header css={styles.header}>
<h3 css={styles.title}>Creating template...</h3>
<IconButton size="small" onClick={drawerProps.onClose}>
<XIcon className="size-icon-sm" />
<Button size="icon-lg" variant="subtle" onClick={drawerProps.onClose}>
<XIcon />
<span className="sr-only">Close build logs</span>
</IconButton>
</Button>
</header>
{isMissingVariables ? (
site/src/pages/HealthPage/HealthLayout.tsx
+5 -4
View File
@@ -1,5 +1,4 @@
import CircularProgress from "@mui/material/CircularProgress";
import IconButton from "@mui/material/IconButton";
import kebabCase from "lodash/fp/kebabCase";
import { BellOffIcon, RotateCcwIcon } from "lucide-react";
import { type FC, Suspense } from "react";
@@ -8,6 +7,7 @@ import { NavLink, Outlet } from "react-router";
import { health, refreshHealth } from "#/api/queries/debug";
import type { HealthSeverity } from "#/api/typesGenerated";
import { ErrorAlert } from "#/components/Alert/ErrorAlert";
import { Button } from "#/components/Button/Button";
import { Loader } from "#/components/Loader/Loader";
import {
Tooltip,
@@ -82,8 +82,9 @@ export const HealthLayout: FC = () => {
<Tooltip>
<TooltipTrigger asChild>
<IconButton
size="small"
<Button
size="icon-lg"
variant="subtle"
disabled={isRefreshing}
data-testid="healthcheck-refresh-button"
onClick={() => {
@@ -95,7 +96,7 @@ export const HealthLayout: FC = () => {
) : (
<RotateCcwIcon className="size-5" />
)}
</IconButton>
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">
Refresh health checks
site/src/pages/IconsPage/IconsPage.tsx
+5 -4
View File
@@ -1,11 +1,11 @@
import { useTheme } from "@emotion/react";
import IconButton from "@mui/material/IconButton";
import InputAdornment from "@mui/material/InputAdornment";
import Link from "@mui/material/Link";
import TextField from "@mui/material/TextField";
import { SearchIcon, XIcon } from "lucide-react";
import { type FC, type ReactNode, useMemo, useState } from "react";
import uFuzzy from "ufuzzy";
import { Button } from "#/components/Button/Button";
import { CopyableValue } from "#/components/CopyableValue/CopyableValue";
import { EmptyState } from "#/components/EmptyState/EmptyState";
import { Margins } from "#/components/Margins/Margins";
@@ -134,12 +134,13 @@ const IconsPage: FC = () => {
<InputAdornment position="end">
<Tooltip>
<TooltipTrigger asChild>
<IconButton
size="small"
<Button
size="icon"
variant="subtle"
onClick={() => setSearchInputText("")}
>
<XIcon className="size-icon-xs" />
</IconButton>
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">Clear filter</TooltipContent>
</Tooltip>
site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+14 -10
View File
@@ -1,4 +1,3 @@
import IconButton from "@mui/material/IconButton";
import {
ChevronLeftIcon,
ExternalLinkIcon,
@@ -222,8 +221,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
<div>
<Tooltip>
<TooltipTrigger asChild>
<TopbarIconButton component={RouterLink} to={templateLink}>
<ChevronLeftIcon className="size-icon-sm" />
<TopbarIconButton asChild>
<RouterLink to={templateLink}>
<ChevronLeftIcon />
</RouterLink>
</TopbarIconButton>
</TooltipTrigger>
<TooltipContent side="bottom">
@@ -325,15 +326,17 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
<div className="ml-auto [&_svg]:fill-content-primary">
<Tooltip>
<TooltipTrigger asChild>
<IconButton
<Button
size="icon"
variant="subtle"
aria-label="Create File"
onClick={(event) => {
setCreateFileOpen(true);
event.currentTarget.blur();
}}
>
<PlusIcon className="size-icon-xs" />
</IconButton>
<PlusIcon />
</Button>
</TooltipTrigger>
<TooltipContent>Create File</TooltipContent>
</Tooltip>
@@ -484,17 +487,18 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
)}
{selectedTab && (
<IconButton
<Button
size="icon"
variant="subtle"
onClick={() => {
setSelectedTab(undefined);
}}
className={cn(
"w-9 h-9 rounded-none",
(selectedTab !== "logs" || !gotBuildLogs) && "ml-auto",
)}
>
<XIcon className="size-icon-xs" />
</IconButton>
<XIcon />
</Button>
)}
</div>
site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx
+5 -4
View File
@@ -1,11 +1,11 @@
import { useTheme } from "@emotion/react";
import IconButton from "@mui/material/IconButton";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { TrashIcon } from "lucide-react";
import type { FC, ReactNode } from "react";
import type { APIKeyWithOwner } from "#/api/typesGenerated";
import { ErrorAlert } from "#/components/Alert/ErrorAlert";
import { Button } from "#/components/Button/Button";
import { ChooseOne, Cond } from "#/components/Conditionals/ChooseOne";
import { Stack } from "#/components/Stack/Stack";
import {
@@ -110,15 +110,16 @@ export const TokensPageView: FC<TokensPageViewProps> = ({
<TableCell>
<span style={{ color: theme.palette.text.secondary }}>
<IconButton
<Button
onClick={() => {
onDelete(token);
}}
size="medium"
size="icon"
variant="destructive"
aria-label="Delete token"
>
<TrashIcon className="size-icon-sm" />
</IconButton>
</Button>
</span>
</TableCell>
</TableRow>
site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
+4 -2
View File
@@ -114,8 +114,10 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
<Topbar className="[grid-area:topbar]">
<Tooltip>
<TooltipTrigger asChild>
<TopbarIconButton component={RouterLink} to="/workspaces">
<ChevronLeftIcon className="size-icon-sm" />
<TopbarIconButton asChild>
<RouterLink to="/workspaces">
<ChevronLeftIcon className="size-icon-sm" />
</RouterLink>
</TopbarIconButton>
</TooltipTrigger>
<TooltipContent side="bottom">Back to workspaces</TooltipContent>
site/vite.config.mts
-1
View File
@@ -180,7 +180,6 @@ export default defineConfig({
"@mui/material/FormGroup",
"@mui/material/FormHelperText",
"@mui/material/FormLabel",
"@mui/material/IconButton",
"@mui/material/InputAdornment",
"@mui/material/InputBase",
"@mui/material/LinearProgress",