add popover

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
+
+}

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={
+            <Popover
+              aria-label="Basic popover"
+              position="bottom"
+              bodyContent={
+                <div>
+                  {t("roles:whoWillAppearPopoverText")}
+                  <Button
+                    className="kc-groups-link"
+                    variant="link"
+                    onClick={() => history.push(`/${realm}/groups`)}
+                  >
+                    {t("groups")}
+                  </Button>
+                  {t("or")}
+                  <Button
+                    className="kc-users-link"
+                    variant="link"
+                    onClick={() => history.push(`/${realm}/users`)}
+                  >
+                    {t("users")}.
+                  </Button>
+                </div>
+              }
+              footerContent={t("roles:whoWillAppearPopoverFooterText")}
+            >
+              <Button
+                variant="link"
+                className="kc-who-will-appear-button"
+                key="who-will-appear-button"
+                icon={<QuestionCircleIcon />}
+              >
+                {t("roles:whoWillAppearLinkText")}
+              </Button>
+            </Popover>
+          }
           emptyState={
             <ListEmptyState
               hasIcon={true}

src/realm-roles/messages.json

@@ -49,6 +49,9 @@
     "compositeRoleOff": "Composite role turned off",
     "associatedRolesRemoved": "Associated roles have been removed",
     "compositesRemovedAlertDescription": "All the associated roles have been removed",
+    "whoWillAppearLinkText": "Who will appear in this user list?",
+    "whoWillAppearPopoverText": "This tab shows only the users who are assigned directly to this role. To see users who are assigned this role as an associated role or through a group, go to",
+    "whoWillAppearPopoverFooterText": "Users who have this role as an effective role cannot be added on this tab.",
     "usersInRole": "Users in role",
     "addUser": "Add user",
     "removeUser": "Remove users",
@@ -56,6 +59,9 @@
     "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",
+    "groups": "Groups",
+    "users": "Users",
+    "or": "or",
     "userName": "Username",
     "email": "Email",
     "lastName": "Last name",