Keycloak

1
import { Button, PageSection, Popover } from "@patternfly/react-core";
2
import { QuestionCircleIcon } from "@patternfly/react-icons";
3
import { useTranslation } from "react-i18next";
4
import { useNavigate } from "react-router-dom";
5
import { useHelp } from "ui-shared";
6

7
import { adminClient } from "../admin-client";
8
import type { ClientRoleParams } from "../clients/routes/ClientRole";
9
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
10
import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
11
import { useRealm } from "../context/realm-context/RealmContext";
12
import { emptyFormatter, upperCaseFormatter } from "../util";
13
import { useParams } from "../utils/useParams";
14

15
export const UsersInRoleTab = () => {
16
  const navigate = useNavigate();
17
  const { realm } = useRealm();
18

19
  const { t } = useTranslation();
20
  const { id, clientId } = useParams<ClientRoleParams>();
21

22
  const loader = async (first?: number, max?: number) => {
23
    const role = await adminClient.roles.findOneById({ id: id });
24
    if (!role) {
25
      throw new Error(t("notFound"));
26
    }
27

28
    if (role.clientRole) {
29
      return adminClient.clients.findUsersWithRole({
30
        roleName: role.name!,
31
        id: clientId,
32
        first,
33
        max,
34
      });
35
    }
36

37
    return adminClient.roles.findUsersWithRole({
38
      name: role.name!,
39
      first,
40
      max,
41
    });
42
  };
43

44
  const { enabled } = useHelp();
45

46
  return (
47
    <PageSection data-testid="users-page" variant="light">
48
      <KeycloakDataTable
49
        isPaginated
50
        loader={loader}
51
        ariaLabelKey="roleList"
52
        searchPlaceholderKey=""
53
        data-testid="users-in-role-table"
54
        toolbarItem={
55
          enabled && (
56
            <Popover
57
              aria-label="Basic popover"
58
              position="bottom"
59
              bodyContent={
60
                <div>
61
                  {t("whoWillAppearPopoverTextRoles")}
62
                  <Button
63
                    className="kc-groups-link"
64
                    variant="link"
65
                    onClick={() => navigate(`/${realm}/groups`)}
66
                  >
67
                    {t("groups")}
68
                  </Button>
69
                  {t("or")}
70
                  <Button
71
                    className="kc-users-link"
72
                    variant="link"
73
                    onClick={() => navigate(`/${realm}/users`)}
74
                  >
75
                    {t("users")}.
76
                  </Button>
77
                </div>
78
              }
79
              footerContent={t("whoWillAppearPopoverFooterText")}
80
            >
81
              <Button
82
                variant="link"
83
                className="kc-who-will-appear-button"
84
                key="who-will-appear-button"
85
                icon={<QuestionCircleIcon />}
86
              >
87
                {t("whoWillAppearLinkTextRoles")}
88
              </Button>
89
            </Popover>
90
          )
91
        }
92
        emptyState={
93
          <ListEmptyState
94
            hasIcon={true}
95
            message={t("noDirectUsers")}
96
            instructions={
97
              <div>
98
                {t("noUsersEmptyStateDescription")}
99
                <Button
100
                  className="kc-groups-link-empty-state"
101
                  variant="link"
102
                  onClick={() => navigate(`/${realm}/groups`)}
103
                >
104
                  {t("groups")}
105
                </Button>
106
                {t("or")}
107
                <Button
108
                  className="kc-users-link-empty-state"
109
                  variant="link"
110
                  onClick={() => navigate(`/${realm}/users`)}
111
                >
112
                  {t("users")}
113
                </Button>
114
                {t("noUsersEmptyStateDescriptionContinued")}
115
              </div>
116
            }
117
          />
118
        }
119
        columns={[
120
          {
121
            name: "username",
122
            displayKey: "userName",
123
            cellFormatters: [emptyFormatter()],
124
          },
125
          {
126
            name: "email",
127
            displayKey: "email",
128
            cellFormatters: [emptyFormatter()],
129
          },
130
          {
131
            name: "lastName",
132
            displayKey: "lastName",
133
            cellFormatters: [emptyFormatter()],
134
          },
135
          {
136
            name: "firstName",
137
            displayKey: "firstName",
138
            cellFormatters: [upperCaseFormatter(), emptyFormatter()],
139
          },
140
        ]}
141
      />
142
    </PageSection>
143
  );
144
};
145