diff --git a/frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx b/frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
index f2da72603..b0ec53acc 100644
--- a/frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
+++ b/frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
@@ -255,115 +255,14 @@ export const AccessPolicyForm = ({
name="secretPath"
render={({ field, fieldState: { error } }) => (
)}
- />
- (
-
-
-
-
-
-
-
- Select members that are allowed to approve requests
-
- {members.map(({ user }) => {
- const { id: userId } = user;
- const isChecked = value?.filter((el: {id: string, type: ApproverType}) => el.id === userId && el.type === ApproverType.User).length > 0;
- return (
- {
- evt.preventDefault();
- onChange(
- isChecked
- ? value?.filter((el: {id: string, type: ApproverType}) => el.id !== userId && el.type !== ApproverType.User)
- : [...(value || []), {id:userId, type: ApproverType.User}]
- );
- }}
- key={`create-policy-members-${userId}`}
- iconPos="right"
- icon={isChecked && }
- >
- {user.username}
-
- );
- })}
-
-
-
- )}
- />
- (
-
-
-
-
-
-
-
- Select groups that are allowed to approve requests
-
- {groups && groups.map(({ group }) => {
- const { id } = group;
- const isChecked = value?.includes({id, type: ApproverType.Group});
-
- return (
- {
- evt.preventDefault();
- onChange(
- isChecked
- ? value?.filter((el: {id: string, type: ApproverType}) => el.id !== id && el.type !== ApproverType.Group)
- : [...(value || []), {id, type: ApproverType.Group}]
- );
- }}
- key={`create-policy-members-${id}`}
- iconPos="right"
- icon={isChecked && }
- >
- {group.name}
-
- );
- })}
-
-
-
- )}
- />
+ />
)}
/>
+ Approvers
+ (
+
+
+
+ e.type=== ApproverType.User).length ? `${value.filter((e) => e.type=== ApproverType.User).length} selected` : "None"}
+ className="text-left"
+ />
+
+
+
+ Select members that are allowed to approve requests
+
+ {members.map(({ user }) => {
+ const { id: userId } = user;
+ const isChecked = value?.filter((el: {id: string, type: ApproverType}) => el.id === userId && el.type === ApproverType.User).length > 0;
+ return (
+ {
+ evt.preventDefault();
+ onChange(
+ isChecked
+ ? value?.filter((el: {id: string, type: ApproverType}) => el.id !== userId && el.type !== ApproverType.User)
+ : [...(value || []), {id:userId, type: ApproverType.User}]
+ );
+ }}
+ key={`create-policy-members-${userId}`}
+ iconPos="right"
+ icon={isChecked && }
+ >
+ {user.username}
+
+ );
+ })}
+
+
+
+ )}
+ />
+ (
+
+
+
+ e.type=== ApproverType.Group).length ? `${value?.filter((e) => e.type=== ApproverType.Group).length} selected` : "None"}
+ className="text-left"
+ />
+
+
+
+ Select groups that are allowed to approve requests
+
+ {groups && groups.map(({ group }) => {
+ const { id } = group;
+ const isChecked = value?.filter((el: {id: string, type: ApproverType}) => el.id === id && el.type === ApproverType.Group).length > 0;
+
+ return (
+ {
+ evt.preventDefault();
+ onChange(
+ isChecked
+ ? value?.filter((el: {id: string, type: ApproverType}) => el.id !== id && el.type !== ApproverType.Group)
+ : [...(value || []), {id, type: ApproverType.Group}]
+ );
+ }}
+ key={`create-policy-members-${id}`}
+ iconPos="right"
+ icon={isChecked && }
+ >
+ {group.name}
+
+ );
+ })}
+
+
+
+ )}
+ />