replaced KeycloakTextInput with TextControl (#27711)
Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com> Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
This commit is contained in:
parent
299118c45a
commit
7695532011
3 changed files with 15 additions and 32 deletions
|
@ -2,7 +2,7 @@ import ModalUtils from "../../../../util/ModalUtils";
|
||||||
|
|
||||||
export default class GroupModal extends ModalUtils {
|
export default class GroupModal extends ModalUtils {
|
||||||
#createGroupModalTitle = "Create a group";
|
#createGroupModalTitle = "Create a group";
|
||||||
#groupNameInput = "groupNameInput";
|
#groupNameInput = "name";
|
||||||
#createGroupBnt = "createGroup";
|
#createGroupBnt = "createGroup";
|
||||||
#renameButton = "renameGroup";
|
#renameButton = "renameGroup";
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,7 @@ export default class GroupDetailPage extends GroupPage {
|
||||||
#actionDrpDwnItemRenameGroup = "renameGroupAction";
|
#actionDrpDwnItemRenameGroup = "renameGroupAction";
|
||||||
#actionDrpDwnItemDeleteGroup = "deleteGroup";
|
#actionDrpDwnItemDeleteGroup = "deleteGroup";
|
||||||
#headerGroupName = ".pf-l-level.pf-m-gutter";
|
#headerGroupName = ".pf-l-level.pf-m-gutter";
|
||||||
#renameGroupModalGroupNameInput = "groupNameInput";
|
#renameGroupModalGroupNameInput = "name";
|
||||||
#renameGroupModalRenameBtn = "renameGroup";
|
#renameGroupModalRenameBtn = "renameGroup";
|
||||||
#permissionSwitch = "permissionSwitch";
|
#permissionSwitch = "permissionSwitch";
|
||||||
|
|
||||||
|
|
|
@ -4,17 +4,14 @@ import {
|
||||||
Button,
|
Button,
|
||||||
ButtonVariant,
|
ButtonVariant,
|
||||||
Form,
|
Form,
|
||||||
FormGroup,
|
|
||||||
Modal,
|
Modal,
|
||||||
ModalVariant,
|
ModalVariant,
|
||||||
ValidatedOptions,
|
|
||||||
} from "@patternfly/react-core";
|
} from "@patternfly/react-core";
|
||||||
import { useForm } from "react-hook-form";
|
import { FormProvider, useForm } from "react-hook-form";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { TextControl } from "ui-shared";
|
||||||
import { adminClient } from "../admin-client";
|
import { adminClient } from "../admin-client";
|
||||||
import { useAlerts } from "../components/alert/Alerts";
|
import { useAlerts } from "../components/alert/Alerts";
|
||||||
import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
|
|
||||||
|
|
||||||
type GroupsModalProps = {
|
type GroupsModalProps = {
|
||||||
id?: string;
|
id?: string;
|
||||||
|
@ -31,13 +28,11 @@ export const GroupsModal = ({
|
||||||
}: GroupsModalProps) => {
|
}: GroupsModalProps) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { addAlert, addError } = useAlerts();
|
const { addAlert, addError } = useAlerts();
|
||||||
const {
|
|
||||||
register,
|
const form = useForm({
|
||||||
handleSubmit,
|
|
||||||
formState: { errors },
|
|
||||||
} = useForm({
|
|
||||||
defaultValues: { name: rename?.name },
|
defaultValues: { name: rename?.name },
|
||||||
});
|
});
|
||||||
|
const { handleSubmit } = form;
|
||||||
|
|
||||||
const submitForm = async (group: GroupRepresentation) => {
|
const submitForm = async (group: GroupRepresentation) => {
|
||||||
group.name = group.name?.trim();
|
group.name = group.name?.trim();
|
||||||
|
@ -96,28 +91,16 @@ export const GroupsModal = ({
|
||||||
</Button>,
|
</Button>,
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<Form id="group-form" isHorizontal onSubmit={handleSubmit(submitForm)}>
|
<FormProvider {...form}>
|
||||||
<FormGroup
|
<Form id="group-form" isHorizontal onSubmit={handleSubmit(submitForm)}>
|
||||||
name="create-modal-group"
|
<TextControl
|
||||||
label={t("name")}
|
name="name"
|
||||||
fieldId="create-group-name"
|
label={t("name")}
|
||||||
helperTextInvalid={t("required")}
|
rules={{ required: t("required") }}
|
||||||
validated={
|
|
||||||
errors.name ? ValidatedOptions.error : ValidatedOptions.default
|
|
||||||
}
|
|
||||||
isRequired
|
|
||||||
>
|
|
||||||
<KeycloakTextInput
|
|
||||||
data-testid="groupNameInput"
|
|
||||||
autoFocus
|
autoFocus
|
||||||
id="create-group-name"
|
|
||||||
validated={
|
|
||||||
errors.name ? ValidatedOptions.error : ValidatedOptions.default
|
|
||||||
}
|
|
||||||
{...register("name", { required: true })}
|
|
||||||
/>
|
/>
|
||||||
</FormGroup>
|
</Form>
|
||||||
</Form>
|
</FormProvider>
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue