From 7924e6fec63bc446fbb3118348bc52b2e235e84c Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 9 Feb 2021 17:56:04 +0100
Subject: [PATCH] Elasticsearch: Fix alias field value not being shown in query
 editor (#30992) (#31037)

* Make imports relative

* Fix Alias field value not being shown

(cherry picked from commit b46235715db3890c68455fcb282af85410c3a600)

Co-authored-by: Giordano Ricci <gio.ricci@grafana.com>
---
 .../SettingsEditor/index.test.tsx             |  4 +-
 .../components/QueryEditor/index.test.tsx     | 48 +++++++++++++++++++
 .../components/QueryEditor/index.tsx          |  7 ++-
 3 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.test.tsx

diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx
index c9018436cf0..c3a2afbbcff 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { SettingsEditor } from '.';
 import { ElasticsearchProvider } from '../../ElasticsearchQueryContext';
-import { ElasticDatasource } from 'app/plugins/datasource/elasticsearch/datasource';
-import { ElasticsearchQuery } from 'app/plugins/datasource/elasticsearch/types';
+import { ElasticDatasource } from '../../../../datasource';
+import { ElasticsearchQuery } from '../../../../types';
 
 describe('Settings Editor', () => {
   describe('Raw Data', () => {
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.test.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.test.tsx
new file mode 100644
index 00000000000..a817ec34837
--- /dev/null
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { QueryEditor } from '.';
+import { ElasticDatasource } from '../../datasource';
+import { ElasticsearchQuery } from '../../types';
+
+describe('QueryEditor', () => {
+  describe('Alias Field', () => {
+    it('Should correctly render and trigger changes on blur', () => {
+      const alias = '{{metric}}';
+      const query: ElasticsearchQuery = {
+        refId: 'A',
+        alias,
+        metrics: [
+          {
+            id: '1',
+            type: 'raw_data',
+          },
+        ],
+        bucketAggs: [],
+      };
+
+      const onChange = jest.fn<void, [ElasticsearchQuery]>();
+
+      render(
+        <QueryEditor query={query} datasource={{} as ElasticDatasource} onChange={onChange} onRunQuery={() => {}} />
+      );
+
+      let aliasField = screen.getByLabelText('Alias') as HTMLInputElement;
+
+      // The Query should have an alias field
+      expect(aliasField).toBeInTheDocument();
+
+      // its value should match the one in the query
+      expect(aliasField.value).toBe(alias);
+
+      // We change value and trigger a blur event to trigger an update
+      const newAlias = 'new alias';
+      fireEvent.change(aliasField, { target: { value: newAlias } });
+      fireEvent.blur(aliasField);
+
+      // the onChange handler should have been called correctly, and the resulting
+      // query state should match what expected
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange.mock.calls[0][0].alias).toBe(newAlias);
+    });
+  });
+});
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
index 6bd9f190fba..cc8da80c0e2 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
@@ -46,7 +46,12 @@ const QueryEditorForm: FunctionComponent<Props> = ({ value }) => {
           />
         </InlineField>
         <InlineField label="Alias" labelWidth={15}>
-          <Input placeholder="Alias Pattern" onBlur={(e) => dispatch(changeAliasPattern(e.currentTarget.value))} />
+          <Input
+            id={`ES-query-${value.refId}_alias`}
+            placeholder="Alias Pattern"
+            onBlur={(e) => dispatch(changeAliasPattern(e.currentTarget.value))}
+            defaultValue={value.alias}
+          />
         </InlineField>
       </InlineFieldRow>