Prometheus/Loki: Show raw query by default in the builder(#50007)

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderContainer.test.tsx

@@ -30,6 +30,7 @@ describe('LokiQueryBuilderContainer', () => {
       ),
       onChange: jest.fn(),
       onRunQuery: () => {},
+      showRawQuery: true,
     };
     render(<LokiQueryBuilderContainer {...props} />);
     expect(screen.getByText('testjob')).toBeInTheDocument();

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderContainer.tsx

@@ -15,6 +15,7 @@ export interface Props {
   datasource: LokiDatasource;
   onChange: (update: LokiQuery) => void;
   onRunQuery: () => void;
+  showRawQuery: boolean;
 }
 
 export interface State {
@@ -26,7 +27,7 @@ export interface State {
  * This component is here just to contain the translation logic between string query and the visual query builder model.
  */
 export function LokiQueryBuilderContainer(props: Props) {
-  const { query, onChange, onRunQuery, datasource } = props;
+  const { query, onChange, onRunQuery, datasource, showRawQuery } = props;
   const [state, dispatch] = useReducer(stateSlice.reducer, {
     expr: query.expr,
     // Use initial visual query only if query.expr is empty string
@@ -62,7 +63,7 @@ export function LokiQueryBuilderContainer(props: Props) {
         onChange={onVisQueryChange}
         onRunQuery={onRunQuery}
       />
-      {query.rawQuery && <QueryPreview query={query.expr} />}
+      {showRawQuery && <QueryPreview query={query.expr} />}
     </>
   );
 }

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.test.tsx

@@ -10,6 +10,18 @@ import { LokiQuery, LokiQueryType } from '../../types';
 
 import { LokiQueryEditorSelector } from './LokiQueryEditorSelector';
 
+jest.mock('app/core/store', () => {
+  return {
+    get() {
+      return undefined;
+    },
+    set() {},
+    getObject(key: string, defaultValue: any) {
+      return defaultValue;
+    },
+  };
+});
+
 const defaultQuery = {
   refId: 'A',
   expr: '{label1="foo", label2="bar"}',
@@ -86,23 +98,14 @@ describe('LokiQueryEditorSelector', () => {
   });
 
   it('Can enable raw query', async () => {
-    const { onChange } = renderWithMode(QueryEditorMode.Builder);
-    expect(screen.queryByLabelText('selector')).not.toBeInTheDocument();
-
+    renderWithMode(QueryEditorMode.Builder);
+    expect(screen.queryByLabelText('selector')).toBeInTheDocument();
     screen.getByLabelText('Raw query').click();
-
-    expect(onChange).toBeCalledWith({
-      refId: 'A',
-      expr: defaultQuery.expr,
-      queryType: 'range',
-      editorMode: QueryEditorMode.Builder,
-      rawQuery: true,
-    });
+    expect(screen.queryByLabelText('selector')).not.toBeInTheDocument();
   });
 
-  it('Should show raw query', async () => {
+  it('Should show raw query by default', async () => {
     renderWithProps({
-      rawQuery: true,
       editorMode: QueryEditorMode.Builder,
       expr: '{job="grafana"}',
     });

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx

@@ -11,7 +11,7 @@ import { LokiQueryEditorProps } from '../../components/types';
 import { LokiQuery } from '../../types';
 import { lokiQueryModeller } from '../LokiQueryModeller';
 import { buildVisualQueryFromString } from '../parsing';
-import { changeEditorMode, getQueryWithDefaults } from '../state';
+import { changeEditorMode, getQueryWithDefaults, useRawQuery } from '../state';
 
 import { LokiQueryBuilderContainer } from './LokiQueryBuilderContainer';
 import { LokiQueryBuilderExplained } from './LokiQueryBuilderExplained';
@@ -24,6 +24,7 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
   const [dataIsStale, setDataIsStale] = useState(false);
 
   const query = getQueryWithDefaults(props.query);
+  const [rawQuery, setRawQuery] = useRawQuery();
   // This should be filled in from the defaults by now.
   const editorMode = query.editorMode!;
 
@@ -53,7 +54,7 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
 
   const onQueryPreviewChange = (event: SyntheticEvent<HTMLInputElement>) => {
     const isEnabled = event.currentTarget.checked;
-    onChange({ ...query, rawQuery: isEnabled });
+    setRawQuery(isEnabled);
   };
 
   return (
@@ -86,7 +87,7 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
               }}
               options={lokiQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))}
             />
-            <QueryHeaderSwitch label="Raw query" value={query.rawQuery} onChange={onQueryPreviewChange} />
+            <QueryHeaderSwitch label="Raw query" value={rawQuery} onChange={onQueryPreviewChange} />
           </>
         )}
         <FlexItem grow={1} />
@@ -110,6 +111,7 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
             query={query}
             onChange={onChangeInternal}
             onRunQuery={props.onRunQuery}
+            showRawQuery={rawQuery}
           />
         )}
         {editorMode === QueryEditorMode.Explain && <LokiQueryBuilderExplained query={query.expr} />}