From 8b2d6c6d4e0193d3143e4b2a65b8a48d219b3382 Mon Sep 17 00:00:00 2001
From: Anil_Kumar_Majji <106086523+Anil-kumar-Majji@users.noreply.github.com>
Date: Fri, 7 Jun 2024 15:24:48 +0530
Subject: [PATCH] Mosip-32947: Resolved the RTL issues in the respective pages
 (#426)

Signed-off-by: Anil_Kumar_Majji <106086523+Anil-kumar-Majji@users.noreply.github.com>
---
 .../CreateOidcClient.js                       | 13 +++++---
 .../authenticationServices/OidcClientsList.js | 10 +++---
 .../pages/common/fields/DropdownComponent.js  |  4 +--
 .../src/pages/dashboard/Dashboard.js          |  2 +-
 pmp-reactjs-ui/src/pages/policies/Policies.js |  8 ++---
 .../src/pages/policies/ViewPolicyDetails.js   | 33 ++++++++++---------
 6 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js b/pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js
index cfe886f79..274e017b7 100644
--- a/pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js
+++ b/pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js
@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 import backArrow from '../../svg/back_arrow.svg';
 import info from '../../svg/info_icon.svg';
 import DropdownComponent from '../common/fields/DropdownComponent';
+import { getUserProfile } from '../../services/UserProfileService';
+import { isLangRTL } from '../../utils/AppUtils';
 
 function CreateOidcClient() {
   const [partnerComments, setPartnerComments] = useState("");
@@ -18,6 +20,7 @@ function CreateOidcClient() {
 
   const navigate = useNavigate();
   const { t } = useTranslation();
+  const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
 
   const count = 0;
 
@@ -81,7 +84,7 @@ function CreateOidcClient() {
   }
 
   return (
-    <div className="ml-32 mr-5 mt-5 w-[100%]">
+    <div className={`mt-5 w-[100%] ${isLoginLanguageRTL ? "mr-32 ml-5" : "ml-32 mr-5"} overflow-x-scroll font-inter`}>
       <div className="flex-col">
         <div className="flex justify-between">
           <div className="flex items-start space-x-3">
@@ -158,11 +161,11 @@ function CreateOidcClient() {
                   <div className="flex flex-col w-full">
                     <label className="flex space-x-1 items-center text-dark-blue text-base font-semibold mb-1">
                       {t('createOidcClient.publicKey')}<span className="text-crimson-red">*</span>
-                      <img src={info} className="ml-2 cursor-pointer" onClick={() => setShowPublicKeyToolTip(!showPublicKeyToolTip)} />
+                      <img src={info} className={`${isLoginLanguageRTL ? "mr-2" :"ml-2"} cursor-pointer`} onClick={() => setShowPublicKeyToolTip(!showPublicKeyToolTip)} />
                     </label>
                     {showPublicKeyToolTip &&
                       (
-                        <div className="z-20 w-[24%] max-h-[32%] overflow-y-auto absolute ml-28 shadow-lg bg-white border border-gray-300 p-3 rounded">
+                        <div className={`z-20 w-[24%] max-h-[32%] overflow-y-auto absolute ${isLoginLanguageRTL ? "mr-[10%]" :"ml-[8%]"} shadow-lg bg-white border border-gray-300 p-3 rounded`}>
                           <p className="text-black text-sm">{t('createOidcClient.publicKeyToolTip')}</p>
                         </div>
                       )}
@@ -249,8 +252,8 @@ function CreateOidcClient() {
           <div className="flex flex-row px-[3%] py-[2%] justify-between">
             <button onClick={() => clearForm()} className="mr-2 w-40 h-12 border-[#1447B2] border rounded-md bg-white text-tory-blue text-base font-semibold">{t('requestPolicy.clearForm')}</button>
             <div className="flex flex-row space-x-3 w-full md:w-auto justify-end">
-              <button onClick={() => moveToAuthenticationServices(navigate)} className="mr-2 w-40 h-12 border-[#1447B2] border rounded-md bg-white text-tory-blue text-base font-semibold">{t('requestPolicy.cancel')}</button>
-              <button className={`mr-2 w-40 h-12 border-[#1447B2] border rounded-md text-base font-semibold bg-tory-blue text-white`}>{t('requestPolicy.submit')}</button>
+              <button onClick={() => moveToAuthenticationServices(navigate)} className={`${isLoginLanguageRTL ?"ml-2" :"mr-2"} w-40 h-12 border-[#1447B2] border rounded-md bg-white text-tory-blue text-base font-semibold`}>{t('requestPolicy.cancel')}</button>
+              <button className={`${isLoginLanguageRTL ?"ml-2" :"mr-2"} w-40 h-12 border-[#1447B2] border rounded-md text-base font-semibold bg-tory-blue text-white`}>{t('requestPolicy.submit')}</button>
             </div>
           </div>
         </div>
diff --git a/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsList.js b/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsList.js
index 80e9667c8..2a9b39af1 100644
--- a/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsList.js
+++ b/pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsList.js
@@ -25,7 +25,7 @@ function OidcClientsList() {
         <div className={`mt-5 w-[100%] ${isLoginLanguageRTL ? "mr-32 ml-5" : "ml-32 mr-5"} overflow-x-scroll font-inter`}>
             <div className="flex-col">
                 <div className="flex justify-between mb-5">
-                    <div className={`flex space-x-3`}>
+                    <div className={`flex gap-x-3`}>
                         <img src={backArrow} alt="" onClick={() => moveToHome()} className={`cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`} />
                         <div className="flex-col mt-[3%]">
                             <h1 className="font-semibold text-xl text-dark-blue">{t('authenticationServices.authenticationServices')}</h1>
@@ -38,14 +38,14 @@ function OidcClientsList() {
                 <div className='flex text-xs bg-[#FCFCFC] font-bold space-x-16 items-start rounded-lg px-[1.5%] pt-[2%]'>
                     <div className={`flex-col justify-center`}>
                         <h6 onClick={() => { setActiveOicdClient(true); setActiveApiKey(false) }}
-                            className={`${activeOidcClient ? "text-[#1447b2]" : "text-[#031640]"} mb-[12%] ml-[10%] cursor-pointer text-sm`}>
+                            className={`${activeOidcClient ? "text-[#1447b2]" : "text-[#031640]"} mb-[12%] ${isLoginLanguageRTL ? "mr-[10%]" : "ml-[10%]"} cursor-pointer text-sm`}>
                             {t('authenticationServices.oidcClient')}
                         </h6>
                         <div className={`h-1 w-24 ${activeOidcClient ? "bg-tory-blue" : "bg-transparent"}  rounded-t-md`}></div>
                     </div>
                     <div className={`flex-col justify-center`}>
                         <h6 onClick={() => { setActiveOicdClient(false); setActiveApiKey(true) }}
-                            className={`${activeApiKey ? "text-[#1447b2]" : "text-[#031640]"} mb-[12%] ml-[20%] cursor-pointer text-sm`}>
+                            className={`${activeApiKey ? "text-[#1447b2]" : "text-[#031640]"} mb-[12%] ${isLoginLanguageRTL ? "mr-[20%]" : "ml-[20%]"} cursor-pointer text-sm`}>
                             {t('authenticationServices.apiKey')}
                         </h6>
                         <div className={`h-1 w-24 ${activeApiKey ? "bg-tory-blue" : "bg-transparent"} rounded-t-md`}></div>
@@ -88,12 +88,12 @@ function OidcClientsList() {
                             <img src={rectangleGrid} alt="" />
                             {activeOidcClient &&
                                 (<button onClick={() => createOidcClient()} type="button"
-                                    className={`text-white font-semibold mt-8 ${isLoginLanguageRTL ? "mr-" : "ml-12"} bg-tory-blue rounded-md text-base px-4 py-3`}>
+                                    className={`text-white font-semibold mt-8 ${isLoginLanguageRTL ? "mr-14" : "ml-12"} bg-tory-blue rounded-md text-base px-4 py-3`}>
                                     {t('authenticationServices.createOidcClientBtn')}
                                 </button>)
                             }
                             {activeApiKey &&
-                                (<button type="button" className={`text-white font-semibold mt-8 ${isLoginLanguageRTL ? "mr-" : "ml-12"} bg-tory-blue rounded-md text-base px-4 py-3`}>
+                                (<button type="button" className={`text-white font-semibold mt-8 ${isLoginLanguageRTL ? "mr-14" : "ml-12"} bg-tory-blue rounded-md text-base px-4 py-3`}>
                                     {t('authenticationServices.generateApiKeyBtn')}
                                 </button>)
                             }
diff --git a/pmp-reactjs-ui/src/pages/common/fields/DropdownComponent.js b/pmp-reactjs-ui/src/pages/common/fields/DropdownComponent.js
index 345d06c16..000a2eec7 100644
--- a/pmp-reactjs-ui/src/pages/common/fields/DropdownComponent.js
+++ b/pmp-reactjs-ui/src/pages/common/fields/DropdownComponent.js
@@ -53,11 +53,11 @@ function DropdownComponent({ fieldName, dropdownDataList, onDropDownChangeEvent,
             <label className={`flex text-dark-blue font-semibold text-sm mb-2 ${(styleSet && styleSet.dropdownLabel) ? styleSet.dropdownLabel : ''}`}>
                 {t(fieldNameKey)}{containsAsterisk ? <span className="text-crimson-red">*</span> : <span>{isLoginLanguageRTL ?"" :":"}</span>}
                 {addInfoIcon && (
-                    <img src={infoIcon} alt="" className="ml-2 cursor-pointer" onClick={handleIconClick}></img>
+                    <img src={infoIcon} alt="" className= {`cursor-pointer`} onClick={handleIconClick}></img>
                 )}
             </label>
             {showTooltip && (
-                <div ref={tooltipRef} className={`z-20 p-4 -mt-[4.5%] w-[20%] max-h-[32%] overflow-y-auto absolute ml-28 shadow-lg bg-white border border-gray-300 rounded`}>
+                <div ref={tooltipRef} className={`z-20 p-4 -mt-[4.5%] w-[20%] max-h-[32%] overflow-y-auto absolute ${isLoginLanguageRTL?"mr-[9.5%]":"ml-[8.5%]"} shadow-lg bg-white border border-gray-300 rounded`}>
                     <p className="text-black text-sm">{t(infoKey)}</p>
                 </div>
             )}
diff --git a/pmp-reactjs-ui/src/pages/dashboard/Dashboard.js b/pmp-reactjs-ui/src/pages/dashboard/Dashboard.js
index 6a3722a0a..7ed67f20c 100644
--- a/pmp-reactjs-ui/src/pages/dashboard/Dashboard.js
+++ b/pmp-reactjs-ui/src/pages/dashboard/Dashboard.js
@@ -123,7 +123,7 @@ function Dashboard() {
           )}
           <div className="mb-7 mt-5 ml-[2.3%] text-xl font-semibold tracking-tight text-gray-700">
             <p >
-              {t('dashboard.welcomeMsg', { firstName: getUserProfile().firstName, lastName: getUserProfile().lastName })},
+              {t('dashboard.welcomeMsg', { firstName: getUserProfile().firstName, lastName: getUserProfile().lastName })}
             </p>
           </div>
           <div className="flex mt-2 ml-[3.2%] flex-wrap break-words">
diff --git a/pmp-reactjs-ui/src/pages/policies/Policies.js b/pmp-reactjs-ui/src/pages/policies/Policies.js
index 7841d3737..5b7999dfc 100644
--- a/pmp-reactjs-ui/src/pages/policies/Policies.js
+++ b/pmp-reactjs-ui/src/pages/policies/Policies.js
@@ -256,7 +256,7 @@ function Policies() {
           )}
           <div className="flex-col">
             <div className="flex justify-between mb-5">
-              <div className="flex items-start space-x-3">
+              <div className="flex items-start gap-x-2">
                 <img src={backArrow} alt="" onClick={() => moveToHome()} className={`mt-[9%] cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`} />
                 <div className="flex-col">
                   <h1 className="font-semibold text-xl text-dark-blue">{t('policies.policies')}</h1>
@@ -385,7 +385,7 @@ function Policies() {
                                       {
                                         viewPolicyId === index && (
                                           <div onClick={() => showViewPolicyDetails(partner)}
-                                            className="absolute bg-white text-xs font-medium rounded-lg shadow-md border">
+                                            className={`absolute ${isLoginLanguageRTL ? "mr-16": null} bg-white text-xs font-medium rounded-lg shadow-md border`}>
                                             <p className="px-5 py-2 cursor-pointer">
                                               {t('policies.view')}
                                             </p>
@@ -413,12 +413,12 @@ function Policies() {
                         breakLabel="..."
                         previousLabel={
                           <IconContext.Provider value={{ color: "#B8C1CC", size: "25px" }}>
-                            <AiFillLeftCircle />
+                           {isLoginLanguageRTL ? <AiFillRightCircle/> : <AiFillLeftCircle/>}
                           </IconContext.Provider>
                         }
                         nextLabel={
                           <IconContext.Provider value={{ color: "#B8C1CC", size: "25px" }}>
-                            <AiFillRightCircle />
+                            {isLoginLanguageRTL ? <AiFillLeftCircle/> : <AiFillRightCircle/>}
                           </IconContext.Provider>
                         }
                       />
diff --git a/pmp-reactjs-ui/src/pages/policies/ViewPolicyDetails.js b/pmp-reactjs-ui/src/pages/policies/ViewPolicyDetails.js
index 835a75761..c556b713f 100644
--- a/pmp-reactjs-ui/src/pages/policies/ViewPolicyDetails.js
+++ b/pmp-reactjs-ui/src/pages/policies/ViewPolicyDetails.js
@@ -2,6 +2,8 @@ import React from "react";
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { getUserProfile } from "../../services/UserProfileService";
+import { isLangRTL } from "../../utils/AppUtils";
 import backArrow from "../../svg/back_arrow.svg";
 import { formatDate, moveToPolicies } from "../../utils/AppUtils";
 import adminImage from "../../svg/admin.png";
@@ -9,6 +11,7 @@ import partnerImage from "../../svg/partner.png";
 
 function ViewPolicyDetails() {
     const { t } = useTranslation();
+    const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
     const navigate = useNavigate();
     const [policyDetails, setPolicyDetails] = useState([]);
 
@@ -48,16 +51,16 @@ function ViewPolicyDetails() {
 
     return (
         <>
-            <div className="flex-col w-full p-5 bg-anti-flash-white h-full font-inter mb-[2%] ml-[8%] overflow-x-scroll">
+            <div className={`flex-col w-full p-5 bg-anti-flash-white h-full font-inter mb-[2%] ${isLoginLanguageRTL ? "mr-[8%]" : "ml-[8%]"} overflow-x-scroll`}>
                 <div className="flex justify-between mb-5">
-                    <div className="flex space-x-4">
+                    <div className="flex items-center gap-x-2">
                         <img
                             src={backArrow}
                             alt=""
                             onClick={() => moveToPolicies(navigate)}
-                            className="mt-1 cursor-pointer"
+                            className={`mt-[9%] cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`}
                         />
-                        <div className="flex-col mt-4">
+                        <div className="flex-col">
                             <h1 className="font-bold text-lg text-md text-blue-900">
                                 {t("viewPolicyDetails.viewPolicyDetails")}
                             </h1>
@@ -79,7 +82,7 @@ function ViewPolicyDetails() {
                     </div>
                 </div>
                 <div className="bg-white h-fit mt-1 rounded-t-xl shadow-lg">
-                    <div className="flex flex-col pl-8 pt-6 pb-5">
+                    <div className={`flex-col ${isLoginLanguageRTL?"pr-8": "pl-8"} pt-6 pb-5`}>
                         <p className="font-bold text-lg text-blue-900 mb-3">{policyDetails.policyName}</p>
                         <div className="flex items-center justify-start">
                             <div
@@ -89,7 +92,7 @@ function ViewPolicyDetails() {
                             >
                                 {policyDetails.status}
                             </div>
-                            <div className="font-medium ml-3 text-sm text-blue-900">
+                            <div className={`font-medium ${isLoginLanguageRTL ? "mr-3":"ml-3"} text-sm text-blue-900`}>
                                 {t("viewPolicyDetails.createdOn") + ' ' +
                                     formatDate(policyDetails.createDate, "date")}
                             </div>
@@ -100,7 +103,7 @@ function ViewPolicyDetails() {
                         </div>
                     </div>
                     <hr className="h-px w-full bg-gray-200 border-0" />
-                    <div className="pl-8 pt-6 mr-8 mb-4">
+                    <div className={`${isLoginLanguageRTL?"pr-8 ml-8":"pl-8 mr-8"} pt-6 mb-4`}>
                         <div className="flex flex-wrap">
                             <div className="w-[50%] mb-5">
                                 <p className="font-semibold text-suva-gray text-base">
@@ -160,13 +163,13 @@ function ViewPolicyDetails() {
                                 {t("viewPolicyDetails.comments")}
                             </p>
                             <div>
-                                <div className="flex font-medium w-full  ">
-                                    <span className=" w-8 h-8 rounded-full flex justify-center items-center mr-3 text-sm text-white lg:w-10 lg:h-10">
-                                        <div className="relative flex-1 after:content-['']  after:w-0.5 after:h-[4rem] after:bg-gray-200 after:inline-block after:absolute after:left-[1.2rem] after:mt-7"></div>
+                                <div className="flex font-medium w-full ">
+                                    <span className={`w-8 h-8 rounded-full flex justify-center items-center ${isLoginLanguageRTL?"ml-3":"mr-3"} text-sm text-white lg:w-10 lg:h-10`}>
+                                        <div className={`relative flex-1 after:content-['']  after:w-0.5 after:h-[4rem] after:bg-gray-200 after:inline-block after:absolute ${isLoginLanguageRTL?"after:right-[1.2rem]":"after:left-[1.2rem]"} after:mt-7`}></div>
                                         <img src={adminImage} alt="Example" className="" />
                                     </span>
                                     <div className="flex bg-floral-white w-full flex-col p-4 relative rounded-md">
-                                        <div className="w-0 h-0 border-t-[0.5rem] border-t-transparent border-r-[7px] border-r-[#FFF9F0] border-b-[0.5rem] border-b-transparent absolute top-4 -left-[0.38rem]"></div>
+                                        <div className={`w-0 h-0 border-t-[0.5rem] border-t-transparent border-b-[0.5rem] border-b-transparent absolute top-4 ${isLoginLanguageRTL? "-right-[0.38rem] border-l-[7px] border-l-[#FFF9F0]" : "-left-[0.38rem] border-r-[7px] border-r-[#FFF9F0]"}`}></div>
                                         <h4 className="text-lg  text-[#031640]">
                                             {t("viewPolicyDetails.adminComments")}
                                         </h4>
@@ -181,7 +184,7 @@ function ViewPolicyDetails() {
                                             <div>
                                                 {policyDetails.updDtimes && (
                                                     <div className="flex">
-                                                        <div className="font-medium ml-3 text-sm text-blue-900">
+                                                        <div className={`font-medium ${isLoginLanguageRTL?"mr-3":"ml-3"} text-sm text-blue-900`}>
                                                             {formatDate(policyDetails.updDtimes, "date")}
                                                         </div>
                                                         <div className="mx-3 text-gray-300">|</div>
@@ -196,11 +199,11 @@ function ViewPolicyDetails() {
                                 </div>
                                 <div className="mt-4">
                                     <div className="flex font-medium w-full">
-                                        <span className="w-8 h-8 rounded-full flex justify-center items-center mr-3 text-sm lg:w-10 lg:h-10">
+                                        <span className={`w-8 h-8 rounded-full flex justify-center items-center ${isLoginLanguageRTL?"ml-3":"mr-3"} text-sm lg:w-10 lg:h-10`}>
                                             <img src={partnerImage} alt="Example" className="" />
                                         </span>
                                         <div className="flex bg-alice-green w-full flex-col p-4 relative rounded-md">
-                                            <div className="w-0 h-0 border-t-[0.5rem] border-t-transparent border-r-[7px] border-r-[#F2F5FC] border-b-[0.5rem] border-b-transparent absolute top-4 -left-[0.38rem]"></div>
+                                            <div className={`w-0 h-0 border-t-[0.5rem] border-t-transparent border-b-[0.5rem] border-b-transparent absolute top-4 ${isLoginLanguageRTL ? "-right-[0.38rem] border-l-[#F2F5FC] border-l-[7px]" : "-left-[0.38rem] border-r-[#F2F5FC] border-r-[7px]"}`}></div>
                                             <h4 className="text-lg  text-[#031640]">
                                                 {t("viewPolicyDetails.partnerComments")}
                                             </h4>
@@ -225,7 +228,7 @@ function ViewPolicyDetails() {
                         </div>
                     </div>
                     <hr className="h-px w-full bg-gray-200 border-0" />
-                    <div className="flex justify-end py-5 mr-8">
+                    <div className={`flex justify-end py-5 ${isLoginLanguageRTL ? "ml-8" :"mr-8"}`}>
                         <button
                             onClick={() => moveToPolicies(navigate)}
                             className="h-11 w-[120px] text-sm p-3 py-2 text-tory-blue bg-white border border-blue-800 font-semibold rounded-md text-center"