added required attribute to multiline (#34336)

fixes: #32786

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx

@@ -2,9 +2,9 @@ import {
   Button,
   ButtonVariant,
   InputGroup,
+  InputGroupItem,
   TextInput,
   TextInputProps,
-  InputGroupItem,
 } from "@patternfly/react-core";
 import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
 import { Fragment, useEffect, useMemo } from "react";
@@ -25,6 +25,7 @@ export type MultiLineInputProps = Omit<TextInputProps, "form"> & {
   isDisabled?: boolean;
   defaultValue?: string[];
   stringify?: boolean;
+  isRequired?: boolean;
 };
 
 export const MultiLineInput = ({
@@ -33,6 +34,7 @@ export const MultiLineInput = ({
   isDisabled = false,
   defaultValue,
   stringify = false,
+  isRequired = false,
   id,
   ...rest
 }: MultiLineInputProps) => {
@@ -78,11 +80,17 @@ export const MultiLineInput = ({
     const fieldValue = values.flatMap((field) => field);
     setValue(name, stringify ? toStringValue(fieldValue) : fieldValue, {
       shouldDirty: true,
+      shouldValidate: true,
     });
   };
 
   useEffect(() => {
-    register(name);
+    register(name, {
+      validate: (value) =>
+        isRequired && toStringValue(value || []).length === 0
+          ? t("required")
+          : undefined,
+    });
   }, [register]);
 
   return (

js/apps/admin-ui/src/organizations/NewOrganization.tsx

@@ -22,7 +22,7 @@ export default function NewOrganization() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { realm } = useRealm();
-  const form = useForm();
+  const form = useForm({ mode: "onChange" });
   const { handleSubmit, formState } = form;
 
   const save = async (org: OrganizationFormType) => {

js/apps/admin-ui/src/organizations/OrganizationForm.tsx

@@ -1,5 +1,6 @@
 import OrganizationRepresentation from "@keycloak/keycloak-admin-client/lib/defs/organizationRepresentation";
 import {
+  FormErrorText,
   HelpItem,
   TextAreaControl,
   TextControl,
@@ -33,7 +34,10 @@ export const OrganizationForm = ({
   readOnly = false,
 }: OrganizationFormProps) => {
   const { t } = useTranslation();
-  const { setValue } = useFormContext();
+  const {
+    setValue,
+    formState: { errors },
+  } = useFormContext();
   const name = useWatch({ name: "name" });
 
   useEffect(() => {
@@ -64,13 +68,18 @@ export const OrganizationForm = ({
             fieldLabelId="domain"
           />
         }
+        isRequired
       >
         <MultiLineInput
           id="domain"
           name="domains"
           aria-label={t("domain")}
           addButtonLabel="addDomain"
+          isRequired
         />
+        {errors?.["domains"]?.message && (
+          <FormErrorText message={errors["domains"].message.toString()} />
+        )}
       </FormGroup>
       <TextControl
         label={t("redirectUrl")}