read-only users in role tab

src/realm-roles/AssociatedRolesTab.tsx

@@ -190,7 +190,6 @@ export const AssociatedRolesTab = ({
           onSelect={(rows) => {
             setSelectedRows([...rows]);
           }}
-          isPaginated
           toolbarItem={
             <>
               <Checkbox

src/realm-roles/RealmRoleTabs.tsx

@@ -170,7 +170,8 @@ export const RealmRoleTabs = () => {
     }
   };
   
-  console.log(role)
+
+
   const addComposites = async (composites: Composites[]): Promise<void> => {
     const compositeArray = composites;
     setAdditionalRoles([...additionalRoles, ...compositeArray]);
@@ -342,13 +343,7 @@ export const RealmRoleTabs = () => {
               eventKey="users-in-role"
               title={<TabTitleText>{t("usersInRole")}</TabTitleText>}
             >
-              <UsersInRoleTab
+              <UsersInRoleTab />
-                roleName={role}
-                // form={form}
-                // save={save}
-                // array={{ fields, append, remove }}
-                // reset={() => form.reset(role)}
-              />
             </Tab>
           </KeycloakTabs>
         )}

src/realm-roles/UsersInRoleTab.tsx

@@ -1,192 +1,79 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
-import { useHistory, useParams, useRouteMatch } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import {
+import { PageSection } from "@patternfly/react-core";
-  AlertVariant,
-  Button,
-  ButtonVariant,
-  Checkbox,
-  PageSection,
-} from "@patternfly/react-core";
-import RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
-import { formattedLinkTableCell } from "../components/external-link/FormattedLink";
-import { useAlerts } from "../components/alert/Alerts";
-import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { boolFormatter, emptyFormatter } from "../util";
-import { AssociatedRolesModal } from "./AssociatedRolesModal";
 import { useAdminClient } from "../context/auth/AdminClient";
+import UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
 
-type UsersInRoleTabProps = {
+export const UsersInRoleTab = () => {
-    roleName: string;
-  };
-
-
-export const UsersInRoleTab = ({roleName}: UsersInRoleTabProps) => {
   const { t } = useTranslation("roles");
-  const history = useHistory();
-  const { addAlert } = useAlerts();
-  const { url } = useRouteMatch();
-  const tableRefresher = React.useRef<() => void>();
 
-  const [selectedRows, setSelectedRows] = useState<RoleRepresentation[]>([]);
+  const [users, setUsers] = useState<UserRepresentation[]>([]);
-  const [open, setOpen] = useState(false);
 
-//   console.log(role);
+  const { id } = useParams<{ id: string }>();
 
   const adminClient = useAdminClient();
-  const { id } = useParams<{ id: string; clientId: string }>();
 
   const loader = async () => {
-    const beep = await adminClient.roles.findUsersWithRole({name: "admin"})
+    const role = await adminClient.roles.findOneById({ id: id });
-    console.log(beep);
+    const usersWithRole = await adminClient.roles.findUsersWithRole({
-    if (!beep) {
+      name: role.name!,
-        console.log("lalala");
-    }
-    else return beep;
-  };
-
-
- loader();
-
-//   const RoleName = (role: RoleRepresentation) => <>{role.name}</>;
-
-  const toggleModal = () => setOpen(!open);
-
-  const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
-    titleKey: "roles:roleRemoveAssociatedRoleConfirm",
-    messageKey: t("roles:roleRemoveAssociatedText"),
-    continueButtonLabel: "common:delete",
-    continueButtonVariant: ButtonVariant.danger,
-    onConfirm: async () => {
-      try {
-        await adminClient.roles.delCompositeRoles({ id }, selectedRows);
-        setSelectedRows([]);
-
-        addAlert(t("associatedRolesRemoved"), AlertVariant.success);
-      } catch (error) {
-        addAlert(t("roleDeleteError", { error }), AlertVariant.danger);
-      }
-    },
     });
-
+    setUsers(usersWithRole);
-//   const [
+    return usersWithRole;
-//     toggleDeleteAssociatedRolesDialog,
-//     DeleteAssociatedRolesConfirm,
-//   ] = useConfirmDialog({
-//     titleKey: t("roles:removeAssociatedRoles") + "?",
-//     messageKey: t("roles:removeAllAssociatedRolesConfirmDialog", {
-//       name: parentRole?.name || t("createRole"),
-//     }),
-//     continueButtonLabel: "common:delete",
-//     continueButtonVariant: ButtonVariant.danger,
-//     onConfirm: async () => {
-//       try {
-//         if (selectedRows.length === additionalRoles.length) {
-//           onRemove(selectedRows);
-//           const loc = url.replace(/\/AssociatedRoles/g, "/details");
-//           history.push(loc);
-//         }
-//         onRemove(selectedRows);
-//         await adminClient.roles.delCompositeRoles({ id }, selectedRows);
-//         addAlert(t("associatedRolesRemoved"), AlertVariant.success);
-//       } catch (error) {
-//         addAlert(`${t("roleDeleteError")} ${error}`, AlertVariant.danger);
-//       }
-//     },
-//   });
-
-  const setRefresher = (refresher: () => void) => {
-    tableRefresher.current = refresher;
   };
 
-  const goToCreate = () => history.push(`${url}/add-role`);
+  useEffect(() => {
+    loader();
+  }, []);
+
   return (
     <>
       <PageSection variant="light">
-        <DeleteConfirm />
+        {users.length == 0 ? (
-        {/* <DeleteAssociatedRolesConfirm />
+          <ListEmptyState
-        <AssociatedRolesModal
+            hasIcon={true}
-        //   onConfirm={addComposites}
+            message={t("noDirectUsers")}
-          existingCompositeRoles={additionalRoles}
+            instructions={t("noUsersEmptyStateDescription")}
-          open={open}
+            primaryActionText={t("addUser")}
-          toggleDialog={() => setOpen(!open)}
+          />
-        /> */}
+        ) : (
           <KeycloakDataTable
             loader={loader}
             ariaLabelKey="roles:roleList"
-          searchPlaceholderKey="roles:searchFor"
+            searchPlaceholderKey=""
-          canSelectAll
-        //   onSelect={(rows) => {
-            // setSelectedRows([...rows]);
-        //   }}
-          isPaginated
-          setRefresher={setRefresher}
-          toolbarItem={
-            <>
-              <Checkbox
-                label="Hide inherited roles"
-                key="associated-roles-check"
-                id="kc-hide-inherited-roles-checkbox"
-              />
-              <Button
-                className="kc-add-role-button"
-                key="add-role-button"
-                onClick={() => toggleModal()}
-                data-cy="add-role-button"
-              >
-                {t("addRole")}
-              </Button>
-              <Button
-                variant="link"
-                isDisabled={selectedRows.length == 0}
-                key="remove-role-button"
-                onClick={() => {
-                //   toggleDeleteAssociatedRolesDialog();
-                }}
-              >
-                {t("removeRoles")}
-              </Button>
-            </>
-          }
-          actions={[
-            {
-              title: t("common:remove"),
-              onRowClick: (role) => {
-                // setSelectedRows([role]);
-                toggleDeleteDialog();
-              },
-            },
-          ]}
             columns={[
               {
-              name: "name",
+                name: "id",
-              displayKey: "roles:roleName",
+                displayKey: "roles:id",
-            //   cellRenderer: RoleName,
-              cellFormatters: [formattedLinkTableCell(), emptyFormatter()],
-            },
-            {
-              name: "inherited from",
-              displayKey: "roles:inheritedFrom",
-              cellFormatters: [boolFormatter(), emptyFormatter()],
-            },
-            {
-              name: "description",
-              displayKey: "common:description",
                 cellFormatters: [emptyFormatter()],
               },
+              {
+                name: "username",
+                displayKey: "roles:userName",
+                cellFormatters: [emptyFormatter()],
+              },
+              {
+                name: "email",
+                displayKey: "roles:email",
+                cellFormatters: [emptyFormatter()],
+              },
+              {
+                name: "lastName",
+                displayKey: "roles:lastName",
+                cellFormatters: [emptyFormatter()],
+              },
+              {
+                name: "firstName",
+                displayKey: "roles:firstName",
+                cellFormatters: [boolFormatter(), emptyFormatter()],
+              },
             ]}
-          emptyState={
-            <ListEmptyState
-              hasIcon={true}
-              message={t("noRolesInThisRealm")}
-              instructions={t("noRolesInThisRealmInstructions")}
-              primaryActionText={t("createRole")}
-              onPrimaryAction={goToCreate}
-            />
-          }
           />
+        )}
       </PageSection>
     </>
   );

src/realm-roles/messages.json

@@ -49,7 +49,16 @@
     "compositeRoleOff": "Composite role turned off",
     "associatedRolesRemoved": "Associated roles have been removed",
     "compositesRemovedAlertDescription": "All the associated roles have been removed",
-    "usersInRole": "Users in role"
+    "usersInRole": "Users in role",
-
+    "addUser": "Add user",
+    "removeUser": "Remove users",
+    "removeUserText": "Do you want to remove {{numSelected}} users?. These users will no longer have permissions of the role {{role}} and the associated roles of it.",
+    "noDirectUsers": "No direct users",
+    "noUsersEmptyStateDescription": "Only the users with this role directly assigned will appear under this tab. If you need to find users assigned to this role, you can go to Groups or Users to find them. Users that already have this role as an effective role cannot be added here.",
+    "id": "ID",
+    "userName": "Username",
+    "email": "Email",
+    "lastName": "Last name",
+    "firstName": "First name"
   }
 }