feat: Add confirm dialog when closing tile editor w/ changes (#1746)

Fixes: HDX-3201

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: teeohhem

.changeset/cuddly-cycles-speak.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Add confirm dialog when closing tile editor w/ changes

packages/app/pages/_app.tsx

@@ -27,7 +27,7 @@ import { ibmPlexMono, inter, roboto, robotoMono } from '@/fonts';
 import { AppThemeProvider, useAppTheme } from '@/theme/ThemeProvider';
 import { ThemeWrapper } from '@/ThemeWrapper';
 import { NextApiConfigResponseData } from '@/types';
-import { useConfirmModal } from '@/useConfirm';
+import { ConfirmProvider } from '@/useConfirm';
 import { QueryParamProvider as HDXQueryParamProvider } from '@/useQueryParam';
 import { useUserPreferences } from '@/useUserPreferences';
 
@@ -90,11 +90,9 @@ function AppHeadContent() {
 function AppContent({
   Component,
   pageProps,
-  confirmModal,
 }: {
   Component: NextPageWithLayout;
   pageProps: AppProps['pageProps'];
-  confirmModal: React.ReactNode;
 }) {
   const { userPreferences } = useUserPreferences();
   const { themeName } = useAppTheme();
@@ -122,15 +120,14 @@ function AppContent({
       fontFamily={selectedMantineFont}
       colorScheme={userPreferences.colorMode === 'dark' ? 'dark' : 'light'}
     >
-      {getLayout(<Component {...pageProps} />)}
-      {confirmModal}
+      <ConfirmProvider>
+        {getLayout(<Component {...pageProps} />)}
+      </ConfirmProvider>
     </ThemeWrapper>
   );
 }
 
 export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
-  const confirmModal = useConfirmModal();
-
   // port to react query ? (needs to wrap with QueryClientProvider)
   useEffect(() => {
     if (IS_LOCAL_MODE) {
@@ -182,11 +179,7 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         <HDXQueryParamProvider>
           <QueryParamProvider adapter={NextAdapter}>
             <QueryClientProvider client={queryClient}>
-              <AppContent
-                Component={Component}
-                pageProps={pageProps}
-                confirmModal={confirmModal}
-              />
+              <AppContent Component={Component} pageProps={pageProps} />
               <ReactQueryDevtools initialIsOpen={true} />
             </QueryClientProvider>
           </QueryParamProvider>

packages/app/src/DBDashboardPage.tsx

@@ -521,10 +521,33 @@ const EditTileModal = ({
 }) => {
   const contextZIndex = useZIndex();
   const modalZIndex = contextZIndex + 10;
+  const confirm = useConfirm();
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  useEffect(() => {
+    if (chart != null) {
+      setHasUnsavedChanges(false);
+    }
+  }, [chart]);
+
+  const handleClose = useCallback(() => {
+    if (isSaving) return;
+    if (hasUnsavedChanges) {
+      confirm(
+        'You have unsaved changes. Discard them and close the editor?',
+        'Discard',
+      ).then(ok => {
+        if (ok) onClose();
+      });
+    } else {
+      onClose();
+    }
+  }, [confirm, isSaving, hasUnsavedChanges, onClose]);
+
   return (
     <Modal
       opened={chart != null}
-      onClose={onClose}
+      onClose={handleClose}
       withCloseButton={false}
       centered
       size="90%"
@@ -544,7 +567,8 @@ const EditTileModal = ({
                 config: config,
               });
             }}
-            onClose={onClose}
+            onClose={handleClose}
+            onDirtyChange={setHasUnsavedChanges}
           />
         </ZIndexContext.Provider>
       )}
@@ -984,9 +1008,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
         dashboardId={dashboardId}
         chart={editedTile}
         onClose={() => {
-          if (!isSaving) {
-            setEditedTile(undefined);
-          }
+          if (!isSaving) setEditedTile(undefined);
         }}
         dateRange={searchedTimeRange}
         isSaving={isSaving}

packages/app/src/components/DBEditTimeChartForm.tsx

@@ -573,6 +573,7 @@ export default function EditTimeChartForm({
   onSave,
   onTimeRangeSelect,
   onClose,
+  onDirtyChange,
   'data-testid': dataTestId,
   submitRef,
 }: {
@@ -586,6 +587,7 @@ export default function EditTimeChartForm({
   setDisplayedTimeInputValue?: (value: string) => void;
   onSave?: (chart: SavedChartConfig) => void;
   onClose?: () => void;
+  onDirtyChange?: (isDirty: boolean) => void;
   onTimeRangeSelect?: (start: Date, end: Date) => void;
   'data-testid'?: string;
   submitRef?: React.MutableRefObject<(() => void) | undefined>;
@@ -607,7 +609,7 @@ export default function EditTimeChartForm({
     register,
     setError,
     clearErrors,
-    formState: { errors },
+    formState: { errors, isDirty },
   } = useForm<SavedChartConfigWithSeries>({
     defaultValues: configWithSeries,
     values: configWithSeries,
@@ -624,6 +626,10 @@ export default function EditTimeChartForm({
     name: 'series',
   });
 
+  useEffect(() => {
+    onDirtyChange?.(isDirty);
+  }, [isDirty, onDirtyChange]);
+
   const [isSampleEventsOpen, setIsSampleEventsOpen] = useState(false);
 
   const select = useWatch({ control, name: 'select' });

packages/app/src/useConfirm.tsx

@@ -1,88 +1,107 @@
 import * as React from 'react';
-import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { useRouter } from 'next/router';
 import { Button, Group, Modal, Text } from '@mantine/core';
 
 type ConfirmOptions = {
   variant?: 'primary' | 'danger';
 };
 
-type ConfirmAtom = {
+type ConfirmState = {
   message: React.ReactNode;
   confirmLabel?: string;
   confirmVariant?: 'primary' | 'danger';
   onConfirm: () => void;
-  onClose?: () => void;
+  onClose: () => void;
 } | null;
 
-const confirmAtom = atom<ConfirmAtom>(null);
+type ConfirmFn = (
+  message: React.ReactNode,
+  confirmLabel?: string,
+  options?: ConfirmOptions,
+) => Promise<boolean>;
 
-export const useConfirm = () => {
-  const setConfirm = useSetAtom(confirmAtom);
+const ConfirmContext = React.createContext<ConfirmFn | null>(null);
+
+export function ConfirmProvider({ children }: { children: React.ReactNode }) {
+  const [state, setState] = React.useState<ConfirmState>(null);
+  const router = useRouter();
+
+  // Keep a ref so the route-change handler always sees the latest state
+  // without needing to be re-registered on every render.
+  const stateRef = React.useRef(state);
+  React.useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
 
-  return React.useCallback(
-    async (
-      message: React.ReactNode,
-      confirmLabel?: string,
-      options?: ConfirmOptions,
-    ): Promise<boolean> => {
-      return new Promise(resolve => {
-        setConfirm({
+  React.useEffect(() => {
+    const dismiss = () => {
+      stateRef.current?.onClose();
+    };
+    router.events.on('routeChangeStart', dismiss);
+    return () => router.events.off('routeChangeStart', dismiss);
+  }, [router.events]);
+
+  const confirm = React.useCallback<ConfirmFn>(
+    (message, confirmLabel, options) => {
+      return new Promise<boolean>(resolve => {
+        setState({
           message,
           confirmLabel,
           confirmVariant: options?.variant ?? 'primary',
           onConfirm: () => {
             resolve(true);
-            setConfirm(null);
+            setState(null);
           },
           onClose: () => {
             resolve(false);
-            setConfirm(null);
+            setState(null);
           },
         });
       });
     },
-    [setConfirm],
+    [],
   );
-};
-
-export const useConfirmModal = () => {
-  const confirm = useAtomValue(confirmAtom);
-  const setConfirm = useSetAtom(confirmAtom);
-
-  const handleClose = React.useCallback(() => {
-    confirm?.onClose?.();
-    setConfirm(null);
-  }, [confirm, setConfirm]);
 
   return (
-    <Modal
-      data-testid="confirm-modal"
-      opened={!!confirm}
-      onClose={handleClose}
-      centered
-      withCloseButton={false}
-    >
-      <Text size="sm" opacity={0.7}>
-        {confirm?.message}
-      </Text>
-      <Group justify="flex-end" mt="md" gap="xs">
-        <Button
-          data-testid="confirm-cancel-button"
-          size="xs"
-          variant="secondary"
-          onClick={handleClose}
-        >
-          Cancel
-        </Button>
-        <Button
-          data-testid="confirm-confirm-button"
-          size="xs"
-          variant={confirm?.confirmVariant ?? 'primary'}
-          onClick={confirm?.onConfirm}
-        >
-          {confirm?.confirmLabel || 'Confirm'}
-        </Button>
-      </Group>
-    </Modal>
+    <ConfirmContext.Provider value={confirm}>
+      {children}
+      <Modal
+        data-testid="confirm-modal"
+        opened={!!state}
+        onClose={state?.onClose ?? (() => {})}
+        centered
+        withCloseButton={false}
+      >
+        <Text size="sm" opacity={0.7}>
+          {state?.message}
+        </Text>
+        <Group justify="flex-end" mt="md" gap="xs">
+          <Button
+            data-testid="confirm-cancel-button"
+            size="xs"
+            variant="secondary"
+            onClick={state?.onClose}
+          >
+            Cancel
+          </Button>
+          <Button
+            data-testid="confirm-confirm-button"
+            size="xs"
+            variant={state?.confirmVariant ?? 'primary'}
+            onClick={state?.onConfirm}
+          >
+            {state?.confirmLabel || 'Confirm'}
+          </Button>
+        </Group>
+      </Modal>
+    </ConfirmContext.Provider>
   );
+}
+
+export const useConfirm = () => {
+  const confirm = React.useContext(ConfirmContext);
+  if (confirm == null) {
+    throw new Error('useConfirm must be used within a ConfirmProvider');
+  }
+  return confirm;
 };

packages/app/tests/e2e/README.md

@@ -74,10 +74,20 @@ yarn test:e2e tests/e2e/features/search/search.spec.ts
 yarn test:e2e tests/e2e/features/dashboard.spec.ts --local
 ```
 
+**Watch mode (re-run on file save):**
+
+Playwright UI has built-in watch. Run with UI, then enable it per test:
+
+```bash
+./scripts/test-e2e.sh --keep-running --ui
+```
+
+In the Playwright UI sidebar, click the **eye icon** next to a test (or file/describe) to turn on watch for it. When you save changes to that test file, that test will re-run automatically.
+
 **Available flags:**
 
 - `--local` - Run in local mode (frontend only), excludes `@full-stack` tests
-- `--ui` - Open Playwright UI for interactive debugging
+- `--ui` - Open Playwright UI for interactive debugging and watch mode
 - `--debug` - Run in debug mode with browser developer tools
 - `--headed` - Run tests in visible browser (default is headless)
 

packages/app/tests/e2e/features/dashboard.spec.ts

@@ -257,6 +257,41 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
     },
   );
 
+  test('should warn when closing tile editor with unsaved changes', async () => {
+    await dashboardPage.openNewTileEditor();
+    await dashboardPage.chartEditor.setChartName('My Unsaved Chart');
+
+    await dashboardPage.page.keyboard.press('Escape');
+    await expect(dashboardPage.unsavedChangesConfirmModal).toBeAttached({
+      timeout: 5000,
+    });
+
+    await dashboardPage.unsavedChangesConfirmCancelButton.click();
+    await expect(dashboardPage.unsavedChangesConfirmModal).toBeHidden();
+    await expect(dashboardPage.chartEditor.nameInput).toHaveValue(
+      'My Unsaved Chart',
+    );
+
+    await dashboardPage.page.keyboard.press('Escape');
+    await expect(dashboardPage.unsavedChangesConfirmModal).toBeAttached({
+      timeout: 5000,
+    });
+    await dashboardPage.unsavedChangesConfirmDiscardButton.click();
+    await expect(dashboardPage.chartEditor.nameInput).toBeHidden({
+      timeout: 5000,
+    });
+  });
+
+  test('should close tile editor without confirm when there are no unsaved changes', async () => {
+    await dashboardPage.openNewTileEditor();
+
+    await dashboardPage.page.keyboard.press('Escape');
+    await expect(dashboardPage.chartEditor.nameInput).toBeHidden({
+      timeout: 5000,
+    });
+    await expect(dashboardPage.unsavedChangesConfirmModal).toBeHidden();
+  });
+
   test(
     'should create and populate filters',
     { tag: '@full-stack' },