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

Lines changed: 12 additions & 9 deletions
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

Lines changed: 8 additions & 7 deletions
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

Lines changed: 5 additions & 5 deletions
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

Lines changed: 5 additions & 3 deletions
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

Lines changed: 14 additions & 21 deletions
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)
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