From ac0fd2362937492d3cd6d3efd7c9fa0a4f7af193 Mon Sep 17 00:00:00 2001
From: abilpraju-aot <abil.raju@aot-technologies.com>
Date: Wed, 17 Jul 2024 16:20:38 +0530
Subject: [PATCH] [Bugfix] added unique id for checkbox

---
 .../src/components/roles/roles.tsx            | 449 ++++++++++--------
 1 file changed, 256 insertions(+), 193 deletions(-)

diff --git a/forms-flow-admin/src/components/roles/roles.tsx b/forms-flow-admin/src/components/roles/roles.tsx
index 5dc855d0a..cb6e9eed4 100644
--- a/forms-flow-admin/src/components/roles/roles.tsx
+++ b/forms-flow-admin/src/components/roles/roles.tsx
@@ -7,7 +7,12 @@ import paginationFactory from "react-bootstrap-table2-paginator";
 import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
 import { fetchUsers } from "../../services/users";
-import { CreateRole, DeleteRole, UpdateRole, fetchPermissions } from "../../services/roles";
+import {
+  CreateRole,
+  DeleteRole,
+  UpdateRole,
+  fetchPermissions,
+} from "../../services/roles";
 import Modal from "react-bootstrap/Modal";
 import Loading from "../loading";
 import DropdownButton from "react-bootstrap/DropdownButton";
