Skip to content

Commit 9beaca8

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI LoadingButton - 3 (#17833)
- RequestOTPPage - SetupPageView - TemplatePermissionsPageView - AccountForm - ExternalAuthPageView
1 parent 257500c commit 9beaca8

File tree

5 files changed

+41
-37
lines changed

5 files changed

+41
-37
lines changed

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { type Interpolation, type Theme, useTheme } 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 { requestOneTimePassword } from "api/queries/users";
65
import { ErrorAlert } from "components/Alert/ErrorAlert";
6+
import { Button } from "components/Button/Button";
77
import { CustomLogo } from "components/CustomLogo/CustomLogo";
8+
import { Spinner } from "components/Spinner/Spinner";
89
import { Stack } from "components/Stack/Stack";
910
import type { FC } from "react";
1011
import { Helmet } from "react-helmet-async";
@@ -88,24 +89,24 @@ const RequestOTP: FC<RequestOTPProps> = ({
8889
/>
8990

9091
<Stack spacing={1}>
91-
<LoadingButton
92-
loading={isRequesting}
92+
<Button
93+
disabled={isRequesting}
9394
type="submit"
94-
size="large"
95-
fullWidth
96-
variant="contained"
95+
size="lg"
96+
className="w-full"
9797
>
98+
<Spinner loading={isRequesting} />
9899
Reset password
99-
</LoadingButton>
100-
<Button
100+
</Button>
101+
<MuiButton
101102
component={RouterLink}
102103
size="large"
103104
fullWidth
104105
variant="text"
105106
to="/login"
106107
>
107108
Cancel
108-
</Button>
109+
</MuiButton>
109110
</Stack>
110111
</Stack>
111112
</fieldset>
@@ -150,9 +151,9 @@ const RequestOTPSuccess: FC<{ email: string }> = ({ email }) => {
150151
Contact your deployment administrator if you encounter issues.
151152
</p>
152153

153-
<Button component={RouterLink} to="/login">
154+
<MuiButton component={RouterLink} to="/login">
154155
Back to login
155-
</Button>
156+
</MuiButton>
156157
</div>
157158
</div>
158159
);

‎site/src/pages/SetupPage/SetupPageView.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import GitHubIcon from "@mui/icons-material/GitHub";
2-
import LoadingButton from "@mui/lab/LoadingButton";
32
import AlertTitle from "@mui/material/AlertTitle";
43
import Autocomplete from "@mui/material/Autocomplete";
5-
import Button from "@mui/material/Button";
4+
import MuiButton from "@mui/material/Button";
65
import Checkbox from "@mui/material/Checkbox";
76
import Link from "@mui/material/Link";
87
import MenuItem from "@mui/material/MenuItem";
@@ -11,10 +10,12 @@ import { countries } from "api/countriesGenerated";
1110
import type * as TypesGen from "api/typesGenerated";
1211
import { isAxiosError } from "axios";
1312
import { Alert, AlertDetail } from "components/Alert/Alert";
13+
import { Button } from "components/Button/Button";
1414
import { FormFields, VerticalForm } from "components/Form/Form";
1515
import { CoderIcon } from "components/Icons/CoderIcon";
1616
import { PasswordField } from "components/PasswordField/PasswordField";
1717
import { SignInLayout } from "components/SignInLayout/SignInLayout";
18+
import { Spinner } from "components/Spinner/Spinner";
1819
import { Stack } from "components/Stack/Stack";
1920
import { type FormikContextType, useFormik } from "formik";
2021
import type { ChangeEvent, FC } from "react";
@@ -172,7 +173,7 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
172173
<FormFields>
173174
{authMethods?.github.enabled && (
174175
<>
175-
<Button
176+
<MuiButton
176177
fullWidth
177178
component="a"
178179
href="/api/v2/users/oauth2/github/callback"
@@ -182,7 +183,7 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
182183
size="xlarge"
183184
>
184185
{Language.githubCreate}
185-
</Button>
186+
</MuiButton>
186187
<div className="flex items-center gap-4">
187188
<div className="h-[1px] w-full bg-border" />
188189
<div className="shrink-0 text-xs uppercase text-content-secondary tracking-wider">
@@ -376,15 +377,16 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
376377
</Alert>
377378
)}
378379

379-
<LoadingButton
380-
fullWidth
381-
loading={isLoading}
380+
<Button
381+
className="w-full"
382+
disabled={isLoading}
382383
type="submit"
383384
data-testid="create"
384-
size="xlarge"
385+
size="lg"
385386
>
387+
<Spinner loading={isLoading} />
386388
{Language.create}
387-
</LoadingButton>
389+
</Button>
388390
</FormFields>
389391
</VerticalForm>
390392
</SignInLayout>

‎site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import type { Interpolation, Theme } from "@emotion/react";
22
import PersonAdd from "@mui/icons-material/PersonAdd";
3-
import LoadingButton from "@mui/lab/LoadingButton";
43
import MenuItem from "@mui/material/MenuItem";
54
import Select, { type SelectProps } from "@mui/material/Select";
65
import Table from "@mui/material/Table";
@@ -29,6 +28,7 @@ import {
2928
} from "components/DropdownMenu/DropdownMenu";
3029
import { EmptyState } from "components/EmptyState/EmptyState";
3130
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
31+
import { Spinner } from "components/Spinner/Spinner";
3232
import { Stack } from "components/Stack/Stack";
3333
import { TableLoader } from "components/TableLoader/TableLoader";
3434
import { EllipsisVertical } from "lucide-react";
@@ -116,15 +116,15 @@ const AddTemplateUserOrGroup: FC<AddTemplateUserOrGroupProps> = ({
116116
</MenuItem>
117117
</Select>
118118

119-
<LoadingButton
120-
loadingPosition="start"
121-
disabled={!selectedRole || !selectedOption}
119+
<Button
120+
disabled={!selectedRole || !selectedOption || isLoading}
122121
type="submit"
123-
startIcon={<PersonAdd />}
124-
loading={isLoading}
125122
>
123+
<Spinner loading={isLoading}>
124+
<PersonAdd />
125+
</Spinner>
126126
Add member
127-
</LoadingButton>
127+
</Button>
128128
</Stack>
129129
</form>
130130
);

‎site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import LoadingButton from "@mui/lab/LoadingButton";
21
import TextField from "@mui/material/TextField";
32
import type { UpdateUserProfileRequest } from "api/typesGenerated";
43
import { ErrorAlert } from "components/Alert/ErrorAlert";
4+
import { Button } from "components/Button/Button";
55
import { Form, FormFields } from "components/Form/Form";
6+
import { Spinner } from "components/Spinner/Spinner";
67
import { type FormikTouched, useFormik } from "formik";
78
import type { FC } from "react";
89
import {
@@ -86,9 +87,10 @@ export const AccountForm: FC<AccountFormProps> = ({
8687
/>
8788

8889
<div>
89-
<LoadingButton loading={isLoading} type="submit" variant="contained">
90+
<Button disabled={isLoading} type="submit">
91+
<Spinner loading={isLoading} />
9092
{Language.updateSettings}
91-
</LoadingButton>
93+
</Button>
9294
</div>
9395
</FormFields>
9496
</Form>

‎site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useTheme } from "@emotion/react";
22
import AutorenewIcon from "@mui/icons-material/Autorenew";
3-
import LoadingButton from "@mui/lab/LoadingButton";
43
import Table from "@mui/material/Table";
54
import TableBody from "@mui/material/TableBody";
65
import TableCell from "@mui/material/TableCell";
@@ -25,6 +24,7 @@ import {
2524
DropdownMenuTrigger,
2625
} from "components/DropdownMenu/DropdownMenu";
2726
import { Loader } from "components/Loader/Loader";
27+
import { Spinner } from "components/Spinner/Spinner";
2828
import { Stack } from "components/Stack/Stack";
2929
import { TableEmpty } from "components/TableEmpty/TableEmpty";
3030
import { EllipsisVertical } from "lucide-react";
@@ -165,17 +165,16 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
165165
</Stack>
166166
</TableCell>
167167
<TableCell css={{ textAlign: "right" }}>
168-
<LoadingButton
169-
disabled={authenticated}
170-
variant="contained"
171-
loading={externalAuthPollingState === "polling"}
168+
<Button
169+
disabled={authenticated || externalAuthPollingState === "polling"}
172170
onClick={() => {
173171
window.open(authURL, "_blank", "width=900,height=600");
174172
startPollingExternalAuth();
175173
}}
176174
>
175+
<Spinner loading={externalAuthPollingState === "polling"} />
177176
{authenticated ? "Authenticated" : "Click to Login"}
178-
</LoadingButton>
177+
</Button>
179178
</TableCell>
180179
<TableCell>
181180
<DropdownMenu>

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