Added Modal Dialog for unsaved changes in Settings

src/Agent/AutopilotMonitor.Agent/buildcounter.txt

@@ -1 +1 @@
-75
+76

src/Web/autopilot-monitor-web/app/settings/page.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { ProtectedRoute } from "../../components/ProtectedRoute";
 import { useTenant } from "../../contexts/TenantContext";
 import { useAuth } from "../../contexts/AuthContext";
 import { useNotifications } from "../../contexts/NotificationContext";
 import { API_BASE_URL } from "@/lib/config";
+import UnsavedChangesModal from "../../components/UnsavedChangesModal";
 
 interface TenantConfiguration {
   tenantId: string;
@@ -87,6 +88,10 @@ export default function SettingsPage() {
   const [offboarding, setOffboarding] = useState(false);
   const [offboardError, setOffboardError] = useState<string | null>(null);
 
+  // Unsaved changes guard
+  const [showUnsavedModal, setShowUnsavedModal] = useState(false);
+  const pendingNavigationRef = useRef<string | null>(null);
+
   // Form state
   const [manufacturerWhitelist, setManufacturerWhitelist] = useState("Dell*,HP*,Lenovo*,Microsoft Corporation");
   const [modelWhitelist, setModelWhitelist] = useState("*");
@@ -118,6 +123,40 @@ export default function SettingsPage() {
   const [diagnosticsUploadMode, setDiagnosticsUploadMode] = useState("Off");
   const [diagnosticsSasExpiry, setDiagnosticsSasExpiry] = useState<Date | null>(null);
 
+  // Derived: true when form differs from last-saved config
+  const hasUnsavedChanges = useMemo(() => {
+    if (!config) return false;
+    return (
+      manufacturerWhitelist !== config.manufacturerWhitelist ||
+      modelWhitelist !== config.modelWhitelist ||
+      validateAutopilotDevice !== config.validateAutopilotDevice ||
+      dataRetentionDays !== config.dataRetentionDays ||
+      sessionTimeoutHours !== config.sessionTimeoutHours ||
+      enablePerformanceCollector !== config.enablePerformanceCollector ||
+      performanceCollectorInterval !== config.performanceCollectorIntervalSeconds ||
+      selfDestructOnComplete !== (config.selfDestructOnComplete ?? true) ||
+      keepLogFile !== (config.keepLogFile ?? false) ||
+      rebootOnComplete !== (config.rebootOnComplete ?? false) ||
+      rebootDelaySeconds !== (config.rebootDelaySeconds ?? 10) ||
+      enableGeoLocation !== (config.enableGeoLocation ?? true) ||
+      enableImeMatchLog !== (config.enableImeMatchLog ?? false) ||
+      logLevel !== (config.logLevel ?? "Info") ||
+      teamsWebhookUrl !== (config.teamsWebhookUrl ?? "") ||
+      teamsNotifyOnSuccess !== (config.teamsNotifyOnSuccess ?? true) ||
+      teamsNotifyOnFailure !== (config.teamsNotifyOnFailure ?? true) ||
+      diagnosticsBlobSasUrl !== (config.diagnosticsBlobSasUrl ?? "") ||
+      diagnosticsUploadMode !== (config.diagnosticsUploadMode ?? "Off")
+    );
+  }, [
+    config,
+    manufacturerWhitelist, modelWhitelist, validateAutopilotDevice,
+    dataRetentionDays, sessionTimeoutHours, enablePerformanceCollector,
+    performanceCollectorInterval, selfDestructOnComplete, keepLogFile,
+    rebootOnComplete, rebootDelaySeconds, enableGeoLocation, enableImeMatchLog,
+    logLevel, teamsWebhookUrl, teamsNotifyOnSuccess, teamsNotifyOnFailure,
+    diagnosticsBlobSasUrl, diagnosticsUploadMode,
+  ]);
+
   // Fetch configuration
   useEffect(() => {
     if (!tenantId) return;
@@ -242,6 +281,84 @@ export default function SettingsPage() {
     fetchAdmins();
   }, [tenantId]);
 
+  // Intercept <Link> clicks from Navbar and any other anchor navigations
+  useEffect(() => {
+    const handleLinkClick = (e: MouseEvent) => {
+      if (!hasUnsavedChanges) return;
+      if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
+      const target = (e.target as Element).closest('a[href]');
+      if (!target) return;
+      const href = target.getAttribute('href');
+      if (!href || href.startsWith('#') || href.startsWith('http://') || href.startsWith('https://')) return;
+      if (href === '/settings' || href.startsWith('/settings?') || href.startsWith('/settings#')) return;
+      e.preventDefault();
+      e.stopPropagation();
+      pendingNavigationRef.current = href;
+      setShowUnsavedModal(true);
+    };
+    document.addEventListener('click', handleLinkClick, true);
+    return () => document.removeEventListener('click', handleLinkClick, true);
+  }, [hasUnsavedChanges]);
+
+  // Intercept browser back/forward button
+  useEffect(() => {
+    const handlePopState = () => {
+      if (!hasUnsavedChanges) return;
+      window.history.pushState(null, '', window.location.href);
+      pendingNavigationRef.current = null;
+      setShowUnsavedModal(true);
+    };
+    window.history.pushState(null, '', window.location.href);
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [hasUnsavedChanges]);
+
+  // Intercept tab close / page refresh
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (!hasUnsavedChanges) return;
+      e.preventDefault();
+      e.returnValue = '';
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [hasUnsavedChanges]);
+
+  const handleNavigate = (url: string) => {
+    if (hasUnsavedChanges) {
+      pendingNavigationRef.current = url;
+      setShowUnsavedModal(true);
+    } else {
+      router.push(url);
+    }
+  };
+
+  const handleSaveAndNavigate = async () => {
+    setShowUnsavedModal(false);
+    const destination = pendingNavigationRef.current;
+    pendingNavigationRef.current = null;
+    try {
+      await saveConfiguration();
+      if (destination) router.push(destination);
+      else router.back();
+    } catch {
+      // saveConfiguration already calls setError; stay on page
+    }
+  };
+
+  const handleDiscardAndNavigate = () => {
+    setShowUnsavedModal(false);
+    const destination = pendingNavigationRef.current;
+    pendingNavigationRef.current = null;
+    if (destination) router.push(destination);
+    else router.back();
+  };
+
+  const handleCancelNavigation = () => {
+    setShowUnsavedModal(false);
+    pendingNavigationRef.current = null;
+  };
+
   const saveConfiguration = async (validateAutopilotDeviceOverride?: boolean) => {
     if (!tenantId || !config) return;
 
@@ -606,7 +723,7 @@ export default function SettingsPage() {
             <div className="flex items-center justify-between">
               <div>
                 <button
-                  onClick={() => router.push("/dashboard")}
+                  onClick={() => handleNavigate("/dashboard")}
                   className="text-sm text-gray-600 hover:text-gray-900 mb-2 flex items-center"
                 >
                   &larr; Back to Dashboard
@@ -1544,6 +1661,14 @@ export default function SettingsPage() {
         )}
       </main>
       </div>
+
+      <UnsavedChangesModal
+        isOpen={showUnsavedModal}
+        isSaving={saving}
+        onSaveAndNavigate={handleSaveAndNavigate}
+        onDiscardAndNavigate={handleDiscardAndNavigate}
+        onCancel={handleCancelNavigation}
+      />
     </ProtectedRoute>
   );
 }

src/Web/autopilot-monitor-web/components/UnsavedChangesModal.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+interface UnsavedChangesModalProps {
+  isOpen: boolean;
+  isSaving: boolean;
+  onSaveAndNavigate: () => void;
+  onDiscardAndNavigate: () => void;
+  onCancel: () => void;
+}
+
+export default function UnsavedChangesModal({
+  isOpen,
+  isSaving,
+  onSaveAndNavigate,
+  onDiscardAndNavigate,
+  onCancel,
+}: UnsavedChangesModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center space-x-3">
+            <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
+              <svg className="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-gray-900">Unsaved Changes</h3>
+              <p className="text-sm text-gray-500 mt-0.5">
+                You have unsaved changes. What would you like to do?
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onCancel}
+            disabled={isSaving}
+            className="ml-4 text-gray-400 hover:text-gray-600 disabled:opacity-50 transition-colors"
+            aria-label="Cancel"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="flex flex-col space-y-2 mt-6">
+          <button
+            onClick={onSaveAndNavigate}
+            disabled={isSaving}
+            className="w-full px-4 py-2.5 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center space-x-2"
+          >
+            {isSaving ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />
+                <span>Saving...</span>
+              </>
+            ) : (
+              <span>Save Now</span>
+            )}
+          </button>
+
+          <button
+            onClick={onDiscardAndNavigate}
+            disabled={isSaving}
+            className="w-full px-4 py-2.5 border border-gray-300 text-gray-700 bg-white rounded-md text-sm font-medium hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Discard Changes
+          </button>
+
+          <button
+            onClick={onCancel}
+            disabled={isSaving}
+            className="w-full px-4 py-2.5 text-gray-500 text-sm font-medium hover:text-gray-700 disabled:opacity-50 transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}