:sparkles feat(agenda-events): fix event form context menu visibility (#1393)

* :sparkles feat(agenda-events): improve z-index mgmt within event form

add event context menu delete and duplicate functionalities

* fix(context-menu): do not close form if delete is not confirmed

* fix(context-menu): delete draft events on confirmation

Author: victor-enogwe

packages/web/src/common/hooks/useMainGridSelection.ts

@@ -20,7 +20,7 @@ import {
   getElementAtPoint,
   selectionStart$,
 } from "@web/common/utils/dom/event-emitter.util";
-import { SLOT_HEIGHT } from "../../views/Day/constants/day.constants";
+import { SLOT_HEIGHT } from "@web/views/Day/constants/day.constants";
 
 const selection$ = combineLatest([
   pointerState$,

packages/web/src/common/utils/dom/event-emitter.util.ts

@@ -2,6 +2,7 @@ import { EventEmitter2 } from "eventemitter2";
 import { PointerEvent } from "react";
 import { BehaviorSubject, Subject } from "rxjs";
 import { StringV4Schema } from "@core/types/type.utils";
+import { isLeftClick } from "../mouse/mouse.util";
 
 export interface KeyCombination {
   event: KeyboardEvent;
@@ -86,17 +87,18 @@ export function getElementAtPoint({
   return element;
 }
 
-function checkPointerDown(
-  event: Pick<PointerEvent, "target" | "type" | "clientX" | "clientY">,
-): {
+function checkPointerDown(event: PointerEvent): {
   pointerdown: boolean;
   selectionStart: DomMovement["selectionStart"];
 } {
   const isPointerDownEvent = event.type === "pointerdown";
   const isPointerUpEvent = event.type === "pointerup";
   const { clientX, clientY } = event;
 
-  if (isPointerDownEvent) {
+  // Only treat primary-button pointerdown as the start of a drag/selection.
+  // This avoids incorrectly entering pointerdown state for right-clicks or
+  // other non-primary button interactions (e.g. context menu).
+  if (isPointerDownEvent && isLeftClick(event)) {
     pointerdown$.next(true);
     selectionStart$.next({ clientX, clientY });
   }
@@ -112,9 +114,7 @@ function checkPointerDown(
   return { pointerdown: isPointerDown, selectionStart };
 }
 
-function processMovement(
-  e: Pick<PointerEvent, "clientX" | "clientY" | "target" | "type">,
-) {
+function processMovement(e: PointerEvent) {
   const pointerdown = checkPointerDown(e);
   const elem = getElementAtPoint(e);
   const element = elem ?? (e.target instanceof Element ? e.target : null);

packages/web/src/components/FloatingEventForm/FloatingEventForm.tsx

@@ -1,21 +1,24 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import {
   FloatingFocusManager,
   FloatingPortal,
   UseInteractionsReturn,
   useFloating,
 } from "@floating-ui/react";
+import { getEntity } from "@ngneat/elf-entities";
 import { Schema_Event, WithCompassId } from "@core/types/event.types";
 import { useGridMaxZIndex } from "@web/common/hooks/useGridMaxZIndex";
 import {
   CursorItem,
   useFloatingNodeIdAtCursor,
   useFloatingOpenAtCursor,
 } from "@web/common/hooks/useOpenAtCursor";
-import { setDraft } from "@web/store/events";
+import { eventsStore, setDraft } from "@web/store/events";
 import { useDraft } from "@web/views/Calendar/components/Draft/context/useDraft";
 import { EventForm } from "@web/views/Forms/EventForm/EventForm";
 import { useCloseEventForm } from "@web/views/Forms/hooks/useCloseEventForm";
+import { useDeleteEvent } from "@web/views/Forms/hooks/useDeleteEvent";
+import { useDuplicateEvent } from "@web/views/Forms/hooks/useDuplicateEvent";
 import { useSaveEventForm } from "@web/views/Forms/hooks/useSaveEventForm";
 
 export function FloatingEventForm({
@@ -26,13 +29,20 @@ export function FloatingEventForm({
   interactions: UseInteractionsReturn;
 }) {
   const draft = useDraft();
+  const _id = draft?._id;
   const nodeId = useFloatingNodeIdAtCursor();
   const floatingOpenAtCursor = useFloatingOpenAtCursor();
   const onSave = useSaveEventForm();
+  const onDelete = useDeleteEvent(draft?._id as string);
+  const onDuplicate = useDuplicateEvent(draft?._id as string);
   const onClose = useCloseEventForm();
   const maxZIndex = useGridMaxZIndex();
   const isOpenAtCursor = nodeId === CursorItem.EventForm;
   const open = floatingOpenAtCursor && isOpenAtCursor && !!draft;
+  const existing = useMemo(
+    () => !!_id && !!eventsStore.query(getEntity(_id)),
+    [_id],
+  );
 
   const setEvent = useCallback(
     (
@@ -67,8 +77,11 @@ export function FloatingEventForm({
         >
           <EventForm
             event={draft}
+            isDraft={true}
+            isExistingEvent={existing}
             onClose={onClose}
-            onDelete={() => {}}
+            onDelete={onDelete}
+            onDuplicate={onDuplicate}
             onSubmit={onSave}
             setEvent={setEvent}
           />

packages/web/src/components/Tooltip/Tooltip.tsx

@@ -7,6 +7,7 @@ import {
 } from "react";
 import { FloatingPortal, useMergeRefs } from "@floating-ui/react";
 import { ZIndex } from "@web/common/constants/web.constants";
+import { useGridMaxZIndex } from "@web/common/hooks/useGridMaxZIndex";
 import { TooltipOptions } from "./tooltip.types";
 import { TooltipContext, useTooltip, useTooltipContext } from "./useTooltip";
 
@@ -63,6 +64,7 @@ export const TooltipContent = forwardRef<
   HTMLProps<HTMLDivElement>
 >(function TooltipContent({ children, style, ...props }, propRef) {
   const context = useTooltipContext();
+  const maxZIndex = useGridMaxZIndex();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
 
   return (
@@ -75,7 +77,7 @@ export const TooltipContent = forwardRef<
             position: context.strategy,
             top: context.y ?? 0,
             visibility: context.x == null ? "hidden" : "visible",
-            zIndex: ZIndex.LAYER_3,
+            zIndex: maxZIndex + ZIndex.LAYER_3,
             ...style,
           }}
           {...context.getFloatingProps(props)}

packages/web/src/views/Calendar/components/Draft/grid/GridDraft.tsx

@@ -1,7 +1,7 @@
-import React, { FC, MouseEvent, useMemo } from "react";
+import { FC, MouseEvent } from "react";
 import { FloatingFocusManager } from "@floating-ui/react";
 import { YEAR_MONTH_DAY_FORMAT } from "@core/constants/date.constants";
-import { Categories_Event } from "@core/types/event.types";
+import { Categories_Event, Schema_Event } from "@core/types/event.types";
 import { PartialMouseEvent } from "@web/common/types/util.types";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { getEventDragOffset } from "@web/common/utils/event/event.util";
@@ -105,11 +105,13 @@ export const GridDraft: FC<Props> = ({ measurements, weekProps }) => {
               {...getFloatingProps()}
             >
               <EventForm
-                event={draft}
+                event={draft as Schema_Event}
                 onClose={discard}
                 onConvert={onConvert}
                 onDelete={onDelete}
                 onDuplicate={duplicateEvent}
+                isDraft={!draft._id}
+                isExistingEvent={!!draft._id}
                 onSubmit={onSubmit}
                 setEvent={setDraft}
               />

packages/web/src/views/Day/components/Agenda/Events/TimedAgendaEvent/DraggableTimedAgendaEvent.tsx

@@ -65,12 +65,13 @@ export const DraggableTimedAgendaEvent = memo(
     const isBeingResized = resizeId === event._id;
     const enableInteractions = !resizing && !selecting && !eventFormOpen;
     const mainGridHeight = mainGrid?.offsetHeight ?? 0;
+    const { _id, endDate, isAllDay } = event;
 
     const { onResize, onResizeStart, onResizeStop } = useEventResizeActions(
       event as WithCompassId<Schema_Event>,
     );
 
-    if (!event.startDate || !event.endDate || event.isAllDay) return null;
+    if (!_id || !event.startDate || !endDate || isAllDay) return null;
 
     return (
       <Draggable
@@ -82,7 +83,7 @@ export const DraggableTimedAgendaEvent = memo(
             : undefined,
         })}
         dndProps={{
-          id: event._id!,
+          id: _id,
           data: {
             event: event,
             type: Categories_Event.TIMED,

packages/web/src/views/Day/components/ContextMenu/EventContextMenu.test.tsx

@@ -118,6 +118,8 @@ describe("EventContextMenu", () => {
   });
 
   it("should work with multiple events", async () => {
+    jest.spyOn(window, "confirm").mockImplementation(() => true);
+
     const mockEvents = [
       { ...baseEvent, _id: "event-1", title: "First Event" },
       { ...baseEvent, _id: "event-2", title: "Second Event" },

packages/web/src/views/Day/components/ContextMenu/EventContextMenu.tsx

@@ -44,7 +44,7 @@ export function EventContextMenu({
           zIndex: maxZIndex + 3,
         }}
       >
-        <EventContextMenuItems />
+        <EventContextMenuItems id={activeEvent._id} />
       </ul>
     </FloatingPortal>
   );

packages/web/src/views/Day/components/ContextMenu/EventContextMenuItems.test.tsx

@@ -10,13 +10,18 @@ import {
 } from "@core/types/event.types";
 import { closeFloatingAtCursor } from "@web/common/hooks/useOpenAtCursor";
 import { deleteEventSlice } from "@web/ducks/events/slices/event.slice";
-import { activeEvent$ } from "@web/store/events";
+import { activeEvent$, eventsStore } from "@web/store/events";
 import { EventContextMenuItems } from "@web/views/Day/components/ContextMenu/EventContextMenuItems";
 
 jest.mock("@web/store/events", () => {
   const { BehaviorSubject } = require("rxjs");
   return {
     activeEvent$: new BehaviorSubject(null),
+    eventsStore: {
+      query: jest.fn(),
+    },
+    getDraft: jest.fn(),
+    resetDraft: jest.fn(),
   };
 });
 jest.mock("@web/common/hooks/useOpenAtCursor");
@@ -43,14 +48,16 @@ describe("EventContextMenuItems", () => {
   beforeEach(() => {
     jest.clearAllMocks();
     (closeFloatingAtCursor as jest.Mock).mockImplementation(mockClose);
+    global.confirm = jest.fn(() => true);
+    (eventsStore.query as jest.Mock).mockReturnValue(mockEvent);
   });
 
   const renderWithProvider = (event: Schema_Event) => {
     const store = createMockStore();
     (activeEvent$ as BehaviorSubject<Schema_Event | null>).next(event);
     return render(
       <Provider store={store}>
-        <EventContextMenuItems />
+        <EventContextMenuItems id={event._id!} />
       </Provider>,
     );
   };
@@ -70,7 +77,7 @@ describe("EventContextMenuItems", () => {
 
     render(
       <Provider store={store}>
-        <EventContextMenuItems />
+        <EventContextMenuItems id={mockEvent._id!} />
       </Provider>,
     );
 
@@ -94,7 +101,7 @@ describe("EventContextMenuItems", () => {
 
     render(
       <Provider store={store}>
-        <EventContextMenuItems />
+        <EventContextMenuItems id={mockEvent._id!} />
       </Provider>,
     );
 
@@ -118,7 +125,7 @@ describe("EventContextMenuItems", () => {
 
     render(
       <Provider store={store}>
-        <EventContextMenuItems />
+        <EventContextMenuItems id={mockEvent._id!} />
       </Provider>,
     );
 
@@ -132,25 +139,4 @@ describe("EventContextMenuItems", () => {
     });
     expect(mockClose).toHaveBeenCalled();
   });
-
-  it("should not delete if event has no _id", async () => {
-    const user = userEvent.setup();
-    const store = createMockStore();
-    const dispatchSpy = jest.spyOn(store, "dispatch");
-
-    const eventWithoutId = { ...mockEvent, _id: undefined };
-
-    (activeEvent$ as unknown as BehaviorSubject<any>).next(eventWithoutId);
-
-    render(
-      <Provider store={store}>
-        <EventContextMenuItems />
-      </Provider>,
-    );
-
-    const deleteButton = screen.getByText("Delete Event");
-    await user.click(deleteButton);
-
-    expect(dispatchSpy).not.toHaveBeenCalled();
-  });
 });

packages/web/src/views/Day/components/ContextMenu/EventContextMenuItems.tsx

@@ -1,43 +1,23 @@
 import React, { useCallback } from "react";
-import { useObservable } from "@ngneat/use-observable";
 import { TrashIcon } from "@phosphor-icons/react";
-import { RecurringEventUpdateScope } from "@core/types/event.types";
-import { closeFloatingAtCursor } from "@web/common/hooks/useOpenAtCursor";
-import { deleteEventSlice } from "@web/ducks/events/slices/event.slice";
-import { activeEvent$ } from "@web/store/events";
-import { useAppDispatch } from "@web/store/store.hooks";
+import { useDeleteEvent } from "@web/views/Forms/hooks/useDeleteEvent";
 
-export function EventContextMenuItems() {
-  const [activeEvent] = useObservable(activeEvent$);
-  const dispatch = useAppDispatch();
-
-  const handleDelete = useCallback(() => {
-    if (!activeEvent?._id) return;
-
-    // Dispatch delete action
-    dispatch(
-      deleteEventSlice.actions.request({
-        _id: activeEvent?._id,
-        applyTo: RecurringEventUpdateScope.THIS_EVENT,
-      }),
-    );
-
-    closeFloatingAtCursor();
-  }, [dispatch, activeEvent?._id]);
+export function EventContextMenuItems({ id }: { id: string }) {
+  const deleteEvent = useDeleteEvent(id);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
-        handleDelete();
+        deleteEvent();
       }
     },
-    [handleDelete],
+    [deleteEvent],
   );
 
   return (
     <li
-      onClick={handleDelete}
+      onClick={() => deleteEvent()}
       onKeyDown={handleKeyDown}
       role="menuitem"
       tabIndex={0}