infra: Adopt <Button loading> from MUI 6.4.0

beverloo · Jan 14, 2025 · 0ea735d · 0ea735d
1 parent 99141b3
commit 0ea735d
Show file tree

Hide file tree

Showing 40 changed files with 144 additions and 170 deletions.
diff --git a/app/admin/components/CommunicationDialog.tsx b/app/admin/components/CommunicationDialog.tsx
@@ -18,7 +18,6 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import DoNotDisturbOnTotalSilenceIcon from '@mui/icons-material/DoNotDisturbOnTotalSilence';
 import IconButton from '@mui/material/IconButton';
-import LoadingButton from '@mui/lab/LoadingButton';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import Stack from '@mui/material/Stack';
 import SvgIcon from '@mui/material/SvgIcon';
@@ -287,10 +286,10 @@ export function CommunicationDialog(props: CommunicationDialogProps) {
                             {fatalError}
                         </Typography> }
                     <Button onClick={handleClose} variant="text">{closeLabel}</Button>
-                    <LoadingButton loading={loading} type="submit" variant="contained"
-                                   disabled={ state !== 'message' && !confirmSilent }>
+                    <Button loading={loading} type="submit" variant="contained"
+                            disabled={ state !== 'message' && !confirmSilent }>
                         {confirmLabel}
-                    </LoadingButton>
+                    </Button>
                 </DialogActions>
             </FormContainer>
         </Dialog>

