feat: allow dissolving a block

apps/client/src/common/hooks/useEntryAction.ts

@@ -25,6 +25,7 @@ import {
   ReorderEntry,
   requestApplyDelay,
   requestDeleteAll,
+  requestDissolveBlock,
   requestEventSwap,
   SwapEntry,
 } from '../api/rundown';
@@ -514,6 +515,28 @@ export const useEntryActions = () => {
     [_applyDelayMutation],
   );
 
+  /**
+   * Calls mutation to dissolve a block
+   * @private
+   */
+  const _dissolveBlockMutation = useMutation({
+    mutationFn: requestDissolveBlock,
+    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
+  });
+
+  /**
+   * Deletes a block and moves its events to the top level
+   */
+  const dissolveBlock = useCallback(
+    async (blockId: EntryId) => {
+      try {
+        await _dissolveBlockMutation.mutateAsync(blockId);
+      } catch (error) {
+        logAxiosError('Error dissolving block', error);
+      }
+    },
+    [_dissolveBlockMutation],
+  );
   /**
    * Calls mutation to reorder an entry
    * @private
@@ -663,6 +686,7 @@ export const useEntryActions = () => {
     batchUpdateEvents,
     deleteEntry,
     deleteAllEntries,
+    dissolveBlock,
     getEntryById,
     reorderEntry,
     swapEvents,

apps/client/src/features/rundown/block-block/BlockBlock.tsx

@@ -1,9 +1,11 @@
 import { useRef } from 'react';
-import { IoChevronDown, IoChevronUp, IoReorderTwo } from 'react-icons/io5';
+import { IoChevronDown, IoChevronUp, IoEllipsisHorizontal, IoReorderTwo } from 'react-icons/io5';
+import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { EntryId, OntimeBlock } from 'ontime-types';
 
+import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import { formatDuration, formatTime } from '../../../common/utils/time';
 import EditableBlockTitle from '../common/EditableBlockTitle';
@@ -21,6 +23,7 @@ interface BlockBlockProps {
 export default function BlockBlock(props: BlockBlockProps) {
   const { data, hasCursor, collapsed, onCollapse } = props;
   const handleRef = useRef<null | HTMLSpanElement>(null);
+  const { dissolveBlock } = useEntryActions();
 
   const {
     attributes: dragAttributes,
@@ -71,9 +74,28 @@ export default function BlockBlock(props: BlockBlockProps) {
       <div className={style.header}>
         <div className={style.titleRow}>
           <EditableBlockTitle title={data.title} eventId={data.id} placeholder='Block title' />
-          <button onClick={() => onCollapse(!collapsed, data.id)}>
+          <Menu variant='ontime-on-dark' size='sm'>
+            <MenuButton
+              as={IconButton}
+              aria-label='Options'
+              icon={<IoEllipsisHorizontal />}
+              color='#e2e2e2' // $gray-200
+              variant='ontime-ghosted'
+              size='sm'
+            />
+            <MenuList>
+              <MenuItem onClick={() => dissolveBlock(data.id)}>Dissolve Block</MenuItem>
+            </MenuList>
+          </Menu>
+          <IconButton
+            aria-label='Dissolve'
+            onClick={() => onCollapse(!collapsed, data.id)}
+            color='#e2e2e2' // $gray-200
+            variant='ontime-ghosted'
+            size='sm'
+          >
             {collapsed ? <IoChevronUp /> : <IoChevronDown />}
-          </button>
+          </IconButton>
         </div>
         <div className={style.metaRow}>
           <div className={style.metaEntry}>