resolved tab event issues and added esc event for popups (#1048)

Signed-off-by: MadhuMosip <[email protected]>
mosip · Dec 20, 2024 · 763ea46 · 763ea46
1 parent 5c9cb0c
commit 763ea46
Show file tree

Hide file tree

Showing 20 changed files with 160 additions and 83 deletions.
diff --git a/pmp-revamp-ui/src/pages/admin/authenticationServices/AdminApiKeysList.js b/pmp-revamp-ui/src/pages/admin/authenticationServices/AdminApiKeysList.js
@@ -2,7 +2,8 @@ import React, { useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getUserProfile } from '../../../services/UserProfileService';
 import { isLangRTL, handleMouseClickForDropdown, resetPageNumber, onClickApplyFilter, setPageNumberAndPageSize,
-    getPartnerManagerUrl, handleServiceErrors, onResetFilter, formatDate, bgOfStatus, getStatusCode, onPressEnterKey, createRequest
+    getPartnerManagerUrl, handleServiceErrors, onResetFilter, formatDate, bgOfStatus, getStatusCode, onPressEnterKey, createRequest,
+    escapeKeyHandler
  } from '../../../utils/AppUtils';
 import ErrorMessage from '../../common/ErrorMessage';
 import LoadingIcon from '../../common/LoadingIcon';
@@ -161,6 +162,7 @@ function AdminApiKeysList () {
     const closeDeactivatePopup = () => {
         setActionId(-1);
         setShowDeactivatePopup(false);
+        document.body.style.overflow = "auto";
     };
 
     const deactivateApiKey = (selectedApiKeyData) => {
@@ -197,6 +199,10 @@ function AdminApiKeysList () {
         setErrorMsg("");
     };
 
+    useEffect(() => {
+        escapeKeyHandler(closeDeactivatePopup)
+    }, [showDeactivatePopup]);
+
     const styles = {
         loadingDiv: "!py-[20%]",
         outerDiv: "!bg-opacity-[16%]"

diff --git a/pmp-revamp-ui/src/pages/admin/authenticationServices/AdminOidcClientsList.js b/pmp-revamp-ui/src/pages/admin/authenticationServices/AdminOidcClientsList.js
@@ -7,7 +7,8 @@ import { isLangRTL, handleMouseClickForDropdown, resetPageNumber, onClickApplyFi
     getOidcClientDetails,
     createRequest,
     populateClientNames,
-    getClientNameLangMap
+    getClientNameLangMap,
+    escapeKeyHandler
  } from '../../../utils/AppUtils';
 import ErrorMessage from '../../common/ErrorMessage';
 import LoadingIcon from '../../common/LoadingIcon';
@@ -218,6 +219,7 @@ function AdminOidcClientsList () {
     const closeDeactivatePopup = () => {
         setActionId(-1);
         setShowDeactivatePopup(false);
+        document.body.style.overflow = "auto";
     };
 
     const cancelErrorMsg = () => {
@@ -229,6 +231,14 @@ function AdminOidcClientsList () {
         outerDiv: "!bg-opacity-[16%]"
     }
 
+    useEffect(() => {
+        if(showDeactivatePopup){
+            escapeKeyHandler(closeDeactivatePopup);
+        }else if(showClientIdPopup){
+            escapeKeyHandler(() => setShowClientIdPopup(false));
+        }
+    }, [showDeactivatePopup, showClientIdPopup]);
+
     return (
         <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} font-inter overflow-x-scroll`}>
             { !dataLoaded && (

diff --git a/pmp-revamp-ui/src/pages/admin/authenticationServices/ViewAdminOidcClientDetails.js b/pmp-revamp-ui/src/pages/admin/authenticationServices/ViewAdminOidcClientDetails.js
@@ -121,7 +121,7 @@ function ViewAdminOidcClientDetails() {
                                     </div>
 
                                     <div 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" onKeyPress={(e) => onPressEnterKey(e, copyClientId(selectedClientData, selectedClientData.clientId, setCopied))}>
+                                        tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => copyClientId(selectedClientData, selectedClientData.clientId, setCopied))}>
                                         <p className="text-sm font-semibold text-[#333333]">{t('viewOidcClientDetails.oidcClientId')}</p>
                                         <div className="flex space-x-1 items-center">
                                             <p className={`text-md font-bold ${selectedClientData.status === "ACTIVE" ? 'text-[#1447B2]' : 'text-gray-400'} truncate`}>

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
@@ -7,7 +7,7 @@ import LoadingIcon from '../../common/LoadingIcon';
 import EmptyList from '../../common/EmptyList';
 import Title from '../../common/Title.js';
 import DeviceProviderServicesTab from './DeviceProviderServicesTab.js';
-import { handleMouseClickForDropdown, isLangRTL, onClickApplyFilter, setPageNumberAndPageSize, onResetFilter, bgOfStatus, getStatusCode, onPressEnterKey, formatDate, resetPageNumber, getPartnerManagerUrl, handleServiceErrors, createRequest, getApproveRejectStatus, updateActiveState } from '../../../utils/AppUtils';
+import { handleMouseClickForDropdown, isLangRTL, onClickApplyFilter, setPageNumberAndPageSize, onResetFilter, bgOfStatus, getStatusCode, onPressEnterKey, formatDate, resetPageNumber, getPartnerManagerUrl, handleServiceErrors, createRequest, getApproveRejectStatus, updateActiveState, escapeKeyHandler } from '../../../utils/AppUtils';
 import { HttpService } from '../../../services/HttpService.js';
 import AdminDeviceDetailsFilter from './AdminDeviceDetailsFilter.js';
 import FilterButtons from '../../common/FilterButtons.js';
@@ -174,6 +174,7 @@ function AdminDevicesList() {
     const closeApproveRejectPopup = () => {
         setActionId(-1);
         setShowDeviceDetailApproveRejectPopup(false);
+        document.body.style.overflow = "auto";
     };
 
     const deactivateDevice = (selectedDevice) => {
@@ -204,6 +205,7 @@ function AdminDevicesList() {
     const closeDeactivatePopup = () => {
         setActionId(-1);
         setShowDeactivatePopup(false);
+        document.body.style.overflow = "auto";
     };
 
     const sortAscOrder = (header) => {
@@ -240,6 +242,14 @@ function AdminDevicesList() {
         loadingDiv: "!py-[20%]"
     };
 
+    useEffect(() => {
+        if(showDeviceDetailApproveRejectPopup){
+            escapeKeyHandler(closeApproveRejectPopup);
+        }else if(showDeactivatePopup){
+            escapeKeyHandler(closeDeactivatePopup);
+        }
+    }, [showDeviceDetailApproveRejectPopup, showDeactivatePopup]);
+
     return (
         <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} font-inter overflow-x-scroll`}>
             {!dataLoaded && (

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiList.js
@@ -16,7 +16,7 @@ import disableDeactivateIcon from "../../../svg/disable_deactivate_icon.svg";
 import FilterButtons from '../../common/FilterButtons.js';
 import SortingIcon from '../../common/SortingIcon.js';
 import Pagination from '../../common/Pagination.js';
-import { bgOfStatus, formatDate, getPartnerManagerUrl, getApproveRejectStatus, getStatusCode, handleMouseClickForDropdown, handleServiceErrors, isLangRTL, onClickApplyFilter, onPressEnterKey, onResetFilter, resetPageNumber, setPageNumberAndPageSize, updateActiveState, createRequest } from '../../../utils/AppUtils.js';
+import { bgOfStatus, formatDate, getPartnerManagerUrl, getApproveRejectStatus, getStatusCode, handleMouseClickForDropdown, handleServiceErrors, isLangRTL, onClickApplyFilter, onPressEnterKey, onResetFilter, resetPageNumber, setPageNumberAndPageSize, updateActiveState, createRequest, escapeKeyHandler } from '../../../utils/AppUtils.js';
 import DeviceProviderServicesTab from './DeviceProviderServicesTab.js';
 import AdminSbiListFilter from './AdminSbiListFilter.js';
 import { HttpService } from '../../../services/HttpService.js';
@@ -191,6 +191,7 @@ function AdminSbiList() {
     const closeApproveRejectPopup = () => {
         setActionId(-1);
         setShowSbiApproveRejectPopUp(false);
+        document.body.style.overflow = "auto";
     };
 
     const deactivateSbi = (selectedSbi) => {
@@ -220,6 +221,7 @@ function AdminSbiList() {
     const closeDeactivatePopup = () => {
         setActionId(-1);
         setShowDeactivatePopup(false);
+        document.body.style.overflow = "auto";
     };
 
     const cancelErrorMsg = () => {
@@ -230,6 +232,14 @@ function AdminSbiList() {
         loadingDiv: "!py-[20%]",
     }
 
+    useEffect(() => {
+        if(showSbiApproveRejectPopUp){
+            escapeKeyHandler(closeApproveRejectPopup);
+        }else if(showDeactivatePopup){
+            escapeKeyHandler(closeDeactivatePopup);
+        }
+    }, [showSbiApproveRejectPopUp, showDeactivatePopup]);
+
     return (
         <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} font-inter overflow-x-scroll`}>
             {!dataLoaded && (

diff --git a/pmp-revamp-ui/src/pages/admin/ftmProviderServices/AdminFtmList.js b/pmp-revamp-ui/src/pages/admin/ftmProviderServices/AdminFtmList.js
@@ -16,7 +16,7 @@ import approveRejectIcon from "../../../svg/approve_reject_icon.svg";
 import disabledApproveRejectIcon from "../../../svg/approve_reject_disabled_icon.svg";
 import EmptyList from '../../common/EmptyList';
 import AdminFtmListFilter from './AdminFtmListFilter.js';
-import { handleMouseClickForDropdown, isLangRTL, onClickApplyFilter, setPageNumberAndPageSize, onResetFilter, bgOfStatus, getStatusCode, onPressEnterKey, formatDate, resetPageNumber, getPartnerManagerUrl, handleServiceErrors, createRequest, getApproveRejectStatus, updateActiveState } from '../../../utils/AppUtils';
+import { handleMouseClickForDropdown, isLangRTL, onClickApplyFilter, setPageNumberAndPageSize, onResetFilter, bgOfStatus, getStatusCode, onPressEnterKey, formatDate, resetPageNumber, getPartnerManagerUrl, handleServiceErrors, createRequest, getApproveRejectStatus, updateActiveState, escapeKeyHandler } from '../../../utils/AppUtils';
 import ApproveRejectPopup from '../../common/ApproveRejectPopup.js';
 import DeactivatePopup from '../../common/DeactivatePopup.js';
 
@@ -168,6 +168,7 @@ function AdminFtmList() {
     const closeApproveRejectPopup = () => {
         setActionId(-1);
         setShowFtmApproveRejectPopup(false);
+        document.body.style.overflow = "auto";
     };
 
     const deactivateFtmDetails = (ftm) => {
@@ -197,6 +198,7 @@ function AdminFtmList() {
     const closeDeactivatePopup = () => {
         setActionId(-1);
         setShowDeactivatePopup(false);
+        document.body.style.overflow = "auto";
     };
 
     const sortAscOrder = (header) => {
@@ -224,6 +226,14 @@ function AdminFtmList() {
         loadingDiv: "!py-[20%]"
     };
 
+    useEffect(() => {
+        if(showFtmApproveRejectPopup){
+            escapeKeyHandler(closeApproveRejectPopup);
+        }else if(showDeactivatePopup){
+            escapeKeyHandler(closeDeactivatePopup);
+        }
+    }, [showFtmApproveRejectPopup, showDeactivatePopup]);
+
     return (
         <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} font-inter overflow-x-scroll`}>
             {!dataLoaded && (

diff --git a/pmp-revamp-ui/src/pages/admin/partners/PartnersList.js b/pmp-revamp-ui/src/pages/admin/partners/PartnersList.js
@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { getUserProfile } from "../../../services/UserProfileService";
-import { createRequest, isLangRTL, onPressEnterKey } from "../../../utils/AppUtils";
+import { createRequest, escapeKeyHandler, isLangRTL, onPressEnterKey } from "../../../utils/AppUtils";
 import {
   getPartnerManagerUrl,
   handleServiceErrors,
@@ -197,6 +197,7 @@ function PartnersList() {
   const closeDeactivatePopup = () => {
     setViewPartnersId(-1);
     setShowDeactivatePopup(false);
+    document.body.style.overflow = "auto";
   }
 
   const onClickConfirmDeactivate = (deactivationResponse, selectedPartnerData) => {
@@ -212,6 +213,10 @@ function PartnersList() {
     }
   };
 
+  useEffect(() => {
+    escapeKeyHandler(closeDeactivatePopup);
+  }, [showDeactivatePopup]);
+
   const styles = {
     loadingDiv: "!py-[20%]"
   }

diff --git a/pmp-revamp-ui/src/pages/admin/policyManager/CreatePolicyGroup.js b/pmp-revamp-ui/src/pages/admin/policyManager/CreatePolicyGroup.js
@@ -182,12 +182,12 @@ function CreatePolicyGroup() {
                                 </div>
                                 <div className="border bg-medium-gray" />
                                 <div className="flex flex-row max-[450px]:flex-col px-[3%] py-9 justify-between max-[450px]:space-y-2">
-                                    <button id="createPolicy_clear_form" onClick={() => clearForm()} className={`w-40 h-10 mr-3 border-[#1447B2] ${isLoginLanguageRTL ? "mr-2" : "ml-2"} border rounded-md bg-white text-tory-blue text-sm font-semibold`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, clearForm())}>
+                                    <button id="createPolicy_clear_form" onClick={() => clearForm()} className={`w-40 h-10 mr-3 border-[#1447B2] ${isLoginLanguageRTL ? "mr-2" : "ml-2"} border rounded-md bg-white text-tory-blue text-sm font-semibold`} tabIndex="0" onKeyDown={(e) => onPressEnterKey(e, () => clearForm())}>
                                         {t('requestPolicy.clearForm')}
                                     </button>
                                     <div className={`flex flex-row max-[450px]:flex-col space-x-3 max-[450px]:space-x-0 max-[450px]:space-y-2 w-full md:w-auto justify-end`}>
                                         <button id="createPolicy_cancel_btn" onClick={() => clickOnCancel()} className={`${isLoginLanguageRTL ? "ml-2" : "mr-2"} w-11/12 md:w-40 h-10 border-[#1447B2] border rounded-md bg-white text-tory-blue text-sm font-semibold`}>{t('requestPolicy.cancel')}</button>
-                                        <button id="createPolicy_submit_btn" disabled={!isFormValid()} onClick={() => clickOnSubmit()} className={`${isLoginLanguageRTL ? "ml-2" : "mr-2"} w-11/12 md:w-40 h-10 border-[#1447B2] border rounded-md text-sm font-semibold ${isFormValid() ? 'bg-tory-blue text-white' : 'border-[#A5A5A5] bg-[#A5A5A5] text-white cursor-not-allowed'}`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, clearForm())}>
+                                        <button id="createPolicy_submit_btn" disabled={!isFormValid()} onClick={() => clickOnSubmit()} className={`${isLoginLanguageRTL ? "ml-2" : "mr-2"} w-11/12 md:w-40 h-10 border-[#1447B2] border rounded-md text-sm font-semibold ${isFormValid() ? 'bg-tory-blue text-white' : 'border-[#A5A5A5] bg-[#A5A5A5] text-white cursor-not-allowed'}`} tabIndex="0" onKeyDown={(e) => onPressEnterKey(e, () =>clearForm())}>
                                             {t('requestPolicy.submit')}
                                         </button>
                                     </div>