Prometheus: Remove raw query toggle (#59069)

* remove the raw query option toggle from the prometheus query builder

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderContainer.tsx

@@ -18,7 +18,6 @@ export interface Props {
   onChange: (update: PromQuery) => void;
   onRunQuery: () => void;
   data?: PanelData;
-  showRawQuery?: boolean;
   showExplain: boolean;
 }
 
@@ -31,7 +30,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 PromQueryBuilderContainer(props: Props) {
-  const { query, onChange, onRunQuery, datasource, data, showRawQuery, showExplain } = props;
+  const { query, onChange, onRunQuery, datasource, data, showExplain } = props;
   const [state, dispatch] = useReducer(stateSlice.reducer, { expr: query.expr });
 
   // Only rebuild visual query if expr changes from outside
@@ -59,7 +58,7 @@ export function PromQueryBuilderContainer(props: Props) {
         data={data}
         showExplain={showExplain}
       />
-      {showRawQuery && <QueryPreview query={query.expr} />}
+      {<QueryPreview query={query.expr} />}
     </>
   );
 }

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx

@@ -95,14 +95,7 @@ describe('PromQueryEditorSelector', () => {
     });
   });
 
-  it('Can enable raw query', async () => {
+  it('Should show raw query', async () => {
-    renderWithMode(QueryEditorMode.Builder);
-    expect(screen.queryByLabelText('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: 'my_metric',

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx

@@ -11,7 +11,7 @@ import { promQueryModeller } from '../PromQueryModeller';
 import { buildVisualQueryFromString } from '../parsing';
 import { QueryEditorModeToggle } from '../shared/QueryEditorModeToggle';
 import { QueryHeaderSwitch } from '../shared/QueryHeaderSwitch';
-import { promQueryEditorExplainKey, promQueryEditorRawQueryKey, useFlag } from '../shared/hooks/useFlag';
+import { promQueryEditorExplainKey, useFlag } from '../shared/hooks/useFlag';
 import { QueryEditorMode } from '../shared/types';
 import { changeEditorMode, getQueryWithDefaults } from '../state';
 
@@ -26,7 +26,6 @@ export const PromQueryEditorSelector = React.memo<Props>((props) => {
   const [parseModalOpen, setParseModalOpen] = useState(false);
   const [dataIsStale, setDataIsStale] = useState(false);
   const { flag: explain, setFlag: setExplain } = useFlag(promQueryEditorExplainKey);
-  const { flag: rawQuery, setFlag: setRawQuery } = useFlag(promQueryEditorRawQueryKey, true);
 
   const query = getQueryWithDefaults(props.query, app);
   // This should be filled in from the defaults by now.
@@ -58,11 +57,6 @@ export const PromQueryEditorSelector = React.memo<Props>((props) => {
     setDataIsStale(false);
   }, [data]);
 
-  const onQueryPreviewChange = (event: SyntheticEvent<HTMLInputElement>) => {
-    const isEnabled = event.currentTarget.checked;
-    setRawQuery(isEnabled);
-  };
-
   const onChangeInternal = (query: PromQuery) => {
     setDataIsStale(true);
     onChange(query);
@@ -102,13 +96,7 @@ export const PromQueryEditorSelector = React.memo<Props>((props) => {
           }}
           options={promQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))}
         />
-
         <QueryHeaderSwitch label="Explain" value={explain} onChange={onShowExplainChange} />
-        {editorMode === QueryEditorMode.Builder && (
-          <>
-            <QueryHeaderSwitch label="Raw query" value={rawQuery} onChange={onQueryPreviewChange} />
-          </>
-        )}
         <FlexItem grow={1} />
         {app !== CoreApp.Explore && (
           <Button
@@ -133,7 +121,6 @@ export const PromQueryEditorSelector = React.memo<Props>((props) => {
             onChange={onChangeInternal}
             onRunQuery={props.onRunQuery}
             data={data}
-            showRawQuery={rawQuery}
             showExplain={explain}
           />
         )}

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

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