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

+14-17
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

+16-13
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

+8-6
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

+8-7
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

+11-10
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)