diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx index 0c81598354db5..eba3df2903350 100644 --- a/site/src/components/Dialogs/Dialog.tsx +++ b/site/src/components/Dialogs/Dialog.tsx @@ -1,12 +1,9 @@ import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog"; import { type ReactNode } from "react"; import { colors } from "theme/colors"; -import { - LoadingButton, - LoadingButtonProps, -} from "../LoadingButton/LoadingButton"; import { ConfirmDialogType } from "./types"; import { type Interpolation, type Theme } from "@emotion/react"; +import LoadingButton, { LoadingButtonProps } from "@mui/lab/LoadingButton"; export interface DialogActionButtonsProps { /** Text to display in the cancel button */ diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx index 7221aaf6a217d..17d1a81d51230 100644 --- a/site/src/components/FormFooter/FormFooter.tsx +++ b/site/src/components/FormFooter/FormFooter.tsx @@ -1,7 +1,7 @@ import Button from "@mui/material/Button"; import { type FC } from "react"; -import { LoadingButton } from "../LoadingButton/LoadingButton"; import { Interpolation, Theme } from "@emotion/react"; +import LoadingButton from "@mui/lab/LoadingButton"; export const Language = { cancelLabel: "Cancel", diff --git a/site/src/components/LoadingButton/LoadingButton.stories.tsx b/site/src/components/LoadingButton/LoadingButton.stories.tsx deleted file mode 100644 index 618bc7d42a3a3..0000000000000 --- a/site/src/components/LoadingButton/LoadingButton.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { LoadingButton } from "./LoadingButton"; -import type { Meta, StoryObj } from "@storybook/react"; - -const meta: Meta = { - title: "components/LoadingButton", - component: LoadingButton, - args: { - children: "Create workspace", - }, -}; - -export default meta; -type Story = StoryObj; - -export const Loading: Story = { - args: { - loading: true, - }, -}; - -export const NotLoading: Story = { - args: { - loading: false, - }, -}; diff --git a/site/src/components/LoadingButton/LoadingButton.tsx b/site/src/components/LoadingButton/LoadingButton.tsx deleted file mode 100644 index 080e357b14c5f..0000000000000 --- a/site/src/components/LoadingButton/LoadingButton.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { forwardRef } from "react"; -import MuiLoadingButton, { - LoadingButtonProps as MuiLoadingButtonProps, -} from "@mui/lab/LoadingButton"; - -export type LoadingButtonProps = MuiLoadingButtonProps; - -export const LoadingButton = forwardRef< - HTMLButtonElement, - MuiLoadingButtonProps ->(({ children, loadingIndicator, ...buttonProps }, ref) => { - return ( - - {/* known issue: https://github.com/mui/material-ui/issues/27853 */} - - {buttonProps.loading && loadingIndicator ? loadingIndicator : children} - - - ); -}); diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuth.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuth.tsx index 41dde1b8420ab..c1e61ac74832b 100644 --- a/site/src/pages/CreateWorkspacePage/ExternalAuth.tsx +++ b/site/src/pages/CreateWorkspacePage/ExternalAuth.tsx @@ -3,9 +3,9 @@ import Button from "@mui/material/Button"; import FormHelperText from "@mui/material/FormHelperText"; import Tooltip from "@mui/material/Tooltip"; import { type FC } from "react"; -import { LoadingButton } from "components/LoadingButton/LoadingButton"; import { Stack } from "components/Stack/Stack"; import { type ExternalAuthPollingState } from "./CreateWorkspacePage"; +import LoadingButton from "@mui/lab/LoadingButton"; export interface ExternalAuthProps { displayName: string; @@ -34,6 +34,7 @@ export const ExternalAuth: FC = (props) => { > = (props) => { {`${displayName} } disabled={authenticated} diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index d5aabf85d77ed..12d47d738ef5c 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -13,7 +13,7 @@ import { Link } from "react-router-dom"; import useWindowSize from "react-use/lib/useWindowSize"; import MuiLink from "@mui/material/Link"; import Tooltip from "@mui/material/Tooltip"; -import { LoadingButton } from "components/LoadingButton/LoadingButton"; +import LoadingButton from "@mui/lab/LoadingButton"; type Props = { showConfetti: boolean; @@ -72,6 +72,7 @@ const LicensesSettingsPageView: FC = ({ } diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx index cc759d36b3afc..bfc9a9824defc 100644 --- a/site/src/pages/GroupsPage/GroupPage.tsx +++ b/site/src/pages/GroupsPage/GroupPage.tsx @@ -13,7 +13,6 @@ import { AvatarData } from "components/AvatarData/AvatarData"; import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"; import { EmptyState } from "components/EmptyState/EmptyState"; import { Loader } from "components/Loader/Loader"; -import { LoadingButton } from "components/LoadingButton/LoadingButton"; import { Margins } from "components/Margins/Margins"; import { PageHeader, @@ -44,6 +43,7 @@ import { } from "api/queries/groups"; import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"; import { getErrorMessage } from "api/errors"; +import LoadingButton from "@mui/lab/LoadingButton"; export const GroupPage: FC = () => { const { groupId } = useParams() as { groupId: string }; @@ -235,6 +235,7 @@ const AddGroupMember: React.FC<{ /> } diff --git a/site/src/pages/LoginPage/PasswordSignInForm.tsx b/site/src/pages/LoginPage/PasswordSignInForm.tsx index 3703e78044109..fe3252bfa1ccc 100644 --- a/site/src/pages/LoginPage/PasswordSignInForm.tsx +++ b/site/src/pages/LoginPage/PasswordSignInForm.tsx @@ -1,12 +1,12 @@ import { Stack } from "components/Stack/Stack"; import TextField from "@mui/material/TextField"; import { getFormHelpers, onChangeTrimmed } from "utils/formUtils"; -import { LoadingButton } from "components/LoadingButton/LoadingButton"; import { Language } from "./SignInForm"; import { FormikContextType, FormikTouched, useFormik } from "formik"; import * as Yup from "yup"; import { FC } from "react"; import { BuiltInAuthFormValues } from "./SignInForm.types"; +import LoadingButton from "@mui/lab/LoadingButton"; type PasswordSignInFormProps = { onSubmit: (credentials: { email: string; password: string }) => void; @@ -66,7 +66,7 @@ export const PasswordSignInForm: FC = ({ fullWidth type="submit" > - {isSigningIn ? "" : Language.passwordSignIn} + {Language.passwordSignIn} diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx index e07a0185dbe2f..43830ee701d77 100644 --- a/site/src/pages/SetupPage/SetupPageView.tsx +++ b/site/src/pages/SetupPage/SetupPageView.tsx @@ -2,7 +2,6 @@ import Box from "@mui/material/Box"; import Checkbox from "@mui/material/Checkbox"; import TextField from "@mui/material/TextField"; import Typography from "@mui/material/Typography"; -import { LoadingButton } from "components/LoadingButton/LoadingButton"; import { SignInLayout } from "components/SignInLayout/SignInLayout"; import { Stack } from "components/Stack/Stack"; import { Welcome } from "components/Welcome/Welcome"; @@ -14,6 +13,7 @@ import { } from "utils/formUtils"; import * as Yup from "yup"; import type * as TypesGen from "api/typesGenerated"; +import LoadingButton from "@mui/lab/LoadingButton"; export const Language = { emailLabel: "Email", diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx index e106242ccc443..ae4d2b282f267 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx @@ -18,7 +18,6 @@ import type { import { AvatarData } from "components/AvatarData/AvatarData"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; -import { LoadingButton } from "components/LoadingButton/LoadingButton"; import { Stack } from "components/Stack/Stack"; import { TableLoader } from "components/TableLoader/TableLoader"; import { TableRowMenu } from "components/TableRowMenu/TableRowMenu"; @@ -30,6 +29,7 @@ import { type FC, useState } from "react"; import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"; import { getGroupSubtitle } from "utils/groups"; import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"; +import LoadingButton from "@mui/lab/LoadingButton"; type AddTemplateUserOrGroupProps = { organizationId: string; @@ -108,6 +108,7 @@ const AddTemplateUserOrGroup: React.FC = ({ } diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx index 84dbb612b79e1..400cf20464fa2 100644 --- a/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx +++ b/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx @@ -7,10 +7,10 @@ import { nameValidator, onChangeTrimmed, } from "utils/formUtils"; -import { LoadingButton } from "components/LoadingButton/LoadingButton"; import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Form, FormFields } from "components/Form/Form"; import { UpdateUserProfileRequest } from "api/typesGenerated"; +import LoadingButton from "@mui/lab/LoadingButton"; export const Language = { usernameLabel: "Username", @@ -76,12 +76,11 @@ export const AccountForm: FC = ({
- {isLoading ? "" : Language.updateSettings} + {Language.updateSettings}
diff --git a/site/src/pages/UserSettingsPage/SchedulePage/ScheduleForm.tsx b/site/src/pages/UserSettingsPage/SchedulePage/ScheduleForm.tsx index d821681fbf1df..38104575761b7 100644 --- a/site/src/pages/UserSettingsPage/SchedulePage/ScheduleForm.tsx +++ b/site/src/pages/UserSettingsPage/SchedulePage/ScheduleForm.tsx @@ -3,7 +3,6 @@ import { FormikContextType, useFormik } from "formik"; import { FC, useEffect, useState } from "react"; import * as Yup from "yup"; import { getFormHelpers } from "utils/formUtils"; -import { LoadingButton } from "components/LoadingButton/LoadingButton"; import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Form, FormFields } from "components/Form/Form"; import { @@ -15,6 +14,7 @@ import { Stack } from "components/Stack/Stack"; import { timeZones, getPreferredTimezone } from "utils/timeZones"; import { Alert } from "components/Alert/Alert"; import { timeToCron, quietHoursDisplay, validTime } from "utils/schedule"; +import LoadingButton from "@mui/lab/LoadingButton"; export interface ScheduleFormValues { time: string; @@ -130,7 +130,7 @@ export const ScheduleForm: FC> = ({ type="submit" variant="contained" > - {!isLoading && "Update schedule"} + Update schedule
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SettingsSecurityForm.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SettingsSecurityForm.tsx index aedeed228fee0..143e6213832b9 100644 --- a/site/src/pages/UserSettingsPage/SecurityPage/SettingsSecurityForm.tsx +++ b/site/src/pages/UserSettingsPage/SecurityPage/SettingsSecurityForm.tsx @@ -6,7 +6,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Form, FormFields } from "components/Form/Form"; import { Alert } from "components/Alert/Alert"; import { getFormHelpers } from "utils/formUtils"; -import { LoadingButton } from "components/LoadingButton/LoadingButton"; +import LoadingButton from "@mui/lab/LoadingButton"; interface SecurityFormValues { old_password: string; @@ -107,7 +107,7 @@ export const SecurityForm: FC = ({ type="submit" variant="contained" > - {isLoading ? "" : Language.updatePassword} + {Language.updatePassword} diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx index fad2e65a91ee1..12eaf5c9a3edc 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx @@ -4,13 +4,13 @@ import CloudQueueIcon from "@mui/icons-material/CloudQueue"; import CropSquareIcon from "@mui/icons-material/CropSquare"; import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline"; import ReplayIcon from "@mui/icons-material/Replay"; -import { LoadingButton } from "components/LoadingButton/LoadingButton"; import { FC } from "react"; import BlockOutlined from "@mui/icons-material/BlockOutlined"; import ButtonGroup from "@mui/material/ButtonGroup"; import { Workspace, WorkspaceBuildParameter } from "api/typesGenerated"; import { BuildParametersPopover } from "./BuildParametersPopover"; import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew"; +import LoadingButton from "@mui/lab/LoadingButton"; interface WorkspaceAction { loading?: boolean; @@ -24,13 +24,12 @@ export const UpdateButton: FC = ({ return ( Updating…} loadingPosition="start" data-testid="workspace-update-button" startIcon={} onClick={handleAction} > - Update… + {loading ? <>Updating… : <>Update…} ); }; @@ -42,12 +41,11 @@ export const ActivateButton: FC = ({ return ( Activating…} loadingPosition="start" startIcon={} onClick={handleAction} > - Activate + {loading ? <>Activating… : "Activate"} ); }; @@ -70,12 +68,11 @@ export const StartButton: FC< > Starting…} loadingPosition="start" startIcon={} onClick={() => handleAction()} > - Start + {loading ? <>Starting… : "Start"} = ({ handleAction, loading }) => { return ( Stopping…} loadingPosition="start" startIcon={} onClick={handleAction} data-testid="workspace-stop-button" > - Stop + {loading ? <>Stopping… : "Stop"} ); }; @@ -119,13 +115,12 @@ export const RestartButton: FC< > Restarting…} loadingPosition="start" startIcon={} onClick={() => handleAction()} data-testid="workspace-restart-button" > - Restart… + {loading ? <>Restarting… : <>Restart…} = ({ label }) => { return ( - } - /> + }> + {label} + ); }; diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts index 98b3330f3da73..9e098a319a902 100644 --- a/site/src/theme/theme.ts +++ b/site/src/theme/theme.ts @@ -216,6 +216,12 @@ dark = createTheme(dark, { }, }, }, + MuiLoadingButton: { + defaultProps: { + variant: "outlined", + color: "neutral", + }, + }, MuiTableContainer: { styleOverrides: { root: {