MOSIP-38029: Updated Title, Subtitle and removed SBI id and version f…

…ieds in Linked devices screen (#1086) Signed-off-by: Swetha K <[email protected]> Co-authored-by: Swetha K <[email protected]>
mosip · Jan 13, 2025 · 54ba88c · 54ba88c
1 parent 0fb8a74
commit 54ba88c
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 79 deletions.
diff --git a/pmp-revamp-ui/public/i18n/ara.json b/pmp-revamp-ui/public/i18n/ara.json
@@ -52,9 +52,9 @@
         "deviceProviderServicesDesc": "إضافة وعرض وإلغاء تنشيط SBI (الواجهة البيومترية الآمنة) والأجهزة المرتبطة بها",
         "userRegistrationError": "غير قادر على تسجيل المستخدم. حاول تسجيل الدخول مرة أخرى",
         "verifyEmailError": "حدث خطأ أثناء التحقق من البريد الإلكتروني للمستخدم. حاول تسجيل الدخول مرة أخرى",
-        "rootOfTrustCertificate": "جذر شهادة الثقة",
-        "rootOfTrustCertificateDesc": "تحميل، تنزيل أو عرض قائمة شهادات الجذر والشهادات الوسيطة",
-        "partner": "الشريك",
+        "certificateTrustStore": "مخزن شهادات الثقة",
+        "certificateTrustStoreDesc": "تحميل، تنزيل أو عرض قائمة شهادات الجذر والشهادات الوسيطة",
+        "partner": "الشركاء",
         "partnerDesc": "عرض أو تعطيل تفاصيل الشريك",
         "policy": "السياسة",
         "policiesadminDesc": "إنشاء وإدارة مجموعات السياسات، سياسات المصادقة والسياسات المتعلقة بمشاركة البيانات",
@@ -1095,6 +1095,7 @@
         "PMS_POL_070": "توجد سياسات مسودة ضمن مجموعة السياسات.",
         "PMS_POL_071": "خطأ أثناء إلغاء تفعيل مجموعة السياسات.",
         "PMS_POL_072": "السياسة المحددة ليست في حالة التنشيط",
+        "PMS_POL_073": "يجب أن تكون حالة الطلب إلغاء التنشيط",
         "KER-PCM-006": "لم يتم العثور على شهادات CA الجذر/CA المتوسطة.",
         "KER-PCM-008": "اسم المؤسسة الموجود في الشهادة التي تم تحميلها لا يتطابق مع الاسم المقدم أثناء تسجيل الشريك",
         "KER-PCM-015": "الشهادة الموقعة ذاتيًا غير مسموح بها كشريك.",

diff --git a/pmp-revamp-ui/public/i18n/eng.json b/pmp-revamp-ui/public/i18n/eng.json
@@ -52,9 +52,9 @@
         "deviceProviderServicesDesc": "Add, View, Deactivate SBI (Secure Biometric Interface) and associated devices",
         "userRegistrationError": "Unable to register user. Try login again!",
         "verifyEmailError": "Error during user's email verification. Try login again!",
-        "rootOfTrustCertificate": "Root of Trust Certificate",
-        "rootOfTrustCertificateDesc": "Upload, Download or View List of Root and Intermediate CA Certificates",
-        "partner": "Partner",
+        "certificateTrustStore": "Certificate Trust Store",
+        "certificateTrustStoreDesc": "Upload, Download or View List of Root and Intermediate CA Certificates",
+        "partner": "Partners",
         "partnerDesc": "View or Deactivate Partner Details",
         "policy": "Policy",
         "policiesadminDesc": "Create and Manage Policy Groups, Authentication and Datashare Policies",
@@ -1091,6 +1091,7 @@
         "PMS_POL_070": "Draft policies exist under the policy group.",
         "PMS_POL_071": "Error while deactivating policy group",
         "PMS_POL_072": "The selected policy is not in activated status",
+        "PMS_POL_073": "Request status should be De-Activate",
         "KER-PCM-006": "Root CA/Intermediate CA Certificates not found.",
         "KER-PCM-015": "Self Signed Certificate not allowed as partner.",
         "KER-PCM-003": "The certificate already exists. Please upload another certificate",

diff --git a/pmp-revamp-ui/public/i18n/fra.json b/pmp-revamp-ui/public/i18n/fra.json
@@ -52,9 +52,9 @@
         "deviceProviderServicesDesc": "Ajouter, afficher, désactiver SBI (Secure Biometric Interface) et les appareils associés",
         "userRegistrationError": "Impossible d'enregistrer l'utilisateur. Essayez de vous connecter à nouveau !",
         "verifyEmailError": "Erreur lors de la vérification de l'e-mail de l'utilisateur. Essayez de vous connecter à nouveau!",
-        "rootOfTrustCertificate": "Certificat racine de confiance",
-        "rootOfTrustCertificateDesc": "Télécharger, Télécharger ou Voir la liste des certificats de racine et d'intermédiaire",
-        "partner": "Partenaire",
+        "certificateTrustStore": "Magasin de certificats de confiance",
+        "certificateTrustStoreDesc": "Télécharger, Télécharger ou Voir la liste des certificats de racine et d'intermédiaire",
+        "partner": "Partenaires",
         "partnerDesc": "Voir ou Désactiver les Détails du Partenaire",
         "policy": "Politique",
         "policiesadminDesc": "Créer et Gérer des Groupes de Politiques, des Politiques d'Authentification et des Politiques de Partage de Données",
@@ -1096,6 +1096,7 @@
         "PMS_POL_070": "Des politiques en brouillon existent dans le groupe de politiques.",
         "PMS_POL_071": "Erreur lors de la désactivation du groupe de politiques.",
         "PMS_POL_072": "La politique sélectionnée n'est pas en statut activé",
+        "PMS_POL_073": "Le statut de la demande doit être Désactiver",
         "KER-PCM-006": "Certificats d'autorité de certification racine/autorité de certification intermédiaire introuvables.",
         "KER-PCM-015": "Certificat auto-signé non autorisé en tant que partenaire.",
         "KER-PCM-003": "Le certificat existe déjà. Veuillez télécharger un autre certificat.",

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDeviceDetailsFilter.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDeviceDetailsFilter.js
@@ -6,7 +6,7 @@ import { createDropdownData, fetchDeviceTypeDropdownData, fetchDeviceSubTypeDrop
 import { isLangRTL } from '../../../utils/AppUtils.js';
 import { getUserProfile } from '../../../services/UserProfileService.js';
 
-function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, preFilledFilters}) {
+function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, removeSbiFields}) {
     const { t } = useTranslation();
     const [status, setStatus] = useState([]);
     const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
@@ -30,20 +30,8 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, pr
         sbiId: "",
         sbiVersion: ""
     });