diff --git a/app/admin/components/ConfirmationDialog.tsx b/app/admin/components/ConfirmationDialog.tsx
@@ -12,7 +12,6 @@ import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Typography from '@mui/material/Typography';
 
 /**
@@ -133,9 +132,9 @@ export function ConfirmationDialog(props: React.PropsWithChildren<ConfirmationDi
             </DialogContent>
             <DialogActions sx={{ pt: 0, mr: 2, mb: 2 }}>
                 <Button onClick={handleClose} variant="text">{closeLabel}</Button>
-                <LoadingButton loading={loading} onClick={handleConfirm} variant="contained">
+                <Button loading={loading} onClick={handleConfirm} variant="contained">
                     {confirmLabel}
-                </LoadingButton>
+                </Button>
             </DialogActions>
         </Dialog>
     );

diff --git a/app/admin/components/FormGridSection.tsx b/app/admin/components/FormGridSection.tsx
@@ -9,9 +9,9 @@ import { FormProvider, useForm } from '@proxy/react-hook-form-mui';
 import { useRouter } from 'next/navigation';
 
 import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
 import Grid from '@mui/material/Grid2';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 
@@ -182,10 +182,9 @@ export function FormGridSection(props: React.PropsWithChildren<FormGridSectionPr
                                            borderRadius: 2,
                                            padding: 1,
                                        }}>
-                                    <LoadingButton variant="contained" type="submit"
-                                                   loading={!!isPending}>
+                                    <Button variant="contained" type="submit" loading={!!isPending}>
                                         Save changes
-                                    </LoadingButton>
+                                    </Button>
                                     { (!!state && !state.success) &&
                                         <Alert severity="warning" sx={{flexGrow: 1, px: 1, py: 0}}>
                                             { state.error || 'The changes could not be saved' }

diff --git a/app/admin/components/PublishAlert.tsx b/app/admin/components/PublishAlert.tsx
@@ -5,7 +5,7 @@
 
 import { useCallback, useState } from 'react';
 
-import LoadingButton from '@mui/lab/LoadingButton';
+import Button from '@mui/material/Button';
 import Stack, { stackClasses } from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { alertClasses } from '@mui/material/Alert';
@@ -56,10 +56,9 @@ export const PublishAlert = styled((props: React.PropsWithChildren<PublishAlertP
                     {children}
                 </Typography>
                 { onClick &&
-                    <LoadingButton loading={loading} size="small" sx={{ mt: '2px' }}
-                                   onClick={handleClick}>
+                    <Button loading={loading} size="small" sx={{ mt: '2px' }} onClick={handleClick}>
                         { !!published ? 'Unpublish' : 'Publish' }
-                    </LoadingButton> }
+                    </Button> }
             </Stack>
         </TransitionAlert>
     );

diff --git a/app/admin/components/RemoteDataTable.tsx b/app/admin/components/RemoteDataTable.tsx
@@ -25,7 +25,6 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import IconButton from '@mui/material/IconButton';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Tooltip from '@mui/material/Tooltip';
 
 import { type ApiEndpoints, callApi } from '@lib/callApi';
@@ -567,10 +566,9 @@ export function RemoteDataTable<
                 </DialogContent>
                 <DialogActions sx={{ p: 2, pt: 0 }}>
                     <Button onClick={resetDeleteCandidate}>Cancel</Button>
-                    <LoadingButton onClick={handleDelete} loading={deleteLoading}
-                                   variant="contained">
+                    <Button onClick={handleDelete} loading={deleteLoading} variant="contained">
                         Delete
-                    </LoadingButton>
+                    </Button>
                 </DialogActions>
             </Dialog>
         </>

diff --git a/app/admin/components/SettingDialog.tsx b/app/admin/components/SettingDialog.tsx
@@ -15,7 +15,6 @@ import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Typography from '@mui/material/Typography';
 
 /**
@@ -207,10 +206,10 @@ export function SettingDialog<TFieldValues extends FieldValues = FieldValues>(
                             Delete
                         </Button> }
                     <Button onClick={handleClose} variant="text">{closeLabel}</Button>
-                    <LoadingButton disabled={!!successMessage} loading={loading}
-                                   variant="contained" onClick={handleSubmit}>
+                    <Button disabled={!!successMessage} loading={loading} variant="contained"
+                            onClick={handleSubmit}>
                         {submitLabel}
-                    </LoadingButton>
+                    </Button>
                 </DialogActions>
             </FormContainer>
         </Dialog>

diff --git a/app/admin/components/SubmitCollapse.tsx b/app/admin/components/SubmitCollapse.tsx
@@ -4,8 +4,8 @@
 'use client';
 
 import Box, { type BoxProps } from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Typography from '@mui/material/Typography';
 import { red } from '@mui/material/colors';
 import { styled } from '@mui/material/styles';
@@ -41,9 +41,9 @@ export const SubmitCollapse = styled((props: SubmitCollapseProps) => {
     return (
         <Collapse in={!!open}>
             <Box {...boxProps}>
-                <LoadingButton loading={!!loading} variant="contained" type="submit">
+                <Button loading={!!loading} variant="contained" type="submit">
                     Save changes
-                </LoadingButton>
+                </Button>
                 { error &&
                     <Typography sx={{ display: 'inline-block', ml: 2 }}>
                         {error}

diff --git a/app/admin/content/ContentEditor.tsx b/app/admin/content/ContentEditor.tsx
@@ -12,9 +12,9 @@ import { type FieldValues, FormContainer, SelectElement, TextFieldElement }
 import type { ValueOptions } from '@mui/x-data-grid-pro';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
 import Grid from '@mui/material/Grid2';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
@@ -204,9 +204,9 @@ export function ContentEditor(props: React.PropsWithChildren<ContentEditorProps>
                 </Section>
                 <Section noHeader>
                     <Stack direction="row" spacing={2} alignItems="center">
-                        <LoadingButton loading={!!loading} variant="contained" type="submit">
+                        <Button loading={!!loading} variant="contained" type="submit">
                             Save changes
-                        </LoadingButton>
+                        </Button>
                         { error &&
                             <Typography sx={{ color: 'error.main' }}>
                                 {error}

diff --git a/app/admin/events/[event]/[team]/applications/CreateApplication.tsx b/app/admin/events/[event]/[team]/applications/CreateApplication.tsx
@@ -10,10 +10,10 @@ import { type FieldValues, FormContainer, useForm } from '@proxy/react-hook-form
 
 import Alert from '@mui/material/Alert';
 import Autocomplete from '@mui/material/Autocomplete';
+import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Collapse from '@mui/material/Collapse';
 import Grid from '@mui/material/Grid2';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Paper from '@mui/material/Paper';
 import SaveIcon from '@mui/icons-material/Save';
 import Stack from '@mui/material/Stack';
@@ -224,10 +224,10 @@ export function CreateApplication(props: CreateApplicationProps) {
                         <ApplicationAvailabilityForm />
                     </Grid>
                     <Stack direction="row" spacing={2} sx={{ mt: 1, py: 1 }} alignItems="center">
-                        <LoadingButton loading={loading} startIcon={ <SaveIcon /> } type="submit"
-                                       variant="contained">
+                        <Button loading={loading} startIcon={ <SaveIcon /> } type="submit"
+                                variant="contained">
                             Create application
-                        </LoadingButton>
+                        </Button>
                         <Typography variant="body2" color="error.main">
                             {error}
                         </Typography>

diff --git a/app/admin/events/[event]/[team]/applications/RejectedApplications.tsx b/app/admin/events/[event]/[team]/applications/RejectedApplications.tsx
@@ -8,8 +8,8 @@ import { useRouter } from 'next/navigation';
 
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
@@ -109,10 +109,10 @@ export function RejectedApplications(props: RejectedApplicationsProps) {
                             </Box>
                         </Stack>
                         { !!editable &&
-                            <LoadingButton loading={loading} variant="outlined"
-                                           onClick={ () => handleSubmit(application.userId) }>
+                            <Button loading={loading} variant="outlined"
+                                    onClick={ () => handleSubmit(application.userId) }>
                                 Reconsider
-                            </LoadingButton> }
+                            </Button> }
                     </Stack> )}
             </Stack>
         </Paper>

diff --git a/app/admin/events/[event]/[team]/volunteers/[volunteer]/VolunteerHeader.tsx b/app/admin/events/[event]/[team]/volunteers/[volunteer]/VolunteerHeader.tsx
@@ -21,7 +21,6 @@ import List from '@mui/material/List';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import LoadingButton from '@mui/lab/LoadingButton';
 import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import Paper from '@mui/material/Paper';
 import PeopleIcon from '@mui/icons-material/People';
@@ -550,16 +549,16 @@ export function VolunteerHeader(props: VolunteerHeaderProps) {
                         </Button> }
 
                     { props.canUpdateParticipation &&
-                        <LoadingButton startIcon={ <ManageAccountsIcon /> }
-                                       onClick={handleRolesOpen} loading={rolesLoading}>
+                        <Button startIcon={ <ManageAccountsIcon /> } onClick={handleRolesOpen}
+                                loading={rolesLoading}>
                             Change role
-                        </LoadingButton> }
+                        </Button> }
 
                     { props.canUpdateParticipation &&
-                        <LoadingButton startIcon={ <PeopleIcon /> }
-                                       onClick={handleTeamsOpen} loading={teamsLoading}>
+                        <Button startIcon={ <PeopleIcon /> } onClick={handleTeamsOpen}
+                                loading={teamsLoading}>
                             Change team
-                        </LoadingButton> }
+                        </Button> }
 
                 </Stack>
             </ContrastBox>

diff --git a/app/admin/system/ai/prompt/[prompt]/AiExplorer.tsx b/app/admin/system/ai/prompt/[prompt]/AiExplorer.tsx
@@ -9,13 +9,13 @@ import { type FieldValues, FormContainer, SelectElement, TextareaAutosizeElement
     from '@proxy/react-hook-form-mui';
 
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
 import Grid from '@mui/material/Grid2';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Paper from '@mui/material/Paper';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import Stack from '@mui/material/Stack';
@@ -184,10 +184,10 @@ export function AiExplorer(props: AiExplorerProps) {
                     <Grid size={{ xs: 2 }}>{ /* ... */ }</Grid>
                     <Grid size={{ xs: 10 }}>
                         <Stack direction="row" spacing={2} alignItems="center">
