Enhance dashboard parameter handling: persist updated values and apply saved parameters

client/app/pages/dashboards/DashboardPage.jsx

@@ -92,7 +92,7 @@ function DashboardComponent(props) {
   const [bottomPanelStyles, setBottomPanelStyles] = useState({});
   const onParametersEdit = parameters => {
     const paramOrder = map(parameters, "name");
-    updateDashboard({ options: { globalParamOrder: paramOrder } });
+    updateDashboard({ options: { ...(dashboard.options || {}), globalParamOrder: paramOrder } });
   };
 
   useEffect(() => {

client/app/pages/dashboards/components/DashboardHeader.jsx

@@ -252,7 +252,11 @@ function DashboardEditControl({ dashboardConfiguration, headerExtra }) {
     doneBtnClickedWhileSaving,
     dashboardStatus,
     retrySaveDashboardLayout,
+    saveDashboardParameters = () => Promise.resolve(),
   } = dashboardConfiguration;
+  const handleDoneEditing = () => {
+    saveDashboardParameters().then(() => setEditingLayout(false));
+  };
   let status;
   if (dashboardStatus === DashboardStatusEnum.SAVED) {
     status = <span className="save-status">Saved</span>;
@@ -277,7 +281,7 @@ function DashboardEditControl({ dashboardConfiguration, headerExtra }) {
           Retry
         </Button>
       ) : (
-        <Button loading={doneBtnClickedWhileSaving} type="primary" onClick={() => setEditingLayout(false)}>
+        <Button loading={doneBtnClickedWhileSaving} type="primary" onClick={handleDoneEditing}>
           {!doneBtnClickedWhileSaving && <i className="fa fa-check m-r-5" aria-hidden="true" />} Done Editing
         </Button>
       )}

client/app/pages/dashboards/hooks/useDashboard.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useCallback, useRef } from "react";
-import { isEmpty, includes, compact, map, has, pick, keys, extend, every, get } from "lodash";
+import { isEmpty, includes, compact, map, has, pick, keys, extend, every, get, isEqual } from "lodash";
 import notification from "@/services/notification";
 import location from "@/services/location";
 import url from "@/services/url";
@@ -144,16 +144,62 @@ function useDashboard(dashboardData) {
     [loadWidget]
   );
 
+  const persistParameterValues = useCallback(
+    parameterValues => {
+      if (!canEditDashboard || !parameterValues || isEmpty(parameterValues)) {
+        return Promise.resolve();
+      }
+
+      const currentDashboard = dashboardRef.current;
+      const currentValues = get(currentDashboard, "options.parameterValues", {});
+      const nextValues = extend({}, currentValues);
+      let hasChanges = false;
+
+      Object.entries(parameterValues).forEach(([name, value]) => {
+        if (!isEqual(nextValues[name], value)) {
+          nextValues[name] = value;
+          hasChanges = true;
+        }
+      });
+
+      if (!hasChanges) {
+        return Promise.resolve();
+      }
+
+      return updateDashboard({
+        options: extend({}, get(currentDashboard, "options", {}), { parameterValues: nextValues }),
+      });
+    },
+    [canEditDashboard, updateDashboard]
+  );
+
   const refreshDashboard = useCallback(
     updatedParameters => {
-      if (!refreshing) {
-        setRefreshing(true);
-        loadDashboard(true, updatedParameters).finally(() => setRefreshing(false));
+      if (refreshing) {
+        return;
       }
+
+      setRefreshing(true);
+      loadDashboard(true, updatedParameters).finally(() => setRefreshing(false));
     },
     [refreshing, loadDashboard]
   );
 
+  const saveDashboardParameters = useCallback(() => {
+    const latestValues = (globalParameters || []).reduce((acc, param) => {
+      if (!param) return acc;
+      acc[param.name] = param.value === undefined ? null : param.value;
+      return acc;
+    }, {});
+    if (isEmpty(latestValues)) return Promise.resolve();
+
+    return persistParameterValues(latestValues).catch(error => {
+      console.error("Failed to persist parameter values:", error);
+      notification.error("Parameter values could not be saved. Your changes may not be persisted.");
+      throw error;
+    });
+  }, [globalParameters, persistParameterValues]);
+
   const archiveDashboard = useCallback(() => {
     recordEvent("archive", "dashboard", dashboard.id);
     Dashboard.delete(dashboard).then(updatedDashboard =>
@@ -238,6 +284,7 @@ function useDashboard(dashboardData) {
     setRefreshRate,
     disableRefreshRate,
     ...editModeHandler,
+    saveDashboardParameters,
     gridDisabled,
     setGridDisabled,
     fullscreen,

client/app/services/dashboard.js

@@ -210,10 +210,15 @@ Dashboard.prototype.getParametersDefs = function getParametersDefs() {
         });
     }
   });
+  const mergedValues = {
+    ..._.mapValues(globalParams, p => p.value),
+    ..._.get(this, "options.parameterValues", {}),
+    ...queryParams,
+  };
   const resultingGlobalParams = _.values(
     _.each(globalParams, param => {
-      param.setValue(param.value); // apply global param value to all locals
-      param.fromUrlParams(queryParams); // try to initialize from url (may do nothing)
+      param.setValue(mergedValues[param.name]); // apply merged value
+      param.fromUrlParams(queryParams); // allow param-specific parsing logic
     })
   );