-    const [disableSbiId, setDisableSbiId] = useState(false);
-    const [disableSbiVersion, setDisableSbiVersion] = useState(false);
 
     useEffect(() => {
-        if (preFilledFilters) {
-            if(preFilledFilters.sbiId) {
-                setDisableSbiId(true);
-            }
-            if(preFilledFilters.sbiVersion) {
-                setDisableSbiVersion(true);
-            }
-            const newFilters = { ...filters, ...preFilledFilters };
-            setFilters(newFilters);
-        }
         const fetchData = async () => {
             const deviceTypeData = await fetchDeviceTypeDropdownData();
             setDeviceTypeDropdownData(createDropdownData("fieldCode", "", true, deviceTypeData, t, t("addDevices.selectDeviceType")));
@@ -74,7 +62,7 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, pr
             }
             try {
                 // Fetch deviceSubType data 
-                const subtypeData = await fetchDeviceSubTypeDropdownData(selectedFilter, setErrorCode, setErrorMsg);
+                const subtypeData = await fetchDeviceSubTypeDropdownData(selectedFilter, setErrorCode, setErrorMsg, t);
 
                 setDeviceSubTypeDropdownData(
                     createDropdownData('fieldCode', "", true, subtypeData, t,  t('addDevices.selectDeviceSubType'))
@@ -117,26 +105,26 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, pr
                 styleSet={styleSet}
                 id="org_name_filter"
             />
-            <TextInputComponent
-                fieldName="sbiId"
-                textBoxValue={preFilledFilters.sbiId}
-                onTextChange={onFilterChangeEvent}
-                fieldNameKey="sbiList.sbiId"
-                placeHolderKey="sbiList.searchSbiId"
-                styleSet={styleSet}
-                disableField={disableSbiId}
-                id="sbi_id_filter"
-            />
-            <TextInputComponent
-                fieldName="sbiVersion"
-                textBoxValue={preFilledFilters.sbiVersion}
-                onTextChange={onFilterChangeEvent}
-                fieldNameKey="sbiList.sbiVersion"
-                placeHolderKey="sbiList.searchVersion"
-                styleSet={styleSet}
-                disableField={disableSbiVersion}
-                id="sbi_version_filter"
-            />
+            { !removeSbiFields && (
+                <>
+                    <TextInputComponent
+                        fieldName="sbiId"
+                        onTextChange={onFilterChangeEvent}
+                        fieldNameKey="sbiList.sbiId"
+                        placeHolderKey="sbiList.searchSbiId"
+                        styleSet={styleSet}
+                        id="sbi_id_filter"
+                    />
+                    <TextInputComponent
+                        fieldName="sbiVersion"
+                        onTextChange={onFilterChangeEvent}
+                        fieldNameKey="sbiList.sbiVersion"
+                        placeHolderKey="sbiList.searchVersion"
+                        styleSet={styleSet}
+                        id="sbi_version_filter"
+                    />
+                </>
+            )}
             <TextInputComponent
                 fieldName="deviceId"
                 onTextChange={onFilterChangeEvent}

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
@@ -62,10 +62,8 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
         sbiId: null,
         sbiVersion: null
     });
-    const [preFilledFilters, setPreFilledFilters] = useState({
-        sbiId: null,
-        sbiVersion: null
-    });
+    const[sbiId, setSbiId] = useState(null);
+    const[sbiVersion, setSbiVersion] = useState(null);
     const submenuRef = useRef([]);
 
     const tableHeaders = [
@@ -140,21 +138,16 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
         const sbiVersion = params.get('sbiVersion');
 
         if (sbiId || sbiVersion) {
-            setExpandFilter(true);
-            setPreFilledFilters((prev) => ({
-                ...prev,
-                sbiId: sbiId,
-                sbiVersion: sbiVersion,
-            }));
-            setApplyFilter(true);
+            setSbiId(sbiId);
+            setSbiVersion(sbiVersion);
         }
         fetchDeviceDetails(sbiId, sbiVersion);
     }, [sortFieldName, sortType, pageNo, pageSize]);
 
     useEffect(() => {
 
         if (isApplyFilterClicked) {
-            fetchDeviceDetails(null, null);
+            fetchDeviceDetails(sbiId, sbiVersion);
             setIsApplyFilterClicked(false);
         }
     }, [isApplyFilterClicked]);
@@ -273,6 +266,22 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
         }
     }, [showDeviceDetailApproveRejectPopup, showDeactivatePopup]);
 
