keycloak-scim/js/apps/admin-ui/src/user/UsersSection.tsx

77 lines
2.2 KiB
TypeScript

import { useTranslation } from "react-i18next";
import { PageSection, Tab, TabTitleText } from "@patternfly/react-core";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useRealm } from "../context/realm-context/RealmContext";
import helpUrls from "../help-urls";
import { PermissionsTab } from "../components/permission-tab/PermissionTab";
import { UserDataTable } from "../components/users/UserDataTable";
import { toUsers, UserTab } from "./routes/Users";
import {
RoutableTabs,
useRoutableTab,
} from "../components/routable-tabs/RoutableTabs";
import useIsFeatureEnabled, { Feature } from "../utils/useIsFeatureEnabled";
import "./user-section.css";
export default function UsersSection() {
const { t } = useTranslation("users");
const { realm: realmName } = useRealm();
const isFeatureEnabled = useIsFeatureEnabled();
const useTab = (tab: UserTab) =>
useRoutableTab(
toUsers({
realm: realmName,
tab,
}),
);
const listTab = useTab("list");
const permissionsTab = useTab("permissions");
return (
<>
<ViewHeader
titleKey="users:title"
subKey="users:usersExplain"
helpUrl={helpUrls.usersUrl}
divider={false}
/>
<PageSection
data-testid="users-page"
variant="light"
className="pf-u-p-0"
>
<RoutableTabs
data-testid="user-tabs"
defaultLocation={toUsers({
realm: realmName,
tab: "list",
})}
isBox
mountOnEnter
>
<Tab
id="list"
data-testid="listTab"
title={<TabTitleText>{t("userList")}</TabTitleText>}
{...listTab}
>
<UserDataTable />
</Tab>
{isFeatureEnabled(Feature.AdminFineGrainedAuthz) && (
<Tab
id="permissions"
data-testid="permissionsTab"
title={<TabTitleText>{t("common:permissions")}</TabTitleText>}
{...permissionsTab}
>
<PermissionsTab type="users" />
</Tab>
)}
</RoutableTabs>
</PageSection>
</>
);
}