From e3c0bb82a1df67c2c7fe03074fc3ebadbfbc11c4 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 7 Mar 2022 18:08:46 +0100
Subject: [PATCH] Added missing groups claim field (#2170)

---
 src/clients/authorization/policy/Group.tsx | 229 +++++++++++----------
 src/clients/help.ts                        |   2 +
 src/clients/messages.ts                    |   1 +
 3 files changed, 126 insertions(+), 106 deletions(-)

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 (
-    <FormGroup
-      label={t("groups")}
-      labelIcon={
-        <HelpItem
-          helpText="clients-help:policyGroups"
-          fieldLabelId="clients:groups"
+    <>
+      <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}
         />
-      }
-      fieldId="groups"
-      helperTextInvalid={t("requiredGroups")}
-      validated={errors.groups ? "error" : "default"}
-      isRequired
-    >
-      <Controller
-        name="groups"
-        control={control}
-        defaultValue={[]}
-        rules={{
-          validate: (value: GroupValue[]) =>
-            value.filter((c) => c.id).length > 0,
-        }}
-        render={({ onChange, value }) => (
-          <>
-            {open && (
-              <GroupPickerDialog
-                type="selectMany"
-                text={{
-                  title: "clients:addGroupsToGroupPolicy",
-                  ok: "common:add",
+      </FormGroup>
+      <FormGroup
+        label={t("groups")}
+        labelIcon={
+          <HelpItem
+            helpText="clients-help:policyGroups"
+            fieldLabelId="clients:groups"
+          />
+        }
+        fieldId="groups"
+        helperTextInvalid={t("requiredGroups")}
+        validated={errors.groups ? "error" : "default"}
+        isRequired
+      >
+        <Controller
+          name="groups"
+          control={control}
+          defaultValue={[]}
+          rules={{
+            validate: (value: GroupValue[]) =>
+              value.filter(({ id }) => id).length > 0,
+          }}
+          render={({ onChange, value }) => (
+            <>
+              {open && (
+                <GroupPickerDialog
+                  type="selectMany"
+                  text={{
+                    title: "clients:addGroupsToGroupPolicy",
+                    ok: "common:add",
+                  }}
+                  onConfirm={(groups) => {
+                    onChange([...value, ...groups.map(({ id }) => ({ id }))]);
+                    setSelectedGroups([...selectedGroups, ...groups]);
+                    setOpen(false);
+                  }}
+                  onClose={() => {
+                    setOpen(false);
+                  }}
+                  filterGroups={selectedGroups.map(({ name }) => name!)}
+                />
+              )}
+              <Button
+                data-testid="select-group-button"
+                variant="secondary"
+                onClick={() => {
+                  setOpen(true);
                 }}
-                onConfirm={(groups) => {
-                  onChange([
-                    ...value,
-                    ...groups.map((group) => ({ id: group.id })),
-                  ]);
-                  setSelectedGroups([...selectedGroups, ...groups]);
-                  setOpen(false);
-                }}
-                onClose={() => {
-                  setOpen(false);
-                }}
-                filterGroups={selectedGroups.map((g) => g.name!)}
-              />
-            )}
-            <Button
-              data-testid="select-group-button"
-              variant="secondary"
-              onClick={() => {
-                setOpen(true);
-              }}
-            >
-              {t("addGroups")}
-            </Button>
-          </>
-        )}
-      />
-      {selectedGroups.length > 0 && (
-        <TableComposable>
-          <Thead>
-            <Tr>
-              <Th>{t("groups")}</Th>
-              <Th>{t("extendToChildren")}</Th>
-              <Th />
-            </Tr>
-          </Thead>
-          <Tbody>
-            {selectedGroups.map((group, index) => (
-              <Tr key={group.id}>
-                <Td>{group.path}</Td>
-                <Td>
-                  <Controller
-                    name={`groups[${index}].extendChildren`}
-                    defaultValue={false}
-                    control={control}
-                    render={({ onChange, value }) => (
-                      <Checkbox
-                        id="extendChildren"
-                        data-testid="standard"
-                        name="extendChildren"
-                        isChecked={value}
-                        onChange={onChange}
-                        isDisabled={group.subGroups?.length === 0}
-                      />
-                    )}
-                  />
-                </Td>
-                <Td>
-                  <Button
-                    variant="link"
-                    className="keycloak__client-authorization__policy-row-remove"
-                    icon={<MinusCircleIcon />}
-                    onClick={() => {
-                      setValue("groups", [
-                        ...(values || []).filter((s) => s.id !== group.id),
-                      ]);
-                      setSelectedGroups([
-                        ...selectedGroups.filter((s) => s.id !== group.id),
-                      ]);
-                    }}
-                  />
-                </Td>
+              >
+                {t("addGroups")}
+              </Button>
+            </>
+          )}
+        />
+        {selectedGroups.length > 0 && (
+          <TableComposable>
+            <Thead>
+              <Tr>
+                <Th>{t("groups")}</Th>
+                <Th>{t("extendToChildren")}</Th>
+                <Th />
               </Tr>
-            ))}
-          </Tbody>
-        </TableComposable>
-      )}
-    </FormGroup>
+            </Thead>
+            <Tbody>
+              {selectedGroups.map((group, index) => (
+                <Tr key={group.id}>
+                  <Td>{group.path}</Td>
+                  <Td>
+                    <Controller
+                      name={`groups[${index}].extendChildren`}
+                      defaultValue={false}
+                      control={control}
+                      render={({ onChange, value }) => (
+                        <Checkbox
+                          id="extendChildren"
+                          data-testid="standard"
+                          name="extendChildren"
+                          isChecked={value}
+                          onChange={onChange}
+                          isDisabled={group.subGroups?.length === 0}
+                        />
+                      )}
+                    />
+                  </Td>
+                  <Td>
+                    <Button
+                      variant="link"
+                      className="keycloak__client-authorization__policy-row-remove"
+                      icon={<MinusCircleIcon />}
+                      onClick={() => {
+                        setValue("groups", [
+                          ...(values || []).filter(({ id }) => id !== group.id),
+                        ]);
+                        setSelectedGroups([
+                          ...selectedGroups.filter(({ id }) => id !== group.id),
+                        ]);
+                      }}
+                    />
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </TableComposable>
+        )}
+      </FormGroup>
+    </>
   );
 };
diff --git a/src/clients/help.ts b/src/clients/help.ts
index 29896a89f6..79f919edc7 100644
--- a/src/clients/help.ts
+++ b/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.",
diff --git a/src/clients/messages.ts b/src/clients/messages.ts
index 362dcac7f4..d0f77d9c79 100644
--- a/src/clients/messages.ts
+++ b/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",