Elasticsearch Config: Fix empty settings with expected default values (#69658)

* Elastic details: add missing htmlFor attributes

* Elasticsearch Config: add regression test

* Elasticsearch Config: run options fixer on every change

* Remove unused import

public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.test.tsx

@@ -31,7 +31,24 @@ describe('ConfigEditor', () => {
     delete options.jsonData.timeField;
     delete options.jsonData.maxConcurrentShardRequests;
 
-    render(<ConfigEditor onOptionsChange={mockOnOptionsChange} options={options} />);
+    const { rerender } = render(<ConfigEditor onOptionsChange={mockOnOptionsChange} options={options} />);
+
+    expect(mockOnOptionsChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        jsonData: expect.objectContaining({
+          timeField: '@timestamp',
+          maxConcurrentShardRequests: 5,
+        }),
+      })
+    );
+
+    // Setting options to default should happen on every render, not once.
+    mockOnOptionsChange.mockClear();
+    const updatedOptions = { ...options };
+    updatedOptions.jsonData.timeField = '';
+    // @ts-expect-error
+    updatedOptions.jsonData.maxConcurrentShardRequests = '';
+    rerender(<ConfigEditor onOptionsChange={mockOnOptionsChange} options={updatedOptions} />);
 
     expect(mockOnOptionsChange).toHaveBeenCalledWith(
       expect.objectContaining({

public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx

@@ -21,17 +21,13 @@ export const ConfigEditor = (props: Props) => {
   // the access-mode-select-box vanishes)
   const showAccessOptions = useRef(props.options.access === 'direct');
 
-  const { options: originalOptions, onOptionsChange } = props;
+  const { options, onOptionsChange } = props;
-  const options = coerceOptions(originalOptions);
 
   useEffect(() => {
-    if (!isValidOptions(originalOptions)) {
+    if (!isValidOptions(options)) {
-      onOptionsChange(coerceOptions(originalOptions));
+      onOptionsChange(coerceOptions(options));
     }
-
+  }, [onOptionsChange, options]);
-    // We can't enforce the eslint rule here because we only want to run this once.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
   return (
     <>

public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx

@@ -22,7 +22,7 @@ export const ElasticDetails = ({ value, onChange }: Props) => {
   return (
     <>
       <FieldSet label="Elasticsearch details">
-        <InlineField label="Index name" labelWidth={26}>
+        <InlineField label="Index name" htmlFor="es_config_indexName" labelWidth={26}>
           <Input
             id="es_config_indexName"
             value={value.jsonData.index ?? (value.database || '')}
@@ -33,7 +33,7 @@ export const ElasticDetails = ({ value, onChange }: Props) => {
           />
         </InlineField>
 
-        <InlineField label="Pattern" labelWidth={26}>
+        <InlineField label="Pattern" htmlFor="es_config_indexPattern" labelWidth={26}>
           <Select
             inputId="es_config_indexPattern"
             value={indexPatternTypes.find(
@@ -45,7 +45,7 @@ export const ElasticDetails = ({ value, onChange }: Props) => {
           />
         </InlineField>
 
-        <InlineField label="Time field name" labelWidth={26}>
+        <InlineField label="Time field name" htmlFor="es_config_timeField" labelWidth={26}>
           <Input
             id="es_config_timeField"
             value={value.jsonData.timeField || ''}
@@ -56,7 +56,7 @@ export const ElasticDetails = ({ value, onChange }: Props) => {
           />
         </InlineField>
 
-        <InlineField label="Max concurrent Shard Requests" labelWidth={26}>
+        <InlineField label="Max concurrent Shard Requests" htmlFor="es_config_shardRequests" labelWidth={26}>
           <Input
             id="es_config_shardRequests"
             value={value.jsonData.maxConcurrentShardRequests || ''}
@@ -67,6 +67,7 @@ export const ElasticDetails = ({ value, onChange }: Props) => {
 
         <InlineField
           label="Min time interval"
+          htmlFor="es_config_minTimeInterval"
           labelWidth={26}
           tooltip={
             <>
@@ -95,7 +96,7 @@ export const ElasticDetails = ({ value, onChange }: Props) => {
         </InlineField>
 
         {value.jsonData.xpack && (
-          <InlineField label="Include Frozen Indices" labelWidth={26}>
+          <InlineField label="Include Frozen Indices" htmlFor="es_config_frozenIndices" labelWidth={26}>
             <InlineSwitch
               id="es_config_frozenIndices"
               value={value.jsonData.includeFrozen ?? false}