+    const getFilterSubTitle = () => {
+        if (sbiId && sbiVersion) {
+            return t('sbiList.sbiId') + ': ' + sbiId + ' | ' + t('sbiList.sbiVersion') + ': ' + sbiVersion;
+        } else if (sbiId) {
+            return t('sbiList.sbiId') + ': ' + sbiId;
+        } else if (sbiVersion) {
+            return t('sbiList.sbiVersion') + ': ' + sbiVersion;
+        } else {
+            return "";
+        }
+    };
+
+    const filteredTableHeaders = tableHeaders.filter(
+        (header) => !(isLinkedDevicesList && (header.id === "sbiId" || header.id === "sbiVersion"))
+    );
+
     return (
         <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} font-inter overflow-x-scroll`}>
             {!dataLoaded && (
@@ -308,15 +317,15 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
                                     setFilter={setExpandFilter}
                                     addBackArrow={isLinkedDevicesList ? true : false}
                                     goBack={isLinkedDevicesList && backToSbi}
-                                    backArrowTitle={isLinkedDevicesList && 'devicesList.backToSbi'}
+                                    listSubTitle={isLinkedDevicesList && getFilterSubTitle()}
                                 />
                                 <hr className="h-0.5 mt-3 bg-gray-200 border-0" />
                                 {expandFilter && (
                                     <AdminDeviceDetailsFilter
                                         onApplyFilter={onApplyFilter}
                                         setErrorCode={setErrorCode}
                                         setErrorMsg={setErrorMsg}
-                                        preFilledFilters={preFilledFilters}
+                                        removeSbiFields={isLinkedDevicesList}
                                     />
                                 )}
                                 {!tableDataLoaded && <LoadingIcon styleSet={styles}></LoadingIcon>}
@@ -328,7 +337,7 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
                                                 <table className="table-fixed">
                                                     <thead>
                                                         <tr>
-                                                            {tableHeaders.map((header, index) => {
+                                                            {filteredTableHeaders.map((header, index) => {
                                                                 return (
                                                                     <th key={index} className="py-4 text-sm font-semibold text-[#6F6E6E] w-[17%]">
                                                                         <div className={`mx-2 flex gap-x-0 items-center ${isLoginLanguageRTL ? "text-right" : "text-left"}`}>
@@ -355,8 +364,12 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
                                                                 <tr id={'device_list_item' + (index + 1)} key={index} className={`border-t border-[#E5EBFA] text-[0.8rem] text-[#191919] font-semibold break-words ${(device.status === "deactivated") ? "text-[#969696]" : "text-[#191919] cursor-pointer"}`}>
                                                                     <td onClick={() => device.status !== 'deactivated' && viewDeviceDetails(device)} className="px-2">{device.partnerId}</td>
                                                                     <td onClick={() => device.status !== 'deactivated' && viewDeviceDetails(device)} className="px-2">{device.orgName}</td>
-                                                                    <td onClick={() => device.status !== 'deactivated' && viewDeviceDetails(device)} className="px-2">{device.sbiId ?? '-'}</td>
-                                                                    <td onClick={() => device.status !== 'deactivated' && viewDeviceDetails(device)} className="px-2">{device.sbiVersion ?? '-'}</td>
+                                                                    {!isLinkedDevicesList && (
+                                                                        <>
+                                                                            <td onClick={() => device.status !== 'deactivated' && viewDeviceDetails(device)} className="px-2">{device.sbiId ?? '-'}</td>
+                                                                            <td onClick={() => device.status !== 'deactivated' && viewDeviceDetails(device)} className="px-2">{device.sbiVersion ?? '-'}</td>
+                                                                        </>
+                                                                    )}
                                                                     <td onClick={() => device.status !== 'deactivated' && viewDeviceDetails(device)} className="px-2">{device.deviceId}</td>
                                                                     <td onClick={() => device.status !== 'deactivated' && viewDeviceDetails(device)} className="px-2">{device.deviceType}</td>
                                                                     <td onClick={() => device.status !== 'deactivated' && viewDeviceDetails(device)} className="px-2">{device.deviceSubType}</td>

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiList.js
@@ -260,7 +260,7 @@ function AdminSbiList() {
                     )}
                     <div className="flex-col mt-5">
                         <div className="flex justify-between mb-5 max-470:flex-col">
