Explore: Fix height on horizontal drawer and query inspector (#47832)

* Move tab height and horizontal drawer height to themable variables so they can be referred to. Add a default height to tabbed container so it can set an explicit height. Add overflow: scroll to inspector content

* Use height variable that changes on resize

* Use css to set height

packages/grafana-data/src/themes/createComponents.ts

@@ -39,6 +39,12 @@ export interface ThemeComponents {
   sidemenu: {
     width: number;
   };
+  menuTabs: {
+    height: number;
+  };
+  horizontalDrawer: {
+    defaultHeight: number;
+  };
 }
 
 export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents {
@@ -82,5 +88,11 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
     sidemenu: {
       width: 48,
     },
+    menuTabs: {
+      height: 41,
+    },
+    horizontalDrawer: {
+      defaultHeight: 400,
+    },
   };
 }

packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx

@@ -28,7 +28,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
     tabContent: css`
       padding: ${theme.spacing(2)};
       background-color: ${theme.colors.background.primary};
-      height: 100%;
+      height: calc(100% - ${theme.components.menuTabs.height}px);
     `,
     close: css`
       position: absolute;

packages/grafana-ui/src/components/Tabs/TabsBar.tsx

@@ -23,7 +23,7 @@ const getTabsBarStyles = stylesFactory((theme: GrafanaTheme2, hideBorder = false
     tabs: css`
       position: relative;
       display: flex;
-      height: 41px;
+      height: ${theme.components.menuTabs.height}px;
     `,
   };
 });

public/app/features/explore/ExploreDrawer.tsx

@@ -9,9 +9,9 @@ import { stylesFactory, useTheme2 } from '@grafana/ui';
 
 // Types
 
-const drawerSlide = keyframes`
+const drawerSlide = (theme: GrafanaTheme2) => keyframes`
   0% {
-    transform: translateY(400px);
+    transform: translateY(${theme.components.horizontalDrawer.defaultHeight}px);
   }
 
   100% {
@@ -32,7 +32,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
     `,
     drawerActive: css`
       opacity: 1;
-      animation: 0.5s ease-out ${drawerSlide};
+      animation: 0.5s ease-out ${drawerSlide(theme)};
     `,
     rzHandle: css`
       background: ${theme.colors.secondary.main};
@@ -66,7 +66,7 @@ export function ExploreDrawer(props: Props) {
   return (
     <Resizable
       className={cx(styles.container, styles.drawerActive)}
-      defaultSize={{ width: drawerWidth, height: '400px' }}
+      defaultSize={{ width: drawerWidth, height: `${theme.components.horizontalDrawer.defaultHeight}px` }}
       handleClasses={{ top: styles.rzHandle }}
       enable={{
         top: true,

public/app/features/explore/ExploreQueryInspector.tsx

@@ -73,7 +73,7 @@ export function ExploreQueryInspector(props: Props) {
     tabs.push(errorTab);
   }
   return (
-    <ExploreDrawer width={width} onResize={() => {}}>
+    <ExploreDrawer width={width}>
       <TabbedContainer tabs={tabs} onClose={onClose} closeIconTooltip="Close query inspector" />
     </ExploreDrawer>
   );

public/app/features/explore/RichHistory/RichHistoryContainer.tsx

@@ -1,6 +1,7 @@
 // Libraries
 import React, { useEffect, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
+import { useTheme2 } from '@grafana/ui';
 
 // Types
 import { ExploreItemState, StoreState } from 'app/types';
@@ -54,7 +55,8 @@ interface OwnProps {
 export type Props = ConnectedProps<typeof connector> & OwnProps;
 
 export function RichHistoryContainer(props: Props) {
-  const [height, setHeight] = useState(400);
+  const theme = useTheme2();
+  const [height, setHeight] = useState(theme.components.horizontalDrawer.defaultHeight);
 
   const {
     richHistory,

public/app/features/inspector/styles.ts

@@ -26,6 +26,7 @@ export const getPanelInspectorStyles = stylesFactory(() => {
     content: css`
       flex-grow: 1;
       height: 100%;
+      overflow: scroll;
     `,
     editor: css`
       font-family: monospace;