Merge pull request 'Implemented Pushover to display permission descriptions when editing or creating application role' (#104) from Kartik_permission_description into Issue_May_3W

Reviewed-on: #104

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,10 +24,13 @@ const schema = z.object({
 });
 
 
+
+
 const CreateRole = ({ modalType, onClose }) => {
 
   const [isLoading, setIsLoading] = useState(false)
 
+  const popoverRefs = useRef([]);
   const { masterFeatures } = useFeatures()
 
   const {
@@ -63,8 +66,7 @@ const onSubmit = (values) => {
       cacheData("Application Role", updatedData);
       showToast("Application Role Added successfully.", "success");
       onClose()
-  } ).catch( ( err ) =>
-  {
+    }).catch((err) => {
 
       showToast(err?.response?.data?.message, "error");
       setIsLoading(false)
@@ -78,7 +80,18 @@ const maxDescriptionLength = 255;
   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>

src/components/master/EditRole.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -29,6 +29,7 @@ const updateSchema = z.object({
 const EditMaster = ({ master, onClose }) => {
   const [isLoading, setIsLoading] = useState(false)
   const { masterFeatures } = useFeatures()
+  const popoverRefs = useRef([]);
 
   const buildDefaultPermissions = () => {
     const defaults = {};
@@ -46,10 +47,6 @@ const  EditMaster=({master,onClose})=> {
 
 
   const initialPermissions = buildDefaultPermissions();
- 
-  
-
-  
   const {
     register,
     handleSubmit,
@@ -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,7 +177,7 @@ 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="col-12 col-md-3 d-flex text-start align-items-center" style={{ wordWrap: 'break-word' }}>
@@ -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>
         ))}