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 {