-                            <LoadingButton startIcon={ <SmartToyIcon /> } loading={loading}
-                                           type="submit" variant="outlined">
-                                    Generate responses
-                            </LoadingButton>
+                            <Button startIcon={ <SmartToyIcon /> } loading={loading} type="submit"
+                                    variant="outlined">
+                                Generate responses
+                            </Button>
                             {error &&
                                 <Typography sx={{ color: 'error.main' }}>
                                     {error}

diff --git a/app/admin/system/integrations/VertexAI.tsx b/app/admin/system/integrations/VertexAI.tsx
@@ -9,9 +9,9 @@ import { type FieldValues, FormContainer, TextareaAutosizeElement, SelectElement
     SliderElement } from '@proxy/react-hook-form-mui';
 
 import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
 import Grid from '@mui/material/Grid2';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Paper from '@mui/material/Paper';
 import PauseCircleOutlineIcon from '@mui/icons-material/PauseCircleOutline';
 import Skeleton from '@mui/material/Skeleton';
@@ -179,10 +179,10 @@ function InteractivePanel(props: InteractivePanelProps) {
             <FormContainer defaultValues={{ prompt: normalizedPrompt }} onSuccess={requestPrompt}>
                 <TextareaAutosizeElement size="small" fullWidth name="prompt" />
                 <Stack direction="row" justifyContent="flex-end" sx={{ pt: 2 }}>
-                    <LoadingButton startIcon={ <SmartToyIcon /> } loading={loading}
-                                   variant="outlined" type="submit">
+                    <Button startIcon={ <SmartToyIcon /> } loading={loading} variant="outlined"
+                            type="submit">
                         Generate
-                    </LoadingButton>
+                    </Button>
                 </Stack>
             </FormContainer>
         </Paper>

diff --git a/app/admin/system/scheduler/SchedulerCreateTaskPanel.tsx b/app/admin/system/scheduler/SchedulerCreateTaskPanel.tsx
@@ -10,8 +10,8 @@ import { type FieldValues, FormContainer, SelectElement, TextFieldElement, useFo
     from '@proxy/react-hook-form-mui';
 
 import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
@@ -148,10 +148,9 @@ export function SchedulerCreateTaskPanel() {
                     <CreateNoopComplexTaskPanel />
                 </Collapse>
                 <Collapse in={!!selectedTask}>
-                    <LoadingButton type="submit" variant="contained" loading={loading}
-                                   sx={{ mt: 2 }}>
+                    <Button type="submit" variant="contained" loading={loading} sx={{ mt: 2 }}>
                         Create task
-                    </LoadingButton>
+                    </Button>
                 </Collapse>
             </FormContainer>
         </Paper>

diff --git a/app/admin/system/scheduler/[id]/RerunTaskButton.tsx b/app/admin/system/scheduler/[id]/RerunTaskButton.tsx
@@ -9,7 +9,6 @@ import { useRouter } from 'next/navigation';
 import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
 import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
-import LoadingButton from '@mui/lab/LoadingButton';
 import RepeatIcon from '@mui/icons-material/Repeat';
 import Tooltip from '@mui/material/Tooltip';
 
@@ -69,10 +68,10 @@ export function RerunTaskButton(props: RerunTaskButtonProps) {
     return (
         <>
             <Tooltip title="Re-run this task">
-                <LoadingButton size="small" disabled={disabled} loading={loading} variant="outlined"
-                               color={ error ? 'error' : 'primary' } onClick={handleRetry}>
+                <Button size="small" disabled={disabled} loading={loading} variant="outlined"
+                        color={ error ? 'error' : 'primary' } onClick={handleRetry}>
                     <RepeatIcon fontSize="small" />
-                </LoadingButton>
+                </Button>
             </Tooltip>
             <Collapse in={!!childTaskId} orientation="horizontal">
                 <Tooltip title="Navigate to the child task">

diff --git a/app/api/application/updateApplication.ts b/app/api/application/updateApplication.ts
@@ -14,6 +14,7 @@ import db, { tEvents, tEventsTeams, tTeams, tUsersEvents, tUsers } from '@lib/da
 import { kApplicationProperties } from '../event/application';
 import { kTemporalZonedDateTime, type ApiDefinition, type ApiRequest, type ApiResponse }
     from '../Types';
+import { resolve } from 'path';
 
 /**
  * Interface definition for the Application API, exposed through /api/application/

diff --git a/app/components/AvatarEditor.tsx b/app/components/AvatarEditor.tsx
@@ -13,7 +13,6 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Dialog from '@mui/material/Dialog';
 import IconButton from '@mui/material/IconButton';
-import LoadingButton from '@mui/lab/LoadingButton';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import Stack from '@mui/material/Stack';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
@@ -226,14 +225,14 @@ export default function AvatarEditor(props: AvatarEditorProps) {
                         onClick={handleDialogClose}>
                     Close
                 </Button>
-                <LoadingButton variant="contained"
-                               color={ uploadError ? 'error' : 'primary' }
-                               loading={uploading}
-                               loadingPosition="start"
-                               startIcon={ <CloudUploadIcon /> }
-                               onClick={processUpload}>
+                <Button variant="contained"
+                        color={ uploadError ? 'error' : 'primary' }
+                        loading={uploading}
+                        loadingPosition="start"
+                        startIcon={ <CloudUploadIcon /> }
+                        onClick={processUpload}>
                     Upload
-                </LoadingButton>
+                </Button>
             </DialogActions>
         </Dialog>
     );