Added missing groups claim field (#2170)

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,6 +51,25 @@ export const Group = () => {
   );
 
   return (
+    <>
+      <FormGroup
+        label={t("groupsClaim")}
+        labelIcon={
+          <HelpItem
+            helpText="clients-help:groupsClaim"
+            fieldLabelId="clients:groupsClaim"
+          />
+        }
+        fieldId="groups"
+      >
+        <TextInput
+          type="text"
+          id="groupsClaim"
+          name="groupsClaim"
+          data-testid="groupsClaim"
+          ref={register}
+        />
+      </FormGroup>
       <FormGroup
         label={t("groups")}
         labelIcon={
@@ -70,7 +89,7 @@ export const Group = () => {
           defaultValue={[]}
           rules={{
             validate: (value: GroupValue[]) =>
-            value.filter((c) => c.id).length > 0,
+              value.filter(({ id }) => id).length > 0,
           }}
           render={({ onChange, value }) => (
             <>
@@ -82,17 +101,14 @@ export const Group = () => {
                     ok: "common:add",
                   }}
                   onConfirm={(groups) => {
-                  onChange([
+                    onChange([...value, ...groups.map(({ id }) => ({ id }))]);
-                    ...value,
-                    ...groups.map((group) => ({ id: group.id })),
-                  ]);
                     setSelectedGroups([...selectedGroups, ...groups]);
                     setOpen(false);
                   }}
                   onClose={() => {
                     setOpen(false);
                   }}
-                filterGroups={selectedGroups.map((g) => g.name!)}
+                  filterGroups={selectedGroups.map(({ name }) => name!)}
                 />
               )}
               <Button
@@ -144,10 +160,10 @@ export const Group = () => {
                       icon={<MinusCircleIcon />}
                       onClick={() => {
                         setValue("groups", [
-                        ...(values || []).filter((s) => s.id !== group.id),
+                          ...(values || []).filter(({ id }) => id !== group.id),
                         ]);
                         setSelectedGroups([
-                        ...selectedGroups.filter((s) => s.id !== group.id),
+                          ...selectedGroups.filter(({ id }) => id !== group.id),
                         ]);
                       }}
                     />
@@ -158,5 +174,6 @@ export const Group = () => {
           </TableComposable>
         )}
       </FormGroup>
+    </>
   );
 };

src/clients/help.ts

@@ -255,6 +255,8 @@ export default {
     applyPolicy:
       "Specifies all the policies that must be applied to the scopes defined by this policy or permission.",
     policyClient: "Specifies which client(s) are allowed by this policy.",
+    groupsClaim:
+      "If defined, the policy will fetch user's groups from the given claim within an access token or ID token representing the identity asking permissions. If not defined, user's groups are obtained from your realm configuration.",
     policyGroups: "Specifies which user(s) are allowed by this policy.",
     targetClaim: "Specifies the target claim which the policy will fetch.",
     regexPattern: "Specifies the regex pattern.",

src/clients/messages.ts

@@ -230,6 +230,7 @@ export default {
     applyPolicy: "Apply policy",
     addClientScopes: "Add client scopes",
     clientScope: "Client scope",
+    groupsClaim: "Groups claim",
     addGroups: "Add groups",
     groups: "Groups",
     users: "Users",