Fix: Use dashboard time range in prometheus variable editor (#78950)

Use dashboard time range in variable editor

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

@@ -3,6 +3,8 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
 
+import { dateTime, TimeRange } from '@grafana/data';
+
 import { PrometheusDatasource } from '../datasource';
 import PrometheusLanguageProvider from '../language_provider';
 import { migrateVariableEditorBackToVariableSupport } from '../migrations/variableMigration';
@@ -368,4 +370,24 @@ describe('PromVariableQueryEditor', () => {
       qryType: 5,
     });
   });
+
+  test('Calls language provider with the time range received in props', async () => {
+    const now = dateTime('2023-09-16T21:26:00Z');
+    const range: TimeRange = {
+      from: dateTime(now).subtract(2, 'days'),
+      to: now,
+      raw: {
+        from: 'now-2d',
+        to: 'now',
+      },
+    };
+    props.range = range;
+
+    const languageProviderStartMock = jest.fn();
+    props.datasource.languageProvider.start = languageProviderStartMock;
+
+    render(<PromVariableQueryEditor {...props} />);
+
+    expect(languageProviderStartMock).toHaveBeenCalledWith(range);
+  });
 });

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

@@ -33,7 +33,7 @@ export type Props = QueryEditorProps<PrometheusDatasource, PromQuery, PromOption
 
 const refId = 'PrometheusVariableQueryEditor-VariableQuery';
 
-export const PromVariableQueryEditor = ({ onChange, query, datasource }: Props) => {
+export const PromVariableQueryEditor = ({ onChange, query, datasource, range }: Props) => {
   // to select the query type, i.e. label_names, label_values, etc.
   const [qryType, setQryType] = useState<number | undefined>(undefined);
   // list of variables for each function
@@ -59,6 +59,10 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource }: Props)
   // label filters have been added as a filter for metrics in label values query type
   const [labelFilters, setLabelFilters] = useState<QueryBuilderLabelFilter[]>([]);
 
+  useEffect(() => {
+    datasource.languageProvider.start(range);
+  }, [datasource.languageProvider, range]);
+
   useEffect(() => {
     if (!query) {
       return;