Loki: Use localStorage to set and get showExplain (#80069)

* Loki: Use localStorage to set and get showExplain

* Move hooks outside of shared folder

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(<LokiQueryEditor {...defaultProps} />);

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<LokiQueryEditorProps>((props) => {
   const id = useId();
   const { onChange, onRunQuery, onAddQuery, data, app, queries, datasource, range: timeRange } = props;
@@ -36,7 +37,7 @@ export const LokiQueryEditor = React.memo<LokiQueryEditorProps>((props) => {
   const [dataIsStale, setDataIsStale] = useState(false);
   const [labelBrowserVisible, setLabelBrowserVisible] = useState(false);
   const [queryStats, setQueryStats] = useState<QueryStats | null>(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<LokiQueryEditorProps>((props) => {
   const editorMode = query.editorMode!;
 
   const onExplainChange = (event: SyntheticEvent<HTMLInputElement>) => {
+    window.localStorage.setItem(lokiQueryEditorExplainKey, event.currentTarget.checked ? 'true' : 'false');
     setExplain(event.currentTarget.checked);
   };
 

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';
 

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);
-  });
 });

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 {