cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-13 03:13:47 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: user alerts on destructive actions

Browse Source
This commit is contained in:
Carlos Valente
2024-04-27 10:04:36 +02:00
committed by Carlos Valente
parent dcbb92c470
commit 75b5118b0f
9 changed files with 73 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx
+5 -4
View File
@@ -20,6 +20,7 @@ export default function ShutdownPanel() {
const sendShutdown = () => {
sendToElectron('shutdown', 'now');
onClose();
};
return (
@@ -30,10 +31,10 @@ export default function ShutdownPanel() {
This will shutdown the Ontime server. <br />
The runtime state will be lost, but your project is kept for next time.
</Panel.Paragraph>
<Button colorScheme='red' onClick={onOpen} isDisabled={!isElectron}>
<Button colorScheme='red' onClick={onOpen} maxWidth='350px' isDisabled={!isElectron}>
Shutdown ontime
</Button>
<AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
<AlertDialog variant='ontime' isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize='lg' fontWeight='bold'>
@@ -43,10 +44,10 @@ export default function ShutdownPanel() {
This will shutdown the Ontime server. <br /> Are you sure?
</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onClick={onClose} variant='ghost'>
<Button ref={cancelRef} onClick={onClose} variant='ontime-ghosted-white'>
Cancel
</Button>
<Button colorScheme='red' onClick={sendShutdown}>
<Button colorScheme='red' onClick={sendShutdown} ml={4}>
Shutdown
</Button>
</AlertDialogFooter>
apps/client/src/features/rundown/rundown-header/RundownMenu.tsx
+48 -13
View File
@@ -1,5 +1,14 @@
import { useCallback } from 'react';
import { Button } from '@chakra-ui/react';
import { useCallback, useRef } from 'react';
import {
AlertDialog,
AlertDialogBody,
AlertDialogContent,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
Button,
useDisclosure,
} from '@chakra-ui/react';
import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
import { useEventAction } from '../../../common/hooks/useEventAction';
@@ -12,22 +21,48 @@ export default function RundownMenu() {
const appMode = useAppMode((state) => state.mode);
const { deleteAllEvents } = useEventAction();
const { isOpen, onOpen, onClose } = useDisclosure();
const cancelRef = useRef<HTMLButtonElement | null>(null);
const deleteAll = useCallback(() => {
deleteAllEvents();
clearSelectedEvents();
setCursor(null);
}, [clearSelectedEvents, deleteAllEvents, setCursor]);
onClose();
}, [clearSelectedEvents, deleteAllEvents, onClose, setCursor]);
return (
<Button
size='sm'
variant='ontime-outlined'
leftIcon={<IoTrash />}
onClick={deleteAll}
color='#FA5656'
isDisabled={appMode === 'run'}
>
Clear rundown
</Button>
<>
<Button
size='sm'
variant='ontime-outlined'
leftIcon={<IoTrash />}
onClick={onOpen}
color='#FA5656'
isDisabled={appMode === 'run'}
>
Clear rundown
</Button>
<AlertDialog variant='ontime' isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize='lg' fontWeight='bold'>
Clear rundown
</AlertDialogHeader>
<AlertDialogBody>
You will lose all data in your rundown. <br /> Are you sure?
</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onClick={onClose} variant='ontime-ghosted-white'>
Cancel
</Button>
<Button colorScheme='red' onClick={deleteAll} ml={4}>
Delete all
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
</>
);
}
apps/client/src/theme/OntimeAlert.ts
+8
View File
@@ -10,3 +10,11 @@ export const ontimeAlertOnDark = {
color: '#578AF4', // $blue-500
},
};
export const ontimeDialog = {
container: {
backgroundColor: '#1a1a1a', // $gray-1300
color: '#e2e2e2', // $gray-200
borderRadius: '3px',
},
};
apps/client/src/theme/theme.ts
+6 -1
View File
@@ -1,6 +1,6 @@
import { extendTheme } from '@chakra-ui/react';
import { ontimeAlertOnDark } from './OntimeAlert';
import { ontimeAlertOnDark, ontimeDialog } from './OntimeAlert';
import {
ontimeButtonFilled,
ontimeButtonGhosted,
@@ -35,6 +35,11 @@ const theme = extendTheme({
'ontime-on-dark-info': { ...ontimeAlertOnDark },
},
},
AlertDialog: {
variants: {
ontime: { ...ontimeDialog },
},
},
Button: {
baseStyle: {
letterSpacing: '0.3px',
e2e/tests/000-upload-showfile.spec.ts
+1
View File
@@ -6,6 +6,7 @@ test('project file upload', async ({ page }) => {
await page.goto('http://localhost:4001/editor');
await page.getByRole('button', { name: 'Edit' }).click();
await page.getByRole('button', { name: 'Clear rundown' }).click();
await page.getByRole('button', { name: 'Delete all' }).click();
await page.getByRole('button', { name: 'toggle settings' }).click();
await page.getByRole('button', { name: 'Project', exact: true }).click();
e2e/tests/features/203-delay-block.spec.ts
+2
View File
@@ -6,6 +6,7 @@ test('delay blocks add time to events', async ({ page }) => {
// delete all events and add a new one
await page.getByRole('button', { name: 'Edit' }).click();
await page.getByRole('button', { name: 'Clear rundown' }).click();
await page.getByRole('button', { name: 'Delete all' }).click();
await page.getByRole('button', { name: 'Create event' }).click();
// add data to new event
@@ -53,6 +54,7 @@ test('delays are show correctly', async ({ page }) => {
// add a test event
await page.getByRole('button', { name: 'Edit' }).click();
await page.getByRole('button', { name: 'Clear rundown' }).click();
await page.getByRole('button', { name: 'Delete all' }).click();
await page.getByRole('button', { name: 'Create Event' }).click();
await page.getByTestId('time-input-timeStart').click();
e2e/tests/features/204-editor-crud.spec.ts
+1 -1
View File
@@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test';
test('CRUD operations on the rundown', async ({ page }) => {
await page.goto('http://localhost:4001/editor');
// clear rundown
await page.getByRole('button', { name: 'Edit' }).click();
await page.getByRole('button', { name: 'Clear rundown' }).click();
await page.getByRole('button', { name: 'Delete all' }).click();
// create event from the rundown empty button
await page.getByRole('button', { name: 'Create Event' }).click();
e2e/tests/features/205-operator.spec.ts
+1
View File
@@ -5,6 +5,7 @@ test('smoke test operator', async ({ page }) => {
await page.goto('http://localhost:4001/editor');
await page.getByRole('button', { name: 'Edit' }).click();
await page.getByRole('button', { name: 'Clear rundown' }).click();
await page.getByRole('button', { name: 'Delete all' }).click();
await page.getByRole('button', { name: 'Create Event' }).click();
await page.getByTestId('time-input-timeStart').fill('1m');
e2e/tests/features/301-spreadsheet-import.spec.ts
+1
View File
@@ -6,6 +6,7 @@ test('sheet file upload', async ({ page }) => {
await page.goto('http://localhost:4001/editor');
await page.getByRole('button', { name: 'Edit' }).click();
await page.getByRole('button', { name: 'Clear rundown' }).click();
await page.getByRole('button', { name: 'Delete all' }).click();
await page.getByRole('button', { name: 'Toggle settings' }).click();
await page.getByRole('button', { name: 'Import spreadsheet' }).click();