Skip to content

Commit

Permalink
MOSIP-37610: UI Enhancements Applicable for all Partners and Partner …
Browse files Browse the repository at this point in the history 
…Admin. (#1107)

* MOSIP-37610: UI Enhancements Applicable for all Partners and Partner Admin screens

Signed-off-by: Anil_Kumar_Majji <[email protected]>

* MOSIP-37610: UI Enhancements Applicable for all Partners and Partner Admin screens

Signed-off-by: Anil_Kumar_Majji <[email protected]>

* MOSIP-37610: UI Enhancements Applicable for all Partners and Partner Admin screens

Signed-off-by: Anil_Kumar_Majji <[email protected]>

* MOSIP-37610: UI Enhancements Applicable for all Partners and Partner Admin screens

Signed-off-by: Anil_Kumar_Majji <[email protected]>

---------

Signed-off-by: Anil_Kumar_Majji <[email protected]>
  • Loading branch information
@Anil-kumar-Majji
Anil-kumar-Majji authored Jan 17, 2025
1 parent db16b29 commit d22278e
Show file tree
Hide file tree
Showing 20 changed files with 291 additions and 174 deletions.
29 changes: 16 additions & 13 deletions pmp-revamp-ui/src/pages/admin/authenticationServices/AdminApiKeysList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ function AdminApiKeysList() {
const [applyFilter, setApplyFilter] = useState(false);
const [isApplyFilterClicked, setIsApplyFilterClicked] = useState(false);
const [showDeactivatePopup, setShowDeactivatePopup] = useState(false);
const [selectedApiKey, setSelectedApiKey] = useState({});
const [deactivateRequest, setDeactivateRequest] = useState({});
const [filterAttributes, setFilterAttributes] = useState({
partnerId: null,
Expand Down Expand Up @@ -167,21 +168,23 @@ function AdminApiKeysList() {
label: selectedApiKeyData.apiKeyLabel,
status: "De-Active"
});
setActionId(-1);
setSelectedApiKey(selectedApiKeyData);
setDeactivateRequest(request);
setShowDeactivatePopup(true);
document.body.style.overflow = "hidden";
}
};

const closeDeactivatePopup = () => {
setActionId(-1);
setSelectedApiKey({});
setShowDeactivatePopup(false);
document.body.style.overflow = "auto";
};

const onClickConfirmDeactivate = (deactivationResponse, selectedApiKey) => {
if (deactivationResponse !== "") {
setActionId(-1);
setSelectedApiKey({});
setShowDeactivatePopup(false);
setApiKeysList((prevList) =>
prevList.map(apiKey =>
Expand Down Expand Up @@ -308,19 +311,19 @@ function AdminApiKeysList() {
<p id="api_key_list_deactivate_btn" className={`py-1.5 px-4 ${isLoginLanguageRTL ? "pl-10" : "pr-10"} ${apiKey.status === 'activated' ? "text-[#3E3E3E]" : "text-[#A5A5A5]"}`}>{t("partnerList.deActivate")}</p>
<img src={apiKey.status === 'activated' ? deactivateIcon : disableDeactivateIcon} alt="" className={`${isLoginLanguageRTL ? "pl-2" : "pr-2"}`} />
</div>
{showDeactivatePopup && (
<DeactivatePopup
closePopUp={closeDeactivatePopup}
onClickConfirm={(deactivationResponse) => onClickConfirmDeactivate(deactivationResponse, apiKey)}
popupData={apiKey}
request={deactivateRequest}
headerMsg="adminDeactivateApiKey.title"
descriptionMsg="adminDeactivateApiKey.description"
headerKeyName={apiKey.apiKeyLabel}
/>
)}
</div>
)}
{showDeactivatePopup && (
<DeactivatePopup
closePopUp={closeDeactivatePopup}
onClickConfirm={(deactivationResponse) => onClickConfirmDeactivate(deactivationResponse, selectedApiKey)}
popupData={selectedApiKey}
request={deactivateRequest}
headerMsg="adminDeactivateApiKey.title"
descriptionMsg="adminDeactivateApiKey.description"
headerKeyName={selectedApiKey.apiKeyLabel}
/>
)}
</div>
</td>
</tr>
Expand Down
21 changes: 16 additions & 5 deletions pmp-revamp-ui/src/pages/admin/authenticationServices/AdminOidcClientsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ function AdminOidcClientsList() {
const [resetPageNo, setResetPageNo] = useState(false);
const [applyFilter, setApplyFilter] = useState(false);
const [isApplyFilterClicked, setIsApplyFilterClicked] = useState(false);
const [selectedOidcClient, setSelectedOidcClient] = useState({});
const [showClientIdPopup, setShowClientIdPopup] = useState(false);
const [currentClient, setCurrentClient] = useState(null);
const [showDeactivatePopup, setShowDeactivatePopup] = useState(false);
Expand Down Expand Up @@ -195,6 +196,8 @@ function AdminOidcClientsList() {
clientAuthMethods: oidcClientDetails.clientAuthMethods,
clientNameLangMap: getClientNameLangMap(client.clientNameEng, client.clientNameJson)
});
setActionId(-1);
setSelectedOidcClient(client);
setDeactivateRequest(request);
setShowDeactivatePopup(true);
document.body.style.overflow = "hidden";
Expand All @@ -206,7 +209,7 @@ function AdminOidcClientsList() {

const onClickConfirmDeactivate = (deactivationResponse, selectedClient) => {
if (deactivationResponse && deactivationResponse.status === "INACTIVE") {
setActionId(-1);
setSelectedOidcClient({});
setShowDeactivatePopup(false);
setOidcClientsList((prevList) =>
prevList.map(client =>
Expand All @@ -217,7 +220,7 @@ function AdminOidcClientsList() {
};

const closeDeactivatePopup = () => {
setActionId(-1);
setSelectedOidcClient({});
setShowDeactivatePopup(false);
document.body.style.overflow = "auto";
};
Expand Down Expand Up @@ -351,11 +354,19 @@ function AdminOidcClientsList() {
<p id="oidc_clients_list_deactivate_btn" className={`py-1.5 px-4 ${isLoginLanguageRTL ? "pl-10" : "pr-10"} ${client.status === 'ACTIVE' ? "text-[#3E3E3E]" : "text-[#A5A5A5]"}`}>{t("partnerList.deActivate")}</p>
<img src={client.status === 'ACTIVE' ? deactivateIcon : disableDeactivateIcon} alt="" className={`${isLoginLanguageRTL ? "pl-2" : "pr-2"}`} />
</div>
{showDeactivatePopup && (
<DeactivatePopup closePopUp={closeDeactivatePopup} onClickConfirm={(deactivationResponse) => onClickConfirmDeactivate(deactivationResponse, client)} popupData={client} request={deactivateRequest} headerMsg='deactivateOidc.header' descriptionMsg='deactivateOidc.description' headerKeyName={client.clientNameEng} />
)}
</div>
)}
{showDeactivatePopup && (
<DeactivatePopup
closePopUp={closeDeactivatePopup}
onClickConfirm={(deactivationResponse) => onClickConfirmDeactivate(deactivationResponse, selectedOidcClient)}
popupData={selectedOidcClient}
request={deactivateRequest}
headerMsg='deactivateOidc.header'
descriptionMsg='deactivateOidc.description'
headerKeyName={selectedOidcClient.clientNameEng}
/>
)}
</div>
</td>
</tr>
Expand Down
47 changes: 29 additions & 18 deletions pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
const [totalRecords, setTotalRecords] = useState(0);
const [resetPageNo, setResetPageNo] = useState(false);
const [applyFilter, setApplyFilter] = useState(false);
const [selectedDevice, setSelectedDevice] = useState({});
const [isApplyFilterClicked, setIsApplyFilterClicked] = useState(false);
const [showDeviceDetailApproveRejectPopup, setShowDeviceDetailApproveRejectPopup] = useState(false);
const [showDeactivatePopup, setShowDeactivatePopup] = useState(false);
Expand All @@ -62,8 +63,8 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
sbiId: null,
sbiVersion: null
});
const[sbiId, setSbiId] = useState(null);
const[sbiVersion, setSbiVersion] = useState(null);
const [sbiId, setSbiId] = useState(null);
const [sbiVersion, setSbiVersion] = useState(null);
const submenuRef = useRef([]);

const tableHeaders = [
Expand Down Expand Up @@ -162,15 +163,17 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {

const approveRejectDeviceDetails = (device) => {
if (device.status === 'pending_approval') {
setActionId(-1);
setShowDeviceDetailApproveRejectPopup(true);
setSelectedDevice(device);
document.body.style.overflow = "hidden";
}
};

const onClickApproveReject = (responseData, status, selectedDevice) => {
if (responseData) {
setActionId(-1);
setShowDeviceDetailApproveRejectPopup(false);
setSelectedDevice({});
setDevicesList((prevList) =>
prevList.map(deviceItem =>
deviceItem.deviceId === selectedDevice.deviceId ? { ...deviceItem, status: getApproveRejectStatus(status), isActive: updateActiveState(status) } : deviceItem
Expand All @@ -181,7 +184,7 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
};

const closeApproveRejectPopup = () => {
setActionId(-1);
setSelectedDevice({});
setShowDeviceDetailApproveRejectPopup(false);
document.body.style.overflow = "auto";
};
Expand All @@ -191,6 +194,8 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
const request = createRequest({
status: "De-Activate",
}, "mosip.pms.deactivate.device.patch", true);
setActionId(-1);
setSelectedDevice(selectedDevice);
setDeactivateRequest(request);
setShowDeactivatePopup(true);
document.body.style.overflow = "hidden";
Expand All @@ -201,6 +206,7 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
const onClickConfirmDeactivate = (deactivationResponse, selectedDevice) => {
if (deactivationResponse && !deactivationResponse.isActive) {
setShowDeactivatePopup(false);
setSelectedDevice({});
// Update the specific row in the state with the new status
setDevicesList((prevList) =>
prevList.map(device =>
Expand All @@ -211,7 +217,7 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
};

const closeDeactivatePopup = () => {
setActionId(-1);
setSelectedDevice({});
setShowDeactivatePopup(false);
document.body.style.overflow = "auto";
};
Expand Down Expand Up @@ -392,16 +398,6 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
<p id="device_list_approve_reject_option" className={`py-1.5 px-4 ${device.status === 'pending_approval' ? 'text-[#3E3E3E] cursor-pointer' : 'text-[#A5A5A5] cursor-default'} ${isLoginLanguageRTL ? "pl-10" : "pr-10"}`}>{t("approveRejectPopup.approveReject")}</p>
<img src={device.status === 'pending_approval' ? approveRejectIcon : disabledApproveRejectIcon} alt="" className={`${isLoginLanguageRTL ? "pl-2" : "pr-2"}`} />
</div>
{showDeviceDetailApproveRejectPopup && (
<ApproveRejectPopup
popupData={{ ...device, isDeviceRequest: true }}
closePopUp={closeApproveRejectPopup}
approveRejectResponse={(responseData, status) => onClickApproveReject(responseData, status, device)}
title={`${device.make} | ${device.model}`}
header={t('deviceApproveRejectPopup.header')}
description={t('deviceApproveRejectPopup.description')}
/>
)}
<hr className="h-px bg-gray-100 border-0 mx-1" />
<div role='button' className="flex justify-between hover:bg-gray-100" onClick={() => viewDeviceDetails(device)} tabIndex="0" onKeyDown={(e) => onPressEnterKey(e, () => viewDeviceDetails(device))}>
<p id="device_list_view_option" className={`py-1.5 px-4 cursor-pointer text-[#3E3E3E] ${isLoginLanguageRTL ? "pl-10" : "pr-10"}`}>{t("partnerList.view")}</p>
Expand All @@ -412,11 +408,26 @@ function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
<p id="device_list_deactivate_option" className={`py-1.5 px-4 ${isLoginLanguageRTL ? "pl-10" : "pr-10"} ${device.status === 'approved' ? "text-[#3E3E3E]" : "text-[#A5A5A5]"}`}>{t("partnerList.deActivate")}</p>
<img src={device.status === 'approved' ? deactivateIcon : disableDeactivateIcon} alt="" className={`${isLoginLanguageRTL ? "pl-2" : "pr-2"}`} />
</div>
{showDeactivatePopup && (
<DeactivatePopup closePopUp={closeDeactivatePopup} onClickConfirm={(deactivationResponse) => onClickConfirmDeactivate(deactivationResponse, device)} popupData={{ ...device, isDeactivateDevice: true }} request={deactivateRequest} headerMsg='deactivateDevicePopup.headerMsg' descriptionMsg='deactivateDevicePopup.descriptionForAdmin' />
)}
</div>
)}
{showDeviceDetailApproveRejectPopup && (
<ApproveRejectPopup
popupData={{ ...selectedDevice, isDeviceRequest: true }}
closePopUp={closeApproveRejectPopup}
approveRejectResponse={(responseData, status) => onClickApproveReject(responseData, status, selectedDevice)}
title={`${selectedDevice.make} | ${selectedDevice.model}`}
header={t('deviceApproveRejectPopup.header')}
description={t('deviceApproveRejectPopup.description')}
/>
)}
{showDeactivatePopup && (
<DeactivatePopup closePopUp={closeDeactivatePopup}
onClickConfirm={(deactivationResponse) => onClickConfirmDeactivate(deactivationResponse, selectedDevice)}
popupData={{ ...selectedDevice, isDeactivateDevice: true }}
request={deactivateRequest}
headerMsg='deactivateDevicePopup.headerMsg'
descriptionMsg='deactivateDevicePopup.descriptionForAdmin' />
)}
</div>
</td>
</tr>
Expand Down
Loading

0 comments on commit d22278e

Please sign in to comment.