refactor: show menu only if enabled

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

@@ -55,6 +55,17 @@ export const useEventAction = () => {
     defaultEndAction,
   } = useEditorSettings();
 
+  const getEventById = useCallback(
+    (eventId: string) => {
+      const cachedRundown = queryClient.getQueryData<RundownCached>(RUNDOWN);
+      if (!cachedRundown?.rundown) {
+        return;
+      }
+      return cachedRundown.rundown[eventId];
+    },
+    [queryClient],
+  );
+
   /**
    * Calls mutation to add new event
    * @private
@@ -615,6 +626,7 @@ export const useEventAction = () => {
     batchUpdateEvents,
     deleteEvent,
     deleteAllEvents,
+    getEventById,
     reorderEvent,
     swapEvents,
     updateEvent,

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -1,5 +1,4 @@
 import { useRef } from 'react';
-import { Menu } from '@chakra-ui/react';
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import Color from 'color';
 import {
@@ -23,7 +22,6 @@ import BlockRow from './cuesheet-table-elements/BlockRow';
 import CuesheetHeader from './cuesheet-table-elements/CuesheetHeader';
 import DelayRow from './cuesheet-table-elements/DelayRow';
 import EventRow from './cuesheet-table-elements/EventRow';
-import CuesheetTableMenu from './cuesheet-table-menu/CuesheetTableMenu';
 import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
 import useColumnManager from './useColumnManager';
 
@@ -165,13 +163,16 @@ export default function CuesheetTable(props: CuesheetTableProps) {
                 }
 
                 return (
-                  <Menu key={key} variant='ontime-on-dark' size='sm' isLazy>
                   <EventRow
+                    key={key}
+                    eventId={entry.id}
                     eventIndex={eventIndex}
+                    rowIndex={index}
                     isPast={isPast}
                     selectedRef={isSelected ? selectedRef : undefined}
                     skip={entry.skip}
                     colour={entry.colour}
+                    showModal={showModal}
                   >
                     {row.getVisibleCells().map((cell) => {
                       return (
@@ -181,8 +182,6 @@ export default function CuesheetTable(props: CuesheetTableProps) {
                       );
                     })}
                   </EventRow>
-                    <CuesheetTableMenu event={entry} entryIndex={index} showModal={showModal} />
-                  </Menu>
                 );
               }
 

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx

@@ -1,23 +1,27 @@
 import { memo, MutableRefObject, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';
-import { IconButton, MenuButton } from '@chakra-ui/react';
+import { IconButton, Menu, MenuButton } from '@chakra-ui/react';
 import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
 import Color from 'color';
 
 import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { useCuesheetOptions } from '../../cuesheet.options';
+import CuesheetTableMenu from '../cuesheet-table-menu/CuesheetTableMenu';
 
 import style from '../CuesheetTable.module.scss';
 
 interface EventRowProps {
+  eventId: string;
   eventIndex: number;
+  rowIndex: number;
   isPast?: boolean;
   selectedRef?: MutableRefObject<HTMLTableRowElement | null>;
   skip?: boolean;
   colour?: string;
+  showModal: (eventId: string) => void;
 }
 
 function EventRow(props: PropsWithChildren<EventRowProps>) {
-  const { children, eventIndex, isPast, selectedRef, skip, colour } = props;
+  const { children, eventId, eventIndex, rowIndex, isPast, selectedRef, skip, colour, showModal } = props;
   const { hideIndexColumn, showActionMenu } = useCuesheetOptions();
   const ownRef = useRef<HTMLTableRowElement>(null);
   const [isVisible, setIsVisible] = useState(false);
@@ -60,6 +64,7 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
     >
       {showActionMenu && (
         <td className={style.actionColumn}>
+          <Menu variant='ontime-on-dark' size='sm' isLazy>
             <MenuButton
               as={IconButton}
               size='sm'
@@ -67,6 +72,8 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
               icon={<IoEllipsisHorizontal />}
               variant='ontime-subtle'
             />
+            <CuesheetTableMenu eventId={eventId} entryIndex={rowIndex} showModal={showModal} />
+          </Menu>
         </td>
       )}
       {!hideIndexColumn && (

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-menu/CuesheetTableMenu.tsx

@@ -1,44 +1,50 @@
-import { MenuDivider, MenuItem, MenuList } from '@chakra-ui/react';
+import { MenuDivider, MenuItem, MenuList, Portal } from '@chakra-ui/react';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { IoArrowDown } from '@react-icons/all-files/io5/IoArrowDown';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import { IoDuplicateOutline } from '@react-icons/all-files/io5/IoDuplicateOutline';
 import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
 import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
-import { OntimeEvent, SupportedEvent } from 'ontime-types';
+import { isOntimeEvent, SupportedEvent } from 'ontime-types';
 
 import { useEventAction } from '../../../../common/hooks/useEventAction';
 import { cloneEvent } from '../../../../common/utils/eventsManager';
 
 interface CuesheetTableMenuProps {
-  event: OntimeEvent;
+  eventId: string;
   entryIndex: number;
   showModal: (entryId: string) => void;
 }
 
 export default function CuesheetTableMenu(props: CuesheetTableMenuProps) {
-  const { event, entryIndex, showModal } = props;
+  const { eventId, entryIndex, showModal } = props;
-  const { addEvent, reorderEvent, deleteEvent } = useEventAction();
+  const { addEvent, getEventById, reorderEvent, deleteEvent } = useEventAction();
 
   const handleCloneEvent = () => {
-    const newEvent = cloneEvent(event);
+    const currentEvent = getEventById(eventId);
+    if (!currentEvent || !isOntimeEvent(currentEvent)) {
+      return;
+    }
+
+    const newEvent = cloneEvent(currentEvent);
     try {
-      addEvent(newEvent, { after: event.id });
+      addEvent(newEvent, { after: eventId });
     } catch (_error) {
       // we do not handle errors here
     }
   };
 
   return (
+    <Portal>
       <MenuList>
-      <MenuItem icon={<IoOptions />} onClick={() => showModal(event.id)}>
+        <MenuItem icon={<IoOptions />} onClick={() => showModal(eventId)}>
           Edit ...
         </MenuItem>
         <MenuDivider />
-      <MenuItem icon={<IoAdd />} onClick={() => addEvent({ type: SupportedEvent.Event }, { before: event.id })}>
+        <MenuItem icon={<IoAdd />} onClick={() => addEvent({ type: SupportedEvent.Event }, { before: eventId })}>
           Add event above
         </MenuItem>
-      <MenuItem icon={<IoAdd />} onClick={() => addEvent({ type: SupportedEvent.Event }, { after: event.id })}>
+        <MenuItem icon={<IoAdd />} onClick={() => addEvent({ type: SupportedEvent.Event }, { after: eventId })}>
           Add event below
         </MenuItem>
         <MenuItem icon={<IoDuplicateOutline />} onClick={handleCloneEvent}>
@@ -48,16 +54,17 @@ export default function CuesheetTableMenu(props: CuesheetTableMenuProps) {
         <MenuItem
           isDisabled={entryIndex < 1}
           icon={<IoArrowUp />}
-        onClick={() => reorderEvent(event.id, entryIndex, entryIndex - 1)}
+          onClick={() => reorderEvent(eventId, entryIndex, entryIndex - 1)}
         >
           Move up
         </MenuItem>
-      <MenuItem icon={<IoArrowDown />} onClick={() => reorderEvent(event.id, entryIndex, entryIndex + 1)}>
+        <MenuItem icon={<IoArrowDown />} onClick={() => reorderEvent(eventId, entryIndex, entryIndex + 1)}>
           Move down
         </MenuItem>
-      <MenuItem icon={<IoTrash />} onClick={() => deleteEvent([event.id])}>
+        <MenuItem icon={<IoTrash />} onClick={() => deleteEvent([eventId])}>
           Delete
         </MenuItem>
       </MenuList>
+    </Portal>
   );
 }