fixed issue + small layout of page (#658)

fixing: #492
This commit is contained in:
Erik Jan de Wit 2021-06-07 14:58:47 +02:00 committed by GitHub
parent 8a3c30b918
commit 1955a468c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -13,17 +13,18 @@ import type UserRepresentation from "keycloak-admin/lib/defs/userRepresentation"
import { UserForm } from "./UserForm"; import { UserForm } from "./UserForm";
import { useAlerts } from "../components/alert/Alerts"; import { useAlerts } from "../components/alert/Alerts";
import { useAdminClient } from "../context/auth/AdminClient"; import { useAdminClient } from "../context/auth/AdminClient";
import { useHistory, useParams, useRouteMatch } from "react-router-dom"; import { useHistory, useParams } from "react-router-dom";
import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs"; import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
import { UserGroups } from "./UserGroups"; import { UserGroups } from "./UserGroups";
import { UserConsents } from "./UserConsents"; import { UserConsents } from "./UserConsents";
import type GroupRepresentation from "keycloak-admin/lib/defs/groupRepresentation"; import type GroupRepresentation from "keycloak-admin/lib/defs/groupRepresentation";
import { useRealm } from "../context/realm-context/RealmContext";
export const UsersTabs = () => { export const UsersTabs = () => {
const { t } = useTranslation("roles"); const { t } = useTranslation("roles");
const { addAlert } = useAlerts(); const { addAlert } = useAlerts();
const { url } = useRouteMatch();
const history = useHistory(); const history = useHistory();
const { realm } = useRealm();
const adminClient = useAdminClient(); const adminClient = useAdminClient();
const userForm = useForm<UserRepresentation>({ mode: "onChange" }); const userForm = useForm<UserRepresentation>({ mode: "onChange" });
@ -51,17 +52,17 @@ export const UsersTabs = () => {
await adminClient.users.update({ id: user.id! }, user); await adminClient.users.update({ id: user.id! }, user);
addAlert(t("users:userSaved"), AlertVariant.success); addAlert(t("users:userSaved"), AlertVariant.success);
} else { } else {
const getNewUserId = await adminClient.users.create(user); const createdUser = await adminClient.users.create(user);
addedGroups.forEach(async (group) => { addedGroups.forEach(async (group) => {
await adminClient.users.addToGroup({ await adminClient.users.addToGroup({
id: getNewUserId.id!, id: createdUser.id!,
groupId: group.id!, groupId: group.id!,
}); });
}); });
addAlert(t("users:userCreated"), AlertVariant.success); addAlert(t("users:userCreated"), AlertVariant.success);
history.push(url.substr(0, url.lastIndexOf("/"))); history.push(`/${realm}/users/${createdUser.id}/settings`);
} }
} catch (error) { } catch (error) {
addAlert( addAlert(
@ -75,8 +76,8 @@ export const UsersTabs = () => {
return ( return (
<> <>
<ViewHeader titleKey={user! || t("users:createUser")} /> <ViewHeader titleKey={user! || t("users:createUser")} divider={!id} />
<PageSection variant="light"> <PageSection variant="light" className="pf-u-p-0">
{id && ( {id && (
<KeycloakTabs isBox> <KeycloakTabs isBox>
<Tab <Tab
@ -84,36 +85,44 @@ export const UsersTabs = () => {
data-testid="user-details-tab" data-testid="user-details-tab"
title={<TabTitleText>{t("details")}</TabTitleText>} title={<TabTitleText>{t("details")}</TabTitleText>}
> >
<UserForm <PageSection variant="light">
onGroupsUpdate={updateGroups} <UserForm
form={userForm} onGroupsUpdate={updateGroups}
save={save} form={userForm}
editMode={true} save={save}
/> editMode={true}
/>
</PageSection>
</Tab> </Tab>
<Tab <Tab
eventKey="groups" eventKey="groups"
data-testid="user-groups-tab" data-testid="user-groups-tab"
title={<TabTitleText>{t("groups")}</TabTitleText>} title={<TabTitleText>{t("groups")}</TabTitleText>}
> >
<UserGroups /> <PageSection variant="light">
<UserGroups />
</PageSection>
</Tab> </Tab>
<Tab <Tab
eventKey="consents" eventKey="consents"
data-testid="user-consents-tab" data-testid="user-consents-tab"
title={<TabTitleText>{t("users:consents")}</TabTitleText>} title={<TabTitleText>{t("users:consents")}</TabTitleText>}
> >
<UserConsents /> <PageSection variant="light">
<UserConsents />
</PageSection>
</Tab> </Tab>
</KeycloakTabs> </KeycloakTabs>
)} )}
{!id && ( {!id && (
<UserForm <PageSection variant="light">
onGroupsUpdate={updateGroups} <UserForm
form={userForm} onGroupsUpdate={updateGroups}
save={save} form={userForm}
editMode={false} save={save}
/> editMode={false}
/>
</PageSection>
)} )}
</PageSection> </PageSection>
</> </>