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

Commit87a1ebc

Browse files
chore: replace MUI Button - 1 (#17865)
1 parentf8f4dc6 commit87a1ebc

File tree

13 files changed

+129
-183
lines changed

13 files changed

+129
-183
lines changed

‎site/src/components/PaginationWidget/PageButtons.tsx

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import{useTheme}from"@emotion/react";
2-
importButtonfrom"@mui/material/Button";
1+
import{Button}from"components/Button/Button";
32
importtype{FC,ReactNode}from"react";
43

54
typeNumberedPageButtonProps={
65
pageNumber:number;
76
totalPages:number;
8-
97
onClick?:()=>void;
108
highlighted?:boolean;
119
disabled?:boolean;
@@ -68,23 +66,10 @@ const BasePageButton: FC<BasePageButtonProps> = ({
6866
highlighted=false,
6967
disabled=false,
7068
})=>{
71-
consttheme=useTheme();
72-
7369
return(
7470
<Button
75-
css={
76-
highlighted&&{
77-
borderColor:theme.roles.active.outline,
78-
backgroundColor:theme.roles.active.background,
79-
80-
// Override the hover state with active colors, but not hover
81-
// colors because clicking won't do anything.
82-
"&:hover":{
83-
borderColor:theme.roles.active.outline,
84-
backgroundColor:theme.roles.active.background,
85-
},
86-
}
87-
}
71+
variant={highlighted ?"default" :"outline"}
72+
size="icon"
8873
aria-label={ariaLabel}
8974
name={name}
9075
disabled={disabled}

‎site/src/components/PaginationWidget/PaginationNavButton.tsx

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import{useTheme}from"@emotion/react";
2-
importButtonfrom"@mui/material/Button";
31
importTooltipfrom"@mui/material/Tooltip";
2+
import{Button}from"components/Button/Button";
43
import{
54
typeButtonHTMLAttributes,
65
typeReactNode,
@@ -32,7 +31,6 @@ function PaginationNavButtonCore({
3231
disabledMessageTimeout=3000,
3332
...delegatedProps
3433
}:PaginationNavButtonProps){
35-
consttheme=useTheme();
3634
const[showDisabledMessage,setShowDisabledMessage]=useState(false);
3735

3836
// Inline state sync - this is safe/recommended by the React team in this case
@@ -63,25 +61,10 @@ function PaginationNavButtonCore({
6361
* (mostly for giving direct UI feedback to those actions)
6462
*/}
6563
<Button
66-
aria-disabled={disabled}
67-
css={
68-
disabled&&{
69-
borderColor:theme.palette.divider,
70-
color:theme.palette.text.disabled,
71-
cursor:"default",
72-
"&:hover":{
73-
backgroundColor:theme.palette.background.default,
74-
borderColor:theme.palette.divider,
75-
},
76-
}
77-
}
78-
onClick={()=>{
79-
if(disabled){
80-
setShowDisabledMessage(true);
81-
}else{
82-
onClick();
83-
}
84-
}}
64+
variant="outline"
65+
size="icon"
66+
disabled={disabled}
67+
onClick={onClick}
8568
{...delegatedProps}
8669
/>
8770
</Tooltip>

‎site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
typeSampleProps=Omit<PaginationWidgetBaseProps,"onPageChange">;
1010

1111
describe(PaginationWidgetBase.name,()=>{
12-
it("Should have its previous button bearia-disabled while on page 1",async()=>{
12+
it("Should have its previous button be disabled while on page 1",async()=>{
1313
constsampleProps:SampleProps[]=[
1414
{currentPage:1,pageSize:5,totalRecords:6},
1515
{currentPage:1,pageSize:50,totalRecords:200},
@@ -23,16 +23,15 @@ describe(PaginationWidgetBase.name, () => {
2323
);
2424

2525
constprevButton=awaitscreen.findByLabelText("Previous page");
26-
expect(prevButton).not.toBeDisabled();
27-
expect(prevButton).toHaveAttribute("aria-disabled","true");
26+
expect(prevButton).toBeDisabled();
2827

2928
awaituserEvent.click(prevButton);
3029
expect(onPageChange).not.toHaveBeenCalled();
3130
unmount();
3231
}
3332
});
3433

35-
it("Should have its next button bearia-disabled while on last page",async()=>{
34+
it("Should have its next button be disabled while on last page",async()=>{
3635
constsampleProps:SampleProps[]=[
3736
{currentPage:2,pageSize:5,totalRecords:6},
3837
{currentPage:4,pageSize:50,totalRecords:200},
@@ -46,8 +45,7 @@ describe(PaginationWidgetBase.name, () => {
4645
);
4746

4847
constbutton=awaitscreen.findByLabelText("Next page");
49-
expect(button).not.toBeDisabled();
50-
expect(button).toHaveAttribute("aria-disabled","true");
48+
expect(button).toBeDisabled();
5149

5250
awaituserEvent.click(button);
5351
expect(onPageChange).not.toHaveBeenCalled();
@@ -72,13 +70,11 @@ describe(PaginationWidgetBase.name, () => {
7270
constnextButton=awaitscreen.findByLabelText("Next page");
7371

7472
expect(prevButton).not.toBeDisabled();
75-
expect(prevButton).toHaveAttribute("aria-disabled","false");
7673

7774
awaituserEvent.click(prevButton);
7875
expect(onPageChange).toHaveBeenCalledTimes(1);
7976

8077
expect(nextButton).not.toBeDisabled();
81-
expect(nextButton).toHaveAttribute("aria-disabled","false");
8278

8379
awaituserEvent.click(nextButton);
8480
expect(onPageChange).toHaveBeenCalledTimes(2);

‎site/src/components/PaginationWidget/PaginationWidgetBase.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
5959
}
6060
}}
6161
>
62-
<ChevronLeftIconclassName="size-icon-sm"/>
62+
<ChevronLeftIcon/>
6363
</PaginationNavButton>
6464

6565
{isMobile ?(
@@ -86,7 +86,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
8686
}
8787
}}
8888
>
89-
<ChevronRightIconclassName="size-icon-sm"/>
89+
<ChevronRightIcon/>
9090
</PaginationNavButton>
9191
</div>
9292
);

‎site/src/modules/resources/DownloadAgentLogsButton.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
importDownloadOutlinedfrom"@mui/icons-material/DownloadOutlined";
2-
importButtonfrom"@mui/material/Button";
32
import{agentLogs}from"api/queries/workspaces";
43
importtype{WorkspaceAgent,WorkspaceAgentLog}from"api/typesGenerated";
4+
import{Button}from"components/Button/Button";
55
import{displayError}from"components/GlobalSnackbar/utils";
66
import{saveAs}from"file-saver";
77
import{typeFC,useState}from"react";
@@ -35,10 +35,9 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({
3535

3636
return(
3737
<Button
38-
startIcon={<DownloadOutlined/>}
3938
disabled={!isConnected||isDownloading}
40-
variant="text"
41-
size="small"
39+
variant="subtle"
40+
size="sm"
4241
onClick={async()=>{
4342
try{
4443
setIsDownloading(true);
@@ -57,6 +56,7 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({
5756
}
5857
}}
5958
>
59+
<DownloadOutlined/>
6060
{isDownloading ?"Downloading..." :"Download logs"}
6161
</Button>
6262
);

‎site/src/modules/resources/PortForwardButton.tsx

Lines changed: 59 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
22
importLockIconfrom"@mui/icons-material/Lock";
33
importLockOpenIconfrom"@mui/icons-material/LockOpen";
44
importSensorsIconfrom"@mui/icons-material/Sensors";
5-
importMUIButtonfrom"@mui/material/Button";
6-
importCircularProgressfrom"@mui/material/CircularProgress";
75
importFormControlfrom"@mui/material/FormControl";
86
importLinkfrom"@mui/material/Link";
97
importMenuItemfrom"@mui/material/MenuItem";
108
importSelectfrom"@mui/material/Select";
119
importStackfrom"@mui/material/Stack";
1210
importTextFieldfrom"@mui/material/TextField";
13-
importTooltipfrom"@mui/material/Tooltip";
11+
importMUITooltipfrom"@mui/material/Tooltip";
1412
import{API}from"api/api";
1513
import{
1614
deleteWorkspacePortShare,
@@ -33,14 +31,25 @@ import {
3331
HelpTooltipTitle,
3432
}from"components/HelpTooltip/HelpTooltip";
3533
import{Spinner}from"components/Spinner/Spinner";
34+
import{
35+
Tooltip,
36+
TooltipContent,
37+
TooltipProvider,
38+
TooltipTrigger,
39+
}from"components/Tooltip/Tooltip";
3640
import{
3741
Popover,
3842
PopoverContent,
3943
PopoverTrigger,
4044
}from"components/deprecated/Popover/Popover";
4145
import{typeFormikContextType,useFormik}from"formik";
4246
import{typeClassName,useClassName}from"hooks/useClassName";
43-
import{ChevronDownIcon,ExternalLinkIcon,XasXIcon}from"lucide-react";
47+
import{
48+
ChevronDownIcon,
49+
ExternalLinkIcon,
50+
ShareIcon,
51+
XasXIcon,
52+
}from"lucide-react";
4453
import{useDashboard}from"modules/dashboard/useDashboard";
4554
import{typeFC,useState}from"react";
4655
import{useMutation,useQuery}from"react-query";
@@ -77,26 +86,13 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
7786
return(
7887
<Popover>
7988
<PopoverTrigger>
80-
<MUIButton
81-
disabled={!portsQuery.data}
82-
size="small"
83-
variant="text"
84-
endIcon={<ChevronDownIconclassName="size-4"/>}
85-
css={{fontSize:13,padding:"8px 12px"}}
86-
startIcon={
87-
portsQuery.data ?(
88-
<div>
89-
<spancss={styles.portCount}>
90-
{portsQuery.data.ports.length}
91-
</span>
92-
</div>
93-
) :(
94-
<CircularProgresssize={10}/>
95-
)
96-
}
97-
>
89+
<Buttondisabled={!portsQuery.data}size="sm"variant="subtle">
90+
<Spinnerloading={!portsQuery.data}>
91+
<spancss={styles.portCount}>{portsQuery.data?.ports.length}</span>
92+
</Spinner>
9893
Open ports
99-
</MUIButton>
94+
<ChevronDownIconclassName="size-4"/>
95+
</Button>
10096
</PopoverTrigger>
10197
<PopoverContenthorizontal="right"classes={{ paper}}>
10298
<PortForwardPopoverView
@@ -203,14 +199,14 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
203199
canSharePorts&&template.max_port_share_level==="public";
204200

205201
constdisabledPublicMenuItem=(
206-
<Tooltiptitle="This workspace template does not allow sharing ports with unauthenticated users.">
202+
<MUITooltiptitle="This workspace template does not allow sharing ports with unauthenticated users.">
207203
{/* Tooltips don't work directly on disabled MenuItem components so you must wrap in div. */}
208204
<div>
209205
<MenuItemvalue="public"disabled>
210206
Public
211207
</MenuItem>
212208
</div>
213-
</Tooltip>
209+
</MUITooltip>
214210
);
215211

216212
return(
@@ -297,24 +293,17 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
297293
required
298294
css={styles.newPortInput}
299295
/>
300-
<MUIButton
301-
type="submit"
302-
size="small"
303-
variant="text"
304-
css={{
305-
paddingLeft:12,
306-
paddingRight:12,
307-
minWidth:0,
308-
}}
309-
>
310-
<ExternalLinkIcon
311-
className="size-icon-xs"
312-
css={{
313-
flexShrink:0,
314-
color:theme.palette.text.primary,
315-
}}
316-
/>
317-
</MUIButton>
296+
<TooltipProvider>
297+
<Tooltip>
298+
<TooltipTriggerasChild>
299+
<Buttontype="submit"size="icon"variant="subtle">
300+
<ExternalLinkIcon/>
301+
<spanclassName="sr-only">Connect to port</span>
302+
</Button>
303+
</TooltipTrigger>
304+
<TooltipContent>Connect to port</TooltipContent>
305+
</Tooltip>
306+
</TooltipProvider>
318307
</form>
319308
</Stack>
320309
</Stack>
@@ -369,21 +358,29 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
369358
alignItems="center"
370359
>
371360
{canSharePorts&&(
372-
<MUIButton
373-
size="small"
374-
variant="text"
375-
onClick={async()=>{
376-
awaitupsertSharedPortMutation.mutateAsync({
377-
agent_name:agent.name,
378-
port:port.port,
379-
protocol:listeningPortProtocol,
380-
share_level:"authenticated",
381-
});
382-
awaitsharedPortsQuery.refetch();
383-
}}
384-
>
385-
Share
386-
</MUIButton>
361+
<TooltipProvider>
362+
<Tooltip>
363+
<TooltipTriggerasChild>
364+
<Button
365+
size="icon"
366+
variant="subtle"
367+
onClick={async()=>{
368+
awaitupsertSharedPortMutation.mutateAsync({
369+
agent_name:agent.name,
370+
port:port.port,
371+
protocol:listeningPortProtocol,
372+
share_level:"authenticated",
373+
});
374+
awaitsharedPortsQuery.refetch();
375+
}}
376+
>
377+
<ShareIcon/>
378+
<spanclassName="sr-only">Share</span>
379+
</Button>
380+
</TooltipTrigger>
381+
<TooltipContent>Share this port</TooltipContent>
382+
</Tooltip>
383+
</TooltipProvider>
387384
)}
388385
</Stack>
389386
</Stack>
@@ -483,10 +480,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
483480
)}
484481
</Select>
485482
</FormControl>
486-
<MUIButton
487-
size="small"
488-
variant="text"
489-
css={styles.deleteButton}
483+
<Button
484+
size="sm"
485+
variant="subtle"
490486
onClick={async()=>{
491487
awaitdeleteSharedPortMutation.mutateAsync({
492488
agent_name:agent.name,
@@ -502,7 +498,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
502498
color:theme.palette.text.primary,
503499
}}
504500
/>
505-
</MUIButton>
501+
</Button>
506502
</Stack>
507503
</Stack>
508504
);
@@ -617,11 +613,6 @@ const styles = {
617613
},
618614
}),
619615

620-
deleteButton:()=>({
621-
minWidth:30,
622-
padding:0,
623-
}),
624-
625616
newPortForm:(theme)=>({
626617
border:`1px solid${theme.palette.divider}`,
627618
borderRadius:"4px",

0 commit comments

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