Added my PR review comments after the merge (#1605)

src/components/dynamic/MultivaluedChipsComponent.tsx

@@ -17,11 +17,12 @@ import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/
 import { useParams } from "react-router";
 import type { EditClientPolicyConditionParams } from "../../realm-settings/routes/EditCondition";
 import { GroupPickerDialog } from "../group/GroupPickerDialog";
-import type GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/groupRepresentation";
 
 export const MultivaluedChipsComponent = ({
   defaultValue,
   name,
+  label,
+  helpText,
 }: ComponentProps) => {
   const { t } = useTranslation("dynamic");
   const { control } = useFormContext();
@@ -31,9 +32,6 @@ export const MultivaluedChipsComponent = ({
   const [clientScopes, setClientScopes] = useState<ClientScopeRepresentation[]>(
     []
   );
-  const [selectedGroups, setSelectedGroups] = useState<GroupRepresentation[]>(
-    []
-  );
 
   useFetch(
     () => adminClient.clientScopes.find(),
@@ -49,26 +47,9 @@ export const MultivaluedChipsComponent = ({
 
   return (
     <FormGroup
-      label={
-        name === "scopes"
-          ? t("realm-settings:clientScopesCondition")
-          : t("common:groups")
-      }
-      id={name === "scopes" ? "expected-scopes" : "expected-groups"}
+      label={t(label!)}
       labelIcon={
-        <HelpItem
-          helpText={
-            name === "scopes"
-              ? t("realm-settings-help:clientScopesConditionTooltip")
-              : t("realm-settings-help:clientUpdaterSourceGroupsTooltip")
-          }
-          forLabel={
-            name === "scopes"
-              ? t("clientScopes")
-              : t("clientUpdaterSourceGroups")
-          }
-          forID={name!}
-        />
+        <HelpItem helpText={t(helpText!)} forLabel={label!} forID={name!} />
       }
       fieldId={name!}
     >
@@ -77,8 +58,7 @@ export const MultivaluedChipsComponent = ({
         control={control}
         defaultValue={[defaultValue]}
         rules={{ required: true }}
-        render={({ onChange, value }) => {
-          return (
+        render={({ onChange, value }) => (
           <>
             {open && name === "scopes" && (
               <AddScopeDialog
@@ -107,7 +87,6 @@ export const MultivaluedChipsComponent = ({
                 }}
                 onConfirm={(groups) => {
                   onChange([...value, ...groups.map((group) => group.name)]);
-                    setSelectedGroups([...selectedGroups!, ...groups]);
                   setOpen(false);
                 }}
                 onClose={() => {
@@ -131,9 +110,6 @@ export const MultivaluedChipsComponent = ({
               isClosable
               onClick={() => {
                 onChange([]);
-                  if (name === "groups") {
-                    setSelectedGroups([]);
-                  }
               }}
             >
               {value.map((currentChip: string) => (
@@ -143,11 +119,6 @@ export const MultivaluedChipsComponent = ({
                     onChange(
                       value.filter((item: string) => item !== currentChip)
                     );
-                      if (name === "groups") {
-                        setSelectedGroups(
-                          value.filter((item: string) => item !== currentChip)
-                        );
-                      }
                   }}
                 >
                   {currentChip}
@@ -164,8 +135,7 @@ export const MultivaluedChipsComponent = ({
               {t("common:select")}
             </Button>
           </>
-          );
-        }}
+        )}
       />
     </FormGroup>
   );

src/components/dynamic/labels.ts

@@ -168,7 +168,7 @@ export default {
     "client-updater-source-groups": {
       label: "Groups",
       tooltip:
-        "Name of groups to check. Condition evaluates to true if the entity, who creates/updates client is member of some of the specified groups. Configured groups are specified by their simple name, which must match to the name of the Keycloak group. No support for group hierarchy is used here.}",
+        "Name of groups to check. Condition evaluates to true if the entity, who creates/updates client is member of some of the specified groups. Configured groups are specified by their simple name, which must match to the name of the Keycloak group. No support for group hierarchy is used here.",
     },
     "client-updater-trusted-hosts": {
       label: "Trusted hosts",

src/realm-settings/NewClientPolicyCondition.tsx

@@ -291,35 +291,22 @@ export default function NewClientPolicyCondition() {
           <FormProvider {...form}>
             {conditionProperties.map((property) => {
               const componentType = property.type!;
-              if (
-                property.name === "roles" &&
-                (conditionType === "client-roles" ||
-                  conditionName === "client-roles")
-              ) {
+              if (property.name === "roles") {
                 return <MultivaluedRoleComponent {...property} />;
-              } else if (
-                property.name === "scopes" &&
-                (conditionType === "client-scopes" ||
-                  conditionName === "client-scopes")
-              ) {
+              }
+
+              if (property.name === "scopes" || property.name === "groups") {
                 return (
                   <MultivaluedChipsComponent
-                    defaultValue="offline_access"
+                    defaultValue={
+                      property.name === "scopes" ? "offline_access" : "topgroup"
+                    }
                     {...property}
                   />
                 );
-              } else if (
-                property.name === "groups" &&
-                (conditionType === "client-updater-source-groups" ||
-                  conditionName === "client-updater-source-groups")
-              ) {
-                return (
-                  <MultivaluedChipsComponent
-                    defaultValue="topgroup"
-                    {...property}
-                  />
-                );
-              } else if (isValidComponentType(componentType)) {
+              }
+
+              if (isValidComponentType(componentType)) {
                 const Component = COMPONENTS[componentType];
                 return <Component key={property.name} {...property} />;
               } else {