Chore: reduces circular dependencies for variables/utils.ts (#44087)

* Chore: move constants to own file

* Chore: moves safe* functions to grafana/data

* Chore: moves safe* functions to grafana/data

* Chore: adds VariableQueryEditorProps and deprecates VariableQueryProps

* Chore: remove getDefaultVariableAdapters function

* Chore: moves transaction status to types

* Chore: fix tests that do not initialise TemplateSrv

* Chore: change space when stringifying

* Chore: revert safe* func move

* Chore: remove circular dependency in Explore utils

public/app/app.ts

@@ -39,7 +39,7 @@ import { reportPerformance } from './core/services/echo/EchoSrv';
 import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
 import 'app/features/all';
 import { getScrollbarWidth, getStandardFieldConfigs } from '@grafana/ui';
-import { getDefaultVariableAdapters, variableAdapters } from './features/variables/adapters';
+import { variableAdapters } from './features/variables/adapters';
 import { initDevFeatures } from './dev';
 import { getStandardTransformers } from 'app/core/utils/standardTransformers';
 import { SentryEchoBackend } from './core/services/echo/backends/sentry/SentryBackend';
@@ -65,6 +65,14 @@ import { DatasourceSrv } from './features/plugins/datasource_srv';
 import { AngularApp } from './angular';
 import { ModalManager } from './core/services/ModalManager';
 import { initWindowRuntime } from './features/runtime/init';
+import { createQueryVariableAdapter } from './features/variables/query/adapter';
+import { createCustomVariableAdapter } from './features/variables/custom/adapter';
+import { createTextBoxVariableAdapter } from './features/variables/textbox/adapter';
+import { createConstantVariableAdapter } from './features/variables/constant/adapter';
+import { createDataSourceVariableAdapter } from './features/variables/datasource/adapter';
+import { createIntervalVariableAdapter } from './features/variables/interval/adapter';
+import { createAdHocVariableAdapter } from './features/variables/adhoc/adapter';
+import { createSystemVariableAdapter } from './features/variables/system/adapter';
 
 // add move to lodash for backward compatabilty with plugins
 // @ts-ignore
@@ -106,7 +114,16 @@ export class GrafanaApp {
       standardEditorsRegistry.setInit(getAllOptionEditors);
       standardFieldConfigEditorRegistry.setInit(getStandardFieldConfigs);
       standardTransformersRegistry.setInit(getStandardTransformers);
-      variableAdapters.setInit(getDefaultVariableAdapters);
+      variableAdapters.setInit(() => [
+        createQueryVariableAdapter(),
+        createCustomVariableAdapter(),
+        createTextBoxVariableAdapter(),
+        createConstantVariableAdapter(),
+        createDataSourceVariableAdapter(),
+        createIntervalVariableAdapter(),
+        createAdHocVariableAdapter(),
+        createSystemVariableAdapter(),
+      ]);
       monacoLanguageRegistry.setInit(getDefaultMonacoLanguages);
 
       setQueryRunnerFactory(() => new QueryRunner());

public/app/core/utils/explore.ts

@@ -8,28 +8,28 @@ import {
   DataQueryRequest,
   DataSourceApi,
   dateMath,
+  DateTime,
   DefaultTimeZone,
+  ExploreUrlState,
   HistoryItem,
   IntervalValues,
+  isDateTime,
   LogsDedupStrategy,
   LogsSortOrder,
+  rangeUtil,
   RawTimeRange,
   TimeFragment,
   TimeRange,
   TimeZone,
   toUtc,
   urlUtil,
-  ExploreUrlState,
-  rangeUtil,
-  DateTime,
-  isDateTime,
 } from '@grafana/data';
 import store from 'app/core/store';
 import { v4 as uuidv4 } from 'uuid';
 import { getNextRefIdChar } from './query';
 // Types
 import { RefreshPicker } from '@grafana/ui';
-import { ExploreId, QueryOptions, QueryTransaction } from 'app/types/explore';
+import { EXPLORE_GRAPH_STYLES, ExploreGraphStyle, ExploreId, QueryOptions, QueryTransaction } from 'app/types/explore';
 import { config } from '../config';
 import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { DataSourceSrv } from '@grafana/runtime';
@@ -201,10 +201,6 @@ export const safeStringifyValue = (value: any, space?: number) => {
   return '';
 };
 
-export const EXPLORE_GRAPH_STYLES = ['lines', 'bars', 'points', 'stacked_lines', 'stacked_bars'] as const;
-
-export type ExploreGraphStyle = typeof EXPLORE_GRAPH_STYLES[number];
-
 const DEFAULT_GRAPH_STYLE: ExploreGraphStyle = 'lines';
 // we use this function to take any kind of data we loaded
 // from an external source (URL, localStorage, whatever),

public/app/features/dashboard/state/initDashboard.test.ts

@@ -11,7 +11,7 @@ import { Echo } from '../../../core/services/echo/Echo';
 import { variableAdapters } from 'app/features/variables/adapters';
 import { createConstantVariableAdapter } from 'app/features/variables/constant/adapter';
 import { constantBuilder } from 'app/features/variables/shared/testing/builders';
-import { TransactionStatus, variablesInitTransaction } from '../../variables/state/transactionReducer';
+import { variablesInitTransaction } from '../../variables/state/transactionReducer';
 import { keybindingSrv } from 'app/core/services/keybindingSrv';
 import { getTimeSrv, setTimeSrv } from '../services/TimeSrv';
 import { DashboardLoaderSrv, setDashboardLoaderSrv } from '../services/DashboardLoaderSrv';
@@ -21,6 +21,7 @@ import {
   setDashboardQueryRunnerFactory,
 } from '../../query/state/DashboardQueryRunner/DashboardQueryRunner';
 import { emptyResult } from '../../query/state/DashboardQueryRunner/utils';
+import { TransactionStatus } from '../../variables/types';
 
 jest.mock('app/core/services/backend_srv');
 jest.mock('app/features/dashboard/services/TimeSrv', () => {

public/app/features/explore/Explore.tsx

@@ -17,7 +17,7 @@ import { splitOpen } from './state/main';
 import { changeSize, changeGraphStyle } from './state/explorePane';
 import { makeAbsoluteTime, updateTimeRange } from './state/time';
 import { addQueryRow, loadLogsVolumeData, modifyQueries, scanStart, scanStopAction, setQueries } from './state/query';
-import { ExploreId, ExploreItemState } from 'app/types/explore';
+import { ExploreGraphStyle, ExploreId, ExploreItemState } from 'app/types/explore';
 import { StoreState } from 'app/types';
 import { ExploreToolbar } from './ExploreToolbar';
 import { NoDataSourceCallToAction } from './NoDataSourceCallToAction';
@@ -30,7 +30,6 @@ import { TraceViewContainer } from './TraceView/TraceViewContainer';
 import { ExploreGraph } from './ExploreGraph';
 import { LogsVolumePanel } from './LogsVolumePanel';
 import { ExploreGraphLabel } from './ExploreGraphLabel';
-import { ExploreGraphStyle } from 'app/core/utils/explore';
 import appEvents from 'app/core/app_events';
 import { AbsoluteTimeEvent } from 'app/types/events';
 import { Unsubscribable } from 'rxjs';

public/app/features/explore/ExploreGraph.tsx

@@ -26,7 +26,6 @@ import {
   useTheme2,
 } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
-import { ExploreGraphStyle } from 'app/core/utils/explore';
 import { defaultGraphConfig, getGraphFieldConfig } from 'app/plugins/panel/timeseries/config';
 import { TimeSeriesOptions } from 'app/plugins/panel/timeseries/types';
 import { identity } from 'lodash';
@@ -34,6 +33,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { usePrevious } from 'react-use';
 import { seriesVisibilityConfigFactory } from '../dashboard/dashgrid/SeriesVisibilityConfigFactory';
 import { applyGraphStyle } from './exploreGraphStyleUtils';
+import { ExploreGraphStyle } from '../../types';
 
 const MAX_NUMBER_OF_TIME_SERIES = 20;
 

public/app/features/explore/ExploreGraphLabel.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { css } from '@emotion/css';
 import { SelectableValue } from '@grafana/data';
 import { RadioButtonGroup } from '@grafana/ui';
-import { ExploreGraphStyle, EXPLORE_GRAPH_STYLES } from 'app/core/utils/explore';
+import { EXPLORE_GRAPH_STYLES, ExploreGraphStyle } from '../../types';
 
 const ALL_GRAPH_STYLE_OPTIONS: Array<SelectableValue<ExploreGraphStyle>> = EXPLORE_GRAPH_STYLES.map((style) => ({
   value: style,

public/app/features/explore/exploreGraphStyleUtils.ts

@@ -1,7 +1,7 @@
 import produce from 'immer';
 import { FieldConfigSource } from '@grafana/data';
 import { GraphDrawStyle, GraphFieldConfig, StackingMode } from '@grafana/schema';
-import { ExploreGraphStyle } from 'app/core/utils/explore';
+import { ExploreGraphStyle } from '../../types';
 
 export type FieldConfig = FieldConfigSource<GraphFieldConfig>;
 

public/app/features/explore/state/explorePane.ts

@@ -8,9 +8,8 @@ import {
   ensureQueries,
   generateNewKeyAndAddRefIdIfMissing,
   getTimeRangeFromUrl,
-  ExploreGraphStyle,
 } from 'app/core/utils/explore';
-import { ExploreId, ExploreItemState } from 'app/types/explore';
+import { ExploreGraphStyle, ExploreId, ExploreItemState } from 'app/types/explore';
 import { queryReducer, runQueries, setQueriesAction } from './query';
 import { datasourceReducer } from './datasource';
 import { timeReducer, updateTime } from './time';

public/app/features/explore/state/utils.ts

@@ -9,15 +9,10 @@ import {
   PanelData,
 } from '@grafana/data';
 
-import { ExploreItemState } from 'app/types/explore';
+import { ExploreGraphStyle, ExploreItemState } from 'app/types/explore';
 import { getDatasourceSrv } from '../../plugins/datasource_srv';
 import store from '../../../core/store';
-import {
-  clearQueryKeys,
-  ExploreGraphStyle,
-  lastUsedDatasourceKeyForOrgId,
-  toGraphStyle,
-} from '../../../core/utils/explore';
+import { clearQueryKeys, lastUsedDatasourceKeyForOrgId, toGraphStyle } from '../../../core/utils/explore';
 import { toRawTimeRange } from '../utils/time';
 
 export const DEFAULT_RANGE = {

public/app/features/explore/utils/links.test.ts

@@ -9,10 +9,22 @@ import {
   LinkModel,
   TimeRange,
 } from '@grafana/data';
+import { setTemplateSrv } from '@grafana/runtime';
 import { setLinkSrv } from '../../panel/panellinks/link_srv';
 import { setContextSrv } from '../../../core/services/context_srv';
 
 describe('getFieldLinksForExplore', () => {
+  beforeEach(() => {
+    setTemplateSrv({
+      replace(target, scopedVars, format) {
+        return target ?? '';
+      },
+      getVariables() {
+        return [];
+      },
+    });
+  });
+
   it('returns correct link model for external link', () => {
     const { field, range } = setup({
       title: 'external',

public/app/features/templating/formatRegistry.ts

@@ -2,7 +2,7 @@ import kbn from 'app/core/utils/kbn';
 import { dateTime, Registry, RegistryItem, textUtil, VariableModel } from '@grafana/data';
 import { isArray, map, replace } from 'lodash';
 import { formatVariableLabel } from '../variables/shared/formatVariable';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../variables/state/types';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../variables/constants';
 
 export interface FormatOptions {
   value: any;

public/app/features/templating/template_srv.ts

@@ -6,8 +6,8 @@ import { isAdHoc } from '../variables/guard';
 import { AdHocVariableFilter, AdHocVariableModel, VariableModel } from '../variables/types';
 import { getDataSourceSrv, setTemplateSrv, TemplateSrv as BaseTemplateSrv } from '@grafana/runtime';
 import { FormatOptions, formatRegistry, FormatRegistryID } from './formatRegistry';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../variables/state/types';
 import { variableAdapters } from '../variables/adapters';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../variables/constants';
 
 interface FieldAccessorCache {
   [key: string]: (obj: any) => any;

public/app/features/variables/adapters.ts

@@ -5,14 +5,6 @@ import { Registry, UrlQueryValue, VariableType } from '@grafana/data';
 import { VariableModel, VariableOption } from './types';
 import { VariableEditorProps } from './editor/types';
 import { VariablePickerProps } from './pickers/types';
-import { createQueryVariableAdapter } from './query/adapter';
-import { createCustomVariableAdapter } from './custom/adapter';
-import { createTextBoxVariableAdapter } from './textbox/adapter';
-import { createConstantVariableAdapter } from './constant/adapter';
-import { createDataSourceVariableAdapter } from './datasource/adapter';
-import { createIntervalVariableAdapter } from './interval/adapter';
-import { createAdHocVariableAdapter } from './adhoc/adapter';
-import { createSystemVariableAdapter } from './system/adapter';
 import { VariablesState } from './state/types';
 
 export interface VariableAdapter<Model extends VariableModel> {
@@ -32,15 +24,4 @@ export interface VariableAdapter<Model extends VariableModel> {
   beforeAdding?: (model: any) => any;
 }
 
-export const getDefaultVariableAdapters = () => [
-  createQueryVariableAdapter(),
-  createCustomVariableAdapter(),
-  createTextBoxVariableAdapter(),
-  createConstantVariableAdapter(),
-  createDataSourceVariableAdapter(),
-  createIntervalVariableAdapter(),
-  createAdHocVariableAdapter(),
-  createSystemVariableAdapter(),
-];
-
 export const variableAdapters = new Registry<VariableAdapter<any>>();

public/app/features/variables/constants.ts

@@ -0,0 +1,5 @@
+export const NEW_VARIABLE_ID = '00000000-0000-0000-0000-000000000000';
+export const ALL_VARIABLE_TEXT = 'All';
+export const ALL_VARIABLE_VALUE = '$__all';
+export const NONE_VARIABLE_TEXT = 'None';
+export const NONE_VARIABLE_VALUE = '';

public/app/features/variables/custom/adapter.ts

@@ -6,9 +6,10 @@ import { VariableAdapter } from '../adapters';
 import { customVariableReducer, initialCustomVariableModelState } from './reducer';
 import { CustomVariableEditor } from './CustomVariableEditor';
 import { updateCustomVariableOptions } from './actions';
-import { ALL_VARIABLE_TEXT, toVariableIdentifier } from '../state/types';
+import { toVariableIdentifier } from '../state/types';
 import { isAllVariable } from '../utils';
 import { optionPickerFactory } from '../pickers';
+import { ALL_VARIABLE_TEXT } from '../constants';
 
 export const createCustomVariableAdapter = (): VariableAdapter<CustomVariableModel> => {
   return {

public/app/features/variables/custom/reducer.test.ts

@@ -1,10 +1,11 @@
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import { cloneDeep } from 'lodash';
 import { getVariableTestContext } from '../state/helpers';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, toVariablePayload, VariablesState } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { createCustomOptionsFromQuery, customVariableReducer } from './reducer';
 import { createCustomVariableAdapter } from './adapter';
 import { CustomVariableModel } from '../types';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../constants';
 
 describe('customVariableReducer', () => {
   const adapter = createCustomVariableAdapter();

public/app/features/variables/custom/reducer.ts

@@ -1,14 +1,8 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 import { CustomVariableModel, initialVariableModelState, VariableOption } from '../types';
-import {
-  ALL_VARIABLE_TEXT,
-  ALL_VARIABLE_VALUE,
-  getInstanceState,
-  VariablePayload,
-  initialVariablesState,
-  VariablesState,
-} from '../state/types';
+import { getInstanceState, VariablePayload, initialVariablesState, VariablesState } from '../state/types';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../constants';
 
 export const initialCustomVariableModelState: CustomVariableModel = {
   ...initialVariableModelState,

public/app/features/variables/datasource/adapter.ts

@@ -4,11 +4,12 @@ import { dispatch } from '../../../store/store';
 import { setOptionAsCurrent, setOptionFromUrl } from '../state/actions';
 import { VariableAdapter } from '../adapters';
 import { dataSourceVariableReducer, initialDataSourceVariableModelState } from './reducer';
-import { ALL_VARIABLE_TEXT, toVariableIdentifier } from '../state/types';
+import { toVariableIdentifier } from '../state/types';
 import { DataSourceVariableEditor } from './DataSourceVariableEditor';
 import { updateDataSourceVariableOptions } from './actions';
 import { containsVariable, isAllVariable } from '../utils';
 import { optionPickerFactory } from '../pickers';
+import { ALL_VARIABLE_TEXT } from '../constants';
 
 export const createDataSourceVariableAdapter = (): VariableAdapter<DataSourceVariableModel> => {
   return {

public/app/features/variables/datasource/reducer.ts

@@ -2,14 +2,8 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { DataSourceInstanceSettings } from '@grafana/data';
 
 import { DataSourceVariableModel, initialVariableModelState, VariableOption, VariableRefresh } from '../types';
-import {
-  ALL_VARIABLE_TEXT,
-  ALL_VARIABLE_VALUE,
-  getInstanceState,
-  initialVariablesState,
-  VariablePayload,
-  VariablesState,
-} from '../state/types';
+import { getInstanceState, initialVariablesState, VariablePayload, VariablesState } from '../state/types';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../constants';
 
 export interface DataSourceVariableEditorState {
   dataSourceTypes: Array<{ text: string; value: string }>;

public/app/features/variables/editor/LegacyVariableQueryEditor.tsx

@@ -1,15 +1,15 @@
 import React, { FC, useCallback, useState } from 'react';
 import { selectors } from '@grafana/e2e-selectors';
-
-import { VariableQueryProps } from 'app/types/plugins';
-import { VariableTextAreaField } from './VariableTextAreaField';
 import { useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { css } from '@emotion/css';
 
+import { VariableTextAreaField } from './VariableTextAreaField';
+import { VariableQueryEditorProps } from '../types';
+
 export const LEGACY_VARIABLE_QUERY_EDITOR_NAME = 'Grafana-LegacyVariableQueryEditor';
 
-export const LegacyVariableQueryEditor: FC<VariableQueryProps> = ({ onChange, query }) => {
+export const LegacyVariableQueryEditor: FC<VariableQueryEditorProps> = ({ onChange, query }) => {
   const styles = useStyles(getStyles);
   const [value, setValue] = useState(query);
   const onValueChange = (event: React.FormEvent<HTMLTextAreaElement>) => {

public/app/features/variables/guard.ts

@@ -20,10 +20,10 @@ import {
   ConstantVariableModel,
   QueryVariableModel,
   VariableQueryEditorType,
+  VariableQueryEditorProps,
   VariableWithMultiSupport,
   VariableWithOptions,
 } from './types';
-import { VariableQueryProps } from '../../types';
 import { LEGACY_VARIABLE_QUERY_EDITOR_NAME } from './editor/LegacyVariableQueryEditor';
 
 export const isQuery = (model: VariableModel): model is QueryVariableModel => {
@@ -178,7 +178,7 @@ export function isLegacyQueryEditor<
 >(
   component: VariableQueryEditorType,
   datasource: DataSourceApi<TQuery, TOptions>
-): component is ComponentType<VariableQueryProps> {
+): component is ComponentType<VariableQueryEditorProps> {
   if (!component) {
     return false;
   }

public/app/features/variables/pickers/OptionsPicker/reducer.test.ts

@@ -16,7 +16,7 @@ import {
 } from './reducer';
 import { reducerTester } from '../../../../../test/core/redux/reducerTester';
 import { QueryVariableModel, VariableOption } from '../../types';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../../state/types';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../../constants';
 
 const getVariableTestContext = (extend: Partial<OptionsPickerState>) => {
   return {

public/app/features/variables/pickers/OptionsPicker/reducer.ts

@@ -1,10 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { cloneDeep, isString, trim } from 'lodash';
 import { VariableOption, VariableWithOptions } from '../../types';
-import { ALL_VARIABLE_VALUE } from '../../state/types';
 import { isMulti, isQuery } from '../../guard';
 import { applyStateChanges } from '../../../../core/utils/applyStateChanges';
 import { containsSearchFilter } from '../../utils';
+import { ALL_VARIABLE_VALUE } from '../../constants';
 
 export interface ToggleOption {
   option?: VariableOption;

public/app/features/variables/query/QueryVariableEditor.test.tsx

@@ -7,10 +7,10 @@ import { Props, QueryVariableEditorUnConnected } from './QueryVariableEditor';
 import { initialQueryVariableModelState } from './reducer';
 import { initialVariableEditorState } from '../editor/reducer';
 import { describe, expect } from '../../../../test/lib/common';
-import { NEW_VARIABLE_ID } from '../state/types';
 import { LegacyVariableQueryEditor } from '../editor/LegacyVariableQueryEditor';
 import { mockDataSource } from 'app/features/alerting/unified/mocks';
 import { DataSourceType } from 'app/features/alerting/unified/utils/datasource';
+import { NEW_VARIABLE_ID } from '../constants';
 
 const setupTestContext = (options: Partial<Props>) => {
   const defaults: Props = {

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

@@ -5,7 +5,7 @@ import { createQueryVariableAdapter } from './adapter';
 import { reduxTester } from '../../../../test/core/redux/reduxTester';
 import { getRootReducer, RootReducerType } from '../state/helpers';
 import { QueryVariableModel, VariableHide, VariableRefresh, VariableSort } from '../types';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, toVariablePayload } from '../state/types';
+import { toVariablePayload } from '../state/types';
 import {
   addVariable,
   changeVariableProp,
@@ -38,6 +38,7 @@ import { getTimeSrv, setTimeSrv, TimeSrv } from '../../dashboard/services/TimeSr
 import { setVariableQueryRunner, VariableQueryRunner } from './VariableQueryRunner';
 import { setDataSourceSrv } from '@grafana/runtime';
 import { variablesInitTransaction } from '../state/transactionReducer';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../constants';
 
 const mocks: Record<string, any> = {
   datasource: {

public/app/features/variables/query/adapter.ts

@@ -7,9 +7,10 @@ import { setOptionAsCurrent, setOptionFromUrl } from '../state/actions';
 import { VariableAdapter } from '../adapters';
 import { QueryVariableEditor } from './QueryVariableEditor';
 import { updateQueryVariableOptions } from './actions';
-import { ALL_VARIABLE_TEXT, toVariableIdentifier } from '../state/types';
+import { toVariableIdentifier } from '../state/types';
 import { containsVariable, isAllVariable } from '../utils';
 import { optionPickerFactory } from '../pickers';
+import { ALL_VARIABLE_TEXT } from '../constants';
 
 export const createQueryVariableAdapter = (): VariableAdapter<QueryVariableModel> => {
   return {

public/app/features/variables/query/reducer.ts

@@ -11,16 +11,8 @@ import {
   VariableSort,
 } from '../types';
 
-import {
-  ALL_VARIABLE_TEXT,
-  ALL_VARIABLE_VALUE,
-  getInstanceState,
-  initialVariablesState,
-  NONE_VARIABLE_TEXT,
-  NONE_VARIABLE_VALUE,
-  VariablePayload,
-  VariablesState,
-} from '../state/types';
+import { getInstanceState, initialVariablesState, VariablePayload, VariablesState } from '../state/types';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, NONE_VARIABLE_TEXT, NONE_VARIABLE_VALUE } from '../constants';
 
 interface VariableOptionsUpdate {
   templatedRegex: string;

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

@@ -27,13 +27,7 @@ import {
   variableStateFetching,
   variableStateNotStarted,
 } from './sharedReducer';
-import {
-  ALL_VARIABLE_TEXT,
-  ALL_VARIABLE_VALUE,
-  NEW_VARIABLE_ID,
-  toVariableIdentifier,
-  toVariablePayload,
-} from './types';
+import { toVariableIdentifier, toVariablePayload } from './types';
 import {
   constantBuilder,
   customBuilder,
@@ -57,6 +51,7 @@ import { setVariableQueryRunner, VariableQueryRunner } from '../query/VariableQu
 import * as runtime from '@grafana/runtime';
 import { LoadingState } from '@grafana/data';
 import { toAsyncOfResult } from '../../query/state/DashboardQueryRunner/testHelpers';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, NEW_VARIABLE_ID } from '../constants';
 
 variableAdapters.setInit(() => [
   createQueryVariableAdapter(),

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

@@ -15,6 +15,7 @@ import {
   initialVariableModelState,
   OrgVariableModel,
   QueryVariableModel,
+  TransactionStatus,
   UserVariableModel,
   VariableHide,
   VariableModel,
@@ -41,13 +42,7 @@ import {
   variableStateFetching,
   variableStateNotStarted,
 } from './sharedReducer';
-import {
-  ALL_VARIABLE_TEXT,
-  ALL_VARIABLE_VALUE,
-  toVariableIdentifier,
-  toVariablePayload,
-  VariableIdentifier,
-} from './types';
+import { toVariableIdentifier, toVariablePayload, VariableIdentifier } from './types';
 import { contextSrv } from 'app/core/services/context_srv';
 import { getTemplateSrv, TemplateSrv } from '../../templating/template_srv';
 import { alignCurrentWithMulti } from '../shared/multiOptions';
@@ -64,7 +59,6 @@ import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { DashboardModel } from 'app/features/dashboard/state';
 import { createErrorNotification } from '../../../core/copy/appNotification';
 import {
-  TransactionStatus,
   variablesClearTransaction,
   variablesCompleteTransaction,
   variablesInitTransaction,
@@ -85,6 +79,7 @@ import { cleanPickerState } from '../pickers/OptionsPicker/reducer';
 import { locationService } from '@grafana/runtime';
 import { appEvents } from '../../../core/core';
 import { getAllAffectedPanelIdsForVariableChange } from '../inspect/utils';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../constants';
 
 // process flow queryVariable
 // thunk => processVariables

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

@@ -1,7 +1,7 @@
 import { combineReducers } from '@reduxjs/toolkit';
 import { LoadingState } from '@grafana/data';
 
-import { NEW_VARIABLE_ID, VariablesState } from './types';
+import { VariablesState } from './types';
 import {
   DashboardVariableModel,
   initialVariableModelState,
@@ -15,6 +15,7 @@ import { VariableAdapter } from '../adapters';
 import { dashboardReducer } from 'app/features/dashboard/state/reducers';
 import { templatingReducers, TemplatingState } from './reducers';
 import { DashboardState } from '../../../types';
+import { NEW_VARIABLE_ID } from '../constants';
 
 export const getVariableState = (
   noOfVariables: number,

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

@@ -15,7 +15,6 @@ import { toVariablePayload } from './types';
 import { adHocBuilder, constantBuilder, datasourceBuilder, queryBuilder } from '../shared/testing/builders';
 import { cleanEditorState, initialVariableEditorState } from '../editor/reducer';
 import {
-  TransactionStatus,
   variablesClearTransaction,
   variablesCompleteTransaction,
   variablesInitTransaction,
@@ -26,7 +25,7 @@ import { createAdHocVariableAdapter } from '../adhoc/adapter';
 import { createDataSourceVariableAdapter } from '../datasource/adapter';
 import { DataSourceRef, LoadingState } from '@grafana/data/src';
 import { setDataSourceSrv } from '@grafana/runtime/src';
-import { VariableModel } from '../types';
+import { TransactionStatus, VariableModel } from '../types';
 import { toAsyncOfResult } from '../../query/state/DashboardQueryRunner/testHelpers';
 import { setVariableQueryRunner } from '../query/VariableQueryRunner';
 import { createDataSourceOptions } from '../datasource/reducer';

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

@@ -5,8 +5,9 @@ import { reduxTester } from '../../../../test/core/redux/reduxTester';
 import { TemplatingState } from './reducers';
 import { getTemplatingRootReducer } from './helpers';
 import { addVariable, setCurrentVariableValue } from './sharedReducer';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, toVariableIdentifier, toVariablePayload } from './types';
+import { toVariableIdentifier, toVariablePayload } from './types';
 import { setOptionFromUrl } from './actions';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../constants';
 
 variableAdapters.setInit(() => [createCustomVariableAdapter()]);
 

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

@@ -17,14 +17,7 @@ import {
   variableStateNotStarted,
 } from './sharedReducer';
 import { ConstantVariableModel, QueryVariableModel, VariableHide, VariableOption } from '../types';
-import {
-  ALL_VARIABLE_TEXT,
-  ALL_VARIABLE_VALUE,
-  initialVariablesState,
-  toVariablePayload,
-  VariableIdentifier,
-  VariablesState,
-} from './types';
+import { initialVariablesState, toVariablePayload, VariableIdentifier, VariablesState } from './types';
 import { variableAdapters } from '../adapters';
 import { createQueryVariableAdapter } from '../query/adapter';
 import { initialQueryVariableModelState } from '../query/reducer';
@@ -32,6 +25,7 @@ import { getVariableState, getVariableTestContext } from './helpers';
 import { changeVariableNameSucceeded } from '../editor/reducer';
 import { createConstantVariableAdapter } from '../constant/adapter';
 import { initialConstantVariableModelState } from '../constant/reducer';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from '../constants';
 
 variableAdapters.setInit(() => [createQueryVariableAdapter(), createConstantVariableAdapter()]);
 

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

@@ -4,11 +4,11 @@ import {
   initialTransactionState,
   transactionReducer,
   TransactionState,
-  TransactionStatus,
   variablesClearTransaction,
   variablesCompleteTransaction,
   variablesInitTransaction,
 } from './transactionReducer';
+import { TransactionStatus } from '../types';
 
 describe('transactionReducer', () => {
   describe('when variablesInitTransaction is dispatched', () => {

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

@@ -7,12 +7,7 @@ import {
   duplicateVariable,
   removeVariable,
 } from './sharedReducer';
-
-export enum TransactionStatus {
-  NotStarted = 'Not started',
-  Fetching = 'Fetching',
-  Completed = 'Completed',
-}
+import { TransactionStatus } from '../types';
 
 export interface TransactionState {
   uid: string | undefined | null;

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

@@ -1,11 +1,6 @@
-import { VariableModel } from '../types';
 import { VariableType } from '@grafana/data';
 
-export const NEW_VARIABLE_ID = '00000000-0000-0000-0000-000000000000';
-export const ALL_VARIABLE_TEXT = 'All';
-export const ALL_VARIABLE_VALUE = '$__all';
-export const NONE_VARIABLE_TEXT = 'None';
-export const NONE_VARIABLE_VALUE = '';
+import { VariableModel } from '../types';
 
 export interface VariablesState extends Record<string, VariableModel> {}
 

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

@@ -4,8 +4,7 @@ import { toVariableIdentifier } from './types';
 import { upgradeLegacyQueries } from './actions';
 import { changeVariableProp } from './sharedReducer';
 import { thunkTester } from '../../../../test/core/thunk/thunkTester';
-import { VariableModel } from '../types';
-import { TransactionStatus } from './transactionReducer';
+import { TransactionStatus, VariableModel } from '../types';
 
 interface Args {
   query?: any;

public/app/features/variables/types.ts

@@ -9,9 +9,15 @@ import {
   VariableModel as BaseVariableModel,
   VariableType,
 } from '@grafana/data';
+import { TemplateSrv } from '@grafana/runtime';
 
-import { NEW_VARIABLE_ID } from './state/types';
-import { VariableQueryProps } from '../../types';
+import { NEW_VARIABLE_ID } from './constants';
+
+export enum TransactionStatus {
+  NotStarted = 'Not started',
+  Fetching = 'Fetching',
+  Completed = 'Completed',
+}
 
 export enum VariableRefresh {
   never, // removed from the UI
@@ -148,10 +154,17 @@ export const initialVariableModelState: VariableModel = {
   description: null,
 };
 
+export interface VariableQueryEditorProps {
+  query: any;
+  onChange: (query: any, definition: string) => void;
+  datasource: any;
+  templateSrv: TemplateSrv;
+}
+
 export type VariableQueryEditorType<
   TQuery extends DataQuery = DataQuery,
   TOptions extends DataSourceJsonData = DataSourceJsonData
-> = ComponentType<VariableQueryProps> | ComponentType<QueryEditorProps<any, TQuery, TOptions, any>> | null;
+> = ComponentType<VariableQueryEditorProps> | ComponentType<QueryEditorProps<any, TQuery, TOptions, any>> | null;
 
 export interface VariablesChangedEvent {
   refreshAll: boolean;

public/app/features/variables/utils.ts

@@ -2,14 +2,13 @@ import { isArray, isEqual } from 'lodash';
 import { ScopedVars, UrlQueryMap, UrlQueryValue, VariableType } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
 
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from './state/types';
-import { QueryVariableModel, VariableModel, VariableRefresh } from './types';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from './constants';
+import { QueryVariableModel, TransactionStatus, VariableModel, VariableRefresh } from './types';
 import { getTimeSrv } from '../dashboard/services/TimeSrv';
 import { variableAdapters } from './adapters';
 import { safeStringifyValue } from 'app/core/utils/explore';
 import { StoreState } from '../../types';
 import { getState } from '../../store/store';
-import { TransactionStatus } from './state/transactionReducer';
 
 /*
  * This regex matches 3 types of variable reference with an optional format specifier

public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { DebugSection } from './DebugSection';
 import { mount } from 'enzyme';
-import { getLinkSrv, LinkService, LinkSrv, setLinkSrv } from '../../../../features/panel/panellinks/link_srv';
 import { dateTime } from '@grafana/data';
+import { setTemplateSrv } from '@grafana/runtime';
+
+import { DebugSection } from './DebugSection';
+import { getLinkSrv, LinkService, LinkSrv, setLinkSrv } from '../../../../features/panel/panellinks/link_srv';
 
 // We do not need more here and TimeSrv is hard to setup fully.
 jest.mock('app/features/dashboard/services/TimeSrv', () => ({
@@ -25,6 +27,17 @@ describe('DebugSection', () => {
     setLinkSrv(linkService);
   });
 
+  beforeEach(() => {
+    setTemplateSrv({
+      replace(target, scopedVars, format) {
+        return target ?? '';
+      },
+      getVariables() {
+        return [];
+      },
+    });
+  });
+
   afterAll(() => {
     setLinkSrv(originalLinkSrv);
   });
@@ -67,6 +80,6 @@ describe('DebugSection', () => {
     expect(wrapper.find('table').length).toBe(1);
     // 3 rows + one header
     expect(wrapper.find('tr').length).toBe(4);
-    expect(wrapper.find('tr').at(1).contains('http://localhost/trace/1234')).toBeTruthy();
+    expect(wrapper.find('tr').at(1).contains('http://localhost/trace/${__value.raw}')).toBeTruthy();
   });
 });

public/app/types/explore.ts

@@ -4,17 +4,16 @@ import {
   DataFrame,
   DataQuery,
   DataQueryRequest,
+  DataQueryResponse,
   DataSourceApi,
+  EventBusExtended,
   HistoryItem,
   LogsModel,
   PanelData,
   QueryHint,
   RawTimeRange,
   TimeRange,
-  EventBusExtended,
-  DataQueryResponse,
 } from '@grafana/data';
-import { ExploreGraphStyle } from 'app/core/utils/explore';
 
 export enum ExploreId {
   left = 'left',
@@ -59,6 +58,9 @@ export interface ExploreState {
   richHistoryLimitExceededWarningShown: boolean;
 }
 
+export const EXPLORE_GRAPH_STYLES = ['lines', 'bars', 'points', 'stacked_lines', 'stacked_bars'] as const;
+export type ExploreGraphStyle = typeof EXPLORE_GRAPH_STYLES[number];
+
 export interface ExploreItemState {
   /**
    * Width used for calculating the graph interval (can't have more datapoints than pixels)

public/app/types/plugins.ts

@@ -1,4 +1,4 @@
-import { PluginError, PluginMeta, PanelPlugin } from '@grafana/data';
+import { PanelPlugin, PluginError, PluginMeta } from '@grafana/data';
 import { TemplateSrv } from '@grafana/runtime';
 
 export interface PluginDashboard {
@@ -32,6 +32,9 @@ export interface PluginsState {
   panels: PanelPluginsIndex;
 }
 
+/**
+ * @deprecated use VariableQueryEditorProps instead
+ */
 export interface VariableQueryProps {
   query: any;
   onChange: (query: any, definition: string) => void;