ScenesReact: Add skipUrlSync to variables (#1182)

Author: krevedkokun

packages/scenes-react/src/variables/CustomVariable.tsx

@@ -18,6 +18,7 @@ export function CustomVariable({
   initialValue,
   isMulti,
   includeAll,
+  skipUrlSync,
   children,
 }: CustomVariableProps): React.ReactNode {
   const scene = useSceneContext();
@@ -26,7 +27,16 @@ export function CustomVariable({
   let variable: CustomVariableObject | undefined = scene.findVariable(name);
 
   if (!variable) {
-    variable = new CustomVariableObject({ name, label, query, value: initialValue, isMulti, includeAll, hide });
+    variable = new CustomVariableObject({
+      name,
+      label,
+      query,
+      value: initialValue,
+      isMulti,
+      includeAll,
+      hide,
+      skipUrlSync,
+    });
   }
 
   useEffect(() => {
@@ -42,8 +52,9 @@ export function CustomVariable({
       hide,
       isMulti,
       includeAll,
+      skipUrlSync,
     });
-  }, [hide, includeAll, isMulti, label, query, variable]);
+  }, [skipUrlSync, hide, includeAll, isMulti, label, query, variable]);
 
   // Need to block child rendering until the variable is added so that child components like RVariableSelect find the variable
   if (!variableAdded) {

packages/scenes-react/src/variables/DataSourceVariable.tsx

@@ -23,6 +23,7 @@ export function DataSourceVariable({
   initialValue,
   isMulti,
   includeAll,
+  skipUrlSync,
   children,
 }: DataSourceVariableProps): React.ReactNode {
   const scene = useSceneContext();
@@ -40,6 +41,7 @@ export function DataSourceVariable({
       isMulti,
       hide,
       includeAll,
+      skipUrlSync,
     });
   }
 
@@ -59,7 +61,8 @@ export function DataSourceVariable({
       variable.state.regex === regex &&
       variable.state.label === label &&
       variable.state.hide === hide &&
-      variable.state.includeAll === includeAll
+      variable.state.includeAll === includeAll &&
+      variable.state.skipUrlSync === skipUrlSync
     ) {
       return;
     }
@@ -70,10 +73,11 @@ export function DataSourceVariable({
       label,
       hide,
       includeAll,
+      skipUrlSync,
     });
 
     variable.refreshOptions();
-  }, [hide, includeAll, label, pluginId, regex, variable, variableAdded]);
+  }, [skipUrlSync, hide, includeAll, label, pluginId, regex, variable, variableAdded]);
 
   // Need to block child rendering until the variable is added so that child components like RVariableSelect find the variable
   if (!variableAdded) {

packages/scenes-react/src/variables/QueryVariable.tsx

@@ -28,6 +28,7 @@ export function QueryVariable({
   initialValue,
   isMulti,
   includeAll,
+  skipUrlSync,
   children,
 }: QueryVariableProps): React.ReactNode {
   const scene = useSceneContext();
@@ -48,6 +49,7 @@ export function QueryVariable({
       isMulti,
       hide,
       includeAll,
+      skipUrlSync,
     });
   }
 
@@ -70,7 +72,8 @@ export function QueryVariable({
       variable.state.hide === hide &&
       variable.state.includeAll === includeAll &&
       variable.state.refresh === refresh &&
-      variable.state.sort === sort
+      variable.state.sort === sort &&
+      variable.state.skipUrlSync === skipUrlSync
     ) {
       return;
     }
@@ -84,10 +87,11 @@ export function QueryVariable({
       regex,
       hide,
       includeAll,
+      skipUrlSync,
     });
 
     variable.refreshOptions();
-  }, [datasource, hide, includeAll, label, query, refresh, regex, sort, variable, variableAdded]);
+  }, [skipUrlSync, datasource, hide, includeAll, label, query, refresh, regex, sort, variable, variableAdded]);
 
   // Need to block child rendering until the variable is added so that child components like RVariableSelect find the variable
   if (!variableAdded) {

packages/scenes-react/src/variables/types.ts

@@ -6,4 +6,5 @@ export interface VariableProps {
   label?: string;
   hide?: VariableHide;
   initialValue?: VariableValue;
+  skipUrlSync?: boolean;
 }