Custom variable: Initialize options from query if not present in persisted model (#76403)

* Custom variable: Initialize options from query if not oresent in persisted model

* Test update

public/app/features/variables/state/actions.test.ts

@@ -12,6 +12,7 @@ import { variableAdapters } from '../adapters';
 import { createConstantVariableAdapter } from '../constant/adapter';
 import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, NEW_VARIABLE_ID } from '../constants';
 import { createCustomVariableAdapter } from '../custom/adapter';
+import { createCustomOptionsFromQuery } from '../custom/reducer';
 import { changeVariableName } from '../editor/actions';
 import { changeVariableNameFailed, changeVariableNameSucceeded, cleanEditorState } from '../editor/reducer';
 import { cleanPickerState } from '../pickers/OptionsPicker/reducer';
@@ -192,7 +193,7 @@ describe('shared actions', () => {
         .whenAsyncActionIsDispatched(processVariables(key), true);
 
       await tester.thenDispatchedActionsPredicateShouldEqual((dispatchedActions) => {
-        expect(dispatchedActions.length).toEqual(5);
+        expect(dispatchedActions.length).toEqual(7);
 
         expect(dispatchedActions[0]).toEqual(
           toKeyedAction(
@@ -213,7 +214,7 @@ describe('shared actions', () => {
         expect(dispatchedActions[2]).toEqual(
           toKeyedAction(
             key,
-            variableStateCompleted(toVariablePayload({ ...custom, id: dispatchedActions[2].payload.action.payload.id }))
+            variableStateFetching(toVariablePayload({ ...custom, id: dispatchedActions[2].payload.action.payload.id }))
           )
         );
 
@@ -229,7 +230,23 @@ describe('shared actions', () => {
         expect(dispatchedActions[4]).toEqual(
           toKeyedAction(
             key,
-            variableStateCompleted(toVariablePayload({ ...query, id: dispatchedActions[4].payload.action.payload.id }))
+            createCustomOptionsFromQuery(
+              toVariablePayload({ ...custom, id: dispatchedActions[4].payload.action.payload.id })
+            )
+          )
+        );
+
+        expect(dispatchedActions[5]).toEqual(
+          toKeyedAction(
+            key,
+            variableStateCompleted(toVariablePayload({ ...custom, id: dispatchedActions[5].payload.action.payload.id }))
+          )
+        );
+
+        expect(dispatchedActions[6]).toEqual(
+          toKeyedAction(
+            key,
+            variableStateCompleted(toVariablePayload({ ...query, id: dispatchedActions[6].payload.action.payload.id }))
           )
         );
 

public/app/features/variables/state/actions.ts

@@ -381,6 +381,11 @@ export const processVariable = (
       }
     }
 
+    if (variable.type === 'custom') {
+      await dispatch(updateOptions(toKeyedVariableIdentifier(variable)));
+      return;
+    }
+
     // for variables that aren't updated via URL or refresh, let's simulate the same state changes
     dispatch(completeVariableLoading(identifier));
   };

public/app/features/variables/state/processVariable.test.ts

@@ -6,6 +6,7 @@ import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { reduxTester } from '../../../../test/core/redux/reduxTester';
 import { variableAdapters } from '../adapters';
 import { createCustomVariableAdapter } from '../custom/adapter';
+import { createCustomOptionsFromQuery } from '../custom/reducer';
 import { setVariableQueryRunner, VariableQueryRunner } from '../query/VariableQueryRunner';
 import { createQueryVariableAdapter } from '../query/adapter';
 import { updateVariableOptions } from '../query/reducer';
@@ -125,9 +126,18 @@ describe('processVariable', () => {
           .whenActionIsDispatched(initDashboardTemplating(key, dashboard))
           .whenAsyncActionIsDispatched(processVariable(toKeyedVariableIdentifier(custom), queryParams), true);
 
-        await tester.thenDispatchedActionsShouldEqual(
-          toKeyedAction(key, variableStateCompleted(toVariablePayload(custom)))
-        );
+        await tester.thenDispatchedActionsPredicateShouldEqual((dispatchedActions) => {
+          expect(dispatchedActions.length).toEqual(4);
+
+          expect(dispatchedActions[0]).toEqual(toKeyedAction(key, variableStateFetching(toVariablePayload(custom))));
+          expect(dispatchedActions[1]).toEqual(
+            toKeyedAction(key, createCustomOptionsFromQuery(toVariablePayload(custom)))
+          );
+          expect(dispatchedActions[2].type).toEqual('templating/keyed/shared/setCurrentVariableValue');
+          expect(dispatchedActions[3]).toEqual(toKeyedAction(key, variableStateCompleted(toVariablePayload(custom))));
+
+          return true;
+        });
       });
     });