diff --git a/src/realm-roles/RealmRolesSection.css b/src/realm-roles/RealmRolesSection.css
index a45446edc6..296b16b67d 100644
--- a/src/realm-roles/RealmRolesSection.css
+++ b/src/realm-roles/RealmRolesSection.css
@@ -26,3 +26,23 @@
);
}
+
+.kc-who-will-appear-button {
+ /* padding-left: 0px; */
+ /* padding-top: 0px; */
+ margin-bottom: var(--pf-global--spacer--lg);;
+}
+
+.kc-groups-link {
+ font-size: var(--pf-global--FontSize--sm);
+ padding-left: 0px;
+ padding-right: var(--pf-global--spacer--xs);
+}
+
+.pf-c-button.pf-m-link.kc-users-link {
+ font-size: var(--pf-global--FontSize--sm);
+ padding-left: var(--pf-global--spacer--xs);
+ padding-right: var(--pf-global--spacer--xs);
+ padding-top: 0px
+
+}
diff --git a/src/realm-roles/UsersInRoleTab.tsx b/src/realm-roles/UsersInRoleTab.tsx
index 47611c626e..300105a177 100644
--- a/src/realm-roles/UsersInRoleTab.tsx
+++ b/src/realm-roles/UsersInRoleTab.tsx
@@ -1,13 +1,18 @@
import React, { useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
-import { PageSection } from "@patternfly/react-core";
+import { Button, PageSection, Popover } from "@patternfly/react-core";
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
import { boolFormatter, emptyFormatter } from "../util";
import { useAdminClient } from "../context/auth/AdminClient";
+import { QuestionCircleIcon } from "@patternfly/react-icons";
+import { useRealm } from "../context/realm-context/RealmContext";
export const UsersInRoleTab = () => {
+ const history = useHistory();
+ const { realm } = useRealm();
+
const { t } = useTranslation("roles");
const { id } = useParams<{ id: string }>();
@@ -33,6 +38,42 @@ export const UsersInRoleTab = () => {
loader={loader}
ariaLabelKey="roles:roleList"
searchPlaceholderKey=""
+ toolbarItem={
+
+ {t("roles:whoWillAppearPopoverText")}
+
+ {t("or")}
+
+
+ }
+ footerContent={t("roles:whoWillAppearPopoverFooterText")}
+ >
+ }
+ >
+ {t("roles:whoWillAppearLinkText")}
+
+
+ }
emptyState={