Skip to content

Commit ac32272

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore(site): replace custom LoadingButton from the one in MUI (#10351)
1 parent 3d9bfdd commit ac32272

File tree

15 files changed

+36
-89
lines changed

15 files changed

+36
-89
lines changed

‎site/src/components/Dialogs/Dialog.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog";
22
import { type ReactNode } from "react";
33
import { colors } from "theme/colors";
4-
import {
5-
LoadingButton,
6-
LoadingButtonProps,
7-
} from "../LoadingButton/LoadingButton";
84
import { ConfirmDialogType } from "./types";
95
import { type Interpolation, type Theme } from "@emotion/react";
6+
import LoadingButton, { LoadingButtonProps } from "@mui/lab/LoadingButton";
107

118
export interface DialogActionButtonsProps {
129
/** Text to display in the cancel button */

‎site/src/components/FormFooter/FormFooter.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Button from "@mui/material/Button";
22
import { type FC } from "react";
3-
import { LoadingButton } from "../LoadingButton/LoadingButton";
43
import { Interpolation, Theme } from "@emotion/react";
4+
import LoadingButton from "@mui/lab/LoadingButton";
55

66
export const Language = {
77
cancelLabel: "Cancel",

‎site/src/components/LoadingButton/LoadingButton.stories.tsx

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎site/src/components/LoadingButton/LoadingButton.tsx

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎site/src/pages/CreateWorkspacePage/ExternalAuth.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import Button from "@mui/material/Button";
33
import FormHelperText from "@mui/material/FormHelperText";
44
import Tooltip from "@mui/material/Tooltip";
55
import { type FC } from "react";
6-
import { LoadingButton } from "components/LoadingButton/LoadingButton";
76
import { Stack } from "components/Stack/Stack";
87
import { type ExternalAuthPollingState } from "./CreateWorkspacePage";
8+
import LoadingButton from "@mui/lab/LoadingButton";
99

1010
export interface ExternalAuthProps {
1111
displayName: string;
@@ -34,6 +34,7 @@ export const ExternalAuth: FC<ExternalAuthProps> = (props) => {
3434
>
3535
<Stack alignItems="center" spacing={1}>
3636
<LoadingButton
37+
loadingPosition="start"
3738
loading={externalAuthPollingState === "polling"}
3839
href={authenticateURL}
3940
variant="contained"
@@ -42,8 +43,8 @@ export const ExternalAuth: FC<ExternalAuthProps> = (props) => {
4243
<img
4344
src={displayIcon}
4445
alt={`${displayName} Icon`}
45-
width={24}
46-
height={24}
46+
width={16}
47+
height={16}
4748
/>
4849
}
4950
disabled={authenticated}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Link } from "react-router-dom";
1313
import useWindowSize from "react-use/lib/useWindowSize";
1414
import MuiLink from "@mui/material/Link";
1515
import Tooltip from "@mui/material/Tooltip";
16-
import { LoadingButton } from "components/LoadingButton/LoadingButton";
16+
import LoadingButton from "@mui/lab/LoadingButton";
1717

1818
type Props = {
1919
showConfetti: boolean;
@@ -72,6 +72,7 @@ const LicensesSettingsPageView: FC<Props> = ({
7272
</Button>
7373
<Tooltip title="Refresh license entitlements. This is done automatically every 10 minutes.">
7474
<LoadingButton
75+
loadingPosition="start"
7576
loading={isRefreshing}
7677
onClick={refreshEntitlements}
7778
startIcon={<RefreshIcon />}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { AvatarData } from "components/AvatarData/AvatarData";
1313
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
1414
import { EmptyState } from "components/EmptyState/EmptyState";
1515
import { Loader } from "components/Loader/Loader";
16-
import { LoadingButton } from "components/LoadingButton/LoadingButton";
1716
import { Margins } from "components/Margins/Margins";
1817
import {
1918
PageHeader,
@@ -44,6 +43,7 @@ import {
4443
} from "api/queries/groups";
4544
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
4645
import { getErrorMessage } from "api/errors";
46+
import LoadingButton from "@mui/lab/LoadingButton";
4747

4848
export const GroupPage: FC = () => {
4949
const { groupId } = useParams() as { groupId: string };
@@ -235,6 +235,7 @@ const AddGroupMember: React.FC<{
235235
/>
236236

237237
<LoadingButton
238+
loadingPosition="start"
238239
disabled={!selectedUser}
239240
type="submit"
240241
startIcon={<PersonAdd />}

‎site/src/pages/LoginPage/PasswordSignInForm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Stack } from "components/Stack/Stack";
22
import TextField from "@mui/material/TextField";
33
import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
4-
import { LoadingButton } from "components/LoadingButton/LoadingButton";
54
import { Language } from "./SignInForm";
65
import { FormikContextType, FormikTouched, useFormik } from "formik";
76
import * as Yup from "yup";
87
import { FC } from "react";
98
import { BuiltInAuthFormValues } from "./SignInForm.types";
9+
import LoadingButton from "@mui/lab/LoadingButton";
1010

1111
type PasswordSignInFormProps = {
1212
onSubmit: (credentials: { email: string; password: string }) => void;
@@ -66,7 +66,7 @@ export const PasswordSignInForm: FC<PasswordSignInFormProps> = ({
6666
fullWidth
6767
type="submit"
6868
>
69-
{isSigningIn ? "" : Language.passwordSignIn}
69+
{Language.passwordSignIn}
7070
</LoadingButton>
7171
</div>
7272
</Stack>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import Box from "@mui/material/Box";
22
import Checkbox from "@mui/material/Checkbox";
33
import TextField from "@mui/material/TextField";
44
import Typography from "@mui/material/Typography";
5-
import { LoadingButton } from "components/LoadingButton/LoadingButton";
65
import { SignInLayout } from "components/SignInLayout/SignInLayout";
76
import { Stack } from "components/Stack/Stack";
87
import { Welcome } from "components/Welcome/Welcome";
@@ -14,6 +13,7 @@ import {
1413
} from "utils/formUtils";
1514
import * as Yup from "yup";
1615
import type * as TypesGen from "api/typesGenerated";
16+
import LoadingButton from "@mui/lab/LoadingButton";
1717

1818
export const Language = {
1919
emailLabel: "Email",

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import type {
1818
import { AvatarData } from "components/AvatarData/AvatarData";
1919
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
2020
import { EmptyState } from "components/EmptyState/EmptyState";
21-
import { LoadingButton } from "components/LoadingButton/LoadingButton";
2221
import { Stack } from "components/Stack/Stack";
2322
import { TableLoader } from "components/TableLoader/TableLoader";
2423
import { TableRowMenu } from "components/TableRowMenu/TableRowMenu";
@@ -30,6 +29,7 @@ import { type FC, useState } from "react";
3029
import { GroupAvatar } from "components/GroupAvatar/GroupAvatar";
3130
import { getGroupSubtitle } from "utils/groups";
3231
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
32+
import LoadingButton from "@mui/lab/LoadingButton";
3333

3434
type AddTemplateUserOrGroupProps = {
3535
organizationId: string;
@@ -106,6 +106,7 @@ const AddTemplateUserOrGroup: React.FC<AddTemplateUserOrGroupProps> = ({
106106
</Select>
107107

108108
<LoadingButton
109+
loadingPosition="start"
109110
disabled={!selectedRole || !selectedOption}
110111
type="submit"
111112
startIcon={<PersonAdd />}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import {
77
nameValidator,
88
onChangeTrimmed,
99
} from "utils/formUtils";
10-
import { LoadingButton } from "components/LoadingButton/LoadingButton";
1110
import { ErrorAlert } from "components/Alert/ErrorAlert";
1211
import { Form, FormFields } from "components/Form/Form";
1312
import { UpdateUserProfileRequest } from "api/typesGenerated";
13+
import LoadingButton from "@mui/lab/LoadingButton";
1414

1515
export const Language = {
1616
usernameLabel: "Username",
@@ -76,12 +76,11 @@ export const AccountForm: FC<AccountFormProps> = ({
7676
<div>
7777
<LoadingButton
7878
loading={isLoading}
79-
aria-disabled={!editable}
8079
disabled={!editable}
8180
type="submit"
8281
variant="contained"
8382
>
84-
{isLoading ? "" : Language.updateSettings}
83+
{Language.updateSettings}
8584
</LoadingButton>
8685
</div>
8786
</FormFields>

‎site/src/pages/UserSettingsPage/SchedulePage/ScheduleForm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { FormikContextType, useFormik } from "formik";
33
import { FC, useEffect, useState } from "react";
44
import * as Yup from "yup";
55
import { getFormHelpers } from "utils/formUtils";
6-
import { LoadingButton } from "components/LoadingButton/LoadingButton";
76
import { ErrorAlert } from "components/Alert/ErrorAlert";
87
import { Form, FormFields } from "components/Form/Form";
98
import {
@@ -15,6 +14,7 @@ import { Stack } from "components/Stack/Stack";
1514
import { timeZones, getPreferredTimezone } from "utils/timeZones";
1615
import { Alert } from "components/Alert/Alert";
1716
import { timeToCron, quietHoursDisplay, validTime } from "utils/schedule";
17+
import LoadingButton from "@mui/lab/LoadingButton";
1818

1919
export interface ScheduleFormValues {
2020
time: string;
@@ -130,7 +130,7 @@ export const ScheduleForm: FC<React.PropsWithChildren<ScheduleFormProps>> = ({
130130
type="submit"
131131
variant="contained"
132132
>
133-
{!isLoading && "Update schedule"}
133+
Update schedule
134134
</LoadingButton>
135135
</div>
136136
</FormFields>

‎site/src/pages/UserSettingsPage/SecurityPage/SettingsSecurityForm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
66
import { Form, FormFields } from "components/Form/Form";
77
import { Alert } from "components/Alert/Alert";
88
import { getFormHelpers } from "utils/formUtils";
9-
import { LoadingButton } from "components/LoadingButton/LoadingButton";
9+
import LoadingButton from "@mui/lab/LoadingButton";
1010

1111
interface SecurityFormValues {
1212
old_password: string;
@@ -107,7 +107,7 @@ export const SecurityForm: FC<SecurityFormProps> = ({
107107
type="submit"
108108
variant="contained"
109109
>
110-
{isLoading ? "" : Language.updatePassword}
110+
{Language.updatePassword}
111111
</LoadingButton>
112112
</div>
113113
</FormFields>

‎site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import CloudQueueIcon from "@mui/icons-material/CloudQueue";
44
import CropSquareIcon from "@mui/icons-material/CropSquare";
55
import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
66
import ReplayIcon from "@mui/icons-material/Replay";
7-
import { LoadingButton } from "components/LoadingButton/LoadingButton";
87
import { FC } from "react";
98
import BlockOutlined from "@mui/icons-material/BlockOutlined";
109
import ButtonGroup from "@mui/material/ButtonGroup";
1110
import { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
1211
import { BuildParametersPopover } from "./BuildParametersPopover";
1312
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
13+
import LoadingButton from "@mui/lab/LoadingButton";
1414

1515
interface WorkspaceAction {
1616
loading?: boolean;
@@ -24,13 +24,12 @@ export const UpdateButton: FC<WorkspaceAction> = ({
2424
return (
2525
<LoadingButton
2626
loading={loading}
27-
loadingIndicator={<>Updating&hellip;</>}
2827
loadingPosition="start"
2928
data-testid="workspace-update-button"
3029
startIcon={<CloudQueueIcon />}
3130
onClick={handleAction}
3231
>
33-
Update&hellip;
32+
{loading ? <>Updating&hellip;</> : <>Update&hellip;</>}
3433
</LoadingButton>
3534
);
3635
};
@@ -42,12 +41,11 @@ export const ActivateButton: FC<WorkspaceAction> = ({
4241
return (
4342
<LoadingButton
4443
loading={loading}
45-
loadingIndicator={<>Activating&hellip;</>}
4644
loadingPosition="start"
4745
startIcon={<PowerSettingsNewIcon />}
4846
onClick={handleAction}
4947
>
50-
Activate
48+
{loading ? <>Activating&hellip;</> : "Activate"}
5149
</LoadingButton>
5250
);
5351
};
@@ -70,12 +68,11 @@ export const StartButton: FC<
7068
>
7169
<LoadingButton
7270
loading={loading}
73-
loadingIndicator={<>Starting&hellip;</>}
7471
loadingPosition="start"
7572
startIcon={<PlayCircleOutlineIcon />}
7673
onClick={() => handleAction()}
7774
>
78-
Start
75+
{loading ? <>Starting&hellip;</> : "Start"}
7976
</LoadingButton>
8077
<BuildParametersPopover
8178
workspace={workspace}
@@ -90,13 +87,12 @@ export const StopButton: FC<WorkspaceAction> = ({ handleAction, loading }) => {
9087
return (
9188
<LoadingButton
9289
loading={loading}
93-
loadingIndicator={<>Stopping&hellip;</>}
9490
loadingPosition="start"
9591
startIcon={<CropSquareIcon />}
9692
onClick={handleAction}
9793
data-testid="workspace-stop-button"
9894
>
99-
Stop
95+
{loading ? <>Stopping&hellip;</> : "Stop"}
10096
</LoadingButton>
10197
);
10298
};
@@ -119,13 +115,12 @@ export const RestartButton: FC<
119115
>
120116
<LoadingButton
121117
loading={loading}
122-
loadingIndicator={<>Restarting&hellip;</>}
123118
loadingPosition="start"
124119
startIcon={<ReplayIcon />}
125120
onClick={() => handleAction()}
126121
data-testid="workspace-restart-button"
127122
>
128-
Restart&hellip;
123+
{loading ? <>Restarting&hellip;</> : <>Restart&hellip;</>}
129124
</LoadingButton>
130125
<BuildParametersPopover
131126
workspace={workspace}
@@ -162,12 +157,8 @@ interface LoadingProps {
162157

163158
export const ActionLoadingButton: FC<LoadingProps> = ({ label }) => {
164159
return (
165-
<LoadingButton
166-
loading
167-
loadingPosition="start"
168-
loadingIndicator={label}
169-
// This icon can be anything
170-
startIcon={<ReplayIcon />}
171-
/>
160+
<LoadingButton loading loadingPosition="start" startIcon={<ReplayIcon />}>
161+
{label}
162+
</LoadingButton>
172163
);
173164
};

‎site/src/theme/theme.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,12 @@ dark = createTheme(dark, {
218218
},
219219
},
220220
},
221+
MuiLoadingButton: {
222+
defaultProps: {
223+
variant: "outlined",
224+
color: "neutral",
225+
},
226+
},
221227
MuiTableContainer: {
222228
styleOverrides: {
223229
root: {

0 commit comments

Comments
 (0)