Datasource: updates PromExploreQueryEditor to prevent it from throwing error on edit (#21605)

* Datasource: updates PromExploreQueryEditor - rewrite to functional component

* Datasource: updates PromQueryField - moves an extra field from children to the separate prop

* Datasource: adds PromExploreExtraField

* Datasource: updates PromExploreQueryEditor - fixes typo

* Datasource: updates prometheus explore editor snapshots

* Datasource: updates PromExploreExtraField export

* Datasource: removes unnecessary div from PromExploreQueryEditor

* Datasource: adds basic PromExploreExtraField snapshot test

* Datasource: adds basic PromExploreQueryEditor test

* Datasource: updates PromExploreQueryEditor snapshot to fix timezone issues

* Datasource: updates PromExploreQueryEditor - onChangeQueryStep cleanup

* Datasource: updates PromExploreQueryEditor test to check ExtraFieldElement render

* Datasource: simplified PromExploreQueryEditor onStepChange method

* Datasource: updates Prometheus module import

* Datasource: updates PromExploreQueryEditor test

* Datasource: updates PromExploreQueryEditor tests

* Datasource: fixes PromExploreQueryEditor error on empty interval init

* Datasource: adds a tooltip to PromExploreExtraField mounted in PromExploreQueryEditor

* Datasource: updates PromExploreQueryEditor snapshots

public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx

@@ -1,85 +1,57 @@
-import React, { PureComponent } from 'react';
+import React, { memo } from 'react';
 
 // Types
 import { ExploreQueryFieldProps } from '@grafana/data';
-import { FormLabel } from '@grafana/ui';
 
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery, PromOptions } from '../types';
 
 import PromQueryField from './PromQueryField';
+import { PromExploreExtraField } from './PromExploreExtraField';
+
 export type Props = ExploreQueryFieldProps<PrometheusDatasource, PromQuery, PromOptions>;
 
-interface State {
-  interval: string;
-}
+export function PromExploreQueryEditor(props: Props) {
+  const { query, data, datasource, history, onChange, onRunQuery } = props;
 
-export class PromExploreQueryEditor extends PureComponent<Props, State> {
-  // Query target to be modified and used for queries
-  query: PromQuery;
-
-  constructor(props: Props) {
-    super(props);
-    const { query } = props;
-    this.query = query;
-    // Query target properties that are fully controlled inputs
-    this.state = {
-      // Fully controlled text inputs
-      interval: query.interval,
-    };
+  function onChangeQueryStep(value: string) {
+    const { query, onChange } = props;
+    const nextQuery = { ...query, interval: value };
+    onChange(nextQuery);
   }
 
-  onFieldChange = (query: PromQuery, override?: any) => {
-    this.query.expr = query.expr;
-  };
-
-  onIntervalChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
-    const interval = e.currentTarget.value;
-    this.query.interval = interval;
-    this.setState({ interval });
-  };
-
-  onRunQuery = () => {
-    const { query } = this;
-    this.props.onChange(query);
-    this.props.onRunQuery();
-  };
-
-  onReturnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      this.onRunQuery();
+  function onStepChange(e: React.SyntheticEvent<HTMLInputElement>) {
+    if (e.currentTarget.value !== query.interval) {
+      onChangeQueryStep(e.currentTarget.value);
     }
-  };
-
-  render() {
-    const { datasource, query, data, history } = this.props;
-    const { interval } = this.state;
-
-    return (
-      <div className="gf-form-inline">
-        <PromQueryField
-          datasource={datasource}
-          query={query}
-          onRunQuery={this.onRunQuery}
-          onChange={this.onFieldChange}
-          history={history}
-          data={data}
-        >
-          <div className="gf-form-inline explore-input--ml">
-            <div className="gf-form">
-              <FormLabel width={4}>Step</FormLabel>
-              <input
-                type="text"
-                className="gf-form-input width-6"
-                placeholder={'auto'}
-                onChange={this.onIntervalChange}
-                onKeyDown={this.onReturnKeyDown}
-                value={interval}
-              />
-            </div>
-          </div>
-        </PromQueryField>
-      </div>
-    );
   }
+
+  function onReturnKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') {
+      onRunQuery();
+    }
+  }
+
+  return (
+    <PromQueryField
+      datasource={datasource}
+      query={query}
+      onRunQuery={onRunQuery}
+      onChange={onChange}
+      history={history}
+      data={data}
+      ExtraFieldElement={
+        <PromExploreExtraField
+          label={'Step'}
+          onChangeFunc={onStepChange}
+          onKeyDownFunc={onReturnKeyDown}
+          value={query.interval || ''}
+          hasTooltip={true}
+          tooltipContent={'Needs to be a valid time unit string, for example 5s, 1m, 3h, 1d, 1y'}
+        />
+      }
+    />
+  );
 }
+
+export default memo(PromExploreQueryEditor);