Explore: Make DataSourcePicker visible on small screens (#65149)

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

public/app/features/explore/Explore.test.tsx

@@ -11,6 +11,12 @@ import { Explore, Props } from './Explore';
 import { scanStopAction } from './state/query';
 import { createEmptyQueryResponse } from './state/utils';
 
+const resizeWindow = (x: number, y: number) => {
+  global.innerWidth = x;
+  global.innerHeight = y;
+  global.dispatchEvent(new Event('resize'));
+};
+
 const makeEmptyQueryResponse = (loadingState: LoadingState) => {
   const baseEmptyResponse = createEmptyQueryResponse();
 
@@ -143,4 +149,25 @@ describe('Explore', () => {
 
     expect(screen.getByTestId('explore-no-data')).toBeInTheDocument();
   });
+
+  describe('On small screens', () => {
+    const windowWidth = global.innerWidth,
+      windowHeight = global.innerHeight;
+
+    beforeAll(() => {
+      resizeWindow(500, 500);
+    });
+
+    afterAll(() => {
+      resizeWindow(windowWidth, windowHeight);
+    });
+
+    it('should render data source picker', async () => {
+      setup();
+
+      const dataSourcePicker = await screen.findByLabelText('Data source picker select container');
+
+      expect(dataSourcePicker).toBeInTheDocument();
+    });
+  });
 });

public/app/features/explore/ExploreToolbar.tsx

@@ -286,6 +286,7 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
           title={exploreId === ExploreId.left && !isTopnav ? 'Explore' : undefined}
           pageIcon={exploreId === ExploreId.left && !isTopnav ? 'compass' : undefined}
           leftItems={toolbarLeftItems}
+          forceShowLeftItems
         >
           {this.renderActions()}
         </PageToolbar>