Azure Monitor: Fix Resource Picker UI overflow (#34442)

* Truncate text

* Replace HorizontalGroup.

* Add loading spinner

* increase modal width

Co-authored-by: joshhunt <josh@trtr.co>

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/ResourceField.tsx

@@ -1,4 +1,6 @@
-import { Button, Icon, Modal } from '@grafana/ui';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, Icon, Modal, useStyles2 } from '@grafana/ui';
 import React, { useCallback, useEffect, useState } from 'react';
 import { AzureQueryEditorFieldProps, AzureResourceSummaryItem } from '../../types';
 import { Field } from '../Field';
@@ -22,6 +24,7 @@ function parseResourceDetails(resourceURI: string) {
 }
 
 const ResourceField: React.FC<AzureQueryEditorFieldProps> = ({ query, datasource, onQueryChange }) => {
+  const styles = useStyles2(getStyles);
   const { resource } = query.azureLogAnalytics;
 
   const [resourceComponents, setResourceComponents] = useState(parseResourceDetails(resource ?? ''));
@@ -59,7 +62,7 @@ const ResourceField: React.FC<AzureQueryEditorFieldProps> = ({ query, datasource
 
   return (
     <>
-      <Modal title="Select a resource" isOpen={pickerIsOpen} onDismiss={closePicker}>
+      <Modal className={styles.modal} title="Select a resource" isOpen={pickerIsOpen} onDismiss={closePicker}>
         <ResourcePicker
           resourcePickerData={datasource.resourcePickerData}
           resourceURI={query.azureLogAnalytics.resource!}
@@ -105,3 +108,9 @@ const Separator = () => (
 );
 
 export default ResourceField;
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  modal: css({
+    width: theme.breakpoints.values.lg,
+  }),
+});

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedRows.tsx

@@ -1,5 +1,5 @@
 import { cx } from '@emotion/css';
-import { Checkbox, HorizontalGroup, Icon, IconButton, useStyles2, useTheme2 } from '@grafana/ui';
+import { Checkbox, Icon, IconButton, LoadingPlaceholder, useStyles2, useTheme2, FadeTransition } from '@grafana/ui';
 import React, { useCallback, useEffect, useState } from 'react';
 import getStyles from './styles';
 import { EntryType, Row, RowGroup } from './types';
@@ -100,13 +100,13 @@ const NestedRow: React.FC<NestedRowProps> = ({ row, selectedRows, level, request
         />
       )}
 
-      {openStatus === 'loading' && (
+      <FadeTransition visible={openStatus === 'loading'}>
         <tr>
           <td className={cx(styles.cell, styles.loadingCell)} colSpan={3}>
-            Loading...
+            <LoadingPlaceholder text="Loading..." className={styles.spinner} />
           </td>
         </tr>
-      )}
+      </FadeTransition>
     </>
   );
 };
@@ -169,10 +169,10 @@ const NestedEntry: React.FC<NestedEntryProps> = ({
   );
 
   return (
-    <div style={{ marginLeft: level * (3 * theme.spacing.gridSize) }}>
-      <HorizontalGroup align="center" spacing="sm">
-        {/* When groups are selectable, I *think* we will want to show a 2-wide space instead
+    <div className={styles.nestedEntry} style={{ marginLeft: level * (3 * theme.spacing.gridSize) }}>
+      {/* When groups are selectable, I *think* we will want to show a 2-wide space instead
             of the collapse button for leaf rows that have no children to get them to align */}
+      <span className={styles.entryContentItem}>
         {hasChildren && (
           <IconButton
             className={styles.collapseButton}
@@ -183,11 +183,13 @@ const NestedEntry: React.FC<NestedEntryProps> = ({
         )}
 
         {isSelectable && <Checkbox onChange={handleSelectedChanged} disabled={isDisabled} value={isSelected} />}
+      </span>
 
+      <span className={styles.entryContentItem}>
         <EntryIcon entry={entry} isOpen={isOpen} />
+      </span>
 
-        {entry.name}
-      </HorizontalGroup>
+      <span className={cx(styles.entryContentItem, styles.truncated)}>{entry.name}</span>
     </div>
   );
 };

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/styles.ts

@@ -4,6 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 const getStyles = (theme: GrafanaTheme2) => ({
   table: css({
     width: '100%',
+    tableLayout: 'fixed',
   }),
 
   tableScroller: css({
@@ -30,7 +31,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
   cell: css({
     padding: theme.spacing(1, 0),
     width: '25%',
-
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
     '&:first-of-type': {
       width: '50%',
       padding: theme.spacing(1, 0, 1, 2),
@@ -42,6 +44,25 @@ const getStyles = (theme: GrafanaTheme2) => ({
   loadingCell: css({
     textAlign: 'center',
   }),
+
+  spinner: css({
+    marginBottom: 0,
+  }),
+
+  nestedEntry: css({
+    display: 'flex',
+  }),
+
+  entryContentItem: css({
+    margin: theme.spacing(0, 1, 0, 0),
+  }),
+
+  truncated: css({
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  }),
 });
 
 export default getStyles;