pass prevent

web/src/components/features/popups/SaveResetFilePopup.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Text } from '@/components/ui/typography';
 import { Button } from '@/components/ui/buttons';
 import { Command, ReturnKey, TriangleWarning } from '@/components/ui/icons';
+import { PreventNavigation } from '@/components/ui/layouts/PreventNavigation';
 
 export const SaveResetFilePopup: React.FC<{
   open: boolean;
@@ -12,7 +13,7 @@ export const SaveResetFilePopup: React.FC<{
 }> = React.memo(({ open, onReset, onSave, isSaving = false }) => {
   return (
     <PopupContainer show={open}>
-      <SplitterContent onReset={onReset} onSave={onSave} isSaving={isSaving} />
+      <SplitterContent onReset={onReset} onSave={onSave} isSaving={isSaving} open={open} />
     </PopupContainer>
   );
 });
@@ -21,8 +22,11 @@ const SplitterContent: React.FC<{
   onReset: () => void;
   onSave: () => void;
   isSaving: boolean;
-}> = React.memo(({ onReset, onSave, isSaving }) => {
+  open: boolean;
+}> = React.memo(({ onReset, onSave, isSaving, open }) => {
+  console.log(open);
   return (
+    <React.Fragment>
       <div className="flex w-full items-center space-x-2.5">
         <div className="flex items-center space-x-1">
           <TriangleWarning />
@@ -50,6 +54,21 @@ const SplitterContent: React.FC<{
           </Button>
         </div>
       </div>
+
+      <PreventNavigation
+        title="Unsaved changes"
+        isDirty={open}
+        description="Are you sure you want to leave this page?"
+        onOk={() => {
+          onSave();
+          return Promise.resolve();
+        }}
+        onCancel={() => {
+          onReset();
+          return Promise.resolve();
+        }}
+      />
+    </React.Fragment>
   );
 });
 

web/src/components/ui/layouts/PreventNavigation.tsx

@@ -48,6 +48,7 @@ export const PreventNavigation: React.FC<PreventNavigationProps> = React.memo(
 
       if (isDirty) {
         event.preventDefault();
+        event.stopPropagation();
 
         confirmationFn.current = () => {
           router.push(target.href);

web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx

@@ -25,8 +25,6 @@ export const MetricViewResults: React.FC<{ metricId: string }> = React.memo(({ m
     saveSQL,
     saveMetricError,
     runSQLError,
-    warnBeforeNavigating,
-    setWarnBeforeNavigating,
     isSavingMetric,
     isRunningSQL
   } = useMetricRunSQL();

web/src/controllers/MetricController/MetricViewResults/useMetricRunSQL/useMetricRunSQL.ts

@@ -29,8 +29,6 @@ export const useMetricRunSQL = () => {
   } = useRunSQLQuery();
   const { openSuccessNotification } = useBusterNotifications();
 
-  const [warnBeforeNavigating, setWarnBeforeNavigating] = useState(false);
-
   const getDataByMetricIdMemoized = useMemoizedFn(
     (metricId: string): BusterMetricData | undefined => {
       const options = queryKeys.metricsGetData(metricId);
@@ -126,7 +124,6 @@ export const useMetricRunSQL = () => {
   );
 
   const resetRunSQLData = useMemoizedFn(({ metricId }: { metricId: string }) => {
-    setWarnBeforeNavigating(false);
     if (!originalConfigs.current) return;
     const oldConfig = originalConfigs.current?.chartConfig;
     updateMetricMutation({
@@ -173,8 +170,6 @@ export const useMetricRunSQL = () => {
         sql
       });
 
-      setWarnBeforeNavigating(false);
-
       if (originalConfigs.current) {
         onSetDataForMetric({
           metricId,
@@ -198,8 +193,6 @@ export const useMetricRunSQL = () => {
   return {
     runSQL,
     resetRunSQLData,
-    warnBeforeNavigating,
-    setWarnBeforeNavigating,
     saveSQL,
     saveMetricError: saveMetricError?.message,
     runSQLError: runSQLError?.message,