MOSIP-38031: Added Id column in list and view screens (#1072)

Signed-off-by: Swetha K <[email protected]> Co-authored-by: Swetha K <[email protected]>
mosip · Jan 8, 2025 · 63c60ce · 63c60ce
1 parent efbb907
commit 63c60ce
Show file tree

Hide file tree

Showing 30 changed files with 158 additions and 81 deletions.
diff --git a/pmp-revamp-ui/public/i18n/ara.json b/pmp-revamp-ui/public/i18n/ara.json
@@ -528,7 +528,8 @@
         "expired": "منتهي الصلاحية",
         "errorInFtmList": "أثناء جلب تفاصيل شريحة FTM، واجهنا خطأً.",
         "ftmId": "معرف FTM",
-        "selectFtmId": "حدد معرف FTM"
+        "selectFtmId": "حدد معرف FTM",
+        "searchFtmId": "البحث عن معرف FTM"
     },
     "addFtm": {
         "addFtmChipDetails": "إضافة تفاصيل شريحة FTM",

diff --git a/pmp-revamp-ui/public/i18n/eng.json b/pmp-revamp-ui/public/i18n/eng.json
@@ -423,11 +423,11 @@
         "sbiExpiryStatus": "SBI Expiry Status",
         "selectSbiExpiryStatus": "Select SBI Expiry Status",
         "listOfSbis": "List of SBIs",
-        "sbiId": "SBI Id",
-        "searchSbiId": "Search SBI Id"
+        "sbiId": "SBI ID",
+        "searchSbiId": "Search SBI ID"
     },
     "devicesList": {
-        "deviceId": "Device Id",
+        "deviceId": "Device ID",
         "addDevices": "Add Devices",
         "listOfDevices": "List of Devices",
         "deviceType": "Device Type",
@@ -446,7 +446,7 @@
         "selectModelName": "Select Model Name",
         "selectStatus": "Select Status",
         "unexpectedError": "We have encountered with an unexpected error. Please try again.",
-        "searchDeviceId": "Search Device Id",
+        "searchDeviceId": "Search Device ID",
         "selectDeviceId": "Select Device ID",
         "linkedDevicesList": "List of Linked Devices"
     },
@@ -523,7 +523,8 @@
         "expired": "Expired",
         "errorInFtmList": "While fetching FTM chip details, we have encountered with an error.",
         "ftmId": "FTM ID",
