Loki: Fix fetching of second label set for the streams selector (#46898)

* Fix fetching of labels

* Add test

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen, getAllByRole, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LokiQueryBuilder } from './LokiQueryBuilder';
+import { LokiDatasource } from '../../datasource';
+import { LokiVisualQuery } from '../types';
+import { PanelData } from '@grafana/data';
+
+const defaultQuery: LokiVisualQuery = {
+  labels: [{ op: '=', label: 'baz', value: 'bar' }],
+  operations: [],
+};
+
+describe('LokiQueryBuilder', () => {
+  it('tries to load labels when no labels are selected', async () => {
+    const { datasource } = setup();
+    datasource.languageProvider.fetchSeriesLabels = jest.fn().mockReturnValue({ job: ['a'], instance: ['b'] });
+    userEvent.click(screen.getByLabelText('Add'));
+    const labels = screen.getByText(/Labels/);
+    const selects = getAllByRole(labels.parentElement!, 'combobox');
+    userEvent.click(selects[3]);
+    await waitFor(() => expect(screen.getByText('job')).toBeInTheDocument());
+  });
+});
+
+function setup(query: LokiVisualQuery = defaultQuery, data?: PanelData) {
+  const datasource = new LokiDatasource(
+    {
+      url: '',
+      jsonData: {},
+      meta: {} as any,
+    } as any,
+    undefined,
+    undefined
+  );
+  const props = {
+    datasource,
+    onRunQuery: () => {},
+    onChange: () => {},
+    data,
+  };
+
+  const { container } = render(<LokiQueryBuilder {...props} query={query} />);
+  return { datasource, container };
+}

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

@@ -36,7 +36,8 @@ export const LokiQueryBuilder = React.memo<Props>(({ datasource, query, nested,
     }
 
     const expr = lokiQueryModeller.renderLabels(labelsToConsider);
-    return await datasource.languageProvider.fetchSeriesLabels(expr);
+    const series = await datasource.languageProvider.fetchSeriesLabels(expr);
+    return Object.keys(series).sort();
   };
 
   const onGetLabelValues = async (forLabel: Partial<QueryBuilderLabelFilter>) => {