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

Commite75d1c1

Browse files
chore: replace MUI LoadingButton with Button + Spinner - 2 (#17817)
1 parentc7bc404 commite75d1c1

File tree

5 files changed

+57
-53
lines changed

5 files changed

+57
-53
lines changed

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

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ 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-
importLoadingButtonfrom"@mui/lab/LoadingButton";
6-
importButtonfrom"@mui/material/Button";
5+
importMUIButtonfrom"@mui/material/Button";
76
importCircularProgressfrom"@mui/material/CircularProgress";
87
importFormControlfrom"@mui/material/FormControl";
98
importLinkfrom"@mui/material/Link";
@@ -27,11 +26,13 @@ import {
2726
typeWorkspaceAgentPortShareProtocol,
2827
WorkspaceAppSharingLevels,
2928
}from"api/typesGenerated";
29+
import{Button}from"components/Button/Button";
3030
import{
3131
HelpTooltipLink,
3232
HelpTooltipText,
3333
HelpTooltipTitle,
3434
}from"components/HelpTooltip/HelpTooltip";
35+
import{Spinner}from"components/Spinner/Spinner";
3536
import{
3637
Popover,
3738
PopoverContent,
@@ -76,7 +77,7 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
7677
return(
7778
<Popover>
7879
<PopoverTrigger>
79-
<Button
80+
<MUIButton
8081
disabled={!portsQuery.data}
8182
size="small"
8283
variant="text"
@@ -95,7 +96,7 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
9596
}
9697
>
9798
Open ports
98-
</Button>
99+
</MUIButton>
99100
</PopoverTrigger>
100101
<PopoverContenthorizontal="right"classes={{ paper}}>
101102
<PortForwardPopoverView
@@ -296,7 +297,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
296297
required
297298
css={styles.newPortInput}
298299
/>
299-
<Button
300+
<MUIButton
300301
type="submit"
301302
size="small"
302303
variant="text"
@@ -313,7 +314,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
313314
color:theme.palette.text.primary,
314315
}}
315316
/>
316-
</Button>
317+
</MUIButton>
317318
</form>
318319
</Stack>
319320
</Stack>
@@ -368,7 +369,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
368369
alignItems="center"
369370
>
370371
{canSharePorts&&(
371-
<Button
372+
<MUIButton
372373
size="small"
373374
variant="text"
374375
onClick={async()=>{
@@ -382,7 +383,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
382383
}}
383384
>
384385
Share
385-
</Button>
386+
</MUIButton>
386387
)}
387388
</Stack>
388389
</Stack>
@@ -482,7 +483,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
482483
)}
483484
</Select>
484485
</FormControl>
485-
<Button
486+
<MUIButton
486487
size="small"
487488
variant="text"
488489
css={styles.deleteButton}
@@ -501,7 +502,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
501502
color:theme.palette.text.primary,
502503
}}
503504
/>
504-
</Button>
505+
</MUIButton>
505506
</Stack>
506507
</Stack>
507508
);
@@ -550,14 +551,10 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
550551
disabledPublicMenuItem
551552
)}
552553
</TextField>
553-
<LoadingButton
554-
variant="contained"
555-
type="submit"
556-
loading={isSubmitting}
557-
disabled={!form.isValid}
558-
>
554+
<Buttontype="submit"disabled={!form.isValid||isSubmitting}>
555+
<Spinnerloading={isSubmitting}/>
559556
Share Port
560-
</LoadingButton>
557+
</Button>
561558
</Stack>
562559
</form>
563560
</div>

‎site/src/pages/HealthPage/DismissWarningButton.tsx

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
importNotificationsOffOutlinedfrom"@mui/icons-material/NotificationsOffOutlined";
22
importNotificationOutlinedfrom"@mui/icons-material/NotificationsOutlined";
3-
importLoadingButtonfrom"@mui/lab/LoadingButton";
43
importSkeletonfrom"@mui/material/Skeleton";
54
import{healthSettings,updateHealthSettings}from"api/queries/debug";
65
importtype{HealthSection}from"api/typesGenerated";
6+
import{Button}from"components/Button/Button";
77
import{displaySuccess}from"components/GlobalSnackbar/utils";
8+
import{Spinner}from"components/Spinner/Spinner";
89
import{useMutation,useQuery,useQueryClient}from"react-query";
910

