Elasticsearch: Fix alias field value not being shown in query editor (#30992)

* Make imports relative

* Fix Alias field value not being shown

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', () => {

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);
+    });
+  });
+});

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>