Loki, Prometheus: Show Query patterns in all editor modes (#50263)

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

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" />
         )}