Fixes header and cancel when adding realm roles (#2327)

* fix header and cancel btn

* fix issue with clients
This commit is contained in:
mfrances17 2022-04-05 03:17:50 -04:00 committed by GitHub
parent edaa633a8c
commit 24fc696022
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -10,8 +10,11 @@ import {
} from "@patternfly/react-core";
import { useTranslation } from "react-i18next";
import type { UseFormMethods } from "react-hook-form";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { FormAccess } from "../components/form-access/FormAccess";
import type { AttributeForm } from "../components/attribute-form/AttributeForm";
import { useRealm } from "../context/realm-context/RealmContext";
import { useHistory } from "react-router-dom";
export type RealmRoleFormProps = {
form: UseFormMethods<AttributeForm>;
@ -27,76 +30,86 @@ export const RealmRoleForm = ({
reset,
}: RealmRoleFormProps) => {
const { t } = useTranslation("roles");
const history = useHistory();
const { realm: realmName } = useRealm();
return (
<PageSection variant="light">
<FormAccess
isHorizontal
onSubmit={handleSubmit(save)}
role="manage-realm"
className="pf-u-mt-lg"
>
<FormGroup
label={t("roleName")}
fieldId="kc-name"
isRequired
validated={errors.name ? "error" : "default"}
helperTextInvalid={t("common:required")}
<>
<ViewHeader titleKey={t("createRole")} />
<PageSection variant="light">
<FormAccess
isHorizontal
onSubmit={handleSubmit(save)}
role="manage-realm"
className="pf-u-mt-lg"
>
<TextInput
ref={register({
required: !editMode,
validate: (value: string) =>
!!value.trim() || t("common:required").toString(),
})}
type="text"
id="kc-name"
name="name"
isReadOnly={editMode}
/>
</FormGroup>
<FormGroup
label={t("common:description")}
fieldId="kc-description"
validated={
errors.description
? ValidatedOptions.error
: ValidatedOptions.default
}
helperTextInvalid={errors.description?.message}
>
<TextArea
name="description"
aria-label="description"
isDisabled={getValues().name?.includes("default-roles")}
ref={register({
maxLength: {
value: 255,
message: t("common:maxLength", { length: 255 }),
},
})}
type="text"
<FormGroup
label={t("roleName")}
fieldId="kc-name"
isRequired
validated={errors.name ? "error" : "default"}
helperTextInvalid={t("common:required")}
>
<TextInput
ref={register({
required: !editMode,
validate: (value: string) =>
!!value.trim() || t("common:required").toString(),
})}
type="text"
id="kc-name"
name="name"
isReadOnly={editMode}
/>
</FormGroup>
<FormGroup
label={t("common:description")}
fieldId="kc-description"
validated={
errors.description
? ValidatedOptions.error
: ValidatedOptions.default
}
id="kc-role-description"
/>
</FormGroup>
<ActionGroup>
<Button
variant="primary"
onClick={save}
data-testid="realm-roles-save-button"
helperTextInvalid={errors.description?.message}
>
{t("common:save")}
</Button>
<Button onClick={() => reset()} variant="link">
{editMode ? t("common:revert") : t("common:cancel")}
</Button>
</ActionGroup>
</FormAccess>
</PageSection>
<TextArea
name="description"
aria-label="description"
isDisabled={getValues().name?.includes("default-roles")}
ref={register({
maxLength: {
value: 255,
message: t("common:maxLength", { length: 255 }),
},
})}
type="text"
validated={
errors.description
? ValidatedOptions.error
: ValidatedOptions.default
}
id="kc-role-description"
/>
</FormGroup>
<ActionGroup>
<Button
variant="primary"
onClick={save}
data-testid="realm-roles-save-button"
>
{t("common:save")}
</Button>
<Button
onClick={() =>
editMode ? reset() : history.push(`/${realmName}/roles`)
}
variant="link"
>
{editMode ? t("common:revert") : t("common:cancel")}
</Button>
</ActionGroup>
</FormAccess>
</PageSection>
</>
);
};