From 863af5493f116a2a632848bcd560bf81fecfb234 Mon Sep 17 00:00:00 2001
From: Jenny Zhu <jenny.a.zhu@gmail.com>
Date: Thu, 5 Mar 2026 12:40:40 -0500
Subject: [PATCH] fix: OU1248 Persist Panel updates

---
 web/package-lock.json                                  | 7 ++++---
 web/package.json                                       | 3 ++-
 web/src/components/dashboards/perses/dashboard-app.tsx | 8 ++++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 7614c5942..a55b1f452 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -102,7 +102,8 @@
         "typescript": "^5.9.2",
         "webpack": "^5.94.0",
         "webpack-cli": "^6.0.1",
-        "webpack-dev-server": "^5.2.2"
+        "webpack-dev-server": "^5.2.2",
+        "zod": "^3.21.4"
       }
     },
     "node_modules/@atlaskit/pragmatic-drag-and-drop": {
@@ -11152,7 +11153,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -16195,7 +16196,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/sass": {
diff --git a/web/package.json b/web/package.json
index 60c34cfd3..283bd961d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -119,7 +119,8 @@
     "typescript": "^5.9.2",
     "webpack": "^5.94.0",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2"
+    "webpack-dev-server": "^5.2.2",
+    "zod": "^3.21.4"
   },
   "overrides": {
     "echarts": "^5.6.0"
diff --git a/web/src/components/dashboards/perses/dashboard-app.tsx b/web/src/components/dashboards/perses/dashboard-app.tsx
index fdd3a1720..e33c427a5 100644
--- a/web/src/components/dashboards/perses/dashboard-app.tsx
+++ b/web/src/components/dashboards/perses/dashboard-app.tsx
@@ -21,6 +21,7 @@ import {
 } from '@perses-dev/dashboards';
 import {
   useDashboard,
+  useDashboardActions,
   useDiscardChangesConfirmationDialog,
   useEditMode,
 } from '@perses-dev/dashboards';
@@ -64,7 +65,8 @@ export const OCPDashboardApp = (props: DashboardAppProps): React.ReactElement =>
   const { addAlert } = useToast();
 
   const { isEditMode, setEditMode } = useEditMode();
-  const { dashboard, setDashboard } = useDashboard();
+  const { dashboard } = useDashboard();
+  const { setDashboard } = useDashboardActions();
 
   const [originalDashboard, setOriginalDashboard] = React.useState<
     DashboardResource | EphemeralDashboardResource | undefined
@@ -146,6 +148,7 @@ export const OCPDashboardApp = (props: DashboardAppProps): React.ReactElement =>
             );
 
             setSaveErrorOccurred(false);
+            setDashboard(updatedDashboard);
             return updatedDashboard;
           },
         });
@@ -156,7 +159,7 @@ export const OCPDashboardApp = (props: DashboardAppProps): React.ReactElement =>
         return null;
       }
     },
-    [updateDashboardMutation, addAlert, t],
+    [updateDashboardMutation, addAlert, t, setDashboard],
   );
 
   return (
@@ -182,6 +185,7 @@ export const OCPDashboardApp = (props: DashboardAppProps): React.ReactElement =>
       <Box sx={{ paddingTop: 2, paddingX: 2, height: '100%' }}>
         <ErrorBoundary FallbackComponent={ErrorAlert}>
           <Dashboard
+            key={`dashboard-${dashboard?.metadata?.updatedAt || dashboard?.metadata?.version}`}
             emptyDashboardProps={{
               onEditButtonClick,
               ...emptyDashboardProps,