Prometheus: Refresh query field metrics on data source change (#24116)

... in `componentDidUpdate`, not just `componentDidMount`.

Also unify query field behavior of Explore with Dashboard - when the
data source changes, it doesn't unmount but instead refreshes its
metrics.

Fixes #23162

public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx

@@ -1,4 +1,67 @@
-import { groupMetricsByPrefix, RECORDING_RULES_GROUP } from './PromQueryField';
+import { mount } from 'enzyme';
+// @ts-ignore
+import RCCascader from 'rc-cascader';
+import React from 'react';
+import PromQlLanguageProvider, { DEFAULT_LOOKUP_METRICS_THRESHOLD } from '../language_provider';
+import PromQueryField, { groupMetricsByPrefix, RECORDING_RULES_GROUP } from './PromQueryField';
+
+describe('PromQueryField', () => {
+  beforeAll(() => {
+    // @ts-ignore
+    window.getSelection = () => {};
+  });
+
+  it('refreshes metrics when the data source changes', async () => {
+    const metrics = ['foo', 'bar'];
+    const languageProvider = ({
+      histogramMetrics: [] as any,
+      metrics,
+      metricsMetadata: {},
+      lookupsDisabled: false,
+      lookupMetricsThreshold: DEFAULT_LOOKUP_METRICS_THRESHOLD,
+      start: () => {
+        return Promise.resolve([]);
+      },
+    } as unknown) as PromQlLanguageProvider;
+
+    const queryField = mount(
+      <PromQueryField
+        // @ts-ignore
+        datasource={{
+          languageProvider,
+        }}
+        query={{ expr: '', refId: '' }}
+        onRunQuery={() => {}}
+        onChange={() => {}}
+        history={[]}
+      />
+    );
+    await Promise.resolve();
+
+    const cascader = queryField.find<RCCascader>(RCCascader);
+    cascader.simulate('click');
+    const cascaderNode: HTMLElement = cascader.instance().getPopupDOMNode();
+
+    for (const item of Array.from(cascaderNode.getElementsByTagName('li'))) {
+      expect(metrics.includes(item.innerHTML)).toBe(true);
+    }
+
+    const changedMetrics = ['baz', 'moo'];
+    queryField.setProps({
+      datasource: {
+        languageProvider: {
+          ...languageProvider,
+          metrics: changedMetrics,
+        },
+      },
+    });
+    await Promise.resolve();
+
+    for (const item of Array.from(cascaderNode.getElementsByTagName('li'))) {
+      expect(changedMetrics.includes(item.innerHTML)).toBe(true);
+    }
+  });
+});
 
 describe('groupMetricsByPrefix()', () => {
   it('returns an empty group for no metrics', () => {