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")} + > + + + } emptyState={