Add new role picker to admin/users page (#40631)

* Very simple role picker

* Style radio button

* Separate component for the built-in roles selector

* Custom component instead of Select

* refactor

* Custom input for role picker

* Refactor

* Able to select built-in role

* Add checkboxes for role selector

* Filter out fixed and internal roles

* Add action buttons

* Implement role search

* Fix selecting roles

* Pass custom roles to update

* User role picker

* Some UX work on role picker

* Clear search query on close

* Blur input when closed

* Add roles counter

* Refactor

* Add disabled state for picker

* Adjust disabled styles

* Replace ChangeOrgButton with role picker on admin/users page

* Remove unused code

* Apply suggestions from code review

Suggestions from the @Clarity-89

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Refactor: fix some errors after applying review suggestions

* Show fixed roles in the picker

* Show applied fixed roles

* Fix role counter

* Fix checkbox selection

* Use specific Role type for menu options

* Fix menu when roles list is empty

* Fix radio button name

* Make fixed roles from built-in role disabled

* Make whole menu scrollable

* Add BuiltInRole type

* Simplify appliedRoles

* Simplify options and props

* Do not select and disable inherited fixed roles

* Enable selecting fixed role

* Add description tooltip

* Fix role param name

* Export common input styles from grafana/ui

* Add ValueContainer

* Use value container

* Refactor appliedRoles logic

* Optimise role rendering

* Display selected roles

* Fix tooltip position

* Use OrgRole type

* Optimise role rendering

* Use radio button from grafana UI

* Submenu WIP

* Role picker submenu WIP

* Hide role description

* Tweak styles

* Implement submenu selection

* Disable role selection if it's inherited

* Show new role picker only in Enterprise

* Fix types

* Use orgid when fetching/updating roles

* Use orgId in all access control requests

* Styles for partially checked checkbox

* Tweak group option styles

* Role picker menu: refactor

* Reorganize roles in menu

* Fix input behaviour

* Hide groups on search

* Remove unused components

* Refactor

* Fix group selection

* Remove icons from role tags

* Add spacing for menu sections

* Rename clear all to clear in submenu

* Tweak menu width

* Show changes in the input when selecting roles

* Exclude inherited roles from selection

* Increase menu height

* Change built-in role in input on select

* Include inherited roles to the built-in role selection

* refcator import

* Refactor role picker to be able to pass roles and builtin roles getters

* Add role picker to the org users page

* Show inherited builtin roles in the popup

* Filter out managed roles

* Fix displaying initial builtin roles

* Show tooltip only for non-builtin roles

* Set min width for focused input

* Do not disable inherited roles (by design)

* Only show picker if access control enabled

* Fix tests

* Only close menu on click outside or on indicator click

* Open submenu on hover

* Don't search on empty query

* Do not open/close menu on click

* Refactor

* Apply suggestions from code review

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Fix formatting

* Apply suggestions

* Add more space for close menu sign

* Tune tooltip styles

* Move tooltip to the right side of option

* Use info sign instead of question

Co-authored-by: Clarity-89 <homes89@ukr.net>
Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

packages/grafana-ui/src/components/Input/Input.tsx

@@ -25,7 +25,7 @@ export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'prefix' | 'siz
 
 interface StyleDeps {
   theme: GrafanaTheme2;
-  invalid: boolean;
+  invalid?: boolean;
   width?: number;
 }
 

packages/grafana-ui/src/components/index.ts

@@ -176,6 +176,7 @@ export { MultiSelectValueEditor } from './OptionsUI/multiSelect';
 
 // Next-gen forms
 export { Form } from './Forms/Form';
+export { sharedInputStyle } from './Forms/commonStyles';
 export { InputControl } from './InputControl';
 export { Button, LinkButton, ButtonVariant, ToolbarButton, ButtonGroup, ToolbarButtonRow } from './Button';
 export { ValuePicker } from './ValuePicker/ValuePicker';
@@ -194,15 +195,18 @@ export { InlineLabel } from './Forms/InlineLabel';
 export { InlineFieldRow } from './Forms/InlineFieldRow';
 export { FieldArray } from './Forms/FieldArray';
 
+// Select
 export { default as resetSelectStyles } from './Select/resetSelectStyles';
 export { selectOptionInTest } from './Select/test-utils';
 export * from './Select/Select';
+export { DropdownIndicator } from './Select/DropdownIndicator';
+export { getSelectStyles } from './Select/getSelectStyles';
 
 export { HorizontalGroup, VerticalGroup, Container } from './Layout/Layout';
 export { Badge, BadgeColor, BadgeProps } from './Badge/Badge';
 export { RadioButtonGroup } from './Forms/RadioButtonGroup/RadioButtonGroup';
 
-export { Input } from './Input/Input';
+export { Input, getInputStyles } from './Input/Input';
 export { FilterInput } from './FilterInput/FilterInput';
 export { FormInputSize } from './Forms/types';
 
@@ -217,7 +221,6 @@ export { RelativeTimeRangePicker } from './DateTimePickers/RelativeTimeRangePick
 export { Card, Props as CardProps, getCardStyles } from './Card/Card';
 export { CardContainer, CardContainerProps } from './Card/CardContainer';
 export { FormattedValueDisplay } from './FormattedValueDisplay/FormattedValueDisplay';
-
 export { ButtonSelect } from './Dropdown/ButtonSelect';
 export { PluginSignatureBadge, PluginSignatureBadgeProps } from './PluginSignatureBadge/PluginSignatureBadge';