fix(app): confirm before discarding unsaved changes when closing filter editor (#3005)

## Summary

In the Edit Dashboard Filters modal, clicking outside the modal or pressing ESC while editing a filter closed the editor immediately, silently discarding any pending form changes. This mirrors the fix already in place for the tile editor.

The filter edit form (`DashboardFilterEditForm`) now prompts for confirmation before closing when the form has pending edits:

- Uses `react-hook-form`'s `formState.isDirty` to detect pending changes — no confirm is shown for a clean form.
- Reuses the shared `useConfirm` dialog ("You have unsaved changes. Discard them and close the editor?" / **Discard**), same pattern and copy as the tile editor.
- Guards against re-entrancy (`isConfirmingRef`) so Mantine's focus management can't stack a second confirm dialog.
- Sets the edit-form modal's `zIndex` via `useZIndex()` so the root confirm dialog reliably layers on top — the same z-index handling the tile editor uses. Without this the two default-z-index modals stacked unpredictably.

The confirm applies to ESC, click-outside, and the modal's X. The in-form **Cancel** button (which returns to the filters list) is unchanged, since that is an explicit user action.

### Screenshots or video

| After |
| :---- |
| [Confirmation dialog shown when closing the filter editor with unsaved changes](https://cursor.com/agents/bc-c7e04f97-bd8f-49d4-b41f-55bf763048a5/artifacts?path=%2Fopt%2Fcursor%2Fartifacts%2Ffilter_editor_discard_confirmation.png) |

### How to test on Vercel preview

**Preview routes:** /dashboards

**Steps:**

1. Open /dashboards and create a new dashboard.
2. Click the filter icon in the dashboard header (data-testid `edit-filters-button`) to open the filters editor.
3. Click "Add new filter" (data-testid `add-filter-button`).
4. Type any text into the "Display name" field (data-testid `filter-name-input`).
5. Press ESC. Verify a confirmation dialog appears reading "You have unsaved changes. Discard them and close the editor?" with Cancel and Discard buttons.
6. Click Cancel. Verify the filter form is still open with the typed name intact.
7. Press ESC again, then click Discard. Verify the editor closes and no filter was saved.

### References

- Linear Issue: HDX-5167
- Related PRs: #2963

### Testing

- Added Playwright E2E cases in `dashboard.spec.ts`: one asserting the confirm-on-close (Cancel keeps edits, Discard closes) and one asserting a clean form closes without a prompt. Both pass in full-stack mode.
- `tsc --noEmit` and `eslint` pass (no new warnings).


<sub>To show artifacts inline, <a href="https://cursor.com/dashboard/cloud-agents#team-pull-requests">enable</a> in settings.</sub>


Linear Issue: [HDX-5167](https://linear.app/clickhouse/issue/HDX-5167/add-confirmation-dialog-when-closing-filter-editing-modal)

<div><a href="https://cursor.com/agents/bc-c7e04f97-bd8f-49d4-b41f-55bf763048a5?cursor_ref=pr_footer&cursor_cta=open_in_web"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a href="https://cursor.com/background-agent?bcId=bc-c7e04f97-bd8f-49d4-b41f-55bf763048a5&cursor_ref=pr_footer&cursor_cta=open_in_cursor"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img alt="Open in Cursor" width="131" height="28" src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>



Co-authored-by: Cursor Agent <199161495+cursoragent@users.noreply.github.com>

Author: pulpdrew

.changeset/confirm-close-filter-editor.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+fix: Confirm before discarding unsaved changes when closing the dashboard filter editor

packages/app/src/components/DashboardFiltersModal/DashboardFilterEditForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { TableConnection } from '@hyperdx/common-utils/dist/core/metadata';
 import {
@@ -38,7 +38,9 @@ import SourceSchemaPreview, {
 import { SourceSelectControlled } from '@/components/SourceSelect';
 import { SQLInlineEditorControlled } from '@/components/SQLEditor/SQLInlineEditor';
 import { useSource } from '@/source';
+import { useConfirm } from '@/useConfirm';
 import { getMetricTableName } from '@/utils';
+import { useZIndex } from '@/zIndex';
 
 import { MODAL_SIZE } from './constants';
 import { CustomInputWrapper } from './CustomInputWrapper';
@@ -96,6 +98,38 @@ export const DashboardFilterEditForm = ({
     defaultValues: toFormValues(filter),
   });
 
+  const confirm = useConfirm();
+  // Read during render so react-hook-form subscribes this component to it.
+  const isDirty = formState.isDirty;
+
+  // Keep this modal below the root confirm dialog (Mantine's default 200) so
+  // the "discard unsaved changes?" prompt stacks on top of it — mirrors the
+  // tile editor's z-index handling.
+  const modalZIndex = useZIndex() + 10;
+
+  // Guards against re-entrancy while the confirm dialog is open: Mantine's
+  // focus management can re-fire the modal's onClose after the confirm modal
+  // closes, which would otherwise stack a second dialog.
+  const isConfirmingRef = useRef(false);
+
+  const handleClose = useCallback(() => {
+    if (isConfirmingRef.current) return;
+    if (!isDirty) {
+      onClose();
+      return;
+    }
+    isConfirmingRef.current = true;
+    confirm(
+      'You have unsaved changes. Discard them and close the editor?',
+      'Discard',
+    ).then(ok => {
+      isConfirmingRef.current = false;
+      if (ok) {
+        onClose();
+      }
+    });
+  }, [confirm, isDirty, onClose]);
+
   // Gates the auto-fill of Variable Name from Name below. Seeded true for a filter
   // that already has a stored name, because renaming an existing filter must not
   // silently break the tiles referencing its old token.
@@ -213,8 +247,9 @@ export const DashboardFilterEditForm = ({
     <Modal
       title={isNew ? 'Add filter' : 'Edit filter'}
       opened
-      onClose={onClose}
+      onClose={handleClose}
       size={MODAL_SIZE}
+      zIndex={modalZIndex}
     >
       <form
         onSubmit={handleSubmit(values => {

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

@@ -446,6 +446,45 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
     await expect(dashboardPage.unsavedChangesConfirmModal).toBeHidden();
   });
 
+  test('should warn when closing filter editor with unsaved changes', async () => {
+    await dashboardPage.createNewDashboard();
+    await dashboardPage.openEditFiltersModal();
+    await dashboardPage.openAddFilterForm();
+    await expect(dashboardPage.getFilterForm()).toBeVisible();
+
+    await dashboardPage.fillFilterName('Unsaved filter');
+
+    await dashboardPage.page.keyboard.press('Escape');
+    await expect(dashboardPage.unsavedChangesConfirmModal).toBeAttached({
+      timeout: 5000,
+    });
+
+    // Cancelling keeps the editor open with the pending edit intact.
+    await dashboardPage.unsavedChangesConfirmCancelButton.click();
+    await expect(dashboardPage.unsavedChangesConfirmModal).toBeHidden();
+    await expect(dashboardPage.getFilterNameInput()).toHaveValue(
+      'Unsaved filter',
+    );
+
+    await dashboardPage.page.keyboard.press('Escape');
+    await expect(dashboardPage.unsavedChangesConfirmModal).toBeAttached({
+      timeout: 5000,
+    });
+    await dashboardPage.unsavedChangesConfirmDiscardButton.click();
+    await expect(dashboardPage.getFilterForm()).toBeHidden({ timeout: 5000 });
+  });
+
+  test('should close filter editor without confirm when there are no unsaved changes', async () => {
+    await dashboardPage.createNewDashboard();
+    await dashboardPage.openEditFiltersModal();
+    await dashboardPage.openAddFilterForm();
+    await expect(dashboardPage.getFilterForm()).toBeVisible();
+
+    await dashboardPage.page.keyboard.press('Escape');
+    await expect(dashboardPage.getFilterForm()).toBeHidden({ timeout: 5000 });
+    await expect(dashboardPage.unsavedChangesConfirmModal).toBeHidden();
+  });
+
   test('should create and populate filters', {}, async () => {
     test.setTimeout(30000);
 

packages/app/tests/e2e/page-objects/DashboardPage.ts

@@ -844,6 +844,24 @@ export class DashboardPage {
     await this.addFiltersButton.click();
   }
 
+  /** The filter edit form's display-name input. */
+  getFilterNameInput(): Locator {
+    return this.page.getByTestId('filter-name-input');
+  }
+
+  /**
+   * Fill only the filter's display name in the open edit form. Enough to mark
+   * the react-hook-form dirty without completing the whole form.
+   */
+  async fillFilterName(name: string) {
+    await this.getFilterNameInput().fill(name);
+  }
+
+  /** Open the edit form for an already-saved filter, without saving. */
+  async openEditFilterForm(filterName: string) {
+    await this.page.getByTestId(`edit-filter-button-${filterName}`).click();
+  }
+
   /** Pick the data source in the filter edit form. */
   async selectFilterSource(sourceName: string) {
     await this.filtersSourceSelector.click();