From ef315e7e392f88c4619f7262596358f429853328 Mon Sep 17 00:00:00 2001 From: Anil_Kumar_Majji <106086523+Anil-kumar-Majji@users.noreply.github.com> Date: Tue, 10 Dec 2024 19:41:18 +0530 Subject: [PATCH] UI Development Partner Admin Tabular view of uploaded certificates Signed-off-by: Anil_Kumar_Majji <106086523+Anil-kumar-Majji@users.noreply.github.com> --- pmp-revamp-ui/public/i18n/ara.json | 16 ++++--- pmp-revamp-ui/public/i18n/eng.json | 10 +++-- pmp-revamp-ui/public/i18n/fra.json | 10 +++-- .../certificates/RootTrustCertificateList.js | 43 +++++++++++-------- .../RootTrustCertificateServicesTab.js | 43 +++++++++++++++++++ 5 files changed, 91 insertions(+), 31 deletions(-) create mode 100644 pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateServicesTab.js diff --git a/pmp-revamp-ui/public/i18n/ara.json b/pmp-revamp-ui/public/i18n/ara.json index 1c7c21ec..381c0830 100644 --- a/pmp-revamp-ui/public/i18n/ara.json +++ b/pmp-revamp-ui/public/i18n/ara.json @@ -412,10 +412,10 @@ "sbiVersion": "إصدار SBI", "searchVersion": "البحث عن إصدار SBI", "linkedDevices": "الأجهزة المرتبطة", - "status":"حالة", + "status": "حالة", "action": "الإجراء", "partnerId": "معرف الشريك", - "orgName":"منظمة", + "orgName": "منظمة", "partnerType": "نوع الشريك", "device": "جهاز", "sbiCreatedDate": "تاريخ إنشاء SBI", @@ -502,7 +502,7 @@ "ftmChipProviderServices": "خدمات مزودي شريحة FTM", "addFtmBtn": "إضافة شريحة FTM", "partnerId": "معرف الشريك", - "orgName":"منظمة", + "orgName": "منظمة", "listOfFtm": "قائمة تفاصيل شريحة FTM", "make": "يصنع", "model": "نموذج", @@ -561,7 +561,8 @@ "description": "عند النقر فوق تأكيد، سيتم إلغاء تنشيط تفاصيل شريحة FTM الخاصة بك." }, "rootTrustCertificate": { - "organisation": "منظمة", + "certificateTrustStore": "مخزن الشهادات", + "certificateId": "معرف الشهادة", "partnerDomain": "مجال الشريك", "issuedTo": "صدر ل", "issuedBy": "صادرة عن", @@ -585,10 +586,13 @@ "dropdownPlaceholder": "حدد مجال الشريك", "successMsg": "تم تحميل شهادة جذر الثقة لـ {{partnerDomain}} بنجاح" }, - "viewRootOfTrustCertificate": { - "viewRootOfTrustCertificate": "عرض شهادة جذر الثقة", + "listOfRootTrustCertificates": { + "rootOfTrustCertificates": "شهادات الثقة الجذرية", "caCertificates": "شهادات كاليفورنيا" }, + "listOfIntermediateRootTrustCertificates": { + "intermediateRootTrustCertificates": "شهادات ثقة الجذر المتوسطة" + }, "partnerList": { "partnerTitle": "الشركاء", "listOfPartnerTitle": "قائمة الشركاء", diff --git a/pmp-revamp-ui/public/i18n/eng.json b/pmp-revamp-ui/public/i18n/eng.json index 928daff4..87063aa5 100644 --- a/pmp-revamp-ui/public/i18n/eng.json +++ b/pmp-revamp-ui/public/i18n/eng.json @@ -556,7 +556,8 @@ "description": "On clicking Confirm, your FTM Chip details will be deactivated." }, "rootTrustCertificate": { - "organisation": "Organisation", + "certificateTrustStore": "Certificate Trust Store", + "certificateId": "Certificate Id", "partnerDomain": "Partner Domain", "issuedTo": "Issued To", "issuedBy": "Issued By", @@ -581,10 +582,13 @@ "dropdownPlaceholder": "Select partner domain", "successMsg": "Root of Trust Certificate for {{partnerDomain}} is uploaded successfully" }, - "viewRootOfTrustCertificate": { - "viewRootOfTrustCertificate": "View Root of Trust Certificate", + "listOfRootTrustCertificates": { + "rootOfTrustCertificates": "Root Trust Certificates", "caCertificates": "Ca Certificates" }, + "listOfIntermediateRootTrustCertificates": { + "intermediateRootTrustCertificates": "Intermediate Root Trust Certificates" + }, "partnerList": { "partnerTitle": "Partners", "listOfPartnerTitle": "List of Partners", diff --git a/pmp-revamp-ui/public/i18n/fra.json b/pmp-revamp-ui/public/i18n/fra.json index e7338024..e86eca38 100644 --- a/pmp-revamp-ui/public/i18n/fra.json +++ b/pmp-revamp-ui/public/i18n/fra.json @@ -561,7 +561,8 @@ "description": "En cliquant sur Confirmer, les détails de votre puce FTM seront désactivés." }, "rootTrustCertificate": { - "organisation": "Organisation", + "certificateTrustStore": "Magasin de certificats de confiance", + "certificateId": "Identifiant du certificat", "partnerDomain": "Domaine partenaire", "issuedTo": "Délivré à", "issuedBy": "Délivré par", @@ -585,10 +586,13 @@ "dropdownPlaceholder": "Sélectionnez un domaine partenaire", "successMsg": "Le certificat racine de confiance pour {{partnerDomain}} a été téléchargé avec succès" }, - "viewRootOfTrustCertificate": { - "viewRootOfTrustCertificate": "Afficher le certificat racine de confiance", + "listOfRootTrustCertificates": { + "rootOfTrustCertificates": "Certificats de confiance racine", "caCertificates": "Certificats CA" }, + "listOfIntermediateRootTrustCertificates": { + "intermediateRootTrustCertificates": "Certificats de confiance racine intermédiaires" + }, "partnerList":{ "partnerTitle": "Partenaires", "listOfPartnerTitle": "Liste des partenaires", diff --git a/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateList.js b/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateList.js index 3b31abb3..aa8ba201 100644 --- a/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateList.js +++ b/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateList.js @@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { useTranslation } from "react-i18next"; import { getUserProfile } from "../../../services/UserProfileService"; import { isLangRTL, onPressEnterKey } from "../../../utils/AppUtils"; -import { formatDate, getStatusCode, handleMouseClickForDropdown, toggleSortAscOrder, toggleSortDescOrder, bgOfStatus,} from "../../../utils/AppUtils"; +import { formatDate, getStatusCode, handleMouseClickForDropdown, toggleSortAscOrder, toggleSortDescOrder, bgOfStatus, } from "../../../utils/AppUtils"; import LoadingIcon from "../../common/LoadingIcon"; import ErrorMessage from "../../common/ErrorMessage"; import Title from "../../common/Title"; @@ -12,6 +12,7 @@ import FilterButtons from "../../common/FilterButtons"; import RootTrustCertificatesFilter from "./RootTrustCertificatesFilter"; import SortingIcon from "../../common/SortingIcon"; import Pagination from "../../common/Pagination"; +import RootTrustCertificateServicesTab from "./RootTrustCertificateServicesTab"; function RootTrustCertificateList() { const { t } = useTranslation(); @@ -174,19 +175,23 @@ function RootTrustCertificateList() { return (
- {!dataLoaded && } + {!dataLoaded && + + } {dataLoaded && ( <> {errorMsg && ( - + )}
-
- + <div className="flex justify-between mb-5 flex-col"> + <Title title="rootTrustCertificate.certificateTrustStore" backLink="/partnermanagement" styleSet={style} /> + <RootTrustCertificateServicesTab + activeRootOfTustCertificates={true} + rootOfTustCertificatesPath={'/partnermanagement/admin/certificates/root-trust-certificate'} + activeIntermediateRootOfTrustCertificates={false} + intermediateRootOfTrustCertificatesPath={''} + /> {certificateData.length > 0 && ( <button id="root_certificate_upload_btn" @@ -204,7 +209,7 @@ function RootTrustCertificateList() { <div className="flex justify-between py-2 pt-4 text-sm font-semibold text-[#6F6E6E]"> <div className="flex w-full justify-between"> <h6 className="ml-5 mr-3"> - {t("rootTrustCertificate.organisation")} + {t("rootTrustCertificate.certificateId")} </h6> <h6>{t("rootTrustCertificate.partnerDomain")}</h6> <h6>{t("rootTrustCertificate.issuedTo")}</h6> @@ -288,9 +293,9 @@ function RootTrustCertificateList() { id={"root_certificate_list_item" + (index + 1)} key={index} className={`border-t border-[#E5EBFA] cursor-pointer text-[0.8rem] text-[#191919] font-semibold break-words ${certificate.status.toLowerCase() === - "deactivated" - ? "text-[#969696]" - : "text-[#191919]" + "deactivated" + ? "text-[#969696]" + : "text-[#191919]" }`} > <td @@ -410,8 +415,8 @@ function RootTrustCertificateList() { {viewCertificateId === index && ( <div className={`absolute w-[7%] z-50 bg-white text-xs font-semibold rounded-lg shadow-md border min-w-fit ${isLoginLanguageRTL - ? "left-9 text-right" - : "right-9 text-left" + ? "left-9 text-right" + : "right-9 text-left" }`} > <p @@ -420,8 +425,8 @@ function RootTrustCertificateList() { showCertificateDetails(certificate) } className={`py-1.5 px-4 cursor-pointer text-[#3E3E3E] hover:bg-gray-100 ${isLoginLanguageRTL - ? "pl-10" - : "pr-10" + ? "pl-10" + : "pr-10" }`} tabIndex="0" onKeyPress={(e) => @@ -441,8 +446,8 @@ function RootTrustCertificateList() { showDeactivateCertificate(certificate) } className={`py-1.5 px-4 ${isLoginLanguageRTL - ? "pl-10" - : "pr-10" + ? "pl-10" + : "pr-10" } ${certificate.status === "approved" ? "text-crimson-red cursor-pointer" : "text-[#A5A5A5] cursor-auto" diff --git a/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateServicesTab.js b/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateServicesTab.js new file mode 100644 index 00000000..312d8e95 --- /dev/null +++ b/pmp-revamp-ui/src/pages/admin/certificates/RootTrustCertificateServicesTab.js @@ -0,0 +1,43 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; +import { getUserProfile } from '../../../services/UserProfileService'; +import { isLangRTL, onPressEnterKey } from '../../../utils/AppUtils'; + +function RootTrustCertificateServicesTab({ activeRootOfTustCertificates, rootOfTustCertificatesPath, activeIntermediateRootOfTrustCertificates, intermediateRootOfTrustCertificatesPath }) { + + const { t } = useTranslation(); + const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode); + const navigate = useNavigate(); + + const changeToRootOfTustCertificates = () => { + navigate(rootOfTustCertificatesPath) + }; + + const changeToIntermediateRootOfTrustCertificates = () => { + navigate(intermediateRootOfTrustCertificatesPath) + }; + + return ( + <div className='flex text-xs bg-[#FCFCFC] font-bold space-x-16 items-start rounded-lg px-[1.5%] pt-[2%] mt-3'> + <div className={`flex-col justify-center`}> + <h6 id='root_of_trust_certificates_tab' onClick={changeToRootOfTustCertificates} + className={`${activeRootOfTustCertificates ? "text-[#1447b2]" : "text-[#031640]"} mb-[12%] cursor-pointer text-sm`} + tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, changeToRootOfTustCertificates)}> + {t('listOfRootTrustCertificates.rootOfTrustCertificates')} + </h6> + <div className={`h-1 w-[9rem] ${activeRootOfTustCertificates ? "bg-tory-blue" : "bg-transparent"} rounded-t-md`}></div> + </div> + <div className={`flex-col justify-center`}> + <h6 id='intermediate_root_of_trust_certificates_tab' onClick={changeToIntermediateRootOfTrustCertificates} + className={`${activeIntermediateRootOfTrustCertificates ? "text-[#1447b2]" : "text-[#031640]"} mb-[7%] cursor-pointer text-sm`} + tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, changeToIntermediateRootOfTrustCertificates)}> + {t('listOfIntermediateRootTrustCertificates.intermediateRootTrustCertificates')} + </h6> + <div className={`h-1 w-[15rem] ${activeIntermediateRootOfTrustCertificates ? "bg-tory-blue" : "bg-transparent"} rounded-t-md`}></div> + </div> + </div> + ) +} + +export default RootTrustCertificateServicesTab; \ No newline at end of file