Loki: Make label browser accessible in query builder (#58525)

* add label browser button to query editor header

* add dynamic button label text

* add LabelBrowserModal.tsx

* toggle label browser modal on click

* pass required props to LabelBrowserModal

* add placeholder to text input

* render label browser inside of the modal

* change button based on label status

* remove label browser button from code mode

* fix element overlap in label browser

* fix undefined app in feature tracking

* remove all any types

* add tests for label browser button

* update modal component width

* update label loading function

* add tests to LabelBrowserModal

* fix broken mock datasource

* update test names

* use stack component for button spacing

* revert modal width

* update label search placeholder

* remove unused import

* add test assertion for closed modal

* remove redundant if statement

* remove unnecessary code

* update error message and fix position

* fix input placeholder text

public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { LokiDatasource } from '../../datasource';
+import { createLokiDatasource } from '../../mocks';
+import { LokiQuery } from '../../types';
+
+import { LabelBrowserModal, Props } from './LabelBrowserModal';
+
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  reportInteraction: jest.fn(),
+}));
+
+describe('LabelBrowserModal', () => {
+  let datasource: LokiDatasource, props: Props;
+
+  beforeEach(() => {
+    datasource = createLokiDatasource();
+
+    props = {
+      isOpen: true,
+      languageProvider: datasource.languageProvider,
+      query: {} as LokiQuery,
+      onClose: jest.fn(),
+      onChange: jest.fn(),
+      onRunQuery: jest.fn(),
+    };
+
+    jest.spyOn(datasource, 'metadataRequest').mockResolvedValue({});
+  });
+
+  it('renders the label browser modal when open', () => {
+    render(<LabelBrowserModal {...props} />);
+    expect(screen.getByRole('heading', { name: /label browser/i })).toBeInTheDocument();
+  });
+
+  it("doesn't render the label browser modal when closed", () => {
+    render(<LabelBrowserModal {...props} isOpen={false} />);
+    expect(screen.queryByRole('heading', { name: /label browser/i })).toBeNull();
+  });
+});

public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { CoreApp } from '@grafana/data';
+import { Modal } from '@grafana/ui';
+import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
+
+import LanguageProvider from '../../LanguageProvider';
+import { LokiLabelBrowser } from '../../components/LokiLabelBrowser';
+import { LokiQuery } from '../../types';
+
+export interface Props {
+  isOpen: boolean;
+  languageProvider: LanguageProvider;
+  query: LokiQuery;
+  app?: CoreApp;
+  onClose: () => void;
+  onChange: (query: LokiQuery) => void;
+  onRunQuery: () => void;
+}
+
+export const LabelBrowserModal = (props: Props) => {
+  const { isOpen, onClose, languageProvider, app } = props;
+
+  const LAST_USED_LABELS_KEY = 'grafana.datasources.loki.browser.labels';
+
+  const changeQuery = (value: string) => {
+    const { query, onChange, onRunQuery } = props;
+
+    const nextQuery = { ...query, expr: value };
+    onChange(nextQuery);
+    onRunQuery();
+  };
+
+  const onChange = (selector: string) => {
+    changeQuery(selector);
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} title="Label browser" onDismiss={onClose}>
+      <LocalStorageValueProvider<string[]> storageKey={LAST_USED_LABELS_KEY} defaultValue={[]}>
+        {(lastUsedLabels, onLastUsedLabelsSave, onLastUsedLabelsDelete) => {
+          return (
+            <LokiLabelBrowser
+              languageProvider={languageProvider}
+              onChange={onChange}
+              lastUsedLabels={lastUsedLabels}
+              storeLastUsedLabels={onLastUsedLabelsSave}
+              deleteLastUsedLabels={onLastUsedLabelsDelete}
+              app={app}
+            />
+          );
+        }}
+      </LocalStorageValueProvider>
+    </Modal>
+  );
+};