From b30d9f2732e3c93ee8f1c83ab66e71bcdb7d285d Mon Sep 17 00:00:00 2001
From: Kristina <kristina.durivage@grafana.com>
Date: Mon, 25 Apr 2022 07:48:55 -0500
Subject: [PATCH] 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 | 12 ++++++++++++
 .../components/TabbedContainer/TabbedContainer.tsx   |  2 +-
 packages/grafana-ui/src/components/Tabs/TabsBar.tsx  |  2 +-
 public/app/features/explore/ExploreDrawer.tsx        |  8 ++++----
 .../app/features/explore/ExploreQueryInspector.tsx   |  2 +-
 .../explore/RichHistory/RichHistoryContainer.tsx     |  4 +++-
 public/app/features/inspector/styles.ts              |  1 +
 7 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts
index fefd3dbf101..51603f036c7 100644
--- a/packages/grafana-data/src/themes/createComponents.ts
+++ b/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,
+    },
   };
 }
diff --git a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
index 0baad2778c7..f4a14cfe11e 100644
--- a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
+++ b/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;
diff --git a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
index 73acd2a67bc..6cfb03409be 100644
--- a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
+++ b/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;
     `,
   };
 });
diff --git a/public/app/features/explore/ExploreDrawer.tsx b/public/app/features/explore/ExploreDrawer.tsx
index 8220dc748d9..10fa3489d5e 100644
--- a/public/app/features/explore/ExploreDrawer.tsx
+++ b/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,
diff --git a/public/app/features/explore/ExploreQueryInspector.tsx b/public/app/features/explore/ExploreQueryInspector.tsx
index 705b31227f0..f231bd9a33d 100644
--- a/public/app/features/explore/ExploreQueryInspector.tsx
+++ b/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>
   );
diff --git a/public/app/features/explore/RichHistory/RichHistoryContainer.tsx b/public/app/features/explore/RichHistory/RichHistoryContainer.tsx
index 0824dae0aac..8f47865710d 100644
--- a/public/app/features/explore/RichHistory/RichHistoryContainer.tsx
+++ b/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,
diff --git a/public/app/features/inspector/styles.ts b/public/app/features/inspector/styles.ts
index 66aef0e653d..123ccb131a7 100644
--- a/public/app/features/inspector/styles.ts
+++ b/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;