fix: add event (#499)

* refactor: remove guards on event creation

* style: minimum safe block size

* fix: insert after finds previous valid cue

apps/client/src/features/rundown/block-block/BlockBlock.module.scss

@@ -6,11 +6,12 @@
 
   background-color: $block-bg2;
 
+  min-width: 34rem;
   display: grid;
-  grid-template-columns: 32px 1fr auto;
+  grid-template-columns: 2rem 1fr auto;
   align-items: center;
   height: $secondary-block-height;
-  gap: 8px;
+  gap: 0.5rem;
 
   &.hasCursor {
     outline: 1px solid $block-cursor-color;

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

@@ -59,7 +59,7 @@ export default function BlockBlock(props: BlockBlockProps) {
         <IoReorderTwo />
       </span>
       <EditableBlockTitle title={data.title} eventId={data.id} placeholder='Block title' />
-      <BlockActionMenu className={style.actionMenu} showAdd showDelay enableDelete actionHandler={actionHandler} />
+      <BlockActionMenu className={style.actionMenu} enableDelete actionHandler={actionHandler} />
     </div>
   );
 }

apps/client/src/features/rundown/delay-block/DelayBlock.module.scss

@@ -6,12 +6,13 @@
 
   background-color: $block-bg2;
 
+  min-width: 34rem;
   display: grid;
-  grid-template-columns: 32px 1fr auto;
+  grid-template-columns: 2rem 1fr auto;
   grid-template-areas: 'drag inpt btns';
   align-items: center;
   height: $secondary-block-height;
-  gap: 8px;
+  gap: 0.5rem;
 
   &.hasCursor {
     outline: 1px solid $block-cursor-color;

apps/client/src/features/rundown/delay-block/DelayBlock.tsx

@@ -79,7 +79,7 @@ export default function DelayBlock(props: DelayBlockProps) {
         <Button onClick={cancelDelayHandler} size='sm' leftIcon={<IoClose />} variant='ontime-subtle-white'>
           Cancel
         </Button>
-        <BlockActionMenu showAdd enableDelete actionHandler={actionHandler} />
+        <BlockActionMenu enableDelete actionHandler={actionHandler} />
       </HStack>
     </div>
   );

apps/client/src/features/rundown/event-block/EventBlockInner.tsx

@@ -144,7 +144,10 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
           </Tooltip>
           <Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} {...tooltipProps}>
             <span>
-              <IoPeople className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`} />
+              <IoPeople
+                className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`}
+                data-isPublic={isPublic}
+              />
             </span>
           </Tooltip>
         </div>
@@ -163,7 +166,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
           color={isOpen ? 'white' : '#f6f6f6'}
           isDisabled={disableEdit}
         />
-        <BlockActionMenu showAdd showDelay showBlock showClone enableDelete={!selected} actionHandler={actionHandler} />
+        <BlockActionMenu showClone enableDelete={!selected} actionHandler={actionHandler} />
       </div>
     </>
   );

apps/client/src/features/rundown/event-block/composite/BlockActionMenu.tsx

@@ -11,9 +11,6 @@ import { tooltipDelayMid } from '../../../../ontimeConfig';
 import { EventItemActions } from '../../RundownEntry';
 
 interface BlockActionMenuProps {
-  showAdd?: boolean;
-  showDelay?: boolean;
-  showBlock?: boolean;
   enableDelete?: boolean;
   showClone?: boolean;
   actionHandler: (action: EventItemActions, payload?: any) => void;
@@ -21,7 +18,7 @@ interface BlockActionMenuProps {
 }
 
 export default function BlockActionMenu(props: BlockActionMenuProps) {
-  const { showAdd, showDelay, showBlock, enableDelete, showClone, actionHandler, className } = props;
+  const { enableDelete, showClone, actionHandler, className } = props;
 
   const handleAddEvent = useCallback(() => actionHandler('event'), [actionHandler]);
   const handleAddDelay = useCallback(() => actionHandler('delay'), [actionHandler]);
@@ -43,17 +40,17 @@ export default function BlockActionMenu(props: BlockActionMenuProps) {
         />
       </Tooltip>
       <MenuList>
-        <MenuItem icon={<IoAdd />} onClick={handleAddEvent} isDisabled={!showAdd}>
+        <MenuItem icon={<IoAdd />} onClick={handleAddEvent}>
           Add Event after
         </MenuItem>
-        <MenuItem icon={<IoTimerOutline />} onClick={handleAddDelay} isDisabled={!showDelay}>
+        <MenuItem icon={<IoTimerOutline />} onClick={handleAddDelay}>
           Add Delay after
         </MenuItem>
-        <MenuItem icon={<IoRemoveCircleOutline />} onClick={handleAddBlock} isDisabled={!showBlock}>
+        <MenuItem icon={<IoRemoveCircleOutline />} onClick={handleAddBlock}>
           Add Block after
         </MenuItem>
         {showClone && (
-          <MenuItem icon={<IoDuplicateOutline />} onClick={handleClone} isDisabled={!showBlock}>
+          <MenuItem icon={<IoDuplicateOutline />} onClick={handleClone}>
             Clone event
           </MenuItem>
         )}

apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx

@@ -80,6 +80,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
             size='xs'
             variant='ontime-subtle-white'
             className={style.quickBtn}
+            data-testId='quick-add-event'
           >
             Event {showKbd && <span className={style.keyboard}>Alt + E</span>}
           </Button>
@@ -91,6 +92,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
             variant='ontime-subtle-white'
             disabled={disableAddDelay}
             className={style.quickBtn}
+            data-testId='quick-add-delay'
           >
             Delay {showKbd && <span className={style.keyboard}>Alt + D</span>}
           </Button>
@@ -102,6 +104,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
             variant='ontime-subtle-white'
             disabled={disableAddBlock}
             className={style.quickBtn}
+            data-testId='quick-add-block'
           >
             Block {showKbd && <span className={style.keyboard}>Alt + B</span>}
           </Button>