From c78d5fa4e305a6f2781fb7f3d55074fd6c1d13a6 Mon Sep 17 00:00:00 2001
From: Andreas Christou <andreas.christou@grafana.com>
Date: Fri, 22 Sep 2023 11:04:22 +0100
Subject: [PATCH] Update `QueryVariableEditor` layout  (#75099)

* Allow setting legend header style and add container

* Use Box and Text components

* Minor element update

* Use box instead of div
---
 .../variables/query/QueryVariableEditor.tsx   | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/public/app/features/variables/query/QueryVariableEditor.tsx b/public/app/features/variables/query/QueryVariableEditor.tsx
index 1077ceb1eb8..c234adba079 100644
--- a/public/app/features/variables/query/QueryVariableEditor.tsx
+++ b/public/app/features/variables/query/QueryVariableEditor.tsx
@@ -4,7 +4,8 @@ import { connect, ConnectedProps } from 'react-redux';
 import { DataSourceInstanceSettings, getDataSourceRef, LoadingState, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { getTemplateSrv } from '@grafana/runtime';
-import { Field } from '@grafana/ui';
+import { Field, Text } from '@grafana/ui';
+import { Box } from '@grafana/ui/src/unstable';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
 
 import { StoreState } from '../../../types';
@@ -151,15 +152,18 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
 
     if (isLegacyQueryEditor(VariableQueryEditor, datasource)) {
       return (
-        <Field label="Query">
-          <VariableQueryEditor
-            key={datasource.uid}
-            datasource={datasource}
-            query={query}
-            templateSrv={getTemplateSrv()}
-            onChange={this.onLegacyQueryChange}
-          />
-        </Field>
+        <Box marginBottom={2}>
+          <Text element={'h4'}>Query</Text>
+          <Box marginTop={1}>
+            <VariableQueryEditor
+              key={datasource.uid}
+              datasource={datasource}
+              query={query}
+              templateSrv={getTemplateSrv()}
+              onChange={this.onLegacyQueryChange}
+            />
+          </Box>
+        </Box>
       );
     }
 
@@ -167,19 +171,22 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
 
     if (isQueryEditor(VariableQueryEditor, datasource)) {
       return (
-        <Field label="Query">
-          <VariableQueryEditor
-            key={datasource.uid}
-            datasource={datasource}
-            query={query}
-            onChange={this.onQueryChange}
-            onRunQuery={() => {}}
-            data={{ series: [], state: LoadingState.Done, timeRange: range }}
-            range={range}
-            onBlur={() => {}}
-            history={[]}
-          />
-        </Field>
+        <Box marginBottom={2}>
+          <Text element={'h4'}>Query</Text>
+          <Box marginTop={1}>
+            <VariableQueryEditor
+              key={datasource.uid}
+              datasource={datasource}
+              query={query}
+              onChange={this.onQueryChange}
+              onRunQuery={() => {}}
+              data={{ series: [], state: LoadingState.Done, timeRange: range }}
+              range={range}
+              onBlur={() => {}}
+              history={[]}
+            />
+          </Box>
+        </Box>
       );
     }