-                            <Title title='sbiList.listOfSbis' backLink='/partnermanagement' />
+                            <Title title='dashboard.sbiDevice' backLink='/partnermanagement' />
                         </div>
                         <DeviceProviderServicesTab
                             activeSbi={true}

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AllDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AllDevicesList.js
@@ -4,7 +4,7 @@ function AllDevicesList () {
 
     return (
         <AdminDevicesList
-            title='devicesList.listOfDevices'
+            title='dashboard.sbiDevice'
             subTitle='devicesList.listOfDevices'
             isLinkedDevicesList={false} 
         />

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/LinkedDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/LinkedDevicesList.js
@@ -4,7 +4,7 @@ function LinkedDevicesList () {
 
     return (
         <AdminDevicesList
-            title='sbiList.listOfSbis'
+            title='dashboard.sbiDevice'
             subTitle='devicesList.linkedDevicesList'
             isLinkedDevicesList={true}
         />

diff --git a/pmp-revamp-ui/src/pages/admin/ftmProviderServices/AdminFtmList.js b/pmp-revamp-ui/src/pages/admin/ftmProviderServices/AdminFtmList.js
@@ -248,7 +248,7 @@ function AdminFtmList() {
                     )}
                     <div className="flex-col mt-5">
                         <div className="flex justify-between mb-5 max-470:flex-col">
-                            <Title title='ftmList.listOfFtm' backLink='/partnermanagement' />
+                            <Title title='dashboard.ftmChip' backLink='/partnermanagement' />
                         </div>
                         {!applyFilter && ftmList.length === 0 ? (
                             <div className="bg-[#FCFCFC] w-full mt-3 rounded-lg shadow-lg items-center">

diff --git a/pmp-revamp-ui/src/pages/common/FilterButtons.js b/pmp-revamp-ui/src/pages/common/FilterButtons.js
@@ -3,22 +3,26 @@ import { getUserProfile } from '../../services/UserProfileService';
 import { isLangRTL, onPressEnterKey } from '../../utils/AppUtils';
 import backArrow from '../../svg/back_arrow.svg';
 
-function FilterButtons({ titleId, listTitle, dataListLength, filter, onResetFilter, setFilter, goBack, backArrowTitle, addBackArrow }) {
+function FilterButtons({ titleId, listTitle, dataListLength, filter, onResetFilter, setFilter, goBack, listSubTitle, addBackArrow }) {
 
     const { t } = useTranslation();
     const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
     return (
         <div className="flex items-center w-full p-2">
             <div id={titleId} className="flex-col w-full pl-[2%] pt-1 items-center justify-start font-semibold text-dark-blue text-base" >
-                {addBackArrow && (
-                    <div className='flex flex-row'>
-                        <button id='subtitle_back_icon' onClick={goBack} className={`mt-1 cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`} >
-                            <img src={backArrow} alt="" />
-                        </button>
-                        <p className={`${isLoginLanguageRTL ? 'pr-2' : 'pl-2'}`}>{t(backArrowTitle)}</p>
+                {addBackArrow ? (
+                    <div className='flex flex-col'>
+                        <div className='flex flex-row'>
+                            <button id='subtitle_back_icon' onClick={goBack} className={`mt-1 cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`} >
+                                <img src={backArrow} alt="" />
+                            </button>
+                            <p className={`text-lg ${isLoginLanguageRTL ? 'pr-2' : 'pl-2'}`}>{t(listTitle) + ' (' + dataListLength + ")"}</p>
+                        </div>
+                        <p className='text-sm text-gray-500 pl-7'>{listSubTitle}</p>
                     </div>
-                )}
-                <p>{t(listTitle) + ' (' + dataListLength + ")"}</p>
+                ) : 
+                    <p>{t(listTitle) + ' (' + dataListLength + ")"}</p>
+                }
             </div>
             <div className="w-full flex justify-end relative items-center">
                 {filter &&