Prometheus: Set default value for query expr (#40330)

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

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useCallback } from 'react';
+import React, { memo, useCallback } from 'react';
 import { usePrevious } from 'react-use';
 import { isEqual } from 'lodash';
 import { css, cx } from '@emotion/css';
@@ -28,17 +28,6 @@ export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
 
     const prevQuery = usePrevious(query);
 
-    // Setting default values
-    useEffect(() => {
-      if (query.exemplar === undefined) {
-        onChange({ ...query, exemplar: true });
-      }
-
-      if (!query.instant && !query.range) {
-        onChange({ ...query, instant: true, range: true });
-      }
-    }, [onChange, query]);
-
     const onExemplarChange = useCallback(
       (exemplar: boolean) => {
         if (!isEqual(query, prevQuery) || exemplar !== query.exemplar) {

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

@@ -1,4 +1,4 @@
-import React, { memo, FC } from 'react';
+import React, { memo, FC, useEffect } from 'react';
 import { QueryEditorProps } from '@grafana/data';
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery, PromOptions } from '../types';
@@ -10,6 +10,20 @@ export type Props = QueryEditorProps<PrometheusDatasource, PromQuery, PromOption
 export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
   const { range, query, data, datasource, history, onChange, onRunQuery } = props;
 
+  // Setting default values
+  useEffect(() => {
+    if (query.expr === undefined) {
+      onChange({ ...query, expr: '' });
+    }
+    if (query.exemplar === undefined) {
+      onChange({ ...query, exemplar: true });
+    }
+
+    if (!query.instant && !query.range) {
+      onChange({ ...query, instant: true, range: true });
+    }
+  }, [onChange, query]);
+
   return (
     <PromQueryField
       datasource={datasource}