make resouce field required (#2290)

fixes: #2061

src/clients/authorization/PermissionDetails.tsx

@@ -196,6 +196,8 @@ export default function PermissionDetails() {
             <FormGroup
               label={t("common:name")}
               isRequired
+              helperTextInvalid={t("common:required")}
+              validated={errors.name ? "error" : "default"}
               fieldId="name"
               labelIcon={
                 <HelpItem
@@ -208,6 +210,7 @@ export default function PermissionDetails() {
                 id="name"
                 name="name"
                 ref={register({ required: true })}
+                validated={errors.name ? "error" : "default"}
               />
             </FormGroup>
             <FormGroup
@@ -282,6 +285,9 @@ export default function PermissionDetails() {
                     fieldLabelId="clients:resources"
                   />
                 }
+                helperTextInvalid={t("common:required")}
+                validated={errors.resources ? "error" : "default"}
+                isRequired
               >
                 <ResourcesPolicySelect
                   name="resources"
@@ -295,6 +301,7 @@ export default function PermissionDetails() {
                       ? SelectVariant.typeahead
                       : SelectVariant.typeaheadMulti
                   }
+                  isRequired
                 />
               </FormGroup>
             )}

src/clients/authorization/ResourcesPolicySelect.tsx

@@ -8,11 +8,12 @@ import type { Clients } from "@keycloak/keycloak-admin-client/lib/resources/clie
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 
 type ResourcesPolicySelectProps = {
-  name: string;
+  name: keyof PolicyRepresentation;
   clientId: string;
   searchFunction: keyof Pick<Clients, "listPolicies" | "listResources">;
   variant?: SelectVariant;
   preSelected?: string;
+  isRequired?: boolean;
 };
 
 type Policies = {
@@ -26,11 +27,12 @@ export const ResourcesPolicySelect = ({
   clientId,
   variant = SelectVariant.typeaheadMulti,
   preSelected,
+  isRequired = false,
 }: ResourcesPolicySelectProps) => {
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
 
-  const { control } = useFormContext<PolicyRepresentation>();
+  const { control, errors } = useFormContext<PolicyRepresentation>();
   const [items, setItems] = useState<Policies[]>([]);
   const [search, setSearch] = useState("");
   const [open, setOpen] = useState(false);
@@ -64,6 +66,7 @@ export const ResourcesPolicySelect = ({
       name={name}
       defaultValue={preSelected ? [preSelected] : []}
       control={control}
+      rules={{ validate: (value) => !isRequired || value.length > 0 }}
       render={({ onChange, value }) => (
         <Select
           toggleId={name}
@@ -89,6 +92,7 @@ export const ResourcesPolicySelect = ({
           isOpen={open}
           aria-labelledby={t(name)}
           isDisabled={!!preSelected}
+          validated={errors[name] ? "error" : "default"}
         >
           {toSelectOptions()}
         </Select>