Explore: Move Query History to be screen wide (#84321)

* WIP

* Use splitpanewrapper for drawer

* Get rich history pulling from multiple datasources

* highlight pane

* Fix datasource data handling

* create ds/explore map, move around ds lookup

* Handle no filters

* Fix tests and some errors

* Fix context menu issue

* (Poorly) enable scrolling, fix onClose to function

* Remove highlighting, use legacy key, fix casing

* fix filtering to handle non-simple data

* Fix linter, add translations

* Fixing tests~~

* Move to explore drawer and fix some more tests

* Kinda fix drawer stuff?

* Fix remaining card tests

* Fix test

* Fix tests

* Partially fix starred tab tests

* Fix integration tests

* Fix remaining tests 🤞

* Add a test and a clarifying comment behind a couple hooks

* Remove unused code

* Fix button styling and fix animation (but break width)

* Make Drawer using parent width (100%)

* Fix tests and some small catches

* Add tests for selectExploreDSMaps selector

---------

Co-authored-by: Piotr Jamroz <pm.jamroz@gmail.com>

public/app/features/explore/RichHistory/RichHistoryCard.test.tsx

@@ -1,11 +1,13 @@
 import { fireEvent, render, screen, getByText, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { TestProvider } from 'test/helpers/TestProvider';
 
 import { DataSourceApi, DataSourceInstanceSettings, DataSourcePluginMeta } from '@grafana/data';
 import { DataQuery, DataSourceRef } from '@grafana/schema';
 import { MixedDatasource } from 'app/plugins/datasource/mixed/MixedDataSource';
-import { RichHistoryQuery } from 'app/types';
+import { configureStore } from 'app/store/configureStore';
+import { ExploreState, RichHistoryQuery } from 'app/types';
 import { ShowConfirmModalEvent } from 'app/types/events';
 
 import { RichHistoryCard, Props } from './RichHistoryCard';
@@ -47,7 +49,7 @@ class MockDatasourceApi<T extends DataQuery> implements DataSourceApi<T> {
     throw new Error('Method not implemented.');
   }
   getRef(): DataSourceRef {
-    throw new Error('Method not implemented.');
+    return { uid: this.uid, type: this.type };
   }
 }
 
@@ -55,7 +57,7 @@ const dsStore: Record<string, DataSourceApi> = {
   alertmanager: new MockDatasourceApi('Alertmanager', 3, 'alertmanager', 'alertmanager'),
   loki: new MockDatasourceApi('Loki', 2, 'loki', 'loki'),
   prometheus: new MockDatasourceApi<MockQuery>('Prometheus', 1, 'prometheus', 'prometheus', {
-    getQueryDisplayText: (query: MockQuery) => query.queryText || 'Unknwon query',
+    getQueryDisplayText: (query: MockQuery) => query.queryText || 'Unknown query',
   }),
   mixed: new MixedDatasource({
     id: 4,
@@ -97,6 +99,7 @@ jest.mock('app/core/utils/explore', () => ({
 
 jest.mock('app/core/app_events', () => ({
   publish: jest.fn(),
+  subscribe: jest.fn(),
 }));
 
 interface MockQuery extends DataQuery {
@@ -124,13 +127,31 @@ const setup = (propOverrides?: Partial<Props<MockQuery>>) => {
     deleteHistoryItem: deleteRichHistoryMock,
     commentHistoryItem: jest.fn(),
     setQueries: jest.fn(),
-    exploreId: 'left',
-    datasourceInstance: dsStore.loki,
+    datasourceInstances: [dsStore.loki],
   };
 
+  const store = configureStore({
+    explore: {
+      panes: {
+        left: {
+          queries: [{ query: 'query1', refId: 'A' }],
+          datasourceInstance: dsStore.loki,
+          queryResponse: {},
+          range: {
+            raw: { from: 'now-1h', to: 'now' },
+          },
+        },
+      },
+    } as unknown as ExploreState,
+  });
+
   Object.assign(props, propOverrides);
 
-  render(<RichHistoryCard {...props} />);
+  render(
+    <TestProvider store={store}>
+      <RichHistoryCard {...props} />
+    </TestProvider>
+  );
 };
 
 const starredQueryWithComment: RichHistoryQuery<MockQuery> = {
@@ -236,8 +257,11 @@ describe('RichHistoryCard', () => {
           datasourceName: 'Test datasource',
           starred: false,
           comment: '',
-          queries: [{ query: 'query1', refId: 'A', queryText: 'query1' }],
+          queries: [
+            { query: 'query1', refId: 'A', queryText: 'query1', datasource: { uid: 'prometheus', type: 'prometheus' } },
+          ],
         },
+        datasourceInstances: [dsStore.prometheus],
       });
       const copyQueriesButton = await screen.findByRole('button', { name: 'Copy query to clipboard' });
       expect(copyQueriesButton).toBeInTheDocument();
@@ -260,6 +284,7 @@ describe('RichHistoryCard', () => {
             { query: 'query2', refId: 'B', datasource: { uid: 'loki' } },
           ],
         },
+        datasourceInstances: [dsStore.loki, dsStore.prometheus, dsStore.mixed],
       });
       const copyQueriesButton = await screen.findByRole('button', { name: 'Copy query to clipboard' });
       expect(copyQueriesButton).toBeInTheDocument();
@@ -367,6 +392,7 @@ describe('RichHistoryCard', () => {
           comment: '',
           queries,
         },
+        datasourceInstances: [dsStore.loki, dsStore.prometheus, dsStore.mixed],
       });
 
       const runQueryButton = await screen.findByRole('button', { name: /run query/i });