Skip to content

Commit e75d1c1

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI LoadingButton with Button + Spinner - 2 (#17817)
1 parent c7bc404 commit e75d1c1

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
import LockIcon from "@mui/icons-material/Lock";
33
import LockOpenIcon from "@mui/icons-material/LockOpen";
44
import SensorsIcon from "@mui/icons-material/Sensors";
5-
import LoadingButton from "@mui/lab/LoadingButton";
6-
import Button from "@mui/material/Button";
5+
import MUIButton from "@mui/material/Button";
76
import CircularProgress from "@mui/material/CircularProgress";
87
import FormControl from "@mui/material/FormControl";
98
import Link from "@mui/material/Link";
@@ -27,11 +26,13 @@ import {
2726
type WorkspaceAgentPortShareProtocol,
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
<PopoverContent horizontal="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+
<Button type="submit" disabled={!form.isValid || isSubmitting}>
555+
<Spinner loading={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
import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined";
22
import NotificationOutlined from "@mui/icons-material/NotificationsOutlined";
3-
import LoadingButton from "@mui/lab/LoadingButton";
43
import Skeleton from "@mui/material/Skeleton";
54
import { healthSettings, updateHealthSettings } from "api/queries/debug";
65
import type { 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
export const DismissWarningButton = (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
const updatedSettings = dismissed_healthchecks.filter(
4342
(dismissedHealthcheck) =>
@@ -49,17 +48,18 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
4948
displaySuccess("Warnings enabled successfully!");
5049
}}
5150
>
51+
<Spinner loading={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
const updatedSettings = [...dismissed_healthchecks, props.healthcheck];
6565
await dismissMutation.mutateAsync({
@@ -68,7 +68,10 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
6868
displaySuccess("Warnings dismissed successfully!");
6969
}}
7070
>
71+
<Spinner loading={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-
import LoadingButton from "@mui/lab/LoadingButton";
21
import Link from "@mui/material/Link";
32
import TextField from "@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
import type { 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+
<Spinner loading={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
import PersonAdd from "@mui/icons-material/PersonAdd";
2-
import LoadingButton from "@mui/lab/LoadingButton";
32
import { getErrorMessage } from "api/errors";
43
import type {
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+
<Spinner loading={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
import type { Interpolation, Theme } from "@emotion/react";
2-
import LoadingButton from "@mui/lab/LoadingButton";
3-
import Button from "@mui/material/Button";
2+
import MUIButton from "@mui/material/Button";
43
import TextField from "@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
import type { FC } from "react";
@@ -115,24 +116,24 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
115116
/>
116117

117118
<Stack spacing={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+
<Spinner loading={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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy