From 5b7ef923995fce809959080f5aeed7c137a8ddee Mon Sep 17 00:00:00 2001
From: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
Date: Tue, 29 Nov 2022 08:12:46 -0600
Subject: [PATCH] Prometheus: Remove raw query toggle (#59069)

* remove the raw query option toggle from the prometheus query builder
---
 .../components/PromQueryBuilderContainer.tsx      |  5 ++---
 .../components/PromQueryEditorSelector.test.tsx   |  9 +--------
 .../components/PromQueryEditorSelector.tsx        | 15 +--------------
 .../querybuilder/components/QueryPreview.tsx      |  6 ++----
 4 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderContainer.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderContainer.tsx
index 37c38546420..05d84bc6fc4 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderContainer.tsx
+++ b/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} />}
     </>
   );
 }
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx
index a90923a34cf..3e7ed2560f5 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx
@@ -95,14 +95,7 @@ describe('PromQueryEditorSelector', () => {
     });
   });
 
-  it('Can enable 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 () => {
+  it('Should show raw query', async () => {
     renderWithProps({
       editorMode: QueryEditorMode.Builder,
       expr: 'my_metric',
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
index 1ae2582be86..ff7f9a88e32 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
+++ b/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}
           />
         )}
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx
index 888e4a38adb..815a4140e0c 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx
+++ b/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>
+        <RawQuery query={query} lang={{ grammar: promqlGrammar, name: 'promql' }} />
       </EditorFieldGroup>
     </EditorRow>
   );