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,35 +22,53 @@ 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 (
-    <div className="flex w-full items-center space-x-2.5">
-      <div className="flex items-center space-x-1">
-        <TriangleWarning />
-        <Text>Unsaved changes</Text>
+    <React.Fragment>
+      <div className="flex w-full items-center space-x-2.5">
+        <div className="flex items-center space-x-1">
+          <TriangleWarning />
+          <Text>Unsaved changes</Text>
+        </div>
+
+        <PopupSplitter />
+
+        <div className="flex items-center space-x-2">
+          <Button variant={'default'} onClick={onReset}>
+            Reset
+          </Button>
+          <Button
+            className="flex items-center"
+            variant="black"
+            onClick={onSave}
+            loading={isSaving}
+            suffix={
+              <div className="flex space-x-1">
+                <Command />
+                <ReturnKey />
+              </div>
+            }>
+            Save
+          </Button>
+        </div>
       </div>
 
-      <PopupSplitter />
-
-      <div className="flex items-center space-x-2">
-        <Button variant={'default'} onClick={onReset}>
-          Reset
-        </Button>
-        <Button
-          className="flex items-center"
-          variant="black"
-          onClick={onSave}
-          loading={isSaving}
-          suffix={
-            <div className="flex space-x-1">
-              <Command />
-              <ReturnKey />
-            </div>
-          }>
-          Save
-        </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,