RolePicker: UI improvements (#49397)

* RolePicker: Adjust input and display widths

* RolePicker: Use forwardRef

* RolePicker: Apply input styles to roles display

public/app/core/components/RolePicker/RolePicker.tsx

@@ -58,7 +58,7 @@ export const RolePicker = ({
     } else {
       setOffset(-offset);
     }
-  }, [isOpen]);
+  }, [isOpen, selectedRoles]);
 
   const onOpen = useCallback(
     (event: FormEvent<HTMLElement>) => {

public/app/core/components/RolePicker/RolePickerInput.tsx

@@ -7,6 +7,7 @@ import { useStyles2, getInputStyles, sharedInputStyle, styleMixins, Tooltip, Ico
 import { Role } from '../../../types';
 
 import { ValueContainer } from './ValueContainer';
+import { ROLE_PICKER_WIDTH } from './constants';
 
 const stopPropagation = (event: React.MouseEvent<HTMLDivElement>) => event.stopPropagation();
 
@@ -51,7 +52,7 @@ export const RolePickerInput = ({
   const numberOfRoles = appliedRoles.length;
 
   return !isFocused ? (
-    <div className={styles.selectedRoles} onMouseDown={onOpen}>
+    <div className={cx(styles.wrapper, styles.selectedRoles)} onMouseDown={onOpen}>
       {showBuiltInRole && <ValueContainer>{builtInRole}</ValueContainer>}
       <RolesLabel appliedRoles={appliedRoles} numberOfRoles={numberOfRoles} showBuiltInRole={showBuiltInRole} />
     </div>
@@ -104,18 +105,12 @@ export const RolesLabel = ({ showBuiltInRole, numberOfRoles, appliedRoles }: Rol
             </div>
           }
         >
-          <div>
-            <ValueContainer>{`${showBuiltInRole ? '+' : ''}${numberOfRoles} role${
-              numberOfRoles > 1 ? 's' : ''
-            }`}</ValueContainer>
-          </div>
+          <ValueContainer>{`${showBuiltInRole ? '+' : ''}${numberOfRoles} role${
+            numberOfRoles > 1 ? 's' : ''
+          }`}</ValueContainer>
         </Tooltip>
       ) : (
-        !showBuiltInRole && (
-          <div>
-            <ValueContainer>No roles assigned</ValueContainer>
-          </div>
-        )
+        !showBuiltInRole && <ValueContainer>No roles assigned</ValueContainer>
       )}
     </>
   );
@@ -140,7 +135,7 @@ const getRolePickerInputStyles = (
         `,
       disabled && styles.inputDisabled,
       css`
-        width: 520px;
+        width: ${ROLE_PICKER_WIDTH}px;
         min-height: 32px;
         height: auto;
         flex-direction: row;

public/app/core/components/RolePicker/ValueContainer.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { ReactNode } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { getInputStyles, Icon, IconName, useStyles2, getSelectStyles } from '@grafana/ui';
@@ -8,15 +8,17 @@ export interface Props {
   children: ReactNode;
   iconName?: IconName;
 }
-export const ValueContainer = ({ children, iconName }: Props) => {
+export const ValueContainer = forwardRef<HTMLDivElement, Props>(({ children, iconName }, ref) => {
   const styles = useStyles2(getStyles);
   return (
-    <div className={styles.container}>
+    <div className={styles.container} ref={ref}>
       {iconName && <Icon name={iconName} size="xs" />}
       {children}
     </div>
   );
-};
+});
+
+ValueContainer.displayName = 'ValueContainer';
 
 const getStyles = (theme: GrafanaTheme2) => {
   const { prefix } = getInputStyles({ theme });

public/app/core/components/RolePicker/constants.ts

@@ -1 +1,2 @@
 export const MENU_MAX_HEIGHT = 300; // max height for the picker's dropdown menu
+export const ROLE_PICKER_WIDTH = 360;