@@ -36,14 +41,18 @@ const Roles = React.memo((props: any) => {
   const [showRoleModal, setShowRoleModal] = useState(false);
   const [showEditRoleModal, setShowEditRoleModal] = useState(false);
   const [loading, setLoading] = React.useState(false);
-  const [payload, setPayload] = React.useState({ name: "", description: "" , permissions: [] });
+  const [payload, setPayload] = React.useState({
+    name: "",
+    description: "",
+    permissions: [],
+  });
   // Toggle for Delete Confirm modal
   const [showConfirmDelete, setShowConfirmDelete] = React.useState(false);
   const initialRoleType = {
     name: "",
     id: "",
     description: "",
-    permissions: []
+    permissions: [],
   };
   const [deleteCandidate, setDeleteCandidate] = React.useState(initialRoleType);
   const [selectedRoleIdentifier, setSelectedRoleIdentifier] =
@@ -51,46 +60,59 @@ const Roles = React.memo((props: any) => {
   const [editCandidate, setEditCandidate] = React.useState(initialRoleType);
   const [disabled, setDisabled] = React.useState(true);
   const [search, setSerach] = React.useState("");
-  const [permission, setPermission] = React.useState([])
+  const [permission, setPermission] = React.useState([]);
 
   const filterList = (filterTerm, List) => {
     let roleList = removingTenantId(List);
     let newRoleList = roleList.filter((role) => {
       return role.name.toLowerCase().search(filterTerm.toLowerCase()) !== -1;
     });
-    return newRoleList
+    return newRoleList;
   };
 
   React.useEffect(() => {
-    setDisabled(!(payload.name?.trim() && payload.description?.trim() && payload.permissions.length !== 0));
+    setDisabled(
+      !(
+        payload.name?.trim() &&
+        payload.description?.trim() &&
+        payload.permissions.length !== 0
+      )
+    );
   }, [payload]);
 
   React.useEffect(() => {
     setDisabled(
-      !(editCandidate.name?.trim() && editCandidate.description?.trim() && editCandidate.permissions.length !== 0)
+      !(
+        editCandidate.name?.trim() &&
+        editCandidate.description?.trim() &&
+        editCandidate.permissions.length !== 0
+      )
     );
   }, [editCandidate]);
 
   React.useEffect(() => {
     let updatedRoles = props.roles;
-    
+
     if (search) {
       updatedRoles = filterList(search, updatedRoles);
     }
-    
+
     if (updatedRoles.length > 0) {
       updatedRoles = removingTenantId(updatedRoles);
     }
-    
+
     setRoles(updatedRoles);
   }, [props.roles, search]);
 
   React.useEffect(() => {
-    fetchPermissions((data) => {
-      setPermission(data);
-    }, (err)=>{
-      setError(err);
-    });
+    fetchPermissions(
+      (data) => {
+        setPermission(data);
+      },
+      (err) => {
+        setError(err);
+      }
+    );
   }, []);
 
   const handlFilter = (e) => {
@@ -121,28 +143,39 @@ const Roles = React.memo((props: any) => {
   const handleChangeDescription = (e) => {
     setPayload({ ...payload, description: e.target.value });
   };
-  const handlePermissionCheck = (permissionName: string, dependsOn: string[]) => {
+  const handlePermissionCheck = (
+    permissionName: string,
+    dependsOn: string[]
+  ) => {
     let updatedPermissions: string[] = [...payload.permissions];
     const isChecked = updatedPermissions.includes(permissionName);
-  
+
     if (!isChecked) {
-        updatedPermissions.push(permissionName);
-        dependsOn.forEach(dependency => {
-            if (!updatedPermissions.includes(dependency)) {
-                updatedPermissions.push(dependency);
-            }
-        });
+      updatedPermissions.push(permissionName);
+      dependsOn.forEach((dependency) => {
+        if (!updatedPermissions.includes(dependency)) {
+          updatedPermissions.push(dependency);
+        }
+      });
     } else {
-        updatedPermissions = updatedPermissions.filter(permission => permission !== permissionName);
-        dependsOn.forEach(dependency => {
-            updatedPermissions = updatedPermissions.filter(permission => permission !== dependency);
-        });
+      updatedPermissions = updatedPermissions.filter(
+        (permission) => permission !== permissionName
+      );
+      dependsOn.forEach((dependency) => {
+        updatedPermissions = updatedPermissions.filter(
+          (permission) => permission !== dependency
+        );
+      });
     }
-    setPayload ({ ...payload, permissions: updatedPermissions });
-};
+    setPayload({ ...payload, permissions: updatedPermissions });
+  };
 
   const validateRolePayload = (payload) => {
-    return !(payload.name === "" || payload.description === "" || payload.permissions.length === 0);
+    return !(
+      payload.name === "" ||
+      payload.description === "" ||
+      payload.permissions.length === 0
+    );
   };
   //check regex exept _ -
   const hasSpecialCharacters = (text) => {
@@ -166,12 +199,12 @@ const Roles = React.memo((props: any) => {
     //     return;
     //   }
     // } else {
-      if (hasSpecialCharacterswithslash(payload.name)) {
-        toast.error(
-          t("Role names cannot contain special characters except _ , - , / ")
-        );
-        return;
-      }
+    if (hasSpecialCharacterswithslash(payload.name)) {
+      toast.error(
+        t("Role names cannot contain special characters except _ , - , / ")
+      );
+      return;
+    }
     // }
     setDisabled(true);
     CreateRole(
@@ -200,12 +233,12 @@ const Roles = React.memo((props: any) => {
     //     return;
     //   }
     // } else {
-      if (hasSpecialCharacterswithslash(editCandidate.name)) {
-        toast.error(
-          t("Role names cannot contain special characters except _ , - , / ")
-        );
-        return;
-      }
+    if (hasSpecialCharacterswithslash(editCandidate.name)) {
+      toast.error(
+        t("Role names cannot contain special characters except _ , - , / ")
+      );
+      return;
+    }
     // }
     setDisabled(true);
     UpdateRole(
@@ -223,7 +256,7 @@ const Roles = React.memo((props: any) => {
       }
     );
   };
- // handlers for user list popover
+  // handlers for user list popover
   const handleClick = (event, rowData) => {
     setShow(!show);
     setLoading(true);
@@ -252,30 +285,37 @@ const Roles = React.memo((props: any) => {
     setEditCandidate({ ...editCandidate, description: e.target.value });
   };
 
-  const handleEditPermissionCheck = (permissionName: string, dependsOn: string[]) => {
+  const handleEditPermissionCheck = (
+    permissionName: string,
+    dependsOn: string[]
+  ) => {
     let updatedPermissions: string[] = [...editCandidate.permissions];
     const isChecked = updatedPermissions.includes(permissionName);
-    
-    if (!isChecked) { 
-        updatedPermissions.push(permissionName);
-        dependsOn.forEach(dependency => {
-            if (!updatedPermissions.includes(dependency)) {
-                updatedPermissions.push(dependency);
-            }
-        });
+
+    if (!isChecked) {
+      updatedPermissions.push(permissionName);
+      dependsOn.forEach((dependency) => {
+        if (!updatedPermissions.includes(dependency)) {
+          updatedPermissions.push(dependency);
+        }
+      });
     } else {
-        updatedPermissions = updatedPermissions.filter(permission => permission !== permissionName);
-        dependsOn.forEach(dependency => {
-            updatedPermissions = updatedPermissions.filter(permission => permission !== dependency);
-        });
+      updatedPermissions = updatedPermissions.filter(
+        (permission) => permission !== permissionName
+      );
+      dependsOn.forEach((dependency) => {
+        updatedPermissions = updatedPermissions.filter(
+          (permission) => permission !== dependency
+        );
+      });
     }
-    setEditCandidate ({ ...editCandidate, permissions: updatedPermissions });
-};
+    setEditCandidate({ ...editCandidate, permissions: updatedPermissions });
+  };
 
   // handlers for role create/edit modal
   const handleCloseRoleModal = () => {
     setShowRoleModal(false);
-    setPayload({ name: "", description: "" , permissions: []});
+    setPayload({ name: "", description: "", permissions: [] });
   };
   const handleShowRoleModal = () => setShowRoleModal(true);
   const handleCloseEditRoleModal = () => {
@@ -317,16 +357,16 @@ const Roles = React.memo((props: any) => {
 
   const removingTenantId = (roles) => {
     if (MULTITENANCY_ENABLED && tenantId) {
-      const updatedRoles = roles.map(role => {
+      const updatedRoles = roles.map((role) => {
         if (role.name.startsWith(`/${tenantId}-`)) {
           return {
             ...role,
-            name: role.name.replace(`/${tenantId}-`, '/')
+            name: role.name.replace(`/${tenantId}-`, "/"),
           };
         }
         return role;
       });
-      return updatedRoles; 
+      return updatedRoles;
     }
     return roles;
   };
@@ -372,157 +412,180 @@ const Roles = React.memo((props: any) => {
   const showCreateModal = () => (
     <div data-testid="create-role-modal">
       <Modal show={showRoleModal} onHide={handleCloseRoleModal}>
-          <Modal.Header closeButton>
-            <Modal.Title>{t("Create Role")}</Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <Form.Group className="mb-3">
-              <Form.Label htmlFor="role-name" aria-required>
-                {t("Role Name")}
-              </Form.Label>
-              <i className="text-danger">*</i>
-              <Form.Control
-                id="role-name"
-                type="text"
-                placeholder={t("Eg: Account Manager")}
-                required
-                onChange={handleChangeName}
-                title={t("Enter role name")}
-              />
-              <Form.Label htmlFor="role-description" className="mt-2">
-                {t("Description")}
-              </Form.Label>
-              <i className="text-danger">*</i>
-              <Form.Control
-                id="role-description"
-                as="textarea"
-                placeholder="Eg: Lorem ipsum..."
-                rows={3}
-                onChange={handleChangeDescription}
-                title={t("Enter Description")}
-              />
+        <Modal.Header closeButton>
+          <Modal.Title>{t("Create Role")}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form.Group className="mb-3">
+            <Form.Label htmlFor="role-name" aria-required>
+              {t("Role Name")}
+            </Form.Label>
+            <i className="text-danger">*</i>
+            <Form.Control
+              id="role-name"
+              type="text"
+              placeholder={t("Eg: Account Manager")}
+              required
+              onChange={handleChangeName}
+              title={t("Enter role name")}
+            />
+            <Form.Label htmlFor="role-description" className="mt-2">
+              {t("Description")}
+            </Form.Label>
+            <i className="text-danger">*</i>
+            <Form.Control
+              id="role-description"
+              as="textarea"
+              placeholder="Eg: Lorem ipsum..."
+              rows={3}
+              onChange={handleChangeDescription}
+              title={t("Enter Description")}
+            />
 
-            <Form.Label 
-             htmlFor="role-permissions" 
-             aria-required 
-             className="mt-2" 
-             title={t("Select Permissions")} 
-             data-testid="permissions-label">
-            {t("Permissions")}
+            <Form.Label
+              htmlFor="role-permissions"
+              aria-required
+              className="mt-2"
+              title={t("Select Permissions")}
+              data-testid="permissions-label"
+            >
+              {t("Permissions")}
             </Form.Label>
             <i className="text-danger">*</i>
             <div className="row">
-            {permission.map((permission) => (
-              <div key={permission.name} className="col-md-6 mb-2" data-testid={`permission-${permission.name}`}>
-                <Form.Check
-                  type="checkbox"
-                  id="role-permissions"
-                  label={t(permission.description)}
-                  checked={payload.permissions.includes(permission.name)}
-                  onChange={() => handlePermissionCheck(permission.name, permission.depends_on)}
-                  aria-label={t(permission.description)}
-                />
-              </div>
-            ))}
-          </div>
+              {permission.map((permission) => (
+                <div
+                  key={permission.name}
+                  className="col-md-6 mb-2"
+                  data-testid={`permission-${permission.name}`}
+                >
+                  <Form.Check
+                    type="checkbox"
+                    id={`role-permissions-${permission.name}`}
+                    label={t(permission.description)}
+                    checked={payload.permissions.includes(permission.name)}
+                    onChange={() =>
+                      handlePermissionCheck(
+                        permission.name,
+                        permission.depends_on
+                      )
+                    }
+                    aria-label={t(permission.description)}
+                  />
+                </div>
+              ))}
+            </div>
           </Form.Group>
-          </Modal.Body>
-          <Modal.Footer>
-            <button
-              type="button"
-              className="btn btn-link text-dark"
-              onClick={handleCloseRoleModal}
-              data-testid="create-new-role-modal-cancel-button"
-            >
-              {t("Cancel")}
-            </button>
-            <Button
-              variant="primary"
-              disabled={disabled}
-              onClick={handleCreateRole}
-              type="submit"
-              data-testid="create-new-role-modal-submit-button"
-            >
-              {t("Create")}
-            </Button>
-          </Modal.Footer>
+        </Modal.Body>
+        <Modal.Footer>
+          <button
+            type="button"
+            className="btn btn-link text-dark"
+            onClick={handleCloseRoleModal}
+            data-testid="create-new-role-modal-cancel-button"
+          >
+            {t("Cancel")}
+          </button>
+          <Button
+            variant="primary"
+            disabled={disabled}
+            onClick={handleCreateRole}
+            type="submit"
+            data-testid="create-new-role-modal-submit-button"
+          >
+            {t("Create")}
+          </Button>
+        </Modal.Footer>
       </Modal>
     </div>
   );
   const showEditModal = () => (
     <div data-testid="edit-role-modal">
       <Modal show={showEditRoleModal} onHide={handleCloseEditRoleModal}>
-          <Modal.Header closeButton>
-            <Modal.Title>{t("Edit Role")}</Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <Form.Group className="mb-3">
-              <Form.Label htmlFor="edit-role-name" aria-required>
-                {t("Role Name")}
-              </Form.Label>
-              <i style={{ color: "#e00" }}>*</i>
-              <Form.Control
-                id="edit-role-name"
-                type="text"
-                placeholder={"Eg: Account Manager"}
-                required
-                onChange={handleEditName}
-                value={editCandidate.name}
-              />
-              <Form.Label htmlFor="edit-description" className="mt-2">
-                {t("Description")}
-              </Form.Label>
-              <i style={{ color: "#e00" }}>*</i>
-              <Form.Control
-                id="edit-description"
-                as="textarea"
-                rows={3}
-                onChange={handleEditDescription}
-                value={editCandidate.description}
-              />
-            <Form.Label 
-             htmlFor="role-edit-permissions" 
-             aria-required className="mt-2" 
-             title={t("Edit Permissions")} 
-             data-testid="edit-permissions-label">
-            {t("Permissions")}
+        <Modal.Header closeButton>
+          <Modal.Title>{t("Edit Role")}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form.Group className="mb-3">
+            <Form.Label htmlFor="edit-role-name" aria-required>
+              {t("Role Name")}
+            </Form.Label>
+            <i style={{ color: "#e00" }}>*</i>
+            <Form.Control
+              id="edit-role-name"
+              type="text"
+              placeholder={"Eg: Account Manager"}
+              required
+              onChange={handleEditName}
+              value={editCandidate.name}
+            />
+            <Form.Label htmlFor="edit-description" className="mt-2">
+              {t("Description")}
+            </Form.Label>
+            <i style={{ color: "#e00" }}>*</i>
+            <Form.Control
+              id="edit-description"
+              as="textarea"
+              rows={3}
+              onChange={handleEditDescription}
+              value={editCandidate.description}
+            />
+            <Form.Label
+              htmlFor="role-edit-permissions"
+              aria-required
+              className="mt-2"
+              title={t("Edit Permissions")}
+              data-testid="edit-permissions-label"
+            >
+              {t("Permissions")}
             </Form.Label>
             <i className="text-danger">*</i>
             <div className="row">
-                {permission.map((permission) => (
-                   <div key={permission.name} className="col-md-6 mb-2" data-testid={`edit-permission-${permission.name}`}>
+              {permission.map((permission) => (
+                <div
+                  key={permission.name}
+                  className="col-md-6 mb-2"
+                  data-testid={`edit-permission-${permission.name}`}
+                >
                   <Form.Check
                     type="checkbox"
-                    id="role-edit-permissions"
+                    id={`role-edit-permissions-${permission.name}`}
                     label={t(permission.description)}
-                    checked={editCandidate.permissions.includes(permission.name)}
-                    onChange={() => handleEditPermissionCheck(permission.name, permission.depends_on)}
+                    checked={editCandidate.permissions.includes(
+                      permission.name
+                    )}
+                    onChange={() =>
+                      handleEditPermissionCheck(
+                        permission.name,
+                        permission.depends_on
+                      )
+                    }
                     aria-label={t(permission.description)}
                   />
-                  </div>
-                ))}
+                </div>
+              ))}
             </div>
           </Form.Group>
-          </Modal.Body>
-          <Modal.Footer>
-            <button
-              type="button"
-              className="btn btn-link text-dark"
-              onClick={handleCloseEditRoleModal}
-              data-testid="edit-role-modal-cancel-button"
-            >
-              {t("Cancel")}
-            </button>
-            <Button
-              variant="primary"
-              disabled={disabled}
-              onClick={handleUpdateRole}
-              type="submit"
-              data-testid="edit-role-modal-save-button"
-            >
-              {t("Save")}
-            </Button>
-          </Modal.Footer>
+        </Modal.Body>
+        <Modal.Footer>
+          <button
+            type="button"
+            className="btn btn-link text-dark"
+            onClick={handleCloseEditRoleModal}
+            data-testid="edit-role-modal-cancel-button"
+          >
+            {t("Cancel")}
+          </button>
+          <Button
+            variant="primary"
+            disabled={disabled}
+            onClick={handleUpdateRole}
+            type="submit"
+            data-testid="edit-role-modal-save-button"
+          >
+            {t("Save")}
+          </Button>
+        </Modal.Footer>
       </Modal>
     </div>
   );
@@ -658,7 +721,7 @@ const Roles = React.memo((props: any) => {
     {
       dataField: "id",
       text: <Translation>{(t) => t("Actions")}</Translation>,
-      formatter: (cell, rowData, rowIdx, formatExtraData) => {     
+      formatter: (cell, rowData, rowIdx, formatExtraData) => {
         return checkDefaultRoleOrNot(rowData.name) ? null : (
           <div>
             <i