From ce6aed21a71b46581871dab17335ba2c8266d72b Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Thu, 21 Apr 2022 14:23:03 +0200
Subject: [PATCH] Loki: Show raw query and patterns only in query builder
 (#48049)

---
 .../components/LokiQueryEditorSelector.tsx    | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
index a405ef7b602..94271bfc2b9 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
@@ -68,21 +68,25 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
         onDismiss={() => setParseModalOpen(false)}
       />
       <EditorHeader>
-        <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={query.rawQuery} onChange={onQueryPreviewChange} />
+        {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={query.rawQuery} onChange={onQueryPreviewChange} />
+          </>
+        )}
         <FlexItem grow={1} />
         <Button
           variant={dataIsStale ? 'primary' : 'secondary'}