diff --git a/public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx b/public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx
index a1339617b28..4264c1d24fb 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx
@@ -29,18 +29,6 @@ jest.mock('./monaco-query-field/MonacoQueryFieldWrapper', () => {
};
});
-jest.mock('app/core/store', () => {
- return {
- get() {
- return undefined;
- },
- set() {},
- getObject(key: string, defaultValue: unknown) {
- return defaultValue;
- },
- };
-});
-
const defaultQuery = {
refId: 'A',
expr: '{label1="foo", label2="bar"}',
@@ -59,6 +47,10 @@ const defaultProps = {
};
describe('LokiQueryEditorSelector', () => {
+ // We need to clear local storage after each test because we are using it to store the editor mode and enabled explain
+ afterEach(() => {
+ window.localStorage.clear();
+ });
it('shows code editor if expr and nothing else', async () => {
// We opt for showing code editor for queries created before this feature was added
render();
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx b/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx
index cabe6b9e7f0..9139a6d5463 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx
@@ -11,7 +11,6 @@ import { QueryEditorModeToggle } from 'app/plugins/datasource/prometheus/querybu
import { QueryHeaderSwitch } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch';
import { QueryEditorMode } from 'app/plugins/datasource/prometheus/querybuilder/shared/types';
-import { lokiQueryEditorExplainKey, useFlag } from '../../prometheus/querybuilder/shared/hooks/useFlag';
import { LabelBrowserModal } from '../querybuilder/components/LabelBrowserModal';
import { LokiQueryBuilderContainer } from '../querybuilder/components/LokiQueryBuilderContainer';
import { LokiQueryBuilderOptions } from '../querybuilder/components/LokiQueryBuilderOptions';
@@ -28,6 +27,8 @@ export const testIds = {
editor: 'loki-editor',
};
+export const lokiQueryEditorExplainKey = 'LokiQueryEditorExplainDefault';
+
export const LokiQueryEditor = React.memo((props) => {
const id = useId();
const { onChange, onRunQuery, onAddQuery, data, app, queries, datasource, range: timeRange } = props;
@@ -36,7 +37,7 @@ export const LokiQueryEditor = React.memo((props) => {
const [dataIsStale, setDataIsStale] = useState(false);
const [labelBrowserVisible, setLabelBrowserVisible] = useState(false);
const [queryStats, setQueryStats] = useState(null);
- const { flag: explain, setFlag: setExplain } = useFlag(lokiQueryEditorExplainKey);
+ const [explain, setExplain] = useState(window.localStorage.getItem(lokiQueryEditorExplainKey) === 'true');
const predefinedOperations = datasource.predefinedOperations;
const previousTimeRange = usePrevious(timeRange);
@@ -52,6 +53,7 @@ export const LokiQueryEditor = React.memo((props) => {
const editorMode = query.editorMode!;
const onExplainChange = (event: SyntheticEvent) => {
+ window.localStorage.setItem(lokiQueryEditorExplainKey, event.currentTarget.checked ? 'true' : 'false');
setExplain(event.currentTarget.checked);
};
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
index 4bf483a7f6e..e8d023ead36 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
@@ -11,10 +11,10 @@ import { PromQueryEditorProps } from '../../components/types';
import { PromQueryFormat } from '../../dataquery.gen';
import { PromQuery } from '../../types';
import { QueryPatternsModal } from '../QueryPatternsModal';
+import { promQueryEditorExplainKey, useFlag } from '../hooks/useFlag';
import { buildVisualQueryFromString } from '../parsing';
import { QueryEditorModeToggle } from '../shared/QueryEditorModeToggle';
import { QueryHeaderSwitch } from '../shared/QueryHeaderSwitch';
-import { promQueryEditorExplainKey, useFlag } from '../shared/hooks/useFlag';
import { QueryEditorMode } from '../shared/types';
import { changeEditorMode, getQueryWithDefaults } from '../state';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/hooks/useFlag.test.ts b/public/app/plugins/datasource/prometheus/querybuilder/hooks/useFlag.test.ts
similarity index 51%
rename from public/app/plugins/datasource/prometheus/querybuilder/shared/hooks/useFlag.test.ts
rename to public/app/plugins/datasource/prometheus/querybuilder/hooks/useFlag.test.ts
index 4c2ada605b2..4c7ca4e6393 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/hooks/useFlag.test.ts
+++ b/public/app/plugins/datasource/prometheus/querybuilder/hooks/useFlag.test.ts
@@ -1,10 +1,9 @@
import { act, renderHook } from '@testing-library/react';
-import { lokiQueryEditorExplainKey, promQueryEditorExplainKey, useFlag } from './useFlag';
+import { promQueryEditorExplainKey, useFlag } from './useFlag';
describe('useFlag Hook', () => {
beforeEach(() => {
- window.localStorage.removeItem(lokiQueryEditorExplainKey);
window.localStorage.removeItem(promQueryEditorExplainKey);
});
@@ -21,17 +20,4 @@ describe('useFlag Hook', () => {
});
expect(result.current.flag).toBe(false);
});
-
- it('should update different flags at once without conflict', () => {
- const { result } = renderHook(() => useFlag(promQueryEditorExplainKey, false));
- expect(result.current.flag).toBe(false);
- act(() => {
- result.current.setFlag(true);
- });
- expect(result.current.flag).toBe(true);
-
- const { result: result2 } = renderHook(() => useFlag(lokiQueryEditorExplainKey, false));
- expect(result.current.flag).toBe(true);
- expect(result2.current.flag).toBe(false);
- });
});
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/hooks/useFlag.ts b/public/app/plugins/datasource/prometheus/querybuilder/hooks/useFlag.ts
similarity index 63%
rename from public/app/plugins/datasource/prometheus/querybuilder/shared/hooks/useFlag.ts
rename to public/app/plugins/datasource/prometheus/querybuilder/hooks/useFlag.ts
index fe0630a70c3..80602b711df 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/hooks/useFlag.ts
+++ b/public/app/plugins/datasource/prometheus/querybuilder/hooks/useFlag.ts
@@ -1,17 +1,10 @@
import { useCallback, useState } from 'react';
-import store from '../../../../../../core/store';
+import store from '../../../../../core/store';
export const promQueryEditorExplainKey = 'PrometheusQueryEditorExplainDefault';
-export const promQueryEditorRawQueryKey = 'PrometheusQueryEditorRawQueryDefault';
-export const lokiQueryEditorExplainKey = 'LokiQueryEditorExplainDefault';
-export const lokiQueryEditorRawQueryKey = 'LokiQueryEditorRawQueryDefault';
-export type QueryEditorFlags =
- | typeof promQueryEditorExplainKey
- | typeof promQueryEditorRawQueryKey
- | typeof lokiQueryEditorExplainKey
- | typeof lokiQueryEditorRawQueryKey;
+export type QueryEditorFlags = typeof promQueryEditorExplainKey;
function getFlagValue(key: QueryEditorFlags, defaultValue = false): boolean {
const val = store.get(key);
@@ -26,7 +19,7 @@ type UseFlagHookReturnType = { flag: boolean; setFlag: (val: boolean) => void };
/**
*
- * Use and store value of explain/rawquery switch in local storage.
+ * Use and store value of explain switch in local storage.
* Needs to be a hook with local state to trigger re-renders.
*/
export function useFlag(key: QueryEditorFlags, defaultValue = false): UseFlagHookReturnType {