Skip to content

Commit c7bc404

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI LoadingButton with Button + Spinner - 1 (#17816)
1 parent 425ee6f commit c7bc404

File tree

5 files changed

+44
-45
lines changed

5 files changed

+44
-45
lines changed

‎site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
22
import AddIcon from "@mui/icons-material/AddOutlined";
3-
import LoadingButton from "@mui/lab/LoadingButton";
4-
import Button from "@mui/material/Button";
3+
import MuiButton from "@mui/material/Button";
54
import MuiLink from "@mui/material/Link";
65
import Skeleton from "@mui/material/Skeleton";
76
import Tooltip from "@mui/material/Tooltip";
87
import type { GetLicensesResponse } from "api/api";
98
import type { UserStatusChangeCount } from "api/typesGenerated";
9+
import { Button } from "components/Button/Button";
1010
import {
1111
SettingsHeader,
1212
SettingsHeaderDescription,
1313
SettingsHeaderTitle,
1414
} from "components/SettingsHeader/SettingsHeader";
15+
import { Spinner } from "components/Spinner/Spinner";
1516
import { Stack } from "components/Stack/Stack";
1617
import { useWindowSize } from "hooks/useWindowSize";
1718
import { RotateCwIcon } from "lucide-react";
@@ -72,22 +73,24 @@ const LicensesSettingsPageView: FC<Props> = ({
7273
</SettingsHeader>
7374

7475
<Stack direction="row" spacing={2}>
75-
<Button
76+
<MuiButton
7677
component={Link}
7778
to="/deployment/licenses/add"
7879
startIcon={<AddIcon />}
7980
>
8081
Add a license
81-
</Button>
82+
</MuiButton>
8283
<Tooltip title="Refresh license entitlements. This is done automatically every 10 minutes.">
83-
<LoadingButton
84-
loadingPosition="start"
85-
loading={isRefreshing}
84+
<Button
85+
disabled={isRefreshing}
8686
onClick={refreshEntitlements}
87-
startIcon={<RotateCwIcon className="size-icon-xs" />}
87+
variant="outline"
8888
>
89+
<Spinner loading={isRefreshing}>
90+
<RotateCwIcon className="size-icon-xs" />
91+
</Spinner>
8992
Refresh
90-
</LoadingButton>
93+
</Button>
9194
</Tooltip>
9295
</Stack>
9396
</Stack>

‎site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { useTheme } from "@emotion/react";
2-
import LoadingButton from "@mui/lab/LoadingButton";
32
import { API } from "api/api";
3+
import { Button } from "components/Button/Button";
44
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
5+
import { Spinner } from "components/Spinner/Spinner";
56
import type { FC } from "react";
67
import { useMutation } from "react-query";
78

@@ -29,17 +30,17 @@ export const Troubleshooting: FC = () => {
2930
</div>
3031
<div>
3132
<span>
32-
<LoadingButton
33-
variant="outlined"
34-
loading={isLoading}
35-
size="small"
36-
css={{ minWidth: "auto", aspectRatio: "1" }}
33+
<Button
34+
variant="outline"
35+
size="sm"
36+
disabled={isLoading}
3737
onClick={() => {
3838
sendTestNotificationApi();
3939
}}
4040
>
41+
<Spinner loading={isLoading} />
4142
Send notification
42-
</LoadingButton>
43+
</Button>
4344
</span>
4445
</div>
4546
</>

‎site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
22
import CopyIcon from "@mui/icons-material/FileCopyOutlined";
3-
import LoadingButton from "@mui/lab/LoadingButton";
43
import Divider from "@mui/material/Divider";
54
import Table from "@mui/material/Table";
65
import TableBody from "@mui/material/TableBody";
@@ -22,6 +21,7 @@ import {
2221
SettingsHeaderDescription,
2322
SettingsHeaderTitle,
2423
} from "components/SettingsHeader/SettingsHeader";
24+
import { Spinner } from "components/Spinner/Spinner";
2525
import { Stack } from "components/Stack/Stack";
2626
import { TableLoader } from "components/TableLoader/TableLoader";
2727
import { ChevronLeftIcon } from "lucide-react";
@@ -224,14 +224,14 @@ const OAuth2AppSecretsTable: FC<OAuth2AppSecretsTableProps> = ({
224224
justifyContent="space-between"
225225
>
226226
<h2>Client secrets</h2>
227-
<LoadingButton
228-
loading={mutatingResource.createSecret}
227+
<Button
228+
disabled={mutatingResource.createSecret}
229229
type="submit"
230-
variant="contained"
231230
onClick={generateAppSecret}
232231
>
232+
<Spinner loading={mutatingResource.createSecret} />
233233
Generate secret
234-
</LoadingButton>
234+
</Button>
235235
</Stack>
236236

237237
<TableContainer>

‎site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppForm.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import LoadingButton from "@mui/lab/LoadingButton";
21
import TextField from "@mui/material/TextField";
32
import { isApiValidationError, mapApiErrorToFieldErrors } from "api/errors";
43
import type * as TypesGen from "api/typesGenerated";
4+
import { Button } from "components/Button/Button";
5+
import { Spinner } from "components/Spinner/Spinner";
56
import { Stack } from "components/Stack/Stack";
67
import type { FC, ReactNode } from "react";
78

@@ -76,9 +77,10 @@ export const OAuth2AppForm: FC<OAuth2AppFormProps> = ({
7677
/>
7778

7879
<Stack direction="row">
79-
<LoadingButton loading={isUpdating} type="submit" variant="contained">
80+
<Button disabled={isUpdating} type="submit">
81+
<Spinner loading={isUpdating} />
8082
{app ? "Update application" : "Create application"}
81-
</LoadingButton>
83+
</Button>
8284
{actions}
8385
</Stack>
8486
</Stack>

‎site/src/pages/GroupsPage/GroupPage.tsx

+14-21
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { Interpolation, Theme } from "@emotion/react";
22
import PersonAdd from "@mui/icons-material/PersonAdd";
3-
import LoadingButton from "@mui/lab/LoadingButton";
4-
import Button from "@mui/material/Button";
3+
import MuiButton from "@mui/material/Button";
54
import { getErrorMessage } from "api/errors";
65
import {
76
addMember,
@@ -18,7 +17,7 @@ import type {
1817
import { ErrorAlert } from "components/Alert/ErrorAlert";
1918
import { Avatar } from "components/Avatar/Avatar";
2019
import { AvatarData } from "components/Avatar/AvatarData";
21-
import { Button as ShadcnButton } from "components/Button/Button";
20+
import { Button } from "components/Button/Button";
2221
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
2322
import {
2423
DropdownMenu,
@@ -35,6 +34,7 @@ import {
3534
SettingsHeaderDescription,
3635
SettingsHeaderTitle,
3736
} from "components/SettingsHeader/SettingsHeader";
37+
import { Spinner } from "components/Spinner/Spinner";
3838
import { Stack } from "components/Stack/Stack";
3939
import {
4040
Table,
@@ -121,14 +121,14 @@ const GroupPage: FC = () => {
121121

122122
{canUpdateGroup && (
123123
<Stack direction="row" spacing={2}>
124-
<Button
124+
<MuiButton
125125
component={RouterLink}
126126
startIcon={<SettingsIcon className="size-icon-sm" />}
127127
to="settings"
128128
>
129129
Settings
130-
</Button>
131-
<Button
130+
</MuiButton>
131+
<MuiButton
132132
disabled={groupData?.id === groupData?.organization_id}
133133
onClick={() => {
134134
setIsDeletingGroup(true);
@@ -137,7 +137,7 @@ const GroupPage: FC = () => {
137137
css={styles.removeButton}
138138
>
139139
Delete&hellip;
140-
</Button>
140+
</MuiButton>
141141
</Stack>
142142
)}
143143
</Stack>
@@ -279,15 +279,12 @@ const AddGroupMember: FC<AddGroupMemberProps> = ({
279279
}}
280280
/>
281281

282-
<LoadingButton
283-
loadingPosition="start"
284-
disabled={!selectedUser}
285-
type="submit"
286-
startIcon={<PersonAdd />}
287-
loading={isLoading}
288-
>
282+
<Button disabled={!selectedUser || isLoading} type="submit">
283+
<Spinner loading={isLoading}>
284+
<PersonAdd />
285+
</Spinner>
289286
Add user
290-
</LoadingButton>
287+
</Button>
291288
</Stack>
292289
</form>
293290
);
@@ -332,14 +329,10 @@ const GroupMemberRow: FC<GroupMemberRowProps> = ({
332329
{canUpdate && (
333330
<DropdownMenu>
334331
<DropdownMenuTrigger asChild>
335-
<ShadcnButton
336-
size="icon-lg"
337-
variant="subtle"
338-
aria-label="Open menu"
339-
>
332+
<Button size="icon-lg" variant="subtle" aria-label="Open menu">
340333
<EllipsisVertical aria-hidden="true" />
341334
<span className="sr-only">Open menu</span>
342-
</ShadcnButton>
335+
</Button>
343336
</DropdownMenuTrigger>
344337
<DropdownMenuContent align="end">
345338
<DropdownMenuItem

0 commit comments

Comments
 (0)