From 6b1321dbfa653d8e8785f8dcb30fd5be71085c6a Mon Sep 17 00:00:00 2001
From: Giordano Ricci <me@giordanoricci.com>
Date: Fri, 14 Jan 2022 14:58:25 +0000
Subject: [PATCH] Elasticsearch: Fix QueryEditor styling issues (#44041)

---
 .../FiltersSettingsEditor/index.tsx           | 19 +++++++-------
 .../components/QueryEditor/index.tsx          | 25 ++++++++++++++-----
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
index ccf8357d24a..883251e803e 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
@@ -47,12 +47,12 @@ export const FiltersSettingsEditor = ({ bucketAgg }: Props) => {
               display: flex;
             `}
           >
-            <div
-              className={css`
-                width: 250px;
-              `}
-            >
-              <InlineField label="Query" labelWidth={10}>
+            <InlineField label="Query" labelWidth={8}>
+              <div
+                className={css`
+                  width: 150px;
+                `}
+              >
                 <QueryField
                   placeholder="Lucene Query"
                   portalOrigin="elasticsearch"
@@ -60,10 +60,11 @@ export const FiltersSettingsEditor = ({ bucketAgg }: Props) => {
                   onChange={(query) => dispatch(changeFilter({ index, filter: { ...filter, query } }))}
                   query={filter.query}
                 />
-              </InlineField>
-            </div>
-            <InlineField label="Label" labelWidth={10}>
+              </div>
+            </InlineField>
+            <InlineField label="Label" labelWidth={8}>
               <Input
+                width={16}
                 id={`${baseId}-label-${index}`}
                 placeholder="Label"
                 onBlur={(e) => dispatch(changeFilter({ index, filter: { ...filter, label: e.target.value } }))}
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
index fcf25e8cb76..947f86cb7c3 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
-import { getDefaultTimeRange, QueryEditorProps } from '@grafana/data';
+import { getDefaultTimeRange, GrafanaTheme2, QueryEditorProps } from '@grafana/data';
 import { ElasticDatasource } from '../../datasource';
 import { ElasticsearchOptions, ElasticsearchQuery } from '../../types';
 import { ElasticsearchProvider } from './ElasticsearchQueryContext';
-import { InlineField, InlineFieldRow, Input, QueryField } from '@grafana/ui';
+import { InlineField, InlineLabel, Input, QueryField, useStyles2 } from '@grafana/ui';
 import { changeAliasPattern, changeQuery } from './state';
 import { MetricAggregationsEditor } from './MetricAggregationsEditor';
 import { BucketAggregationsEditor } from './BucketAggregationsEditor';
 import { useDispatch } from '../../hooks/useStatelessReducer';
 import { useNextId } from '../../hooks/useNextId';
 import { metricAggregationConfig } from './MetricAggregationsEditor/utils';
+import { css } from '@emotion/css';
 
 export type ElasticQueryEditorProps = QueryEditorProps<ElasticDatasource, ElasticsearchQuery, ElasticsearchOptions>;
 
@@ -25,6 +26,16 @@ export const QueryEditor = ({ query, onChange, onRunQuery, datasource, range }:
   </ElasticsearchProvider>
 );
 
+const getStyles = (theme: GrafanaTheme2) => ({
+  root: css`
+    display: flex;
+  `,
+  queryFieldWrapper: css`
+    flex-grow: 1;
+    margin: 0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0;
+  `,
+});
+
 interface Props {
   value: ElasticsearchQuery;
 }
@@ -32,6 +43,7 @@ interface Props {
 const QueryEditorForm = ({ value }: Props) => {
   const dispatch = useDispatch();
   const nextId = useNextId();
+  const styles = useStyles2(getStyles);
 
   // To be considered a time series query, the last bucked aggregation must be a Date Histogram
   const isTimeSeriesQuery = value.bucketAggs?.slice(-1)[0]?.type === 'date_histogram';
@@ -42,8 +54,9 @@ const QueryEditorForm = ({ value }: Props) => {
 
   return (
     <>
-      <InlineFieldRow>
-        <InlineField label="Query" labelWidth={17} grow>
+      <div className={styles.root}>
+        <InlineLabel width={17}>Query</InlineLabel>
+        <div className={styles.queryFieldWrapper}>
           <QueryField
             query={value.query}
             // By default QueryField calls onChange if onBlur is not defined, this will trigger a rerender
@@ -53,7 +66,7 @@ const QueryEditorForm = ({ value }: Props) => {
             placeholder="Lucene Query"
             portalOrigin="elasticsearch"
           />
-        </InlineField>
+        </div>
         <InlineField
           label="Alias"
           labelWidth={15}
@@ -67,7 +80,7 @@ const QueryEditorForm = ({ value }: Props) => {
             defaultValue={value.alias}
           />
         </InlineField>
-      </InlineFieldRow>
+      </div>
 
       <MetricAggregationsEditor nextId={nextId} />
       {showBucketAggregationsEditor && <BucketAggregationsEditor nextId={nextId} />}