Added help text on role mapping (#4340)

apps/admin-ui/public/resources/en/client-scopes-help.json

@@ -14,5 +14,6 @@
   "protocolMapper": "Protocol...",
   "mapperName": "Name of the mapper",
   "role": "Role name you want changed. Click 'Select Role' button to browse roles, or just type it in the textbox. To reference an application role the syntax is appname.approle, i.e. myapp.myrole",
-  "newRoleName": "The new role name.  The new name format corresponds to where in the access token the role will be mapped to.  So, a new name of 'myapp.newname' will map the role to that position in the access token.  A new name of 'newname' will map the role to the realm roles in the token."
+  "newRoleName": "The new role name.  The new name format corresponds to where in the access token the role will be mapped to.  So, a new name of 'myapp.newname' will map the role to that position in the access token.  A new name of 'newname' will map the role to the realm roles in the token.",
+  "rolesScope": "If there is no role scope mapping defined, each user is permitted to use this client scope. If there are role scope mappings defined, the user must be a member of at least one of the roles."
 }

apps/admin-ui/src/client-scopes/EditClientScope.tsx

@@ -3,6 +3,7 @@ import type ProtocolMapperRepresentation from "@keycloak/keycloak-admin-client/l
 import type { RoleMappingPayload } from "@keycloak/keycloak-admin-client/lib/defs/roleRepresentation";
 import type { ProtocolMapperTypeRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/serverInfoRepesentation";
 import {
+  Alert,
   AlertVariant,
   ButtonVariant,
   DropdownItem,
@@ -22,6 +23,7 @@ import {
   ClientScopeDefaultOptionalType,
 } from "../components/client-scope/ClientScopeTypes";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
+import { useHelp } from "../components/help-enabler/HelpHeader";
 import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
 import { RoleMapping, Row } from "../components/role-mapping/RoleMapping";
 import {
@@ -49,6 +51,7 @@ export default function EditClientScope() {
   const { adminClient } = useAdminClient();
   const { id } = useParams<ClientScopeParams>();
   const { addAlert, addError } = useAlerts();
+  const { enabled } = useHelp();
   const [clientScope, setClientScope] =
     useState<ClientScopeDefaultOptionalType>();
   const [key, setKey] = useState(0);
@@ -262,6 +265,15 @@ export default function EditClientScope() {
             title={<TabTitleText>{t("scope")}</TabTitleText>}
             {...scopeTab}
           >
+            {enabled && (
+              <PageSection>
+                <Alert
+                  variant="info"
+                  isInline
+                  title={t("client-scopes-help:rolesScope")}
+                />
+              </PageSection>
+            )}
             <RoleMapping
               id={clientScope.id!}
               name={clientScope.name!}