users tab WIP

src/realm-roles/RealmRoleTabs.tsx

@@ -23,6 +23,7 @@ import { useRealm } from "../context/realm-context/RealmContext";
 import { AssociatedRolesModal } from "./AssociatedRolesModal";
 import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
 import { AssociatedRolesTab } from "./AssociatedRolesTab";
+import { UsersInRoleTab } from "./UsersInRoleTab";
 
 const arrayToAttributes = (attributeArray: KeyValueType[]) => {
   const initValue: { [index: string]: string[] } = {};
@@ -168,7 +169,8 @@ export const RealmRoleTabs = () => {
       );
     }
   };
-
+  
+  console.log(role)
   const addComposites = async (composites: Composites[]): Promise<void> => {
     const compositeArray = composites;
     setAdditionalRoles([...additionalRoles, ...compositeArray]);
@@ -336,6 +338,18 @@ export const RealmRoleTabs = () => {
                 reset={() => form.reset(role)}
               />
             </Tab>
+            <Tab
+              eventKey="users-in-role"
+              title={<TabTitleText>{t("usersInRole")}</TabTitleText>}
+            >
+              <UsersInRoleTab
+                roleName={role}
+                // form={form}
+                // save={save}
+                // array={{ fields, append, remove }}
+                // reset={() => form.reset(role)}
+              />
+            </Tab>
           </KeycloakTabs>
         )}
         {!id && (

src/realm-roles/UsersInRoleTab.tsx

@@ -0,0 +1,193 @@
+import React, { useState } from "react";
+import { useHistory, useParams, useRouteMatch } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  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";
+
+type UsersInRoleTabProps = {
+    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 [open, setOpen] = useState(false);
+
+//   console.log(role);
+
+  const adminClient = useAdminClient();
+  const { id } = useParams<{ id: string; clientId: string }>();
+
+  const loader = async () => {
+    const beep = await adminClient.roles.findUsersWithRole({name: "admin"})
+    console.log(beep);
+    if (!beep) {
+        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);
+      }
+    },
+  });
+
+//   const [
+//     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`);
+  return (
+    <>
+      <PageSection variant="light">
+        <DeleteConfirm />
+        {/* <DeleteAssociatedRolesConfirm />
+        <AssociatedRolesModal
+        //   onConfirm={addComposites}
+          existingCompositeRoles={additionalRoles}
+          open={open}
+          toggleDialog={() => setOpen(!open)}
+        /> */}
+        <KeycloakDataTable
+          loader={loader}
+          ariaLabelKey="roles:roleList"
+          searchPlaceholderKey="roles:searchFor"
+          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",
+              displayKey: "roles:roleName",
+            //   cellRenderer: RoleName,
+              cellFormatters: [formattedLinkTableCell(), emptyFormatter()],
+            },
+            {
+              name: "inherited from",
+              displayKey: "roles:inheritedFrom",
+              cellFormatters: [boolFormatter(), emptyFormatter()],
+            },
+            {
+              name: "description",
+              displayKey: "common:description",
+              cellFormatters: [emptyFormatter()],
+            },
+          ]}
+          emptyState={
+            <ListEmptyState
+              hasIcon={true}
+              message={t("noRolesInThisRealm")}
+              instructions={t("noRolesInThisRealmInstructions")}
+              primaryActionText={t("createRole")}
+              onPrimaryAction={goToCreate}
+            />
+          }
+        />
+      </PageSection>
+    </>
+  );
+};

src/realm-roles/messages.json

@@ -48,6 +48,8 @@
     "roleRemoveAssociatedText": "This action will remove {{role}} from {{roleName}. All the associated roles of {{role}} will also be removed.",
     "compositeRoleOff": "Composite role turned off",
     "associatedRolesRemoved": "Associated roles have been removed",
-    "compositesRemovedAlertDescription": "All the associated roles have been removed"
+    "compositesRemovedAlertDescription": "All the associated roles have been removed",
+    "usersInRole": "Users in role"
+
   }
 }