-        "selectFtmId": "Select FTM ID"
+        "selectFtmId": "Select FTM ID",
+        "searchFtmId": "Search FTM ID"
     },
     "addFtm": {
         "addFtmChipDetails": "Add FTM Chip details",
@@ -1153,7 +1154,7 @@
         "PMS_DEVICE_ERROR_010": "Given device details are not in pending for approval status.",
         "PMS_DEVICE_ERROR_011": "Error while approving or rejecting device for Sbi Mapping.",
         "PMS_DEVICE_ERROR_012": "SBI and Device mapping does not exists.",
-        "PMS_DEVICE_ERROR_013": "Device Id is invalid",
+        "PMS_DEVICE_ERROR_013": "Device ID is invalid",
         "PMS_DEVICE_ERROR_014": "The selected device has been already deactivated",
         "PMS_DEVICE_ERROR_015": "Error while deactivating the device",
         "PMS_DEVICE_ERROR_016": "Device is not associated with user.",

diff --git a/pmp-revamp-ui/public/i18n/fra.json b/pmp-revamp-ui/public/i18n/fra.json
@@ -528,7 +528,8 @@
         "expired": "Expiré",
         "errorInFtmList": "Lors de la récupération des détails de la puce FTM, nous avons rencontré une erreur.",
         "ftmId": "Identifiant FTM",
-        "selectFtmId": "Sélectionnez l'ID FTM"
+        "selectFtmId": "Sélectionnez l'ID FTM",
+        "searchFtmId": "Rechercher l'identifiant FTM"
     },
     "addFtm": {
         "addFtmChipDetails": "Ajouter les détails de la puce FTM",

diff --git a/pmp-revamp-ui/src/nav/SideNav.js b/pmp-revamp-ui/src/nav/SideNav.js
@@ -40,9 +40,9 @@ function SideNav({ open, policyRequiredPartnerTypes, partnerType }) {
             setActiveIcon('ftmChipProviderServices');
         } else if (selectedPath.includes('admin/certificates')) {
             setActiveIcon("rootOfTrustCertificate");
-        } else if (selectedPath.includes('partners-list')) {
+        } else if (selectedPath.includes('partners-list') || selectedPath.includes('view-partner-details')) {
             setActiveIcon("partner");
-        } else if (selectedPath.includes('policy-requests-list')) {
+        } else if (selectedPath.includes('policy-requests-list') || selectedPath.includes('view-policy-request')) {
             setActiveIcon("partnerPolicyMapping");
         }
         else {

diff --git a/pmp-revamp-ui/src/pages/admin/authenticationServices/ViewAdminApiKeyDetails.js b/pmp-revamp-ui/src/pages/admin/authenticationServices/ViewAdminApiKeyDetails.js
@@ -72,8 +72,8 @@ function ViewAdminApiKeyDetails() {
                             <div className="bg-snow-white h-fit mt-1 rounded-t-xl shadow-lg font-inter">
                                 <div className="flex justify-between px-7 pt-3 border-b max-[450px]:flex-col">
                                     <div className="flex-col">
-                                        <p className="font-bold text-sm text-dark-blue mb-2">
-                                            {apiKeyDetails.apiKeyLabel}
+                                        <p className="font-semibold text-lg text-dark-blue mb-2">
+                                            {t('apiKeysList.apiKeyName')}: {apiKeyDetails.apiKeyLabel}
                                         </p>
                                         <div className="flex items-center justify-start mb-2 max-[400px]:flex-col max-[400px]:items-start">
                                             <div className={`${bgOfStatus(apiKeyDetails.status)} flex w-fit py-1 px-5 text-sm rounded-md my-2 font-semibold`}>

diff --git a/pmp-revamp-ui/src/pages/admin/authenticationServices/ViewAdminOidcClientDetails.js b/pmp-revamp-ui/src/pages/admin/authenticationServices/ViewAdminOidcClientDetails.js
@@ -104,7 +104,7 @@ function ViewAdminOidcClientDetails() {
                             <div className="bg-snow-white h-fit mt-1 rounded-t-xl shadow-lg font-inter">
                                 <div className="flex justify-between px-7 pt-3 border-b max-[450px]:flex-col">
                                     <div className="flex-col">
-                                        <p className="font-bold text-sm text-dark-blue mb-2">{selectedClientData.clientNameEng}</p>
+                                        <p className="font-semibold text-lg text-dark-blue mb-2">{t('authenticationServices.oidcClientName')}: {selectedClientData.clientNameEng}</p>
                                         <div className="flex items-center justify-start mb-2 max-[400px]:flex-col max-[400px]:items-start">
                                             <div className={`${bgOfStatus(oidcClientDetails.status)} flex w-fit py-1 px-5 text-sm rounded-md my-2 font-semibold`}>
                                                 {getStatusCode(selectedClientData.status, t)}

diff --git a/pmp-revamp-ui/src/pages/admin/certificates/ViewCertificateDetails.js b/pmp-revamp-ui/src/pages/admin/certificates/ViewCertificateDetails.js
@@ -82,8 +82,8 @@ function ViewCertificateDetails() {
                     <div className="bg-snow-white h-fit mt-1 rounded-t-xl shadow-lg font-inter">
                         <div className="flex justify-between px-7 pt-3 border-b max-[450px]:flex-col">
                             <div className="flex-col">
-                                <p className="font-bold text-md text-dark-blue mb-2 break-all">
-                                    {viewCertDetails.certId}
+                                <p className="font-semibold text-lg text-dark-blue mb-2 break-all">
+                                    {t('certificatesList.certificateId')}: {viewCertDetails.certId}
                                 </p>
                                 <div className="flex items-center justify-start mb-2 max-[400px]:flex-col max-[400px]:items-start">
                                     <div className={`font-semibold text-sm text-dark-blue`}>

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDeviceDetailsFilter.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDeviceDetailsFilter.js
@@ -87,7 +87,7 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, pr
     };
 
     const areFiltersEmpty = () => {
-        return Object.values(filters).every(value => value === "");
+        return Object.values(filters).every(value => value === "" || value === null || value === undefined);
     };
 
     const styles = {
@@ -118,14 +118,6 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, pr
                 styleSet={styleSet}
                 id="org_name_filter"
             />
-            <TextInputComponent
-                fieldName="deviceId"
-                onTextChange={onFilterChangeEvent}
-                fieldNameKey="devicesList.deviceId"
-                placeHolderKey="devicesList.searchDeviceId"
-                styleSet={styleSet}
-                id="device_id_filter"
-            />
             <TextInputComponent
                 fieldName="sbiId"
                 textBoxValue={preFilledFilters.sbiId}
@@ -146,6 +138,14 @@ function AdminDeviceDetailsFilter({ onApplyFilter, setErrorCode, setErrorMsg, pr
                 disableField={disableSbiVersion}
                 id="sbi_version_filter"
             />
+            <TextInputComponent
+                fieldName="deviceId"
+                onTextChange={onFilterChangeEvent}
+                fieldNameKey="devicesList.deviceId"
+                placeHolderKey="devicesList.searchDeviceId"
+                styleSet={styleSet}
+                id="device_id_filter"
+            />
             <DropdownComponent
                 fieldName='deviceType'
                 dropdownDataList={deviceTypeDropdownData}

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
@@ -70,11 +70,11 @@ function AdminDevicesList() {
     const submenuRef = useRef([]);
 
     const tableHeaders = [
-        { id: "deviceId", headerNameKey: 'devicesList.deviceId' },
-        { id: "sbiId", headerNameKey: 'sbiList.sbiId' },
-        { id: "sbiVersion", headerNameKey: 'sbiList.sbiVersion' },
         { id: "partnerId", headerNameKey: 'sbiList.partnerId' },
         { id: "orgName", headerNameKey: 'sbiList.orgName' },
+        { id: "sbiId", headerNameKey: 'sbiList.sbiId' },
+        { id: "sbiVersion", headerNameKey: 'sbiList.sbiVersion' },
+        { id: "deviceId", headerNameKey: 'devicesList.deviceId' },
         { id: "deviceType", headerNameKey: 'devicesList.deviceType' },
         { id: "deviceSubType", headerNameKey: "devicesList.deviceSubType" },
         { id: "make", headerNameKey: "devicesList.make" },
@@ -353,11 +353,11 @@ function AdminDevicesList() {
                                                         {devicesList.map((device, index) => {
                                                             return (
                                                                 <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.deviceId}</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>
                                                                     <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>
+                                                                    <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>
                                                                     <td onClick={() => device.status !== 'deactivated' && viewDeviceDetails(device)} className="px-2">{device.make}</td>

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiList.js
@@ -54,6 +54,7 @@ function AdminSbiList() {
     const [filterAttributes, setFilterAttributes] = useState({
         partnerId: null,
         orgName: null,
+        sbiId: null,
         sbiVersion: null,
         status: null,
         sbiExpiryStatus: null
@@ -67,6 +68,7 @@ function AdminSbiList() {
     const tableHeaders = [
         { id: "partnerId", headerNameKey: 'sbiList.partnerId' },
         { id: "orgName", headerNameKey: 'sbiList.orgName' },
+        { id: "sbiId", headerNameKey: "sbiList.sbiId" },
         { id: "sbiVersion", headerNameKey: "sbiList.sbiVersion" },
         { id: "sbiCreatedDateTime", headerNameKey: "sbiList.sbiCreatedDate" },
         { id: "sbiExpiryDateTime", headerNameKey: "sbiList.sbiExpiryDate" },
@@ -90,6 +92,7 @@ function AdminSbiList() {
 
         if (filterAttributes.partnerId) queryParams.append('partnerId', filterAttributes.partnerId);
         if (filterAttributes.orgName) queryParams.append('orgName', filterAttributes.orgName);
+        if (filterAttributes.sbiId) queryParams.append('sbiId', filterAttributes.sbiId);
         if (filterAttributes.sbiVersion) queryParams.append('sbiVersion', filterAttributes.sbiVersion);
         if (filterAttributes.status) queryParams.append('status', filterAttributes.status);
         if (filterAttributes.sbiExpiryStatus) queryParams.append('sbiExpiryStatus', filterAttributes.sbiExpiryStatus);
@@ -320,6 +323,7 @@ function AdminSbiList() {
                                                                     className={`border-t border-[#E5EBFA] ${sbi.status !== 'deactivated' ? 'cursor-pointer text-[#191919]' : 'cursor-default text-[#969696]'} text-[0.8rem] text-[#191919] font-semibold break-words`}>
                                                                     <td onClick={() => sbi.status !== 'deactivated' && viewSbiDetails(sbi)} className="px-2">{sbi.partnerId}</td>
                                                                     <td onClick={() => sbi.status !== 'deactivated' && viewSbiDetails(sbi)} className="px-2">{sbi.orgName}</td>
+                                                                    <td onClick={() => sbi.status !== 'deactivated' && viewSbiDetails(sbi)} className="px-2">{sbi.sbiId}</td>
                                                                     <td onClick={() => sbi.status !== 'deactivated' && viewSbiDetails(sbi)} className="px-2">{sbi.sbiVersion}</td>
                                                                     <td onClick={() => sbi.status !== 'deactivated' && viewSbiDetails(sbi)} className="px-2">{formatDate(sbi.sbiCreatedDateTime, "date", false)}</td>
                                                                     <td onClick={() => sbi.status !== 'deactivated' && viewSbiDetails(sbi)} className="px-2">{formatDate(sbi.sbiExpiryDateTime, "date", false)}</td>

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiListFilter.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminSbiListFilter.js
@@ -23,6 +23,7 @@ function AdminSbiListFilter( {onApplyFilter} ) {
     const [filters, setFilters] = useState({
       partnerId: "",
       orgName: "",
+      sbiId: "",
       sbiVersion: "",
       status: "",
       sbiExpiryStatus: "",
@@ -75,6 +76,14 @@ function AdminSbiListFilter( {onApplyFilter} ) {
                 styleSet={styleSet}
                 id="org_name_filter"
             />
+            <TextInputComponent
+                fieldName="sbiId"
+                onTextChange={onFilterChangeEvent}
+                fieldNameKey="sbiList.sbiId"
+                placeHolderKey="sbiList.searchSbiId"
+                styleSet={styleSet}
+                id="sbi_id_filter"
+            />
             <TextInputComponent
                 fieldName="sbiVersion"
                 onTextChange={onFilterChangeEvent}

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js
@@ -61,7 +61,7 @@ function ViewAdminDeviceDetails() {
                         <div className="flex justify-between px-7 pt-3 border-b max-[450px]:flex-col">
                             <div className="flex-col">
                                 <p className="font-semibold text-lg text-dark-blue mb-2">
-                                    {deviceDetails.make} - {deviceDetails.model}
+                                    {t('devicesList.deviceId')}: {deviceDetails.deviceId}
                                 </p>
                                 <div className="flex items-center justify-start mb-2 max-[400px]:flex-col max-[400px]:items-start">
                                     <div className={`${bgOfStatus(deviceDetails.status)} flex w-fit py-1 px-5 text-sm rounded-md my-2 font-semibold`}>
@@ -104,8 +104,6 @@ function ViewAdminDeviceDetails() {
                                         {deviceDetails.orgName}
                                     </p>
                                 </div>
-                            </div>
-                            <div className="flex flex-wrap py-1 max-[450px]:flex-col">
                                 <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
                                     <p className="font-[600] text-suva-gray text-sm">
                                         {t("sbiList.sbiId")}
@@ -114,14 +112,8 @@ function ViewAdminDeviceDetails() {
                                         {deviceDetails.sbiId}
                                     </p>
                                 </div>
-                                <div className={`mb-5 max-[600px]:w-[100%] w-[50%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
-                                    <p className="font-[600] text-suva-gray text-sm">
-                                        {t("devicesList.deviceId")}
-                                    </p>
-                                    <p className="font-[600] text-vulcan text-md">
-                                        {deviceDetails.deviceId}
-                                    </p>
-                                </div>
+                            </div>
+                            <div className="flex flex-wrap py-1 max-[450px]:flex-col">
                                 <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
                                     <p className="font-[600] text-suva-gray text-sm">
                                         {t("devicesList.deviceType")}

diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js
@@ -59,7 +59,7 @@ function ViewAdminSbiDetails() {
                         <div className="flex justify-between px-7 pt-3 border-b max-[450px]:flex-col">
                             <div className="flex-col">
                                 <p className="font-semibold text-lg text-dark-blue mb-2">
-                                    {`${sbiDetails.sbiId} | ${sbiDetails.sbiVersion}`}
+                                    {t('sbiList.sbiId')}: {sbiDetails.sbiId}
                                 </p>
                                 <div className="flex items-center justify-start mb-2 max-[400px]:flex-col max-[400px]:items-start">
                                     <div className={`${bgOfStatus(sbiDetails.status)} flex w-fit py-1 px-5 text-sm rounded-md my-2 font-semibold`}>
@@ -126,6 +126,14 @@ function ViewAdminSbiDetails() {
                                     {formatDate(sbiDetails.sbiExpiryDateTime, "date", false)}
                                     </p>
                                 </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">
+                                        {t("sbiList.sbiVersion")}
+                                    </p>
+                                    <p className="font-[600] text-vulcan text-md">
+                                        {sbiDetails.sbiVersion}
+                                    </p>
+                                </div>
                             </div>
                         </div>
                         <hr className="h-px w-full bg-gray-200 border-0" />