Prometheus: Refactor metrics modal to handle high cardinality metrics (#108437)

* remove redux from PromQueryBuilderContainer

* remove export

* housekeeping

* introduce MetricsModalContext to replace redux

* handle result pagination

* add search related values in context

* handle filtering

* handle search

* handle search and highlighting

* cleaning up

* better helpers

* remove unused types

* reorganize the code

* update settings

* improve search and fetch

* remove unused styles

* linting

* fix tests

* update

* lint

* i18n

* import order

* try to fix the test

* remove start call from variable editor

* fix highlighter

* fix pagination alignment

* make the entire row clickable and remove select button

* review updates

* remove settings

* use ufuzzy search

* fix tests

* use case-insensitive search

* review fixes

* fix pagination

* improve readability

packages/grafana-prometheus/src/components/VariableQueryEditor.test.tsx

@@ -3,7 +3,6 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { select } from 'react-select-event';
 
-import { dateTime, TimeRange } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { PrometheusDatasource } from '../datasource';
@@ -376,24 +375,4 @@ 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);
-  });
 });

packages/grafana-prometheus/src/components/VariableQueryEditor.tsx

@@ -77,11 +77,6 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
   // 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);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   useEffect(() => {
     if (!query) {
       return;