From 13862e400a4706214f8c555f80d2570231231b2c Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 16 May 2023 18:56:25 +0000 Subject: [PATCH] fix(site): Fix loading buttons --- .../LoadingButton/LoadingButton.stories.tsx | 2 - .../LoadingButton/LoadingButton.tsx | 76 +++----------- .../components/WorkspaceActions/Buttons.tsx | 98 +++++++++++-------- .../WorkspaceActions/WorkspaceActions.tsx | 62 +++--------- site/src/theme/theme.ts | 14 +++ 5 files changed, 94 insertions(+), 158 deletions(-) diff --git a/site/src/components/LoadingButton/LoadingButton.stories.tsx b/site/src/components/LoadingButton/LoadingButton.stories.tsx index 4abf9a3923e7b..30c43745c26ed 100644 --- a/site/src/components/LoadingButton/LoadingButton.stories.tsx +++ b/site/src/components/LoadingButton/LoadingButton.stories.tsx @@ -19,12 +19,10 @@ const Template: Story = (args) => ( export const Loading = Template.bind({}) Loading.args = { - variant: "contained", loading: true, } export const NotLoading = Template.bind({}) NotLoading.args = { - variant: "contained", loading: false, } diff --git a/site/src/components/LoadingButton/LoadingButton.tsx b/site/src/components/LoadingButton/LoadingButton.tsx index 76c8e2bfe62fc..1f2a93cc6b0b7 100644 --- a/site/src/components/LoadingButton/LoadingButton.tsx +++ b/site/src/components/LoadingButton/LoadingButton.tsx @@ -1,71 +1,21 @@ -import Button, { ButtonProps } from "@mui/material/Button" -import CircularProgress from "@mui/material/CircularProgress" -import { makeStyles } from "@mui/styles" -import { Theme } from "@mui/material/styles" import { FC } from "react" +import MuiLoadingButton, { + LoadingButtonProps as MuiLoadingButtonProps, +} from "@mui/lab/LoadingButton" -export interface LoadingButtonProps extends ButtonProps { - /** Whether or not to disable the button and show a spinner */ - loading?: boolean - /** An optional label to display with the loading spinner */ - loadingLabel?: string -} +export type LoadingButtonProps = MuiLoadingButtonProps -/** - * LoadingButton is a small wrapper around Material-UI's button to show a loading spinner - * - * In Material-UI 5+ - this is built-in, but since we're on an earlier version, - * we have to roll our own. - */ -export const LoadingButton: FC> = ({ - loading = false, - loadingLabel, +export const LoadingButton: FC = ({ children, - ...rest + loadingIndicator, + ...buttonProps }) => { - const styles = useStyles({ hasLoadingLabel: Boolean(loadingLabel) }) - const hidden = loading ? { opacity: 0 } : undefined - return ( - + + {/* known issue: https://github.com/mui/material-ui/issues/27853 */} + + {buttonProps.loading && loadingIndicator ? loadingIndicator : children} + + ) } - -interface StyleProps { - hasLoadingLabel?: boolean -} - -const useStyles = makeStyles((theme) => ({ - loader: { - position: (props) => { - if (!props.hasLoadingLabel) { - return "absolute" - } - }, - transform: (props) => { - if (!props.hasLoadingLabel) { - return "translate(-50%, -50%)" - } - }, - marginRight: (props) => { - if (props.hasLoadingLabel) { - return "10px" - } - }, - top: "50%", - left: "50%", - height: 22, // centering loading icon - width: 16, - }, - spinner: { - color: theme.palette.text.disabled, - }, -})) diff --git a/site/src/components/WorkspaceActions/Buttons.tsx b/site/src/components/WorkspaceActions/Buttons.tsx index b9d573ed35bac..8992b2fc8ccf7 100644 --- a/site/src/components/WorkspaceActions/Buttons.tsx +++ b/site/src/components/WorkspaceActions/Buttons.tsx @@ -5,76 +5,85 @@ 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, PropsWithChildren } from "react" -import { useTranslation } from "react-i18next" +import { FC } from "react" +import BlockOutlined from "@mui/icons-material/BlockOutlined" interface WorkspaceAction { + loading?: boolean handleAction: () => void } -export const UpdateButton: FC> = ({ +export const UpdateButton: FC = ({ handleAction, + loading, }) => { - const { t } = useTranslation("workspacePage") - return ( - + Update + ) } -export const StartButton: FC> = ({ - handleAction, -}) => { - const { t } = useTranslation("workspacePage") - +export const StartButton: FC = ({ handleAction, loading }) => { return ( - + } + onClick={handleAction} + > + Start + ) } -export const StopButton: FC> = ({ - handleAction, -}) => { - const { t } = useTranslation("workspacePage") - +export const StopButton: FC = ({ handleAction, loading }) => { return ( - + } + onClick={handleAction} + > + Stop + ) } -export const RestartButton: FC> = ({ +export const RestartButton: FC = ({ handleAction, + loading, }) => { - const { t } = useTranslation("workspacePage") - return ( - + Restart + ) } -export const CancelButton: FC> = ({ - handleAction, -}) => { +export const CancelButton: FC = ({ handleAction }) => { return ( - ) @@ -84,11 +93,9 @@ interface DisabledProps { label: string } -export const DisabledButton: FC> = ({ - label, -}) => { +export const DisabledButton: FC = ({ label }) => { return ( - ) @@ -98,8 +105,15 @@ interface LoadingProps { label: string } -export const ActionLoadingButton: FC> = ({ - label, -}) => { - return +export const ActionLoadingButton: FC = ({ label }) => { + return ( + } + /> + ) } diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx index 84cd10c63a824..a842426871a23 100644 --- a/site/src/components/WorkspaceActions/WorkspaceActions.tsx +++ b/site/src/components/WorkspaceActions/WorkspaceActions.tsx @@ -3,7 +3,6 @@ import Menu from "@mui/material/Menu" import { makeStyles } from "@mui/styles" import MoreVertOutlined from "@mui/icons-material/MoreVertOutlined" import { FC, ReactNode, useRef, useState } from "react" -import { useTranslation } from "react-i18next" import { WorkspaceStatus } from "api/typesGenerated" import { ActionLoadingButton, @@ -57,7 +56,6 @@ export const WorkspaceActions: FC = ({ canChangeVersions, }) => { const styles = useStyles() - const { t } = useTranslation("workspacePage") const { canCancel, canAcceptJobs, @@ -69,64 +67,26 @@ export const WorkspaceActions: FC = ({ // A mapping of button type to the corresponding React component const buttonMapping: ButtonMapping = { - [ButtonTypesEnum.update]: ( - - ), + [ButtonTypesEnum.update]: , [ButtonTypesEnum.updating]: ( - - ), - [ButtonTypesEnum.start]: ( - + ), + [ButtonTypesEnum.start]: , [ButtonTypesEnum.starting]: ( - - ), - [ButtonTypesEnum.stop]: ( - + ), + [ButtonTypesEnum.stop]: , [ButtonTypesEnum.stopping]: ( - + ), [ButtonTypesEnum.restart]: , [ButtonTypesEnum.restarting]: ( - - ), - [ButtonTypesEnum.deleting]: ( - - ), - [ButtonTypesEnum.canceling]: ( - - ), - [ButtonTypesEnum.deleted]: ( - - ), - [ButtonTypesEnum.pending]: ( - + ), + [ButtonTypesEnum.deleting]: , + [ButtonTypesEnum.canceling]: , + [ButtonTypesEnum.deleted]: , + [ButtonTypesEnum.pending]: , } // Returns a function that will execute the action and close the menu diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts index 3dccdd5b9c2b3..e4f4351eb3d9d 100644 --- a/site/src/theme/theme.ts +++ b/site/src/theme/theme.ts @@ -133,12 +133,26 @@ dark = createTheme(dark, { sizeSmall: { borderRadius: 6, height: BUTTON_SM_HEIGHT, + + "& .MuiCircularProgress-root": { + width: "14px !important", + height: "14px !important", + }, }, sizeLarge: { height: BUTTON_LG_HEIGHT, }, outlinedNeutral: { borderColor: colors.gray[12], + + "&.Mui-disabled": { + borderColor: colors.gray[13], + color: colors.gray[11], + + "& > .MuiLoadingButton-loadingIndicator": { + color: colors.gray[11], + }, + }, }, containedNeutral: { borderColor: colors.gray[12],