1011
exportconstDismissWarningButton=(props:{healthcheck:HealthSection})=>{
@@ -33,11 +34,9 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
3334

3435
if(isDismissed){
3536
return(
36-
<LoadingButton
37-
disabled={healthSettingsQuery.isLoading}
38-
loading={enableMutation.isLoading}
39-
loadingPosition="start"
40-
startIcon={<NotificationsOffOutlined/>}
37+
<Button
38+
disabled={healthSettingsQuery.isLoading||enableMutation.isLoading}
39+
variant="outline"
4140
onClick={async()=>{
4241
constupdatedSettings=dismissed_healthchecks.filter(
4342
(dismissedHealthcheck)=>
@@ -49,17 +48,18 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
4948
displaySuccess("Warnings enabled successfully!");
5049
}}
5150
>
51+
<Spinnerloading={enableMutation.isLoading}>
52+
<NotificationsOffOutlined/>
53+
</Spinner>
5254
Enable warnings
53-
</LoadingButton>
55+
</Button>
5456
);
5557
}
5658

5759
return(
58-
<LoadingButton
59-
disabled={healthSettingsQuery.isLoading}
60-
loading={dismissMutation.isLoading}
61-
loadingPosition="start"
62-
startIcon={<NotificationOutlined/>}
60+
<Button
61+
disabled={healthSettingsQuery.isLoading||dismissMutation.isLoading}
62+
variant="outline"
6363
onClick={async()=>{
6464
constupdatedSettings=[...dismissed_healthchecks,props.healthcheck];
6565
awaitdismissMutation.mutateAsync({
@@ -68,7 +68,10 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
6868
displaySuccess("Warnings dismissed successfully!");
6969
}}
7070
>
71+
<Spinnerloading={dismissMutation.isLoading}>
72+
<NotificationOutlined/>
73+
</Spinner>
7174
Dismiss warnings
72-
</LoadingButton>
75+
</Button>
7376
);
7477
};

‎site/src/pages/LoginPage/PasswordSignInForm.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
importLoadingButtonfrom"@mui/lab/LoadingButton";
21
importLinkfrom"@mui/material/Link";
32
importTextFieldfrom"@mui/material/TextField";
3+
import{Button}from"components/Button/Button";
4+
import{Spinner}from"components/Spinner/Spinner";
45
import{Stack}from"components/Stack/Stack";
56
import{useFormik}from"formik";
67
importtype{FC}from"react";
@@ -59,14 +60,15 @@ export const PasswordSignInForm: FC<PasswordSignInFormProps> = ({
5960
label={Language.passwordLabel}
6061
type="password"
6162
/>
62-
<LoadingButton
63-
size="xlarge"
64-
loading={isSigningIn}
65-
fullWidth
63+
<Button
64+
size="lg"
65+
disabled={isSigningIn}
66+
className="w-full"
6667
type="submit"
6768
>
69+
<Spinnerloading={isSigningIn}/>
6870
{Language.passwordSignIn}
69-
</LoadingButton>
71+
</Button>
7072
<Link
7173
component={RouterLink}
7274
to="/reset-password"

‎site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
importPersonAddfrom"@mui/icons-material/PersonAdd";
2-
importLoadingButtonfrom"@mui/lab/LoadingButton";
32
import{getErrorMessage}from"api/errors";
43
importtype{
54
Group,
@@ -24,6 +23,7 @@ import {
2423
SettingsHeader,
2524
SettingsHeaderTitle,
2625
}from"components/SettingsHeader/SettingsHeader";
26+
import{Spinner}from"components/Spinner/Spinner";
2727
import{Stack}from"components/Stack/Stack";
2828
import{
2929
Table,
@@ -237,15 +237,16 @@ const AddOrganizationMember: FC<AddOrganizationMemberProps> = ({
237237
}}
238238
/>
239239

240-
<LoadingButton
241-
loadingPosition="start"
242-
disabled={!selectedUser}
240+
<Button
241+
disabled={!selectedUser||isLoading}
243242
type="submit"
244-
startIcon={<PersonAdd/>}
245-
loading={isLoading}
243+
variant="outline"
246244
>
245+
<Spinnerloading={isLoading}>
246+
<PersonAdd/>
247+
</Spinner>
247248
Add user
248-
</LoadingButton>
249+
</Button>
249250
</Stack>
250251
</form>
251252
);

‎site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
importtype{Interpolation,Theme}from"@emotion/react";
2-
importLoadingButtonfrom"@mui/lab/LoadingButton";
3-
importButtonfrom"@mui/material/Button";
2+
importMUIButtonfrom"@mui/material/Button";
43
importTextFieldfrom"@mui/material/TextField";
54
import{isApiValidationError}from"api/errors";
65
import{changePasswordWithOTP}from"api/queries/users";
76
import{ErrorAlert}from"components/Alert/ErrorAlert";
7+
import{Button}from"components/Button/Button";
88
import{CustomLogo}from"components/CustomLogo/CustomLogo";
99
import{displaySuccess}from"components/GlobalSnackbar/utils";
10+
import{Spinner}from"components/Spinner/Spinner";
1011
import{Stack}from"components/Stack/Stack";
1112
import{useFormik}from"formik";
1213
importtype{FC}from"react";
@@ -115,24 +116,24 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
115116
/>
116117

117118
<Stackspacing={1}>
118-
<LoadingButton
119-
loading={form.isSubmitting}
119+
<Button
120+
disabled={form.isSubmitting}
120121
type="submit"
121-
size="large"
122-
fullWidth
123-
variant="contained"
122+
size="lg"
123+
className="w-full"
124124
>
125+
<Spinnerloading={form.isSubmitting}/>
125126
Reset password
126-
</LoadingButton>
127-
<Button
127+
</Button>
128+
<MUIButton
128129
component={RouterLink}
129130
size="large"
130131
fullWidth
131132
variant="text"
132133
to="/login"
133134
>
134135
Back to login
135-
</Button>
136+
</MUIButton>
136137
</Stack>
137138
</Stack>
138139
</fieldset>

0 commit comments

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