Realm Roles: Implements Reload Function (#308)

* refresh

* add hook

* reload WIP

* pass down defaultValues

* log stmt

* reload working on details form

* call with Erik

* format

* format

* lint

* fix reload after save
This commit is contained in:
Eugenia 2021-01-19 14:30:52 -05:00 committed by GitHub
parent eff8144a0a
commit 8f971ffca0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 12 deletions

View file

@ -17,9 +17,15 @@ export type RealmRoleFormProps = {
form: UseFormMethods;
save: SubmitHandler<RoleRepresentation>;
editMode: boolean;
reset: () => void;
};
export const RealmRoleForm = ({ form, save, editMode }: RealmRoleFormProps) => {
export const RealmRoleForm = ({
form,
save,
editMode,
reset,
}: RealmRoleFormProps) => {
const { t } = useTranslation("roles");
return (
@ -75,7 +81,7 @@ export const RealmRoleForm = ({ form, save, editMode }: RealmRoleFormProps) => {
<Button variant="primary" type="submit">
{t("common:save")}
</Button>
<Button variant="link">
<Button onClick={reset} variant="link">
{editMode ? t("common:reload") : t("common:cancel")}
</Button>
</ActionGroup>

View file

@ -51,6 +51,7 @@ export const RealmRoleTabs = () => {
const [name, setName] = useState("");
const adminClient = useAdminClient();
const { realm } = useRealm();
const [role, setRole] = useState<RoleRepresentation>();
const { id } = useParams<{ id: string }>();
@ -62,6 +63,7 @@ export const RealmRoleTabs = () => {
const fetchedRole = await adminClient.roles.findOneById({ id });
setName(fetchedRole.name!);
setupForm(fetchedRole);
setRole(fetchedRole);
} else {
setName(t("createRole"));
}
@ -78,6 +80,11 @@ export const RealmRoleTabs = () => {
});
};
// reset form to default values
const reset = () => {
setupForm(role!);
};
const save = async (role: RoleRepresentation) => {
try {
if (id) {
@ -87,6 +94,8 @@ export const RealmRoleTabs = () => {
(role.attributes as unknown) as KeyValueType[]
);
}
setRole(role!);
setupForm(role!);
await adminClient.roles.updateById({ id }, role);
} else {
await adminClient.roles.create(role);
@ -149,17 +158,29 @@ export const RealmRoleTabs = () => {
eventKey="details"
title={<TabTitleText>{t("details")}</TabTitleText>}
>
<RealmRoleForm form={form} save={save} editMode={true} />
<RealmRoleForm
reset={reset}
form={form}
save={save}
editMode={true}
/>
</Tab>
<Tab
eventKey="attributes"
title={<TabTitleText>{t("attributes")}</TabTitleText>}
>
<RoleAttributes form={form} save={save} />
<RoleAttributes form={form} save={save} reset={reset} />
</Tab>
</KeycloakTabs>
)}
{!id && <RealmRoleForm form={form} save={save} editMode={false} />}
{!id && (
<RealmRoleForm
reset={reset}
form={form}
save={save}
editMode={false}
/>
)}
</PageSection>
</>
);

View file

@ -1,6 +1,6 @@
import React from "react";
import { ActionGroup, Button, TextInput } from "@patternfly/react-core";
import { SubmitHandler, useFieldArray, UseFormMethods } from "react-hook-form";
import { useFieldArray, UseFormMethods } from "react-hook-form";
import "./RealmRolesSection.css";
import RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation";
@ -20,10 +20,11 @@ export type KeyValueType = { key: string; value: string };
type RoleAttributesProps = {
form: UseFormMethods;
save: SubmitHandler<RoleRepresentation>;
save: (role: RoleRepresentation) => void;
reset: () => void;
};
export const RoleAttributes = ({ form, save }: RoleAttributesProps) => {
export const RoleAttributes = ({ form, save, reset }: RoleAttributesProps) => {
const { t } = useTranslation("roles");
const { fields, append, remove } = useFieldArray({
@ -78,9 +79,7 @@ export const RoleAttributes = ({ form, save }: RoleAttributesProps) => {
>
<TextInput
name={`attributes[${rowIndex}].value`}
ref={form.register({
required: true,
})}
ref={form.register({})}
aria-label="value-input"
defaultValue={attribute.value}
/>
@ -127,7 +126,9 @@ export const RoleAttributes = ({ form, save }: RoleAttributesProps) => {
>
{t("common:save")}
</Button>
<Button variant="link">{t("common:reload")}</Button>
<Button variant="link" onClick={reset}>
{t("common:reload")}{" "}
</Button>
</ActionGroup>
</FormAccess>
</>