MOSIP-36036: Sonar bugs, security hotspots, duplications for UI code. (…

…#1079) * MOSIP-36036: Sonar bugs, security hotspots, duplications for UI code Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-36036: Sonar bugs, security hotspots, duplications for UI code Signed-off-by: Anil_Kumar_Majji <[email protected]> --------- Signed-off-by: Anil_Kumar_Majji <[email protected]>
mosip · Jan 9, 2025 · 9e6fa7a · 9e6fa7a
1 parent 75549a3
commit 9e6fa7a
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 44 deletions.
diff --git a/pmp-revamp-ui/src/nav/SideNav.js b/pmp-revamp-ui/src/nav/SideNav.js
@@ -119,63 +119,69 @@ function SideNav({ open, policyRequiredPartnerTypes, partnerType }) {
         <div className="flex font-inter bg-white h-screen z-40">
             <div className={`h-full ${open ? "absolute inset-y-14 min-w-[16rem]" : "absolute inset-y-14 w-[4.5rem]"} 
             flex-col duration-500`}>
-                <ul className={`pt-3 h-full space-y-5 bg-[#FCFCFC] shadow-[rgba(0,0,0,0.13)_5px_2px_8px_-2px]`}>
-                    <li role="listItem" id='side_nav_home_icon' className="duration-700 cursor-pointer" onClick={() => showHome()} onKeyDown={(e) => { e.key === 'Enter' && showHome() }}>
+                <div className={` flex flex-col pt-3 h-full space-y-[0.7rem] bg-[#FCFCFC] shadow-[rgba(0,0,0,0.13)_5px_2px_8px_-2px]`}>
+                    <button id='side_nav_home_icon' className="duration-700 cursor-pointer" onClick={() => showHome()}>
                         <SideNavMenuItem title={t('commons.home')} id='home' isExpanded={open} activeIcon={activeIcon} />
-                    </li>
+                    </button>
                     {!enablePartnerAdminMenu &&
-                        <li role="listItem" id='side_nav_partner_certificate_icon' className="duration-700 cursor-pointer" onClick={() => showPartnerCertificatesList()} onKeyDown={(e) => { e.key === 'Enter' && showPartnerCertificatesList() }}>
+                        <button id='side_nav_partner_certificate_icon' className="duration-700 cursor-pointer" onClick={() => showPartnerCertificatesList()}>
                             <SideNavMenuItem title={t('dashboard.partnerCertificate')} id='partnerCertificate' isExpanded={open} activeIcon={activeIcon} />
-                        </li>
+                        </button>
                     }
                     {!enablePartnerAdminMenu && enablePoliciesMenu &&
-                        <li role="listItem" id='side_nav_policies_icon' className="duration-700 cursor-pointer" onClick={() => showPolicies()} onKeyDown={(e) => { e.key === 'Enter' && showPolicies() }}>
+                        <button id='side_nav_policies_icon' className="duration-700 cursor-pointer" onClick={() => showPolicies()}>
                             <SideNavMenuItem title={t('dashboard.policies')} id='policies' isExpanded={open} activeIcon={activeIcon} />
-                        </li>
+                        </button>
                     }
                     {!enablePartnerAdminMenu && enableAuthenticationServicesMenu &&
-                        <li role="listItem" id='side_nav_authentication_service_icon' className="duration-700 cursor-pointer" onClick={() => showAuthenticationServices()} onKeyDown={(e) => { e.key === 'Enter' && showAuthenticationServices() }}>
+                        <button id='side_nav_authentication_service_icon' className="duration-700 cursor-pointer" onClick={() => showAuthenticationServices()}>
                             <SideNavMenuItem title={t('dashboard.authenticationServices')} id='authenticationServices' isExpanded={open} activeIcon={activeIcon} />
-                        </li>
+                        </button>
                     }
                     {!enablePartnerAdminMenu && enableDeviceProviderServicesMenu &&
-                        <li role="listItem" id='side_nav_device_provider_service_icon' className="duration-700 cursor-pointer" onClick={() => showDeviceProviderServices()} onKeyDown={(e) => { e.key === 'Enter' && showDeviceProviderServices() }}>
+                        <button id='side_nav_device_provider_service_icon' className="duration-700 cursor-pointer" onClick={() => showDeviceProviderServices()}>
                             <SideNavMenuItem title={t('dashboard.deviceProviderServices')} id='deviceProviderServices' isExpanded={open} activeIcon={activeIcon} />
-                        </li>
+                        </button>
                     }
                     {!enablePartnerAdminMenu && enableFtmServicesMenu &&
-                        <li role="listItem" id='side_nav_ftmchip_provider_service_icon' className="duration-700 cursor-pointer" onClick={() => showFtmServices()} onKeyDown={(e) => { e.key === 'Enter' && showFtmServices() }}>
+                        <button id='side_nav_ftmchip_provider_service_icon' className="duration-700 cursor-pointer" onClick={() => showFtmServices()}>
                             <SideNavMenuItem title={t('dashboard.ftmChipProviderServices')} id='ftmChipProviderServices' isExpanded={open} activeIcon={activeIcon} />
-                        </li>
+                        </button>
                     }
                     {enablePartnerAdminMenu && (
                         <>
-                            <li role="listItem" id='side_nav_rootOfTrustCertificate_service_icon' className="duration-700 cursor-pointer" onClick={() => showRootOfTrustCertificate()} onKeyDown={(e) => { e.key === 'Enter' && showRootOfTrustCertificate() }}>
+                            <button id='side_nav_rootOfTrustCertificate_service_icon' className="duration-700 cursor-pointer" onClick={() => showRootOfTrustCertificate()}>
                                 <SideNavMenuItem title={t('dashboard.rootOfTrustCertificate')} id='rootOfTrustCertificate' isExpanded={open} activeIcon={activeIcon} />
-                            </li>
-                            <li role="listItem" id='side_nav_partner_icon' className="duration-700 cursor-pointer" onClick={() => showPartner()} onKeyDown={(e) => { e.key === 'Enter' && showPartner() }}>
+                            </button>
+
+                            <button id='side_nav_partner_icon' className="duration-700 cursor-pointer" onClick={() => showPartner()}>
                                 <SideNavMenuItem title={t('dashboard.partner')} id='partner' isExpanded={open} activeIcon={activeIcon} />
-                            </li>
+                            </button>
+
                             {enablePolicyManagerMenu && (
-                                <li role="listItem" id='side_nav_policy_icon' className="duration-700 cursor-pointer" onClick={() => showAdminPolicies()} onKeyDown={(e) => { e.key === 'Enter' && showAdminPolicies() }}>
+                                <button id='side_nav_policy_icon' className="duration-700 cursor-pointer" onClick={() => showAdminPolicies()}>
                                     <SideNavMenuItem title={t('dashboard.policies')} id='admin_policies' isExpanded={open} activeIcon={activeIcon} />
-                                </li>
+                                </button>
                             )}
-                            <li role="listItem" id='side_nav_partnerPolicyMapping_icon' className={`duration-700 cursor-pointer ${isLoginLanguageRTL ? 'pl-1' : 'pr-1'}`} onClick={() => showPartnerPolicyMapping()} onKeyDown={(e) => { e.key === 'Enter' && showPartnerPolicyMapping() }}>
+                            <button id='side_nav_partnerPolicyMapping_icon' className={`duration-700 cursor-pointer ${isLoginLanguageRTL ? 'pl-1' : 'pr-1'}`} onClick={() => showPartnerPolicyMapping()}>
                                 <SideNavMenuItem title={t('dashboard.partnerPolicyMapping')} id='partnerPolicyMapping' isExpanded={open} activeIcon={activeIcon} />
-                            </li>
-                            <li role="listItem" id='side_nav_sbiDeviceDetails_icon' className="duration-700 cursor-pointer" onClick={() => showSbiDeviceDetails()} onKeyDown={(e) => { e.key === 'Enter' && showSbiDeviceDetails() }}>
+                            </button>
+
+                            <button id='side_nav_sbiDeviceDetails_icon' className="duration-700 cursor-pointer" onClick={() => showSbiDeviceDetails()}>
                                 <SideNavMenuItem title={t('dashboard.sbiDevice')} id='deviceProviderServices' isExpanded={open} activeIcon={activeIcon} />
-                            </li>
-                            <li role="listItem" id='side_nav_ftmDetails_icon' className="duration-700 cursor-pointer" onClick={() => showAdminFtmDetails()} onKeyDown={(e) => { e.key === 'Enter' && showAdminFtmDetails() }}>
+                            </button>
+
+                            <button id='side_nav_ftmDetails_icon' className="duration-700 cursor-pointer" onClick={() => showAdminFtmDetails()}>
                                 <SideNavMenuItem title={t('dashboard.ftmChip')} id='ftmChipProviderServices' isExpanded={open} activeIcon={activeIcon} />
-                            </li>
-                            <li role="listItem" id='side_nav_authenticationServices_icon' className="duration-700 cursor-pointer" onClick={() => showAdminAuthenticationServices()} onKeyDown={(e) => { e.key === 'Enter' && showAdminAuthenticationServices() }}>
+                            </button>
+
+                            <button id='side_nav_authenticationServices_icon' className="duration-700 cursor-pointer" onClick={() => showAdminAuthenticationServices()}>
                                 <SideNavMenuItem title={t('dashboard.authenticationServices')} id='authenticationServices' isExpanded={open} activeIcon={activeIcon} />
-                            </li>
+                            </button>
+
                         </>
                     )}
-                </ul>
+                </div>
             </div>
         </div>
     );

diff --git a/pmp-revamp-ui/src/nav/SideNavMenuItem.js b/pmp-revamp-ui/src/nav/SideNavMenuItem.js
diff --git a/pmp-revamp-ui/src/pages/admin/authenticationServices/ViewAdminOidcClientDetails.js b/pmp-revamp-ui/src/pages/admin/authenticationServices/ViewAdminOidcClientDetails.js
@@ -120,10 +120,10 @@ function ViewAdminOidcClientDetails() {
                                         </div>
                                     </div>
 
-                                    <div role='button' id="oidc_client_details_copy_id" className={`${oidcClientDetails.status === "ACTIVE" ? 'bg-[#F0F5FF] border-[#BED3FF] cursor-pointer hover:shadow-md' : 'bg-gray-200 border-gray-400'}  border h-[4%] w-[15%] max-[450px]:w-[40%] max-[800px]:w-[25%] ${isLoginLanguageRTL ? "pr-[3%] pl-[1.5%]" : "pl-[3%] pr-[1%]"} py-[0.5%] rounded-md text-right`}
-                                        tabIndex={oidcClientDetails.status === "ACTIVE" && "0"} onKeyDown={(e) => onPressEnterKey(e, () => copyClientId(selectedClientData, selectedClientData.clientId, setCopied))}>
+                                    <button id="oidc_client_details_copy_id" className={`${oidcClientDetails.status === "ACTIVE" ? 'bg-[#F0F5FF] border-[#BED3FF] cursor-pointer hover:shadow-md' : 'bg-gray-200 border-gray-400'}  border h-[4%] w-[15%] max-[450px]:w-[40%] max-[800px]:w-[25%] ${isLoginLanguageRTL ? "pr-[3%] pl-[1.5%]" : "pl-[3%] pr-[1%]"} py-[0.5%] rounded-md text-right`}
+                                         onClick={() => copyClientId(selectedClientData, selectedClientData.clientId, setCopied)} tabIndex={oidcClientDetails.status === "ACTIVE" && "0"}>
                                         <p className="text-sm font-semibold text-[#333333]">{t('viewOidcClientDetails.oidcClientId')}</p>
-                                        <div role='button' className="flex space-x-1 items-center" onClick={() => copyClientId(selectedClientData, selectedClientData.clientId, setCopied)}>
+                                        <div className="flex space-x-1 items-center">
                                             <p className={`text-md font-bold ${selectedClientData.status === "ACTIVE" ? 'text-[#1447B2]' : 'text-gray-400'} truncate`}>
                                                 {selectedClientData.clientId}
                                             </p>
@@ -140,7 +140,7 @@ function ViewAdminOidcClientDetails() {
                                                 )
                                             }
                                         </div>
-                                    </div>
+                                    </button>
                                 </div>
 
                                 <div className={`${isLoginLanguageRTL ? "pr-8 ml-8" : "pl-8 mr-8"} pt-3 mb-2`}>

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiList.js
@@ -334,11 +334,11 @@ function AdminSbiList() {
                                                                             {getStatusCode(sbi.status, t)}
                                                                         </div>
                                                                     </td>
-                                                                    <td className={`px-2 text-center`}>
-                                                                        <div onClick={() => showLinkedDevices(sbi)} className={`flex items-center justify-center ${sbi.countOfAssociatedDevices > 0 ? 'cursor-pointer' : 'cursor-default'}`} tabIndex="0" onKeyDown={(e) => onPressEnterKey(e, () => showLinkedDevices(sbi))}>
+                                                                    <td className={`text-center px-5`}>
+                                                                        <button onClick={() => showLinkedDevices(sbi)} className={`flex items-center justify-center ${sbi.countOfAssociatedDevices > 0 ? 'cursor-pointer' : 'cursor-default'}`}>
                                                                             <img src={sbi.status === 'deactivated' ? deactiveLinkedDevices : activeLinkedDevices} alt='' />
                                                                             <p className={`${sbi.status === 'deactivated' ? 'text-[#969696]' : 'text-tory-blue'} px-2`}>{sbi.countOfAssociatedDevices}</p>
-                                                                        </div>
+                                                                        </button>
                                                                     </td>
                                                                     <td className="text-center">
                                                                         <div ref={(el) => (submenuRef.current[index] = el)}>

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js
@@ -106,9 +106,9 @@ function ViewAdminSbiDetails() {
                                     <p className="font-[600] text-suva-gray text-sm">
                                         {t("sbiList.linkedDevices")}
                                     </p>
-                                    <p className={`font-[600] text-vulcan text-md ${sbiDetails.countOfAssociatedDevices > 0 && 'cursor-pointer'}`} onClick={() => showLinkedDevices()}>
+                                    <button className={`font-[600] text-vulcan text-md ${sbiDetails.countOfAssociatedDevices > 0 && 'text-tory-blue cursor-pointer'}`} onClick={() => showLinkedDevices()}>
                                         {sbiDetails.countOfAssociatedDevices}
-                                    </p>
+                                    </button>
                                 </div>
                                 <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
                                     <p className="font-[600] text-suva-gray text-sm">

diff --git a/pmp-revamp-ui/src/pages/common/fields/Information.js b/pmp-revamp-ui/src/pages/common/fields/Information.js
@@ -18,7 +18,7 @@ function Information({ infoKey, infoKey1, id }) {
         <div>
             <div ref={tooltipRef} className="absolute flex items-center">
                 <button id={id} onClick={() => setShowTooltip(!showTooltip)} alt="" className={`cursor-pointer h-[13px] w-[13px] ml-1 -mt-1.5`}>
-                    <img src={infoIcon} />
+                    <img src={infoIcon} alt="info" />
                 </button>
                 {showTooltip && (
                     <div className={`absolute z-20 p-4 w-[20vw] max-w-[300px] max-h-[20vh] overflow-y-auto max-[800px]:h-32 max-[800px]:w-32 shadow-lg bg-white border border-gray-300 rounded ${isLoginLanguageRTL ? 'right-6' : 'left-6'} mt-2`}>

diff --git a/pmp-revamp-ui/src/pages/partner/authenticationServices/ViewOidcClientDetails.js b/pmp-revamp-ui/src/pages/partner/authenticationServices/ViewOidcClientDetails.js
@@ -65,15 +65,15 @@ function ViewOidcClientDetails() {
                             </div>
                         </div>
 
-                        <div role='button' id="oidc_client_details_copy_id" className={`${oidcClientDetails.status === "ACTIVE" ? 'bg-[#F0F5FF] border-[#BED3FF] cursor-pointer hover:shadow-md' : 'bg-gray-200 border-gray-400'}  border h-[4%] w-[15%] max-[450px]:w-[40%] max-[800px]:w-[25%] ${isLoginLanguageRTL ? "pr-[3%] pl-[1.5%]" : "pl-[3%] pr-[1%]"} py-[0.5%] rounded-md text-right`}
-                            tabIndex="0" onKeyDown={(e) => onPressEnterKey(e, () => copyClientId(oidcClientDetails, oidcClientDetails.clientId, setCopied))}>
+                        <button id="oidc_client_details_copy_id" className={`${oidcClientDetails.status === "ACTIVE" ? 'bg-[#F0F5FF] border-[#BED3FF] cursor-pointer hover:shadow-md' : 'bg-gray-200 border-gray-400'}  border h-[4%] w-[15%] max-[450px]:w-[40%] max-[800px]:w-[25%] ${isLoginLanguageRTL ? "pr-[3%] pl-[1.5%]" : "pl-[3%] pr-[1%]"} py-[0.5%] rounded-md text-right`}
+                            onClick={() => copyClientId(oidcClientDetails, oidcClientDetails.clientId, setCopied)}>
                             <p className="text-sm font-semibold text-[#333333]">{t('viewOidcClientDetails.oidcClientId')}</p>
-                            <div role="button" id="oidc_client_details_copy_id_icon" onClick={() => copyClientId(oidcClientDetails, oidcClientDetails.clientId, setCopied)} className="flex space-x-1 items-center">
+                            <div id="oidc_client_details_copy_id_icon" className="flex space-x-1 items-center">
                                 <p className={`text-md font-bold ${oidcClientDetails.status === "ACTIVE" ? 'text-[#1447B2]' : 'text-gray-400'} truncate`}>
                                     {oidcClientDetails.clientId}
                                 </p>
                                 {oidcClientDetails.status === "ACTIVE" ? (
-                                    <img id="oidc_client_details_copy_id_icon" src={content_copy_icon} alt=""/>
+                                    <img id="oidc_client_details_copy_id_icon" src={content_copy_icon} alt="" />
                                 ) : (
                                     <img src={disabled_copy_icon} alt="" />
                                 )}
@@ -85,7 +85,7 @@ function ViewOidcClientDetails() {
                                     )
                                 }
                             </div>
-                        </div>
+                        </button>
                     </div>
 
                     <div className={`${isLoginLanguageRTL ? "pr-8 ml-8" : "pl-8 mr-8"} pt-3 mb-2`}>