From 55784a2201cc7daf9c61cc8eee777c228161b956 Mon Sep 17 00:00:00 2001
From: Adam Yeats <16296989+adamyeats@users.noreply.github.com>
Date: Tue, 18 Jul 2023 16:51:44 +0200
Subject: [PATCH] [v10.0.x] AzureMonitor: Fix resource selection growing over
 resource selection table (#71862)

AzureMonitor: Fix resource selection growing over resource selection table (#71463)

* AzureMonitor: Fix resource selection growing over resource selection table

* Unstick ResourcePicker footer, fix sizing

(cherry picked from commit 409eae6ff974199c569df58ac2c55edde7377897)
---
 .yarn/sdks/prettier/index.js                  |  6 +-
 .../ResourcePicker/ResourcePicker.tsx         | 55 +++++++++----------
 .../components/ResourcePicker/styles.ts       | 14 +++--
 3 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/.yarn/sdks/prettier/index.js b/.yarn/sdks/prettier/index.js
index 81f9bec5fe8..8758e367a72 100755
--- a/.yarn/sdks/prettier/index.js
+++ b/.yarn/sdks/prettier/index.js
@@ -11,10 +11,10 @@ const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require prettier/index.js
+    // Setup the environment to be able to require prettier
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real prettier/index.js your application uses
-module.exports = absRequire(`prettier/index.js`);
+// Defer to the real prettier your application uses
+module.exports = absRequire(`prettier`);
diff --git a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/ResourcePicker.tsx b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/ResourcePicker.tsx
index 1a11b909b59..f33b3700d81 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/ResourcePicker.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/ResourcePicker.tsx
@@ -2,7 +2,7 @@ import { cx } from '@emotion/css';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useEffectOnce } from 'react-use';
 
-import { Alert, Button, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+import { Alert, Button, LoadingPlaceholder, Modal, useStyles2 } from '@grafana/ui';
 
 import { selectors } from '../../e2e/selectors';
 import ResourcePickerData, { ResourcePickerQueryType } from '../../resourcePicker/resourcePickerData';
@@ -170,7 +170,7 @@ const ResourcePicker = ({
   );
 
   return (
-    <div>
+    <>
       <Search searchFn={handleSearch} />
       {shouldShowLimitFlag ? (
         <p className={styles.resultLimit}>Showing first {resourcePickerData.resultLimit} results</p>
@@ -188,7 +188,7 @@ const ResourcePicker = ({
         </thead>
       </table>
 
-      <div className={styles.tableScroller}>
+      <div className={cx(styles.scrollableTable, styles.tableScroller)}>
         <table className={styles.table}>
           <tbody>
             {isLoading && (
@@ -223,12 +223,12 @@ const ResourcePicker = ({
         </table>
       </div>
 
-      <div className={styles.selectionFooter}>
+      <footer className={styles.selectionFooter}>
         {selectedRows.length > 0 && (
           <>
             <h5>Selection</h5>
 
-            <div className={styles.tableScroller}>
+            <div className={cx(styles.scrollableTable, styles.selectedTableScroller)}>
               <table className={styles.table}>
                 <tbody>
                   {selectedRows.map((row) => (
@@ -263,30 +263,29 @@ const ResourcePicker = ({
 
         <Space v={2} />
 
-        <Button
-          disabled={!!errorMessage || !internalSelected.every(isValid)}
-          onClick={handleApply}
-          data-testid={selectors.components.queryEditor.resourcePicker.apply.button}
-        >
-          Apply
-        </Button>
+        {errorMessage && (
+          <>
+            <Space v={2} />
+            <Alert severity="error" title="An error occurred while requesting resources from Azure Monitor">
+              {errorMessage}
+            </Alert>
+          </>
+        )}
 
-        <Space layout="inline" h={1} />
-
-        <Button onClick={onCancel} variant="secondary">
-          Cancel
-        </Button>
-      </div>
-
-      {errorMessage && (
-        <>
-          <Space v={2} />
-          <Alert severity="error" title="An error occurred while requesting resources from Azure Monitor">
-            {errorMessage}
-          </Alert>
-        </>
-      )}
-    </div>
+        <Modal.ButtonRow>
+          <Button onClick={onCancel} variant="secondary" fill="outline">
+            Cancel
+          </Button>
+          <Button
+            disabled={!!errorMessage || !internalSelected.every(isValid)}
+            onClick={handleApply}
+            data-testid={selectors.components.queryEditor.resourcePicker.apply.button}
+          >
+            Apply
+          </Button>
+        </Modal.ButtonRow>
+      </footer>
+    </>
   );
 };
 
diff --git a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/styles.ts b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/styles.ts
index ecc2992500b..c3d88c9849b 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/styles.ts
+++ b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/styles.ts
@@ -6,11 +6,19 @@ const getStyles = (theme: GrafanaTheme2) => ({
   table: css({
     width: '100%',
     tableLayout: 'fixed',
+    overflow: 'scroll',
+  }),
+
+  scrollableTable: css({
+    overflow: 'auto',
   }),
 
   tableScroller: css({
-    maxHeight: '50vh',
-    overflow: 'auto',
+    maxHeight: '16vh',
+  }),
+
+  selectedTableScroller: css({
+    maxHeight: '13vh',
   }),
 
   header: css({
@@ -81,8 +89,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
   }),
 
   selectionFooter: css({
-    position: 'sticky',
-    bottom: 0,
     background: theme.colors.background.primary,
     paddingTop: theme.spacing(2),
   }),