From 70b00a9452fd2cd31aadf24020b6fa35d2c283bc Mon Sep 17 00:00:00 2001 From: Favour Ohans Date: Fri, 24 May 2024 11:59:07 +0100 Subject: [PATCH 1/8] =?UTF-8?q?=F0=9F=92=87=E2=80=8D=E2=99=82=EF=B8=8F=20R?= =?UTF-8?q?emove=20body=20scroll=20from=20dialog,=20by=20default?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/components/dialog/index.tsx | 21 ++++++++++++++++++--- src/ui/styles/index.css | 4 ++++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/ui/components/dialog/index.tsx b/src/ui/components/dialog/index.tsx index f8b37713..324d1903 100644 --- a/src/ui/components/dialog/index.tsx +++ b/src/ui/components/dialog/index.tsx @@ -13,7 +13,7 @@ * under the License. */ -import React from "react"; +import React, { useEffect } from "react"; import { ReactComponent as CloseIcon } from "../../../assets/close.svg"; import { ReactComponent as ErrorIcon } from "../../../assets/form-field-error-icon.svg"; @@ -29,10 +29,25 @@ type DialogProps = DialogCommonProps & { closeOnOverlayClick?: boolean; isError?: boolean; onCloseDialog: () => void; + /** Determines whether body scroll should be locked when dialog is open, true by default*/ + lockScroll?: boolean; }; +function addNoScrollToBody() { + document.body.classList.add("no-scroll"); +} +function removeNoScrollFromBody() { + document.body.classList.remove("no-scroll"); +} + function Dialog(props: DialogProps) { - const { children, className = "", closeOnOverlayClick = false, onCloseDialog, title } = props; + const { children, className = "", closeOnOverlayClick = false, onCloseDialog, title, lockScroll = true } = props; + + useEffect(() => { + if (!lockScroll) return; + addNoScrollToBody(); + return removeNoScrollFromBody; + }, [lockScroll]); return ( <> @@ -90,4 +105,4 @@ function DialogFooter(props: DialogFooterProps) { return
{children}
; } -export { Dialog, DialogContent, DialogFooter, DialogConfirmText }; +export { Dialog, DialogConfirmText, DialogContent, DialogFooter }; diff --git a/src/ui/styles/index.css b/src/ui/styles/index.css index 1d0b0e0e..938d7a3e 100644 --- a/src/ui/styles/index.css +++ b/src/ui/styles/index.css @@ -75,3 +75,7 @@ button:disabled { ::-webkit-scrollbar-track { background-color: transparent; /* Set track color for Chrome and Safari */ } + +body.no-scroll { + overflow: hidden; +} From bfa4a4b2663d558d4a57016c59115ca5ac785191 Mon Sep 17 00:00:00 2001 From: Favour Ohans Date: Fri, 24 May 2024 12:11:56 +0100 Subject: [PATCH 2/8] =?UTF-8?q?=F0=9F=92=87=E2=80=8D=E2=99=80=EF=B8=8F=20R?= =?UTF-8?q?emove=20overflow=20from=20dashboard=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/components/footer/footer.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/components/footer/footer.scss b/src/ui/components/footer/footer.scss index 29820157..9d16a4f0 100644 --- a/src/ui/components/footer/footer.scss +++ b/src/ui/components/footer/footer.scss @@ -15,7 +15,6 @@ .footer { bottom: 0; - width: 100vw; min-height: 62px; display: flex; padding: 20px 32px; From b3a04d0940c975ed4bd77a75fc5667d8aba0b23c Mon Sep 17 00:00:00 2001 From: Favour Ohans Date: Fri, 24 May 2024 12:15:27 +0100 Subject: [PATCH 3/8] =?UTF-8?q?=F0=9F=9B=A0=20Close=20modal=20when=20overl?= =?UTF-8?q?ay=20is=20clicked,=20by=20default?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/components/dialog/index.tsx | 3 ++- .../tenantDetail/providerListDialog/ProviderListDialog.tsx | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/components/dialog/index.tsx b/src/ui/components/dialog/index.tsx index 324d1903..7a2474a1 100644 --- a/src/ui/components/dialog/index.tsx +++ b/src/ui/components/dialog/index.tsx @@ -26,6 +26,7 @@ type DialogCommonProps = { type DialogProps = DialogCommonProps & { title?: string; + /** Determines whether the dialog should be closed when user clicks on the overlay, true by default */ closeOnOverlayClick?: boolean; isError?: boolean; onCloseDialog: () => void; @@ -41,7 +42,7 @@ function removeNoScrollFromBody() { } function Dialog(props: DialogProps) { - const { children, className = "", closeOnOverlayClick = false, onCloseDialog, title, lockScroll = true } = props; + const { children, className = "", closeOnOverlayClick = true, onCloseDialog, title, lockScroll = true } = props; useEffect(() => { if (!lockScroll) return; diff --git a/src/ui/components/tenants/tenantDetail/providerListDialog/ProviderListDialog.tsx b/src/ui/components/tenants/tenantDetail/providerListDialog/ProviderListDialog.tsx index 0189183b..e3b775a0 100644 --- a/src/ui/components/tenants/tenantDetail/providerListDialog/ProviderListDialog.tsx +++ b/src/ui/components/tenants/tenantDetail/providerListDialog/ProviderListDialog.tsx @@ -38,7 +38,6 @@ export const ProviderListDialog = ({ return (
From f7ddc2faf1abe99d1c6bf1994bf8a5155ca5fe70 Mon Sep 17 00:00:00 2001 From: Favour Ohans Date: Fri, 24 May 2024 14:45:40 +0100 Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=92=87=E2=80=8D=E2=99=80=EF=B8=8F=20F?= =?UTF-8?q?ix=20layout=20style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/layouts/mainLayout.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ui/layouts/mainLayout.scss b/src/ui/layouts/mainLayout.scss index d4e8a92a..fb9c7137 100644 --- a/src/ui/layouts/mainLayout.scss +++ b/src/ui/layouts/mainLayout.scss @@ -4,6 +4,7 @@ .main-content { margin-top: 44px; margin-left: var(--sidebar-width); + padding: 0 20px; min-height: 100vh; } } @@ -12,6 +13,7 @@ .main-layout-container { .main-content { margin-left: 0; + padding: 0; } } } From 7696da88404cf77caa3f132053e2f359b84dab37 Mon Sep 17 00:00:00 2001 From: Favour Ohans Date: Fri, 24 May 2024 16:45:14 +0100 Subject: [PATCH 5/8] =?UTF-8?q?=F0=9F=92=87=E2=80=8D=E2=99=80=EF=B8=8F=20F?= =?UTF-8?q?ix=20tenant=20page=20responsiveness?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tenants/tenantDetail/tenantDetail.scss | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/ui/components/tenants/tenantDetail/tenantDetail.scss b/src/ui/components/tenants/tenantDetail/tenantDetail.scss index 6deeb5fa..2770838a 100644 --- a/src/ui/components/tenants/tenantDetail/tenantDetail.scss +++ b/src/ui/components/tenants/tenantDetail/tenantDetail.scss @@ -61,7 +61,7 @@ border-radius: 6px; width: 100%; - @media screen and (max-width: 480px) { + @media screen and (max-width: 640px) { padding: 0px; border: none; margin-top: 20px; @@ -83,7 +83,7 @@ flex: 1; } - @media screen and (max-width: 480px) { + @media screen and (max-width: 640px) { display: none; } } @@ -94,7 +94,7 @@ gap: 16px; margin-top: 20px; - @media screen and (max-width: 480px) { + @media screen and (max-width: 640px) { margin-top: 0px; } } @@ -111,7 +111,7 @@ font-weight: 500; line-height: normal; - @media screen and (max-width: 480px) { + @media screen and (max-width: 640px) { flex-direction: column; align-items: flex-start; justify-content: space-between; @@ -124,9 +124,12 @@ overflow: hidden; text-overflow: ellipsis; - @media screen and (max-width: 480px) { + @media screen and (max-width: 640px) { max-width: 205px; } + @media screen and (max-width: 380px) { + max-width: 180px; + } } &__label-container { @@ -143,7 +146,7 @@ justify-content: space-between; align-items: center; - @media screen and (max-width: 480px) { + @media screen and (max-width: 640px) { padding-left: 0px; width: 100%; } @@ -250,7 +253,7 @@ &__header { justify-content: space-between; - @media screen and (max-width: 480px) { + @media screen and (max-width: 640px) { flex-direction: column; gap: 16px; button { @@ -291,7 +294,7 @@ grid-template-columns: 1fr 1fr 1fr; gap: 16px; - @media screen and (max-width: 480px) { + @media screen and (max-width: 640px) { grid-template-columns: 1fr; } @@ -302,7 +305,7 @@ max-width: 185px; justify-content: space-between; - @media screen and (max-width: 480px) { + @media screen and (max-width: 640px) { max-width: 100%; } @@ -319,7 +322,7 @@ } &--fixed-gap { - @media screen and (min-width: 480px) { + @media screen and (min-width: 640px) { gap: 16px; justify-content: flex-start; } From 1929b8cab237e6686d4ec694234971290b656393 Mon Sep 17 00:00:00 2001 From: Favour Ohans Date: Sun, 26 May 2024 23:31:42 +0100 Subject: [PATCH 6/8] =?UTF-8?q?=F0=9F=92=87=E2=80=8D=E2=99=80=EF=B8=8F=20F?= =?UTF-8?q?ix=20third-party=20login=20responsiveness?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tenants/tenantDetail/keyValueInput/keyValueInput.scss | 2 +- .../thirdPartyProviderConfig.scss | 8 ++++---- .../thirdPartyProviderInput/thirdPartyProviderInput.scss | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/ui/components/tenants/tenantDetail/keyValueInput/keyValueInput.scss b/src/ui/components/tenants/tenantDetail/keyValueInput/keyValueInput.scss index 603fe751..ed4481cb 100644 --- a/src/ui/components/tenants/tenantDetail/keyValueInput/keyValueInput.scss +++ b/src/ui/components/tenants/tenantDetail/keyValueInput/keyValueInput.scss @@ -41,7 +41,7 @@ gap: 10px; } - @media screen and (max-width: 480px) { + @media screen and (max-width: 768px) { flex-direction: column; gap: 10px; padding-bottom: 10px; diff --git a/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/thirdPartyProviderConfig.scss b/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/thirdPartyProviderConfig.scss index 7aa0c318..b6694489 100644 --- a/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/thirdPartyProviderConfig.scss +++ b/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/thirdPartyProviderConfig.scss @@ -163,7 +163,7 @@ flex-direction: column; gap: 15px; - @media screen and (max-width: 480px) { + @media screen and (max-width: 768px) { gap: 0px; } @@ -180,7 +180,7 @@ gap: 10px; align-items: center; - @media screen and (max-width: 480px) { + @media screen and (max-width: 768px) { align-items: flex-end; .delete-cross-button { @@ -191,7 +191,7 @@ &__footer { margin-left: 128px; - @media screen and (max-width: 480px) { + @media screen and (max-width: 768px) { margin-left: 0px; margin-top: 18px; } @@ -416,7 +416,7 @@ .provider-email-select { display: flex; gap: 75px; - @media screen and (max-width: 480px) { + @media screen and (max-width: 768px) { flex-direction: column; gap: 10px; } diff --git a/src/ui/components/tenants/tenantDetail/thirdPartyProviderInput/thirdPartyProviderInput.scss b/src/ui/components/tenants/tenantDetail/thirdPartyProviderInput/thirdPartyProviderInput.scss index e0d30d97..30099d9b 100644 --- a/src/ui/components/tenants/tenantDetail/thirdPartyProviderInput/thirdPartyProviderInput.scss +++ b/src/ui/components/tenants/tenantDetail/thirdPartyProviderInput/thirdPartyProviderInput.scss @@ -18,7 +18,7 @@ width: 100%; gap: 20px; - @media screen and (max-width: 480px) { + @media screen and (max-width: 768px) { flex-direction: column; gap: 12px; } @@ -30,7 +30,7 @@ color: var(--color-secondary-text); min-width: max-content; - @media screen and (max-width: 480px) { + @media screen and (max-width: 768px) { min-width: unset; } } From 786524261b738285d8ed78219ac90453b7807c54 Mon Sep 17 00:00:00 2001 From: Favour Ohans Date: Mon, 27 May 2024 00:22:46 +0100 Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=93=9D=20Update=20changelog?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d9230a7f..2f04f5f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [unreleased] - Add Multitenancy Dashboard +- Fixes UI issues in tenant management page ## [0.11.1] - 2024-04-01 From a5199882a43f823db10d886713907110749ee2b9 Mon Sep 17 00:00:00 2001 From: Sattvik Chakravarthy Date: Fri, 5 Jul 2024 19:32:11 +0530 Subject: [PATCH 8/8] fix: minor fixes --- .../tenantDetail/deleteTenant/DeleteTenant.tsx | 11 +++++++---- .../EditCoreConfigPropertyDialog.tsx | 6 ++++-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/ui/components/tenants/tenantDetail/deleteTenant/DeleteTenant.tsx b/src/ui/components/tenants/tenantDetail/deleteTenant/DeleteTenant.tsx index e6e8d20b..60176daa 100644 --- a/src/ui/components/tenants/tenantDetail/deleteTenant/DeleteTenant.tsx +++ b/src/ui/components/tenants/tenantDetail/deleteTenant/DeleteTenant.tsx @@ -62,13 +62,16 @@ export const DeleteTenantDialog = ({ onCloseDialog={onCloseDialog}>

- Are you sure you want to delete the tenant: {tenantId}? All the - users associated with the tenant will be moved to the public tenant. Please enter the tenantId below - to confirm. + Are you sure you want to delete the tenant: {tenantId} ? +
+ Users associated with the tenant will be moved to the public tenant. +
+
+ Please enter the {tenantId} below to confirm.

setCurrentTenantId(e.target.value)} diff --git a/src/ui/components/tenants/tenantDetail/editCoreConfigPropertyDialog/EditCoreConfigPropertyDialog.tsx b/src/ui/components/tenants/tenantDetail/editCoreConfigPropertyDialog/EditCoreConfigPropertyDialog.tsx index 96810066..d7ed6a2a 100644 --- a/src/ui/components/tenants/tenantDetail/editCoreConfigPropertyDialog/EditCoreConfigPropertyDialog.tsx +++ b/src/ui/components/tenants/tenantDetail/editCoreConfigPropertyDialog/EditCoreConfigPropertyDialog.tsx @@ -62,7 +62,9 @@ export const EditCoreConfigPropertyDialog = ({ const handleSaveProperty = async () => { try { setIsLoading(true); - const res = await updateCoreConfig(tenantInfo.tenantId, name, currentValue); + const parsedValue = + type === "number" && typeof currentValue === "string" ? parseInt(currentValue) : currentValue; + const res = await updateCoreConfig(tenantInfo.tenantId, name, parsedValue); if (res.status !== "OK") { if (res.status === "UNKNOWN_TENANT_ERROR") { showToast({ @@ -94,7 +96,7 @@ export const EditCoreConfigPropertyDialog = ({ return (