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

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

+11-9
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

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

+5-3
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

+5-6
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)