From 088a1880d8942c1e37abbe485c0b58438f65a95f Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Mon, 13 Jun 2022 09:45:01 +0200
Subject: [PATCH] Loki, Prometheus: Show Query patterns in all editor modes
 (#50263)

---
 .../components/LokiQueryEditorSelector.tsx    | 34 ++++++++---------
 .../components/PromQueryEditorSelector.tsx    | 38 +++++++++----------
 2 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
index b0f045f1f4c..71f50c90722 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
@@ -79,25 +79,21 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
         onDismiss={() => setParseModalOpen(false)}
       />
       <EditorHeader>
-        {editorMode === QueryEditorMode.Builder && (
-          <>
-            <InlineSelect
-              value={null}
-              placeholder="Query patterns"
-              allowCustomValue
-              onChange={({ value }) => {
-                const result = buildVisualQueryFromString(query.expr || '');
-                result.query.operations = value?.operations!;
-                onChange({
-                  ...query,
-                  expr: lokiQueryModeller.renderQuery(result.query),
-                });
-              }}
-              options={lokiQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))}
-            />
-            <QueryHeaderSwitch label="Raw query" value={rawQuery} onChange={onQueryPreviewChange} />
-          </>
-        )}
+        <InlineSelect
+          value={null}
+          placeholder="Query patterns"
+          allowCustomValue
+          onChange={({ value }) => {
+            const result = buildVisualQueryFromString(query.expr || '');
+            result.query.operations = value?.operations!;
+            onChange({
+              ...query,
+              expr: lokiQueryModeller.renderQuery(result.query),
+            });
+          }}
+          options={lokiQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))}
+        />
+        <QueryHeaderSwitch label="Raw query" value={rawQuery} onChange={onQueryPreviewChange} />
         <FlexItem grow={1} />
         {app !== CoreApp.Explore && (
           <Button
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
index fc133ad7ac9..1de08f1d16c 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
@@ -82,27 +82,23 @@ export const PromQueryEditorSelector = React.memo<Props>((props) => {
         onDismiss={() => setParseModalOpen(false)}
       />
       <EditorHeader>
-        {editorMode === QueryEditorMode.Builder && (
-          <>
-            <InlineSelect
-              value={null}
-              placeholder="Query patterns"
-              allowCustomValue
-              onChange={({ value }) => {
-                // TODO: Bit convoluted as we don't have access to visualQuery model here. Maybe would make sense to
-                //  move it inside the editor?
-                const result = buildVisualQueryFromString(query.expr || '');
-                result.query.operations = value?.operations!;
-                onChange({
-                  ...query,
-                  expr: promQueryModeller.renderQuery(result.query),
-                });
-              }}
-              options={promQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))}
-            />
-            <QueryHeaderSwitch label="Raw query" value={rawQuery} onChange={onQueryPreviewChange} />
-          </>
-        )}
+        <InlineSelect
+          value={null}
+          placeholder="Query patterns"
+          allowCustomValue
+          onChange={({ value }) => {
+            // TODO: Bit convoluted as we don't have access to visualQuery model here. Maybe would make sense to
+            //  move it inside the editor?
+            const result = buildVisualQueryFromString(query.expr || '');
+            result.query.operations = value?.operations!;
+            onChange({
+              ...query,
+              expr: promQueryModeller.renderQuery(result.query),
+            });
+          }}
+          options={promQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))}
+        />
+        <QueryHeaderSwitch label="Raw query" value={rawQuery} onChange={onQueryPreviewChange} />
         {editorMode === QueryEditorMode.Builder && (
           <FeedbackLink feedbackUrl="https://github.com/grafana/grafana/discussions/47693" />
         )}