From fd7d8ddf2d2b3b4c82e96e77a187193331fc73c1 Mon Sep 17 00:00:00 2001
From: Meet <meetcshah19@gmail.com>
Date: Mon, 23 Sep 2024 20:59:05 +0530
Subject: [PATCH] fix: group selection on create policy

---
 .../components/AccessPolicyModal.tsx          | 125 +++++++++---------
 1 file changed, 63 insertions(+), 62 deletions(-)

diff --git a/frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx b/frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
index f2da726034..b0ec53accf 100644
--- a/frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
+++ b/frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
@@ -255,20 +255,76 @@ export const AccessPolicyForm = ({
               name="secretPath"
               render={({ field, fieldState: { error } }) => (
                 <FormControl
-                  label="Secret Path"
+                label="Secret Path"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                >
+                  <Input {...field} value={field.value || ""} />
+                </FormControl>
+              )}
+              />
+            <Controller
+              control={control}
+              name="approvals"
+              defaultValue={1}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Minimum Approvals Required"
                   isError={Boolean(error)}
                   errorText={error?.message}
                 >
-                  <Input {...field} value={field.value || ""} />
+                  <Input
+                    {...field}
+                    type="number"
+                    min={1}
+                    onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
+                  />
                 </FormControl>
               )}
             />
+            <Controller
+              control={control}
+              name="enforcementLevel"
+              defaultValue={EnforcementLevel.Hard}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Enforcement Level"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  tooltipText="Determines the level of enforcement for required approvers of a request"
+                  helperText={
+                    field.value === EnforcementLevel.Hard
+                      ? "All approvers must approve the request."
+                      : "All approvers must approve the request; however, the requester can bypass approval requirements in emergencies."
+                  }
+                >
+                  <Select
+                    value={field.value}
+                    onValueChange={(val) => field.onChange(val as EnforcementLevel)}
+                    className="w-full border border-mineshaft-500"
+                  >
+                    {Object.values(EnforcementLevel).map((level) => {
+                      return (
+                        <SelectItem
+                          value={level}
+                          key={`enforcement-level-${level}`}
+                          className="text-xs"
+                        >
+                          {formatEnforcementLevel(level)}
+                        </SelectItem>
+                      );
+                    })}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <p>Approvers</p>
             <Controller
               control={control}
               name="approvers"
               render={({ field: { value, onChange }, fieldState: { error } }) => (
                 <FormControl
-                  label="Required User Approvers"
+                  label="User Approvers"
                   isError={Boolean(error)}
                   errorText={error?.message}
                 >
@@ -276,7 +332,7 @@ export const AccessPolicyForm = ({
                     <DropdownMenuTrigger asChild>
                       <Input
                         isReadOnly
-                        value={value?.length ? `${value.length} selected` : "None"}
+                        value={value?.filter((e) => e.type=== ApproverType.User).length ? `${value.filter((e) => e.type=== ApproverType.User).length} selected` : "None"}
                         className="text-left"
                       />
                     </DropdownMenuTrigger>
@@ -318,7 +374,7 @@ export const AccessPolicyForm = ({
               name="approvers"
               render={({ field: { value, onChange }, fieldState: { error } }) => (
                 <FormControl
-                  label="Required Group Approvers"
+                  label="Group Approvers"
                   isError={Boolean(error)}
                   errorText={error?.message}
                 >
@@ -326,7 +382,7 @@ export const AccessPolicyForm = ({
                     <DropdownMenuTrigger asChild>
                       <Input
                         isReadOnly
-                        value={value?.length ? `${value.length} selected` : "None"}
+                        value={value?.filter((e) => e.type=== ApproverType.Group).length ? `${value?.filter((e) => e.type=== ApproverType.Group).length} selected` : "None"}
                         className="text-left"
                       />
                     </DropdownMenuTrigger>
@@ -339,7 +395,7 @@ export const AccessPolicyForm = ({
                       </DropdownMenuLabel>
                       {groups && groups.map(({ group }) => {
                         const { id } = group;
-                        const isChecked = value?.includes({id, type: ApproverType.Group});
+                        const isChecked = value?.filter((el: {id: string, type: ApproverType}) => el.id === id && el.type === ApproverType.Group).length > 0;
 
                         return (
                           <DropdownMenuItem
@@ -364,61 +420,6 @@ export const AccessPolicyForm = ({
                 </FormControl>
               )}
             />
-            <Controller
-              control={control}
-              name="approvals"
-              defaultValue={1}
-              render={({ field, fieldState: { error } }) => (
-                <FormControl
-                  label="Minimum Approvals Required"
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                >
-                  <Input
-                    {...field}
-                    type="number"
-                    min={1}
-                    onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
-                  />
-                </FormControl>
-              )}
-            />
-            <Controller
-              control={control}
-              name="enforcementLevel"
-              defaultValue={EnforcementLevel.Hard}
-              render={({ field, fieldState: { error } }) => (
-                <FormControl
-                  label="Enforcement Level"
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                  tooltipText="Determines the level of enforcement for required approvers of a request"
-                  helperText={
-                    field.value === EnforcementLevel.Hard
-                      ? "All approvers must approve the request."
-                      : "All approvers must approve the request; however, the requester can bypass approval requirements in emergencies."
-                  }
-                >
-                  <Select
-                    value={field.value}
-                    onValueChange={(val) => field.onChange(val as EnforcementLevel)}
-                    className="w-full border border-mineshaft-500"
-                  >
-                    {Object.values(EnforcementLevel).map((level) => {
-                      return (
-                        <SelectItem
-                          value={level}
-                          key={`enforcement-level-${level}`}
-                          className="text-xs"
-                        >
-                          {formatEnforcementLevel(level)}
-                        </SelectItem>
-                      );
-                    })}
-                  </Select>
-                </FormControl>
-              )}
-            />
             <div className="mt-8 flex items-center space-x-4">
               <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
                 Save