Access: Disable role none option if advanced access control is not enabled (#107378)

* disable role none option if advanced access control is not enabled

* filter out None instead

* fix lint

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

@@ -1,15 +1,11 @@
 import { SelectableValue } from '@grafana/data';
 import { Trans } from '@grafana/i18n';
 import { Icon, RadioButtonList, Tooltip, useStyles2, useTheme2, PopoverContent } from '@grafana/ui';
+import { contextSrv } from 'app/core/core';
 import { OrgRole } from 'app/types';
 
 import { getStyles } from './styles';
 
-const BasicRoleOption: Array<SelectableValue<OrgRole>> = Object.values(OrgRole).map((r) => ({
-  label: r === OrgRole.None ? 'No basic role' : r,
-  value: r,
-}));
-
 interface Props {
   value?: OrgRole;
   onChange: (value: OrgRole) => void;
@@ -22,6 +18,20 @@ export const BuiltinRoleSelector = ({ value, onChange, disabled, disabledMesssag
   const styles = useStyles2(getStyles);
   const theme = useTheme2();
 
+  // Create options dynamically to filter out OrgRole.None when access control is not licensed
+  const basicRoleOptions: Array<SelectableValue<OrgRole>> = Object.values(OrgRole)
+    .filter((r) => {
+      // Filter out OrgRole.None if access control is not licensed
+      if (r === OrgRole.None && !contextSrv.licensedAccessControlEnabled()) {
+        return false;
+      }
+      return true;
+    })
+    .map((r) => ({
+      label: r === OrgRole.None ? 'No basic role' : r,
+      value: r,
+    }));
+
   return (
     <>
       <div className={styles.groupHeader}>
@@ -42,7 +52,7 @@ export const BuiltinRoleSelector = ({ value, onChange, disabled, disabledMesssag
       <RadioButtonList
         name="Basic Role Selector"
         className={styles.basicRoleSelector}
-        options={BasicRoleOption}
+        options={basicRoleOptions}
         value={value}
         onChange={onChange}
         disabled={disabled}