Allow adding permitted groups to new users with fine-grained (#3179)

permissions.

apps/admin-ui/src/components/group/GroupPickerDialog.tsx

@@ -27,6 +27,7 @@ export type GroupPickerDialogProps = {
   type: "selectOne" | "selectMany";
   filterGroups?: string[];
   text: { title: string; ok: string };
+  canBrowse?: boolean;
   onConfirm: (groups: GroupRepresentation[] | undefined) => void;
   onClose: () => void;
 };
@@ -40,6 +41,7 @@ export const GroupPickerDialog = ({
   type,
   filterGroups,
   text,
+  canBrowse = true,
   onClose,
   onConfirm,
 }: GroupPickerDialogProps) => {
@@ -282,7 +284,7 @@ export const GroupPickerDialog = ({
                   aria-label={t("groupName")}
                   isPlainButtonAction
                 >
-                  {((hasSubgroups(group) && filter === "") ||
+                  {((hasSubgroups(group) && filter === "" && canBrowse) ||
                     type === "selectOne") && (
                     <Button
                       isDisabled

apps/admin-ui/src/user/UserForm.tsx

@@ -28,6 +28,7 @@ import useFormatDate from "../utils/useFormatDate";
 import { GroupPickerDialog } from "../components/group/GroupPickerDialog";
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import type RequiredActionProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/requiredActionProviderRepresentation";
+import { useAccess } from "../context/access/Access";
 
 export type BruteForced = {
   isBruteForceProtected?: boolean;
@@ -61,6 +62,8 @@ export const UserForm = ({
   const navigate = useNavigate();
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
+  const { hasAccess } = useAccess();
+  const isManager = hasAccess("manage-users");
 
   const {
     handleSubmit,
@@ -144,7 +147,7 @@ export const UserForm = ({
     <FormAccess
       isHorizontal
       onSubmit={handleSubmit(save)}
-      role="manage-users"
+      role="query-users"
       fineGrainedAccess={user?.access?.manage}
       className="pf-u-mt-lg"
     >
@@ -155,6 +158,7 @@ export const UserForm = ({
             title: "users:selectGroups",
             ok: "users:join",
           }}
+          canBrowse={isManager}
           onConfirm={(groups) => {
             user?.id ? addGroups(groups || []) : addChips(groups || []);
             setOpen(false);

apps/admin-ui/src/user/UserGroups.tsx

@@ -21,6 +21,7 @@ import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { emptyFormatter } from "../util";
+import { useAccess } from "../context/access/Access";
 
 type UserGroupsProps = {
   user: UserRepresentation;
@@ -45,6 +46,9 @@ export const UserGroups = ({ user }: UserGroupsProps) => {
 
   const { enabled } = useHelp();
 
+  const { hasAccess } = useAccess();
+  const isManager = hasAccess("manage-users");
+
   const { adminClient } = useAdminClient();
   const alphabetize = (groupsList: GroupRepresentation[]) => {
     return sortBy(groupsList, (group) => group.path?.toUpperCase());
@@ -254,6 +258,7 @@ export const UserGroups = ({ user }: UserGroupsProps) => {
             title: t("joinGroupsFor", { username: user.username }),
             ok: "users:join",
           }}
+          canBrowse={isManager}
           onClose={() => setOpen(false)}
           onConfirm={(groups) => {
             addGroups(groups || []);

apps/admin-ui/src/user/UsersTabs.tsx

@@ -94,15 +94,9 @@ const UsersTabs = () => {
         addAlert(t("userSaved"), AlertVariant.success);
         refresh();
       } else {
+        user.groups = addedGroups.map((group) => group.path!);
         const createdUser = await adminClient.users.create(user);
 
-        addedGroups.forEach(async (group) => {
-          await adminClient.users.addToGroup({
-            id: createdUser.id!,
-            groupId: group.id!,
-          });
-        });
-
         addAlert(t("userCreated"), AlertVariant.success);
         navigate(toUser({ id: createdUser.id, realm, tab: "settings" }));
       }

apps/admin-ui/src/user/routes/AddUser.ts

@@ -10,7 +10,7 @@ export const AddUserRoute: RouteDef = {
   path: "/:realm/users/add-user",
   component: lazy(() => import("../UsersTabs")),
   breadcrumb: (t) => t("users:createUser"),
-  access: "manage-users",
+  access: ["query-users", "query-groups"],
 };
 
 export const toAddUser = (params: AddUserParams): Partial<Path> => ({