Merge pull request #326 from frostaura/copilot/fix-health-longevity-modals

Unify Health & Longevity edit dialogs on the shared frosted modal shell

Author: frostaura

src/frontend/src/components/organisms/FrostedModalShell.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, MouseEventHandler, ReactNode, RefObject } from 'react';
+import { useEffect, useRef, type CSSProperties, type MouseEventHandler, type ReactNode, type RefObject } from 'react';
 import { X } from 'lucide-react';
 
 import { AppModalPortal } from '@components/atoms/AppModalPortal';
@@ -12,6 +12,8 @@ interface FrostedModalShellProps {
   children: ReactNode;
   closeButtonLabel?: string;
   contentClassName?: string;
+  dismissOnBackdrop?: boolean;
+  dismissOnEscape?: boolean;
   headerClassName?: string;
   maxWidthClassName?: string;
   modalRef?: RefObject<HTMLDivElement | null>;
@@ -34,6 +36,8 @@ export function FrostedModalShell({
   children,
   closeButtonLabel = 'Close modal',
   contentClassName,
+  dismissOnBackdrop = false,
+  dismissOnEscape = false,
   headerClassName,
   maxWidthClassName = 'max-w-[var(--layout-auth-modal-max-width)]',
   modalRef,
@@ -48,6 +52,48 @@ export function FrostedModalShell({
   titleIcon,
   titleIconClassName = 'auth-accent-icon-tone',
 }: FrostedModalShellProps) {
+  const fallbackModalRef = useRef<HTMLDivElement>(null);
+  const mouseDownTargetRef = useRef<EventTarget | null>(null);
+  const resolvedModalRef = modalRef ?? fallbackModalRef;
+
+  useEffect(() => {
+    if (!dismissOnEscape || !onClose) {
+      return;
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleEscape);
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [dismissOnEscape, onClose]);
+
+  const handleBackdropMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {
+    if (dismissOnBackdrop && onClose) {
+      mouseDownTargetRef.current = event.target;
+    }
+
+    onMouseDown?.(event);
+  };
+
+  const handleBackdropMouseUp: MouseEventHandler<HTMLDivElement> = (event) => {
+    if (
+      dismissOnBackdrop &&
+      onClose &&
+      resolvedModalRef.current &&
+      !resolvedModalRef.current.contains(event.target as Node) &&
+      mouseDownTargetRef.current === event.target
+    ) {
+      onClose();
+    }
+
+    mouseDownTargetRef.current = null;
+    onMouseUp?.(event);
+  };
+
   return (
     <AppModalPortal>
       <div
@@ -61,11 +107,11 @@ export function FrostedModalShell({
         aria-modal="true"
         aria-label={ariaLabel ?? title}
         onClick={onBackdropClick}
-        onMouseDown={onMouseDown}
-        onMouseUp={onMouseUp}
+        onMouseDown={handleBackdropMouseDown}
+        onMouseUp={handleBackdropMouseUp}
       >
         <div
-          ref={modalRef}
+          ref={resolvedModalRef}
           className={cn(
             'relative w-full max-h-[calc(100dvh-var(--space-sm)-env(safe-area-inset-bottom))] overflow-y-auto scroll-pb-[calc(var(--space-lg)+env(safe-area-inset-bottom))] rounded-[var(--radius-auth-shell)] sm:mx-4 sm:max-h-[calc(100vh-2rem)] sm:scroll-pb-space-lg',
             maxWidthClassName,
@@ -90,13 +136,13 @@ export function FrostedModalShell({
               <div className="flex items-center justify-between gap-space-md">
                 <div className="flex min-w-0 items-center gap-space-md">
                   {titleIcon ? (
-                      <div
-                        className={cn(
+                    <div
+                      className={cn(
                         'flex h-[var(--layout-frosted-modal-title-icon-size)] w-[var(--layout-frosted-modal-title-icon-size)] shrink-0 items-center justify-center rounded-full',
-                         titleIconClassName,
-                       )}
-                       data-testid="frosted-modal-title-icon"
-                     >
+                        titleIconClassName,
+                      )}
+                      data-testid="frosted-modal-title-icon"
+                    >
                       {titleIcon}
                     </div>
                   ) : null}

src/frontend/src/pages/__tests__/HealthDetailSections.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { Activity } from 'lucide-react';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { HealthDetailSections } from '../healthDetailSections';
+import { HealthDetailSections, HealthEditModals } from '../healthDetailSections';
 
 vi.mock('react-hot-toast', () => ({
   default: {
@@ -30,6 +30,10 @@ vi.mock('@/services/endpoints/metrics', () => ({
 }));
 
 describe('HealthDetailSections', () => {
+  beforeEach(() => {
+    document.body.style.overflow = '';
+  });
+
   it('opens the shared quick log modal with the clicked pending metric preselected', async () => {
     render(
       <HealthDetailSections
@@ -65,4 +69,102 @@ describe('HealthDetailSections', () => {
       expect(screen.getByLabelText(/Value \*/i)).toHaveFocus();
     });
   });
+
+  it('renders the shared frosted shell for the edit target modal', () => {
+    render(
+      <HealthEditModals
+        editingMetric={{
+          id: 'metric-sleep',
+          code: 'sleep_hours',
+          name: 'Sleep Hours',
+          unit: 'hours',
+          targetDirection: 'AtOrAbove',
+        } as never}
+        setEditingMetric={vi.fn()}
+        editTargetValue="8"
+        setEditTargetValue={vi.fn()}
+        editTargetDirection="AtOrAbove"
+        setEditTargetDirection={vi.fn()}
+        handleSaveTarget={vi.fn().mockResolvedValue(undefined)}
+        editingModel={null}
+        setEditingModel={vi.fn()}
+        editModelParams={{}}
+        setEditModelParams={vi.fn()}
+        handleSaveModel={vi.fn().mockResolvedValue(undefined)}
+      />,
+    );
+
+    const dialog = screen.getByRole('dialog', { name: /Edit target for Sleep Hours/i });
+
+    expect(screen.getByRole('heading', { name: /Edit Target: Sleep Hours/i })).toBeInTheDocument();
+    expect(dialog).toHaveAttribute('data-app-modal', 'true');
+    expect(dialog).toHaveClass('auth-shell-backdrop');
+    expect(screen.getByText(/Update the target shown across health tracking and longevity guidance\./i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Close edit target modal for Sleep Hours/i })).toBeInTheDocument();
+  });
+
+  it('closes the edit target modal on backdrop interaction', () => {
+    const setEditingMetric = vi.fn();
+
+    render(
+      <HealthEditModals
+        editingMetric={{
+          id: 'metric-sleep',
+          code: 'sleep_hours',
+          name: 'Sleep Hours',
+          unit: 'hours',
+          targetDirection: 'AtOrAbove',
+        } as never}
+        setEditingMetric={setEditingMetric}
+        editTargetValue="8"
+        setEditTargetValue={vi.fn()}
+        editTargetDirection="AtOrAbove"
+        setEditTargetDirection={vi.fn()}
+        handleSaveTarget={vi.fn().mockResolvedValue(undefined)}
+        editingModel={null}
+        setEditingModel={vi.fn()}
+        editModelParams={{}}
+        setEditModelParams={vi.fn()}
+        handleSaveModel={vi.fn().mockResolvedValue(undefined)}
+      />,
+    );
+
+    const backdrop = document.querySelector('[data-app-modal="true"]');
+    expect(backdrop).not.toBeNull();
+
+    fireEvent.mouseDown(backdrop!);
+    fireEvent.mouseUp(backdrop!);
+
+    expect(setEditingMetric).toHaveBeenCalledWith(null);
+  });
+
+  it('closes the edit rule modal on escape', () => {
+    const setEditingModel = vi.fn();
+
+    render(
+      <HealthEditModals
+        editingMetric={null}
+        setEditingMetric={vi.fn()}
+        editTargetValue=""
+        setEditTargetValue={vi.fn()}
+        editTargetDirection="AtOrAbove"
+        setEditTargetDirection={vi.fn()}
+        handleSaveTarget={vi.fn().mockResolvedValue(undefined)}
+        editingModel={{
+          id: 'rule-resting-heart-rate',
+          code: 'resting_heart_rate',
+          name: 'Resting Heart Rate',
+          modelType: 'threshold',
+        } as never}
+        setEditingModel={setEditingModel}
+        editModelParams={{ threshold: 60, direction: 'below', maxYearsAdded: 2 }}
+        setEditModelParams={vi.fn()}
+        handleSaveModel={vi.fn().mockResolvedValue(undefined)}
+      />,
+    );
+
+    fireEvent.keyDown(window, { key: 'Escape' });
+
+    expect(setEditingModel).toHaveBeenCalledWith(null);
+  });
 });