Auth: Add No basic role UI (#72561)

* Render new No Basic Role

* Add Tooltip to dropdown menu

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

@@ -1,14 +1,13 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Icon, RadioButtonGroup, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';
+import { Icon, RadioButtonList, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';
 import { OrgRole } from 'app/types';
 
 import { getStyles } from './styles';
 
-const BasicRoles = Object.values(OrgRole).filter((r) => r !== OrgRole.None);
-const BasicRoleOption: Array<SelectableValue<OrgRole>> = BasicRoles.map((r) => ({
-  label: r,
+const BasicRoleOption: Array<SelectableValue<OrgRole>> = Object.values(OrgRole).map((r) => ({
+  label: r === OrgRole.None ? 'No basic role' : r,
   value: r,
 }));
 
@@ -17,9 +16,10 @@ interface Props {
   onChange: (value: OrgRole) => void;
   disabled?: boolean;
   disabledMesssage?: string;
+  tooltipMessage?: string;
 }
 
-export const BuiltinRoleSelector = ({ value, onChange, disabled, disabledMesssage }: Props) => {
+export const BuiltinRoleSelector = ({ value, onChange, disabled, disabledMesssage, tooltipMessage }: Props) => {
   const styles = useStyles2(getStyles);
   const theme = useTheme2();
 
@@ -32,13 +32,18 @@ export const BuiltinRoleSelector = ({ value, onChange, disabled, disabledMesssag
             <Icon name="question-circle" />
           </Tooltip>
         )}
+        {!disabled && tooltipMessage && (
+          <Tooltip placement="right-end" interactive={true} content={tooltipMessage}>
+            <Icon name="info-circle" size="xs" />
+          </Tooltip>
+        )}
       </div>
-      <RadioButtonGroup
+      <RadioButtonList
+        name="Basic Role Selector"
         className={styles.basicRoleSelector}
         options={BasicRoleOption}
         value={value}
         onChange={onChange}
-        fullWidth={true}
         disabled={disabled}
       />
     </>

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

@@ -164,7 +164,7 @@ export const RolePicker = ({
       }}
       ref={ref}
     >
-      <ClickOutsideWrapper onClick={onClickOutside}>
+      <ClickOutsideWrapper onClick={onClickOutside} useCapture={true}>
         <RolePickerInput
           basicRole={selectedBuiltInRole}
           appliedRoles={selectedRoles}

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

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { Button, CustomScrollbar, HorizontalGroup, useStyles2, useTheme2 } from '@grafana/ui';
 import { getSelectStyles } from '@grafana/ui/src/components/Select/getSelectStyles';
+import { contextSrv } from 'app/core/core';
 import { OrgRole, Role } from 'app/types';
 
 import { BuiltinRoleSelector } from './BuiltinRoleSelector';
@@ -34,6 +35,11 @@ const fixedRoleGroupNames: Record<string, string> = {
   current: 'Current org',
 };
 
+const noBasicRoleFlag = contextSrv.licensedAccessControlEnabled();
+const tooltipMessage = noBasicRoleFlag
+  ? 'You can now select the "No basic role" option and add permissions to your custom needs.'
+  : undefined;
+
 interface RolePickerMenuProps {
   basicRole?: OrgRole;
   options: Role[];
@@ -207,6 +213,7 @@ export const RolePickerMenu = ({
                 onChange={onSelectedBuiltinRoleChange}
                 disabled={basicRoleDisabled}
                 disabledMesssage={disabledMessage}
+                tooltipMessage={tooltipMessage}
               />
             </div>
           )}

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

@@ -86,7 +86,7 @@ export const getStyles = (theme: GrafanaTheme2) => {
       color: ${theme.colors.text.disabled};
     `,
     basicRoleSelector: css`
-      margin: ${theme.spacing(1, 1.25, 1, 1)};
+      margin: ${theme.spacing(1, 1.25, 1, 1.5)};
     `,
     subMenuPortal: css`
       height: 100%;

public/app/features/org/UserInviteForm.tsx

@@ -1,19 +1,40 @@
 import React from 'react';
 
-import { locationUtil } from '@grafana/data';
+import { locationUtil, SelectableValue } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
 import { locationService } from '@grafana/runtime';
-import { Button, LinkButton, Input, Switch, RadioButtonGroup, Form, Field, InputControl, FieldSet } from '@grafana/ui';
+import {
+  Button,
+  LinkButton,
+  Input,
+  Switch,
+  RadioButtonGroup,
+  Form,
+  Field,
+  InputControl,
+  FieldSet,
+  Icon,
+  Tooltip,
+  Label,
+} from '@grafana/ui';
 import { getConfig } from 'app/core/config';
+import { contextSrv } from 'app/core/core';
 import { OrgRole, useDispatch } from 'app/types';
 
 import { addInvitee } from '../invites/state/actions';
 
-const roles = [
-  { label: 'Viewer', value: OrgRole.Viewer },
-  { label: 'Editor', value: OrgRole.Editor },
-  { label: 'Admin', value: OrgRole.Admin },
-];
+const noBasicRoleFlag = contextSrv.licensedAccessControlEnabled();
+
+const tooltipMessage = noBasicRoleFlag
+  ? 'You can now select the "No basic role" option and add permissions to your custom needs.'
+  : undefined;
+
+const roles: Array<SelectableValue<OrgRole>> = Object.values(OrgRole)
+  .filter((r) => noBasicRoleFlag || r !== OrgRole.None)
+  .map((r) => ({
+    label: r === OrgRole.None ? 'No basic role' : r,
+    value: r,
+  }));
 
 export interface FormModel {
   role: OrgRole;
@@ -54,7 +75,21 @@ export const UserInviteForm = () => {
               <Field invalid={!!errors.name} label="Name">
                 <Input {...register('name')} placeholder="(optional)" />
               </Field>
-              <Field invalid={!!errors.role} label="Role">
+              <Field
+                invalid={!!errors.role}
+                label={
+                  <Label>
+                    <Stack gap={0.5}>
+                      <span>Role</span>
+                      {tooltipMessage && (
+                        <Tooltip placement="right-end" interactive={true} content={<>{tooltipMessage}</>}>
+                          <Icon name="info-circle" size="xs" />
+                        </Tooltip>
+                      )}
+                    </Stack>
+                  </Label>
+                }
+              >
                 <InputControl
                   render={({ field: { ref, ...field } }) => <RadioButtonGroup {...field} options={roles} />}
                   control={control}