Prometheus: Fix copy paste behaving as cut and paste (#28622)

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

@@ -3,7 +3,7 @@ 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';
-import { DataSourceInstanceSettings } from '@grafana/data';
+import { DataSourceInstanceSettings, dateTime } from '@grafana/data';
 import { PromOptions } from '../types';
 import { fireEvent, render, screen } from '@testing-library/react';
 
@@ -51,61 +51,89 @@ describe('PromQueryField', () => {
   });
 
   it('refreshes metrics when the data source changes', async () => {
+    const defaultProps = {
+      query: { expr: '', refId: '' },
+      onRunQuery: () => {},
+      onChange: () => {},
+      history: [],
+    };
     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 = render(
       <PromQueryField
         // @ts-ignore
         datasource={{
-          languageProvider,
+          languageProvider: makeLanguageProvider({ metrics: [metrics] }),
         }}
-        query={{ expr: '', refId: '' }}
-        onRunQuery={() => {}}
-        onChange={() => {}}
-        history={[]}
+        {...defaultProps}
       />
     );
 
-    let cascader = await queryField.findByRole('button');
-    fireEvent.keyDown(cascader, { keyCode: 40 });
-    let listNodes = screen.getAllByRole('menuitem');
-    for (const node of listNodes) {
-      expect(metrics).toContain(node.innerHTML);
-    }
+    checkMetricsInCascader(await screen.findByRole('button'), metrics);
 
     const changedMetrics = ['baz', 'moo'];
     queryField.rerender(
       <PromQueryField
+        // @ts-ignore
         datasource={{
-          //@ts-ignore
-          languageProvider: {
-            ...languageProvider,
-            metrics: changedMetrics,
-          },
+          languageProvider: makeLanguageProvider({ metrics: [changedMetrics] }),
         }}
-        query={{ expr: '', refId: '' }}
-        onRunQuery={() => {}}
-        onChange={() => {}}
-        history={[]}
+        {...defaultProps}
       />
     );
 
-    cascader = await queryField.findByRole('button');
-    fireEvent.keyDown(cascader, { keyCode: 40 });
-    listNodes = screen.getAllByRole('menuitem');
-    for (const node of listNodes) {
-      expect(changedMetrics).toContain(node.innerHTML);
-    }
+    // If we check the cascader right away it should be in loading state
+    let cascader = screen.getByRole('button');
+    expect(cascader.textContent).toContain('Loading');
+    checkMetricsInCascader(await screen.findByRole('button'), changedMetrics);
+  });
+
+  it('refreshes metrics when time range changes but dont show loading state', async () => {
+    const defaultProps = {
+      query: { expr: '', refId: '' },
+      onRunQuery: () => {},
+      onChange: () => {},
+      history: [],
+    };
+    const metrics = ['foo', 'bar'];
+    const changedMetrics = ['baz', 'moo'];
+    const range = {
+      from: dateTime('2020-10-28T00:00:00Z'),
+      to: dateTime('2020-10-28T01:00:00Z'),
+    };
+
+    const languageProvider = makeLanguageProvider({ metrics: [metrics, changedMetrics] });
+    const queryField = render(
+      <PromQueryField
+        // @ts-ignore
+        datasource={{ languageProvider }}
+        range={{
+          ...range,
+          raw: range,
+        }}
+        {...defaultProps}
+      />
+    );
+    checkMetricsInCascader(await screen.findByRole('button'), metrics);
+
+    const newRange = {
+      from: dateTime('2020-10-28T01:00:00Z'),
+      to: dateTime('2020-10-28T02:00:00Z'),
+    };
+    queryField.rerender(
+      <PromQueryField
+        // @ts-ignore
+        datasource={{ languageProvider }}
+        range={{
+          ...newRange,
+          raw: newRange,
+        }}
+        {...defaultProps}
+      />
+    );
+    let cascader = screen.getByRole('button');
+    // Should not show loading
+    expect(cascader.textContent).toContain('Metrics');
+    checkMetricsInCascader(cascader, metrics);
   });
 });
 
@@ -162,3 +190,26 @@ describe('groupMetricsByPrefix()', () => {
     ]);
   });
 });
+
+function makeLanguageProvider(options: { metrics: string[][] }) {
+  const metricsStack = [...options.metrics];
+  return ({
+    histogramMetrics: [] as any,
+    metrics: [],
+    metricsMetadata: {},
+    lookupsDisabled: false,
+    lookupMetricsThreshold: DEFAULT_LOOKUP_METRICS_THRESHOLD,
+    start() {
+      this.metrics = metricsStack.shift();
+      return Promise.resolve([]);
+    },
+  } as any) as PromQlLanguageProvider;
+}
+
+function checkMetricsInCascader(cascader: HTMLElement, metrics: string[]) {
+  fireEvent.keyDown(cascader, { keyCode: 40 });
+  let listNodes = screen.getAllByRole('menuitem');
+  for (const node of listNodes) {
+    expect(metrics).toContain(node.innerHTML);
+  }
+}