From a1ff439a20bf35bfc7dbb1b9f5e89dbd4207d575 Mon Sep 17 00:00:00 2001
From: Victor Marin <36818606+mdvictor@users.noreply.github.com>
Date: Wed, 14 Feb 2024 10:00:16 +0200
Subject: [PATCH] Fix query inspector in explore to scroll to bottom (#82369)

---
 .../src/components/TabbedContainer/TabbedContainer.tsx | 10 ++++++----
 .../explore/RichHistory/RichHistoryQueriesTab.tsx      |  2 +-
 .../explore/RichHistory/RichHistoryStarredTab.tsx      |  2 +-
 public/app/features/inspector/QueryInspector.tsx       |  4 ++--
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
index 1794b1a96da..7a527bad325 100644
--- a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
+++ b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
@@ -5,7 +5,7 @@ import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
 
 import { IconButton } from '../../components/IconButton/IconButton';
 import { TabsBar, Tab, TabContent } from '../../components/Tabs';
-import { useStyles2 } from '../../themes';
+import { useStyles2, useTheme2 } from '../../themes';
 import { IconName } from '../../types/icon';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
 
@@ -25,12 +25,14 @@ export interface TabbedContainerProps {
 
 export function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose }: TabbedContainerProps) {
   const [activeTab, setActiveTab] = useState(tabs.some((tab) => tab.value === defaultTab) ? defaultTab : tabs[0].value);
+  const styles = useStyles2(getStyles);
+  const theme = useTheme2();
 
   const onSelectTab = (item: SelectableValue<string>) => {
     setActiveTab(item.value!);
   };
 
-  const styles = useStyles2(getStyles);
+  const autoHeight = `calc(100% - (${theme.components.menuTabs.height}px + ${theme.spacing(1)}))`;
 
   return (
     <div className={styles.container}>
@@ -46,7 +48,7 @@ export function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose }:
         ))}
         <IconButton className={styles.close} onClick={onClose} name="times" tooltip={closeIconTooltip ?? 'Close'} />
       </TabsBar>
-      <CustomScrollbar autoHeightMin="100%">
+      <CustomScrollbar autoHeightMin={autoHeight} autoHeightMax={autoHeight}>
         <TabContent className={styles.tabContent}>{tabs.find((t) => t.value === activeTab)?.content}</TabContent>
       </CustomScrollbar>
     </div>
@@ -60,7 +62,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   tabContent: css({
     padding: theme.spacing(2),
     backgroundColor: theme.colors.background.primary,
-    height: `calc(100% - ${theme.components.menuTabs.height}px)`,
+    height: `100%`,
   }),
   close: css({
     position: 'absolute',
diff --git a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
index cdafb001620..e118d226356 100644
--- a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
@@ -94,9 +94,9 @@ const getStyles = (theme: GrafanaTheme2, height: number) => {
     `,
     footer: css`
       height: 60px;
-      margin: ${theme.spacing(3)} auto;
       display: flex;
       justify-content: center;
+      align-items: center;
       font-weight: ${theme.typography.fontWeightLight};
       font-size: ${theme.typography.bodySmall.fontSize};
       a {
diff --git a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
index 7005ae94c90..c8b824da52d 100644
--- a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
@@ -54,9 +54,9 @@ const getStyles = (theme: GrafanaTheme2) => {
     `,
     footer: css`
       height: 60px;
-      margin-top: ${theme.spacing(3)};
       display: flex;
       justify-content: center;
+      align-items: center;
       font-weight: ${theme.typography.fontWeightLight};
       font-size: ${theme.typography.bodySmall.fontSize};
       a {
diff --git a/public/app/features/inspector/QueryInspector.tsx b/public/app/features/inspector/QueryInspector.tsx
index ad857599173..23e1fac5290 100644
--- a/public/app/features/inspector/QueryInspector.tsx
+++ b/public/app/features/inspector/QueryInspector.tsx
@@ -9,7 +9,7 @@ import { Button, ClipboardButton, JSONFormatter, LoadingPlaceholder, Stack } fro
 import { Trans } from 'app/core/internationalization';
 import { backendSrv } from 'app/core/services/backend_srv';
 
-import { getPanelInspectorStyles } from './styles';
+import { getPanelInspectorStyles2 } from './styles';
 
 interface ExecutedQueryInfo {
   refId: string;
@@ -212,7 +212,7 @@ export class QueryInspector extends PureComponent<Props, State> {
     const { allNodesExpanded, executedQueries, response } = this.state;
     const { onRefreshQuery, data } = this.props;
     const openNodes = this.getNrOfOpenNodes();
-    const styles = getPanelInspectorStyles();
+    const styles = getPanelInspectorStyles2(config.theme2);
     const haveData = Object.keys(response).length > 0;
     const isLoading = data.state === LoadingState.Loading;