From 60217d8dfdb791f0724998555f6e760e4bdec880 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 21 Feb 2025 14:26:32 +0000
Subject: [PATCH] Drawer: undeprecate `scrollableContent` (#100998)

* update Drawer

* fix unit tests

* update comment
---
 packages/grafana-ui/src/components/Drawer/Drawer.tsx    | 6 ++++--
 public/app/features/explore/spec/helper/assert.ts       | 8 ++++----
 public/app/features/explore/spec/helper/interactions.ts | 4 ++--
 public/app/features/explore/spec/helper/setup.tsx       | 5 +++++
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index d4ef3502698..3e9afa787bf 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -45,9 +45,10 @@ export interface Props {
   size?: 'sm' | 'md' | 'lg';
   /** Tabs */
   tabs?: React.ReactNode;
-  // TODO remove this prop next major version
   /**
-   * @deprecated this is now default behaviour. content is always scrollable.
+   * Whether the content should be wrapped in a ScrollContainer
+   * Only change this if you intend to manage scroll behaviour yourself
+   * (e.g. having a split pane with independent scrolling)
    **/
   scrollableContent?: boolean;
   /** Callback for closing the drawer */
@@ -337,6 +338,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       padding: theme.spacing(2),
       height: '100%',
       flexGrow: 1,
+      minHeight: 0,
     }),
     tabsWrapper: css({
       label: 'drawer-tabs',
diff --git a/public/app/features/explore/spec/helper/assert.ts b/public/app/features/explore/spec/helper/assert.ts
index 664109527db..9046747e7fa 100644
--- a/public/app/features/explore/spec/helper/assert.ts
+++ b/public/app/features/explore/spec/helper/assert.ts
@@ -1,6 +1,6 @@
 import { waitFor } from '@testing-library/react';
 
-import { withinQueryHistory } from './setup';
+import { withinQueryHistory, withinQueryLibrary } from './setup';
 
 export const assertQueryHistoryExists = async (query: string) => {
   const selector = withinQueryHistory();
@@ -23,10 +23,10 @@ export const assertQueryHistory = async (expectedQueryTexts: string[]) => {
 };
 
 export const assertQueryLibraryTemplateExists = async (datasource: string, description: string) => {
-  const selector = withinQueryHistory();
+  const selector = withinQueryLibrary();
   await waitFor(() => {
-    const cell = selector.getByRole('cell', {
-      name: new RegExp(`query template for ${datasource.toLowerCase()}: ${description.toLowerCase()}`, 'i'),
+    const cell = selector.getByRole('radio', {
+      name: description,
     });
 
     expect(cell).toBeInTheDocument();
diff --git a/public/app/features/explore/spec/helper/interactions.ts b/public/app/features/explore/spec/helper/interactions.ts
index 73e24da2b1c..dce38c66ef5 100644
--- a/public/app/features/explore/spec/helper/interactions.ts
+++ b/public/app/features/explore/spec/helper/interactions.ts
@@ -43,8 +43,8 @@ export const openQueryLibrary = async () => {
   const button = screen.getByRole('button', { name: 'Add query from library' });
   await userEvent.click(button);
   await waitFor(async () => {
-    screen.getByRole('tab', {
-      name: /query library/i,
+    screen.getByRole('dialog', {
+      name: 'Drawer title Query library',
     });
   });
 };
diff --git a/public/app/features/explore/spec/helper/setup.tsx b/public/app/features/explore/spec/helper/setup.tsx
index 89b555b3126..9b5870691e3 100644
--- a/public/app/features/explore/spec/helper/setup.tsx
+++ b/public/app/features/explore/spec/helper/setup.tsx
@@ -333,6 +333,11 @@ export const withinQueryHistory = () => {
   return within(container);
 };
 
+export const withinQueryLibrary = () => {
+  const container = screen.getByRole('dialog', { name: 'Drawer title Query library' });
+  return within(container);
+};
+
 const exploreTestsHelper: { setupExplore: typeof setupExplore; tearDownExplore?: (options?: TearDownOptions) => void } =
   {
     setupExplore,