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,24 +163,25 @@ export default function CuesheetTable(props: CuesheetTableProps) {
                 }
 
                 return (
-                  <Menu key={key} variant='ontime-on-dark' size='sm' isLazy>
-                    <EventRow
-                      eventIndex={eventIndex}
-                      isPast={isPast}
-                      selectedRef={isSelected ? selectedRef : undefined}
-                      skip={entry.skip}
-                      colour={entry.colour}
-                    >
-                      {row.getVisibleCells().map((cell) => {
-                        return (
-                          <td key={cell.id} style={{ width: cell.column.getSize(), backgroundColor: rowBgColour }}>
-                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                          </td>
-                        );
-                      })}
-                    </EventRow>
-                    <CuesheetTableMenu event={entry} entryIndex={index} showModal={showModal} />
-                  </Menu>
+                  <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 (
+                        <td key={cell.id} style={{ width: cell.column.getSize(), backgroundColor: rowBgColour }}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      );
+                    })}
+                  </EventRow>
                 );
               }
 

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,13 +64,16 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
     >
       {showActionMenu && (
         <td className={style.actionColumn}>
-          <MenuButton
-            as={IconButton}
-            size='sm'
-            aria-label='Options'
-            icon={<IoEllipsisHorizontal />}
-            variant='ontime-subtle'
-          />
+          <Menu variant='ontime-on-dark' size='sm' isLazy>
+            <MenuButton
+              as={IconButton}
+              size='sm'
+              aria-label='Options'
+              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,63 +1,70 @@
-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 { addEvent, reorderEvent, deleteEvent } = useEventAction();
+  const { eventId, entryIndex, showModal } = props;
+  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 (
-    <MenuList>
-      <MenuItem icon={<IoOptions />} onClick={() => showModal(event.id)}>
-        Edit ...
-      </MenuItem>
-      <MenuDivider />
-      <MenuItem icon={<IoAdd />} onClick={() => addEvent({ type: SupportedEvent.Event }, { before: event.id })}>
-        Add event above
-      </MenuItem>
-      <MenuItem icon={<IoAdd />} onClick={() => addEvent({ type: SupportedEvent.Event }, { after: event.id })}>
-        Add event below
-      </MenuItem>
-      <MenuItem icon={<IoDuplicateOutline />} onClick={handleCloneEvent}>
-        Clone event
-      </MenuItem>
-      <MenuDivider />
-      <MenuItem
-        isDisabled={entryIndex < 1}
-        icon={<IoArrowUp />}
-        onClick={() => reorderEvent(event.id, entryIndex, entryIndex - 1)}
-      >
-        Move up
-      </MenuItem>
-      <MenuItem icon={<IoArrowDown />} onClick={() => reorderEvent(event.id, entryIndex, entryIndex + 1)}>
-        Move down
-      </MenuItem>
-      <MenuItem icon={<IoTrash />} onClick={() => deleteEvent([event.id])}>
-        Delete
-      </MenuItem>
-    </MenuList>
+    <Portal>
+      <MenuList>
+        <MenuItem icon={<IoOptions />} onClick={() => showModal(eventId)}>
+          Edit ...
+        </MenuItem>
+        <MenuDivider />
+        <MenuItem icon={<IoAdd />} onClick={() => addEvent({ type: SupportedEvent.Event }, { before: eventId })}>
+          Add event above
+        </MenuItem>
+        <MenuItem icon={<IoAdd />} onClick={() => addEvent({ type: SupportedEvent.Event }, { after: eventId })}>
+          Add event below
+        </MenuItem>
+        <MenuItem icon={<IoDuplicateOutline />} onClick={handleCloneEvent}>
+          Clone event
+        </MenuItem>
+        <MenuDivider />
+        <MenuItem
+          isDisabled={entryIndex < 1}
+          icon={<IoArrowUp />}
+          onClick={() => reorderEvent(eventId, entryIndex, entryIndex - 1)}
+        >
+          Move up
+        </MenuItem>
+        <MenuItem icon={<IoArrowDown />} onClick={() => reorderEvent(eventId, entryIndex, entryIndex + 1)}>
+          Move down
+        </MenuItem>
+        <MenuItem icon={<IoTrash />} onClick={() => deleteEvent([eventId])}>
+          Delete
+        </MenuItem>
+      </MenuList>
+    </Portal>
   );
 }