diff --git a/src/clients/authorization/policy/Group.tsx b/src/clients/authorization/policy/Group.tsx index 7641510f88..ead7941ec9 100644 --- a/src/clients/authorization/policy/Group.tsx +++ b/src/clients/authorization/policy/Group.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { useFormContext, Controller } from "react-hook-form"; import { MinusCircleIcon } from "@patternfly/react-icons"; -import { FormGroup, Button, Checkbox } from "@patternfly/react-core"; +import { FormGroup, Button, Checkbox, TextInput } from "@patternfly/react-core"; import { TableComposable, Thead, @@ -24,7 +24,7 @@ export type GroupValue = { export const Group = () => { const { t } = useTranslation("clients"); - const { control, getValues, setValue, errors } = + const { control, register, getValues, setValue, errors } = useFormContext<{ groups?: GroupValue[] }>(); const values = getValues("groups"); @@ -51,112 +51,129 @@ export const Group = () => { ); return ( - + + } + fieldId="groups" + > + - } - fieldId="groups" - helperTextInvalid={t("requiredGroups")} - validated={errors.groups ? "error" : "default"} - isRequired - > - - value.filter((c) => c.id).length > 0, - }} - render={({ onChange, value }) => ( - <> - {open && ( - + + } + fieldId="groups" + helperTextInvalid={t("requiredGroups")} + validated={errors.groups ? "error" : "default"} + isRequired + > + + value.filter(({ id }) => id).length > 0, + }} + render={({ onChange, value }) => ( + <> + {open && ( + { + onChange([...value, ...groups.map(({ id }) => ({ id }))]); + setSelectedGroups([...selectedGroups, ...groups]); + setOpen(false); + }} + onClose={() => { + setOpen(false); + }} + filterGroups={selectedGroups.map(({ name }) => name!)} + /> + )} + - - )} - /> - {selectedGroups.length > 0 && ( - - - - {t("groups")} - {t("extendToChildren")} - - - - - {selectedGroups.map((group, index) => ( - - {group.path} - - ( - - )} - /> - - - + + )} + /> + {selectedGroups.length > 0 && ( + + + + {t("groups")} + {t("extendToChildren")} + - ))} - - - )} - + + + {selectedGroups.map((group, index) => ( + + {group.path} + + ( + + )} + /> + + +