Loki: Remove raw query toggle (#59125)

* set default query expression

* always show raw query

* remove raw query title

* remove test for raw query toggle

* remove raw query toggle

* remove default expression

* hide raw query preview if empty

* remove e2e test for raw query toggle

* update test name

e2e/various-suite/loki-query-builder.spec.ts

@@ -72,10 +72,6 @@ describe('Loki query builder', () => {
     e2e().contains(MISSING_LABEL_FILTER_ERROR_MESSAGE).should('not.exist');
     e2e().contains(finalQuery).should('be.visible');
 
-    // Toggle raw query
-    e2e().contains('label', 'Raw query').click();
-    e2e().contains('Raw query').should('have.length', 1);
-
     // Change to code editor
     e2e().contains('label', 'Code').click();
     // We need to test this manually because the final query is split into separate DOM elements using e2e().contains(finalQuery).should('be.visible'); does not detect the query.

public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx

@@ -94,14 +94,7 @@ describe('LokiQueryEditorSelector', () => {
     });
   });
 
-  it('Can enable raw query', async () => {
+  it('Should show the query by default', async () => {
-    renderWithMode(QueryEditorMode.Builder);
-    expect(await screen.findByLabelText('selector')).toBeInTheDocument();
-    screen.getByLabelText('Raw query').click();
-    expect(screen.queryByLabelText('selector')).not.toBeInTheDocument();
-  });
-
-  it('Should show raw query by default', async () => {
     renderWithProps({
       editorMode: QueryEditorMode.Builder,
       expr: '{job="grafana"}',

public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx

@@ -9,11 +9,7 @@ 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 {
+import { lokiQueryEditorExplainKey, useFlag } from '../../prometheus/querybuilder/shared/hooks/useFlag';
-  lokiQueryEditorExplainKey,
-  lokiQueryEditorRawQueryKey,
-  useFlag,
-} from '../../prometheus/querybuilder/shared/hooks/useFlag';
 import { LokiQueryBuilderContainer } from '../querybuilder/components/LokiQueryBuilderContainer';
 import { LokiQueryBuilderOptions } from '../querybuilder/components/LokiQueryBuilderOptions';
 import { LokiQueryCodeEditor } from '../querybuilder/components/LokiQueryCodeEditor';
@@ -34,7 +30,6 @@ export const LokiQueryEditor = React.memo<LokiQueryEditorProps>((props) => {
   const [queryPatternsModalOpen, setQueryPatternsModalOpen] = useState(false);
   const [dataIsStale, setDataIsStale] = useState(false);
   const { flag: explain, setFlag: setExplain } = useFlag(lokiQueryEditorExplainKey);
-  const { flag: rawQuery, setFlag: setRawQuery } = useFlag(lokiQueryEditorRawQueryKey, true);
 
   const query = getQueryWithDefaults(props.query);
   // This should be filled in from the defaults by now.
@@ -75,11 +70,6 @@ export const LokiQueryEditor = React.memo<LokiQueryEditorProps>((props) => {
     onChange(query);
   };
 
-  const onQueryPreviewChange = (event: SyntheticEvent<HTMLInputElement>) => {
-    const isEnabled = event.currentTarget.checked;
-    setRawQuery(isEnabled);
-  };
-
   return (
     <>
       <ConfirmModal
@@ -123,11 +113,6 @@ export const LokiQueryEditor = React.memo<LokiQueryEditorProps>((props) => {
           Kick start your query
         </Button>
         <QueryHeaderSwitch label="Explain" value={explain} onChange={onExplainChange} />
-        {editorMode === QueryEditorMode.Builder && (
-          <>
-            <QueryHeaderSwitch label="Raw query" value={rawQuery} onChange={onQueryPreviewChange} />
-          </>
-        )}
         <FlexItem grow={1} />
         {app !== CoreApp.Explore && (
           <Button
@@ -153,7 +138,6 @@ export const LokiQueryEditor = React.memo<LokiQueryEditorProps>((props) => {
             query={query}
             onChange={onChangeInternal}
             onRunQuery={props.onRunQuery}
-            showRawQuery={rawQuery}
             showExplain={explain}
           />
         )}

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

@@ -32,7 +32,6 @@ describe('LokiQueryBuilderContainer', () => {
       ),
       onChange: jest.fn(),
       onRunQuery: () => {},
-      showRawQuery: true,
       showExplain: false,
     };
     props.datasource.getDataSamples = jest.fn().mockResolvedValue([]);

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

@@ -16,7 +16,6 @@ export interface Props {
   datasource: LokiDatasource;
   onChange: (update: LokiQuery) => void;
   onRunQuery: () => void;
-  showRawQuery: boolean;
   showExplain: boolean;
 }
 
@@ -29,7 +28,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, showRawQuery, showExplain } = props;
+  const { query, onChange, onRunQuery, datasource, showExplain } = props;
   const [state, dispatch] = useReducer(stateSlice.reducer, {
     expr: query.expr,
     // Use initial visual query only if query.expr is empty string
@@ -67,7 +66,7 @@ export function LokiQueryBuilderContainer(props: Props) {
         showExplain={showExplain}
         data-testid={testIds.editor}
       />
-      {showRawQuery && <QueryPreview query={query.expr} />}
+      {query.expr !== '' && <QueryPreview query={query.expr} />}
     </>
   );
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EditorRow, EditorFieldGroup, EditorField } from '@grafana/experimental';
+import { EditorRow, EditorFieldGroup } from '@grafana/experimental';
 
 import { RawQuery } from '../../../prometheus/querybuilder/shared/RawQuery';
 import { lokiGrammar } from '../../syntax';
@@ -13,9 +13,7 @@ export function QueryPreview({ query }: Props) {
   return (
     <EditorRow>
       <EditorFieldGroup>
-        <EditorField label="Raw query">
+        <RawQuery query={query} lang={{ grammar: lokiGrammar, name: 'lokiql' }} />
-          <RawQuery query={query} lang={{ grammar: lokiGrammar, name: 'lokiql' }} />
-        </EditorField>
       </EditorFieldGroup>
     </EditorRow>
   );