MOSIP-35026: Code Refactor of Error & Success Messages. (#769)

* MOSIP-35026: Updated the Error & Success messages Components Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-35026: Updated the Error & Success messages Components Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-35026: Updated the Error & Success messages Components Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-35026: Code Refactor of Error & Success Messages. Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-35026: Code Refactor of Error & Success Messages. Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-35026: Code Refactor of Error & Success Messages. Signed-off-by: Anil_Kumar_Majji <[email protected]> --------- Signed-off-by: Anil_Kumar_Majji <[email protected]>
mosip · Sep 19, 2024 · cdb9753 · cdb9753
1 parent 76c55df
commit cdb9753
Show file tree

Hide file tree

Showing 21 changed files with 130 additions and 175 deletions.
diff --git a/pmp-reactjs-ui/src/pages/authenticationServices/ApiKeysList.js b/pmp-reactjs-ui/src/pages/authenticationServices/ApiKeysList.js
@@ -170,17 +170,13 @@ function ApiKeysList() {
             {dataLoaded && (
                 <>
                     {errorMsg && (
-                        <div className={`flex justify-end max-w-7xl mb-5 mt-2 absolute ${isLoginLanguageRTL ? "left-0" : "right-2"}`}>
-                            <div className="flex justify-between items-center max-w-[35rem] min-h-14 min-w-72 bg-[#C61818] rounded-xl p-3 z-10">
-                                <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg}></ErrorMessage>
-                            </div>
-                        </div>
+                        <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg} />
                     )}
                     <div className="flex-col mt-7">
                         <div className="flex justify-between mb-5">
                             <Title title='authenticationServices.authenticationServices' backLink='/partnermanagement' ></Title>
                             {apiKeysList.length > 0 ?
-                                <button type="button" onClick={generateApiKey} tabIndex="0" onKeyPress={(e)=>onPressEnterKey(e,generateApiKey)}
+                                <button type="button" onClick={generateApiKey} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, generateApiKey)}
                                     className="h-10 text-sm font-semibold px-7 text-white bg-tory-blue rounded-md">
                                     {t('apiKeysList.generateApiKey')}
                                 </button>
@@ -218,7 +214,7 @@ function ApiKeysList() {
                                     <div className="flex flex-col justify-center">
                                         <img src={rectangleGrid} alt="" />
                                         {activeApiKey &&
-                                            (<button onClick={generateApiKey} type="button" tabIndex="0" onKeyPress={(e)=>onPressEnterKey(e,generateApiKey)}
+                                            (<button onClick={generateApiKey} type="button" tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, generateApiKey)}
                                                 className={`text-white font-semibold mt-8 bg-tory-blue rounded-md text-sm mx-8 py-3`}>
                                                 {t('apiKeysList.generateApiKey')}
                                             </button>)
@@ -273,15 +269,15 @@ function ApiKeysList() {
 
                                                                 <td className="px-2 mx-2">
                                                                     <div className="flex items-center justify-center relative" ref={el => submenuRef.current[index] = el}>
-                                                                        <p onClick={() => setViewApiKeyId(index === viewApiKeyId ? null : index)} className={`font-semibold mb-0.5 cursor-pointer text-[#1447B2]`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e,()=>setViewApiKeyId(index === viewApiKeyId ? null : index))}>
+                                                                        <p onClick={() => setViewApiKeyId(index === viewApiKeyId ? null : index)} className={`font-semibold mb-0.5 cursor-pointer text-[#1447B2]`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => setViewApiKeyId(index === viewApiKeyId ? null : index))}>
                                                                             ...</p>
                                                                         {viewApiKeyId === index && (
                                                                             <div className={`absolute w-[7%] ${currentArray.length - 1 === index ? '-bottom-2' : currentArray.length - 2 === index ? '-bottom-2' : 'top-5'} z-50 bg-white text-xs text-start font-semibold rounded-lg shadow-md border min-w-fit ${isLoginLanguageRTL ? "left-[1.5rem] text-right" : "right-[1.5rem] text-left"}`}>
-                                                                                <p onClick={() => onClickView(apiKey)} className={`${isLoginLanguageRTL ? "pl-10" : "pr-10"} py-2 px-4 cursor-pointer text-[#3E3E3E] hover:bg-gray-100`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e,()=>onClickView(apiKey))}>
+                                                                                <p onClick={() => onClickView(apiKey)} className={`${isLoginLanguageRTL ? "pl-10" : "pr-10"} py-2 px-4 cursor-pointer text-[#3E3E3E] hover:bg-gray-100`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => onClickView(apiKey))}>
                                                                                     {t('oidcClientsList.view')}
                                                                                 </p>
                                                                                 <hr className="h-px bg-gray-100 border-0 mx-1" />
-                                                                                <p onClick={() => onClickDeactivate(apiKey)} className={`${isLoginLanguageRTL ? "pl-10" : "pr-10"} py-2 px-4 ${apiKey.status === "ACTIVE" ? 'text-crimson-red cursor-pointer' : 'text-[#A5A5A5] cursor-auto'} hover:bg-gray-100`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e,()=>onClickDeactivate(apiKey))}>
+                                                                                <p onClick={() => onClickDeactivate(apiKey)} className={`${isLoginLanguageRTL ? "pl-10" : "pr-10"} py-2 px-4 ${apiKey.status === "ACTIVE" ? 'text-crimson-red cursor-pointer' : 'text-[#A5A5A5] cursor-auto'} hover:bg-gray-100`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, () => onClickDeactivate(apiKey))}>
                                                                                     {t('oidcClientsList.deActivate')}
                                                                                 </p>
                                                                                 {showDeactivatePopup && (

diff --git a/pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js b/pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js
@@ -375,11 +375,7 @@ function CreateOidcClient() {
       {dataLoaded && (
         <>
           {errorMsg && (
-            <div className={`flex justify-end max-w-7xl mb-5 absolute ${isLoginLanguageRTL ? "left-0" : "right-2"}`}>
-              <div className="flex justify-between items-center max-w-[35rem] min-h-14 min-w-72 bg-[#C61818] rounded-xl p-3">
-                <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg}></ErrorMessage>
-              </div>
-            </div>
+            <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg}/>
           )}
           <div className="flex-col mt-7">
             <div className="flex justify-between">

diff --git a/pmp-reactjs-ui/src/pages/authenticationServices/EditOidcClient.js b/pmp-reactjs-ui/src/pages/authenticationServices/EditOidcClient.js
@@ -265,11 +265,7 @@ function EditOidcClient() {
             {dataLoaded && (
                 <>
                     {errorMsg && (
-                        <div className={`flex justify-end max-w-7xl mb-5 absolute ${isLoginLanguageRTL ? "left-0" : "right-2"}`}>
-                            <div className="flex justify-between items-center max-w-[35rem] min-h-14 min-w-72 bg-[#C61818] rounded-xl p-3">
-                                <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg}></ErrorMessage>
-                            </div>
-                        </div>
+                        <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg} />
                     )}
                     <div className="flex-col mt-7">
                         <div className="flex justify-between">

diff --git a/pmp-reactjs-ui/src/pages/authenticationServices/GenerateApiKey.js b/pmp-reactjs-ui/src/pages/authenticationServices/GenerateApiKey.js
@@ -42,7 +42,7 @@ function GenerateApiKey() {
 
     const blocker = useBlocker(
         ({ currentLocation, nextLocation }) => {
-            if (isSubmitClicked || isCancelledClicked ||generateApiKeySuccess) {
+            if (isSubmitClicked || isCancelledClicked || generateApiKeySuccess) {
                 setIsSubmitClicked(false);
                 isCancelledClicked = false;
                 return false;
@@ -221,11 +221,7 @@ function GenerateApiKey() {
             {dataLoaded && (
                 <>
                     {errorMsg && (
-                        <div className={`flex justify-end max-w-7xl sm:max-w-xl mb-5 absolute ${isLoginLanguageRTL ? "left-0" : "right-2"}`}>
-                            <div className="flex justify-between items-center max-w-[35rem] min-h-14 min-w-72 max-[450px]:min-w-40 max-[450px]:min-h-40 bg-[#C61818] rounded-xl p-3">
-                                <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg}></ErrorMessage>
-                            </div>
-                        </div>
+                        <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg} />
                     )}
                     <div className="flex-col mt-7">
                         <div className="flex justify-between">
@@ -255,7 +251,7 @@ function GenerateApiKey() {
                                                     <label className={`block text-dark-blue text-sm font-semibold mb-1 ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>{t('requestPolicy.partnerType')}<span className="text-crimson-red mx-1">*</span></label>
                                                     <button disabled className="flex items-center justify-between w-full h-auto px-2 py-2 border border-[#C1C1C1] rounded-md text-base text-vulcan bg-platinum-gray leading-tight focus:outline-none focus:shadow-outline
                                                 overflow-x-auto whitespace-normal no-scrollbar" type="button">
-                                                        <span className={`w-full break-all break-normal break-words ${partnerType ? 'text-dark-blue':'text-gray-400'} text-wrap text-start`}>{partnerType || t('commons.partnersHelpText')}</span>
+                                                        <span className={`w-full break-all break-normal break-words ${partnerType ? 'text-dark-blue' : 'text-gray-400'} text-wrap text-start`}>{partnerType || t('commons.partnersHelpText')}</span>
                                                         <svg className={`w-3 h-2 ml-3 transform 'rotate-0' text-gray-500 text-base`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                                             <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 4 4 4-4" />
                                                         </svg>

diff --git a/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsList.js b/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsList.js
@@ -200,11 +200,7 @@ function OidcClientsList() {
             {dataLoaded && (
                 <>
                     {errorMsg && (
-                        <div className={`flex justify-end max-w-7xl mb-5 mt-2 absolute ${isLoginLanguageRTL ? "left-0" : "right-2"}`}>
-                            <div className="flex justify-between items-center max-w-[35rem] min-h-14 min-w-72 bg-[#C61818] rounded-xl p-3 z-10">
-                                <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg}></ErrorMessage>
-                            </div>
-                        </div>
+                        <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg}/>
                     )}
                     <div className="flex-col mt-7">
                         <div className="flex justify-between mb-5">

diff --git a/pmp-reactjs-ui/src/pages/certificates/PartnerCertificatesList.js b/pmp-reactjs-ui/src/pages/certificates/PartnerCertificatesList.js
@@ -6,7 +6,7 @@ import { isLangRTL } from "../../utils/AppUtils";
 import ErrorMessage from "../common/ErrorMessage";
 import SuccessMessage from "../common/SuccessMessage";
 import LoadingIcon from "../common/LoadingIcon";
-import { formatDate, getPartnerTypeDescription, handleMouseClickForDropdown, getPartnerManagerUrl, getPartnerDomainType} from "../../utils/AppUtils";
+import { formatDate, getPartnerTypeDescription, handleMouseClickForDropdown, getPartnerManagerUrl, getPartnerDomainType } from "../../utils/AppUtils";
 import { useTranslation } from "react-i18next";
 
 import rectangleBox from '../../svg/rectangle_box.svg';
@@ -177,18 +177,10 @@ function PartnerCertificatesList() {
             {dataLoaded && (
                 <>
                     {errorMsg && (
-                        <div className={`flex justify-end max-w-7xl mb-5 absolute ${isLoginLanguageRTL ? "left-0" : "right-0"}`}>
-                            <div className="flex justify-between items-center max-w-[35rem] min-h-14 min-w-72 bg-[#C61818] rounded-xl p-4">
-                                <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg}></ErrorMessage>
-                            </div>
-                        </div>
+                        <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg} />
                     )}
                     {successMsg && (
-                        <div className={`flex justify-end max-w-7xl mb-5 absolute ${isLoginLanguageRTL ? "left-0" : "right-0"}`}>
-                            <div className="flex justify-between items-center max-w-[35rem] min-h-14 min-w-72 bg-fruit-salad rounded-xl p-4">
-                                <SuccessMessage successMsg={successMsg} clickOnCancel={cancelSuccessMsg}></SuccessMessage>
-                            </div>
-                        </div>
+                        <SuccessMessage successMsg={successMsg} clickOnCancel={cancelSuccessMsg} />
                     )}
                     <div className="flex-col mt-5">
                         <div className="flex justify-between mb-5">

diff --git a/pmp-reactjs-ui/src/pages/certificates/UploadCertificate.js b/pmp-reactjs-ui/src/pages/certificates/UploadCertificate.js
@@ -138,9 +138,19 @@ function UploadCertificate({ closePopup, popupData, request }) {
         }
     }, [popupData.isCertificateAvailable, popupData.certificateUploadDateTime, popupData, getPartnerType]);
 
+    const errorcustomStyle = {
+        outerDiv: "!flex !justify-center !inset-0",
+        innerDiv: "!flex !justify-between !items-center !rounded-none !bg-moderate-red !md:w-[25rem] !w-full !min-h-[3.2rem] !h-fit !px-4 !py-[10px]"
+    }
+
+    const successcustomStyle = {
+        outerDiv: "!flex !justify-center !inset-0",
+        innerDiv: "!flex !justify-between !items-center !rounded-none !md:w-[25rem] !w-full !min-h-[3.2rem] !h-fit !px-4 !py-[10px]"
+    }
+
     return (
         <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-[30%] z-50">
-            <FocusTrap focusTrapOptions={{ initialFocus: false, allowOutsideClick: true}}>
+            <FocusTrap focusTrapOptions={{ initialFocus: false, allowOutsideClick: true }}>
                 <div className={`bg-white md:w-[25rem] w-[60%] mx-auto ${popupData.isCertificateAvailable ? 'min-h-[28rem]' : 'min-h-[27rem]'} rounded-lg shadow-lg h-fit`}>
                     {!dataLoaded && (
                         <div className="flex items-center h-[30rem]">
@@ -156,18 +166,10 @@ function UploadCertificate({ closePopup, popupData, request }) {
                             <div className="border-gray-200 border-opacity-75 border-t"></div>
                             <div className="relative">
                                 {uploadFailure && errorMsg && (
-                                    <div className="flex justify-center inset-0">
-                                        <div className="bg-moderate-red md:w-[25rem] w-full min-h-[3.2rem] h-fit flex items-center justify-between px-4 py-[10px]">
-                                            <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg}></ErrorMessage>
-                                        </div>
-                                    </div>
+                                    <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg} customStyle={errorcustomStyle} />
                                 )}
                                 {uploadSuccess && successMsg && (
-                                    <div className="flex justify-center inset-0">
-                                        <div className="bg-fruit-salad md:w-[25rem] w-full min-h-[3.2rem] h-fit flex items-center justify-between px-4 py-[10px]">
-                                            <SuccessMessage successMsg={successMsg} clickOnCancel={cancelSuccessMsg}></SuccessMessage>
-                                        </div>
-                                    </div>
+                                    <SuccessMessage successMsg={successMsg} clickOnCancel={cancelSuccessMsg} customStyle={successcustomStyle} />
                                 )}
                                 <div className="px-[4%] py-[2%]">
                                     <form>

diff --git a/pmp-reactjs-ui/src/pages/common/DeactivatePopup.js b/pmp-reactjs-ui/src/pages/common/DeactivatePopup.js
@@ -88,21 +88,22 @@ function DeactivatePopup({ closePopUp, popupData, request, headerMsg, descriptio
         loadingDiv: "!py-[35%]"
     }
 
+    const customStyle = {
+        outerDiv: "!flex !justify-end",
+        innerDiv: "!flex !justify-between !items-center !rounded-xl !w-[55%] !min-h-12 !p-3 !m-1 !-mb-6"
+    }
+
     return (
         <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-[50%] z-50 font-inter cursor-default">
             <FocusTrap focusTrapOptions={{ initialFocus: false, allowOutsideClick: true }}>
                 <div className={`bg-white md:w-[390px] w-[55%] mx-auto rounded-lg shadow-lg h-fit`}>
                     {!dataLoaded && (
-                        <LoadingIcon styleSet={styles}></LoadingIcon>
+                        <LoadingIcon styleSet={styles} />
                     )}
                     {dataLoaded && (
                         <div className="relative">
                             {errorMsg && (
-                                <div className="flex justify-end">
-                                    <div className="flex justify-between items-center w-[55%] min-h-14 bg-[#C61818] rounded-xl p-3 m-2 -mb-5">
-                                        <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg}></ErrorMessage>
-                                    </div>
-                                </div>
+                                <ErrorMessage errorCode={errorCode} errorMessage={errorMsg} clickOnCancel={cancelErrorMsg} customStyle={customStyle} />
                             )}
                             <div className={`p-[8%] flex-col text-center justify-center items-center`}>
                                 {!isLoginLanguageRTL ?
@@ -118,8 +119,8 @@ function DeactivatePopup({ closePopUp, popupData, request, headerMsg, descriptio
                                 </p>
                                 {popupData.isDeactivateSbi &&
                                     (<div className="bg-[#FFF7E5] border-2 break-words border-[#EDDCAF] rounded-md w-full p-[2%] mb-2">
-                                        <p className="text-sm font-inter text-[#8B6105]">{t(formatDeviceCountMessage(popupData.countOfApprovedDevices, t('deactivateSbi.deactivateApprovedDevicesSingular'), t('deactivateSbi.deactivateApprovedDevicesPlural')), {devicesCount: popupData.countOfApprovedDevices})}
-                                            | {t(formatDeviceCountMessage(popupData.countOfPendingDevices, t('deactivateSbi.deactivatePendingDevicesSingular'), t('deactivateSbi.deactivatePendingDevicesPlural')), {devicesCount: popupData.countOfPendingDevices})}
+                                        <p className="text-sm font-inter text-[#8B6105]">{t(formatDeviceCountMessage(popupData.countOfApprovedDevices, t('deactivateSbi.deactivateApprovedDevicesSingular'), t('deactivateSbi.deactivateApprovedDevicesPlural')), { devicesCount: popupData.countOfApprovedDevices })}
+                                            | {t(formatDeviceCountMessage(popupData.countOfPendingDevices, t('deactivateSbi.deactivatePendingDevicesSingular'), t('deactivateSbi.deactivatePendingDevicesPlural')), { devicesCount: popupData.countOfPendingDevices })}
                                         </p>
                                     </div>)
                                 }