Implemented Pushover to display permission descriptions when editing or creating application role

src/components/master/CreateRole.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useFeatures } from "../../hooks/useMasterRole";
 
 import { useForm } from 'react-hook-form';
@@ -24,27 +24,30 @@ const schema = z.object({
 });
 
 
-const CreateRole = ({modalType,onClose}) => {
 
- const[isLoading,setIsLoading] = useState(false)
 
- const {masterFeatures} = useFeatures()
+const CreateRole = ({ modalType, onClose }) => {
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const popoverRefs = useRef([]);
+  const { masterFeatures } = useFeatures()
 
   const {
     register,
     handleSubmit,
     formState: { errors },
 
-} = useForm({
+  } = useForm({
     resolver: zodResolver(schema),
     defaultValues: {
       role: "",
       description: "",
       selectedPermissions: [],
     },
-});
+  });
 
-const onSubmit = (values) => {
+  const onSubmit = (values) => {
     setIsLoading(true)
     const result = {
 
@@ -56,29 +59,39 @@ const onSubmit = (values) => {
       })),
     };
 
-  MasterRespository.createRole(result).then((resp)=>{
+    MasterRespository.createRole(result).then((resp) => {
       setIsLoading(false)
-    const cachedData = getCachedData( "Application Role" ); 
+      const cachedData = getCachedData("Application Role");
       const updatedData = [...cachedData, resp.data];
       cacheData("Application Role", updatedData);
-    showToast( "Application Role Added successfully.", "success" );  
+      showToast("Application Role Added successfully.", "success");
       onClose()
-  } ).catch( ( err ) =>
+    }).catch((err) => {
-  {
 
       showToast(err?.response?.data?.message, "error");
-    setIsLoading( false )
+      setIsLoading(false)
       onClose()
     })
 
 
-};
+  };
-const [descriptionLength, setDescriptionLength] = useState(0);
+  const [descriptionLength, setDescriptionLength] = useState(0);
-const maxDescriptionLength = 255;
+  const maxDescriptionLength = 255;
-useEffect(() => {
+  useEffect(() => {
     setDescriptionLength(0);
-}, []);
+  }, []);
-
+  useEffect(() => {
+    popoverRefs.current.forEach((el) => {
+      if (el) {
+        new bootstrap.Popover(el, {
+          trigger: "focus",
+          placement: "right",
+          html: true,
+          content: el.getAttribute("data-bs-content"), // use inline content from attribute
+        });
+      }
+    });
+  }, [masterFeatures]);
 
   return (
 
@@ -119,7 +132,8 @@ useEffect(() => {
       <div className="col-12 col-md-12  border">
 
 
-  {masterFeatures.map((feature) => (
+        {masterFeatures.map((feature, featureIndex) => (
+
           <React.Fragment key={feature.id}>
             <div className="row my-1" key={feature.id} style={{ marginLeft: "0px" }}>
 
@@ -132,7 +146,9 @@ useEffect(() => {
 
 
               <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
-        {feature.featurePermissions.map((perm) => (
+                {feature.featurePermissions.map((perm, permIndex) => {
+                  const refIndex = (featureIndex * 10) + permIndex;
+                  return (
                     <div className="d-flex me-3 mb-2" key={perm.id}>
                       <label className="form-check-label" htmlFor={perm.id}>
                         <input
@@ -144,8 +160,36 @@ useEffect(() => {
                         />
                         {perm.name}
                       </label>
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <div
+                          key={refIndex}
+                          ref={(el) =>
+                            (popoverRefs.current[refIndex] = el)
+                          }
+                          tabIndex="0"
+                          className="d-flex align-items-center avatar-group justify-content-center"
+                          data-bs-toggle="popover" refIndex
+                          data-bs-trigger="focus"
+                          data-bs-placement="right"
+                          data-bs-html="true"
+                          data-bs-content={`
+                                      <div class="border border-secondary rounded custom-popover p-2 px-3">
+                                        ${perm.description}
                                       </div>
-        ))}
+                                    `}
+                        >
+                          &nbsp;
+
+                          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" className="bi bi-info-circle" viewBox="0 0 16 16">
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+
+                  )
+                })}
               </div>
 
             </div>
@@ -157,7 +201,7 @@ useEffect(() => {
           <p className="text-danger">{errors.selectedPermissions.message}</p>
         )}
         {!masterFeatures && <p>Loading...</p>}
-</div>
+      </div>
 
 
       {
@@ -165,7 +209,7 @@ useEffect(() => {
 
           <div className="col-12 text-center">
             <button type="submit" className="btn btn-sm btn-primary me-3">
-         {isLoading? "Please Wait...":"Submit"}       
+              {isLoading ? "Please Wait..." : "Submit"}
             </button>
             <button
               type="reset"

src/components/master/EditRole.jsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
-import { useForm ,Controller} from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import {  useFeatures} from "../../hooks/useMasterRole";
+import { useFeatures } from "../../hooks/useMasterRole";
 import { MasterRespository } from "../../repositories/MastersRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
@@ -26,9 +26,10 @@ const updateSchema = z.object({
 
 
 
-const  EditMaster=({master,onClose})=> {
+const EditMaster = ({ master, onClose }) => {
-  const [isLoading,setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
-  const {masterFeatures} = useFeatures()
+  const { masterFeatures } = useFeatures()
+  const popoverRefs = useRef([]);
 
   const buildDefaultPermissions = () => {
     const defaults = {};
@@ -46,15 +47,11 @@ const  EditMaster=({master,onClose})=> {
 
 
   const initialPermissions = buildDefaultPermissions();
- 
-  
-
-  
   const {
     register,
     handleSubmit,
     formState: { errors, dirtyFields },
-    setError,reset
+    setError, reset
   } = useForm({
     resolver: zodResolver(updateSchema),
     defaultValues: {
@@ -92,13 +89,13 @@ const  EditMaster=({master,onClose})=> {
     }
 
     const updatedRole = {
-      id:master?.item?.id,
+      id: master?.item?.id,
       role: data.role,
       description: data.description,
       featuresPermission: updatedPermissions,
     };
-    MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp)=>{ 
+    MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp) => {
-      setIsLoading( false )
+      setIsLoading(false)
 
 
       const cachedData = getCachedData("Application Role");
@@ -111,11 +108,11 @@ const  EditMaster=({master,onClose})=> {
 
         cacheData("Application Role", updatedData);
       }
-      showToast( "Application Role Updated successfully.", "success" );
+      showToast("Application Role Updated successfully.", "success");
       setIsLoading(false)
       onClose()
-    }).catch((Err)=>{
+    }).catch((Err) => {
-      showToast( Err.message, "error" );
+      showToast(Err.message, "error");
       setIsLoading(false)
     })
 
@@ -133,6 +130,18 @@ const  EditMaster=({master,onClose})=> {
   const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
   const maxDescriptionLength = 255;
 
+  useEffect(() => {
+    popoverRefs.current.forEach((el) => {
+      if (el) {
+        new bootstrap.Popover(el, {
+          trigger: "focus",
+          placement: "right",
+          html: true,
+          content: el.getAttribute("data-bs-content"), // use inline content from attribute
+        });
+      }
+    });
+  }, [masterFeatures]);
 
   return (
 
@@ -168,8 +177,8 @@ const  EditMaster=({master,onClose})=> {
 
       <div className="col-12 col-md-12 mx-2s " >
 
-          {masterFeatures.map((feature) => (
+        {masterFeatures.map((feature, featureIndex) => (
-             <div className="row my-3" key={feature.id} style={{marginLeft:"0px"}}>
+          <div className="row my-3" key={feature.id} style={{ marginLeft: "0px" }}>
 
             <div className="col-12 col-md-3 d-flex text-start align-items-center" style={{ wordWrap: 'break-word' }}>
               <span className="fs">{feature.name}</span>
@@ -178,8 +187,12 @@ const  EditMaster=({master,onClose})=> {
 
             </div>
             <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
-                {feature.featurePermissions.map((perm) => (
+              {feature.featurePermissions.map((perm, permIndex) => {
+                const refIndex = (featureIndex * 10) + permIndex;
+                return (
+
                   <div className="d-flex me-3 mb-2" key={perm.id}>
+
                     <label className="form-check-label" htmlFor={perm.id}>
                       <input
                         type="checkbox"
@@ -192,8 +205,38 @@ const  EditMaster=({master,onClose})=> {
 
                       {perm.name}
                     </label>
+
+
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <div
+                        key={refIndex}
+                        ref={(el) =>
+                          (popoverRefs.current[refIndex] = el)
+                        }
+                        tabIndex="0"
+                        className="d-flex align-items-center avatar-group justify-content-center"
+                        data-bs-toggle="popover" refIndex
+                        data-bs-trigger="focus"
+                        data-bs-placement="right"
+                        data-bs-html="true"
+                        data-bs-content={`
+                                      <div class="border border-secondary rounded custom-popover p-2 px-3">
+                                        ${perm.description}
                                       </div>
-                ))}
+                                    `}
+                      >
+                        &nbsp;
+                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" className="bi bi-info-circle" viewBox="0 0 16 16">
+                          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+
+
             </div>
           </div>
         ))}