Merge pull request #147 from supertokens/fix/UI-issues

fix: UI issues
supertokens · Jul 5, 2024 · 4560cbf · 4560cbf
2 parents d9ee213 + a519988
commit 4560cbf
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 28 deletions.
diff --git 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
 

diff --git 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";
 
@@ -26,13 +26,29 @@ 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;
+	/** 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 = true, onCloseDialog, title, lockScroll = true } = props;
+
+	useEffect(() => {
+		if (!lockScroll) return;
+		addNoScrollToBody();
+		return removeNoScrollFromBody;
+	}, [lockScroll]);
 
 	return (
 		<>
@@ -90,4 +106,4 @@ function DialogFooter(props: DialogFooterProps) {
 	return <div className={`dialog-footer ${flexDirection} ${justifyContent} ${border} ${className}`}>{children}</div>;
 }
 
-export { Dialog, DialogContent, DialogFooter, DialogConfirmText };
+export { Dialog, DialogConfirmText, DialogContent, DialogFooter };
diff --git 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;

diff --git 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}>
 			<DialogContent>
 				<p className="confirm-text">
-					Are you sure you want to delete the tenant: <span className="tenant-id">{tenantId}</span>? 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: <span className="tenant-id">{tenantId}</span> ?
+					<br />
+					Users associated with the tenant will be moved to the public tenant.
+					<br />
+					<br />
+					Please enter the <span className="tenant-id">{tenantId}</span> below to confirm.
 				</p>
 				<InputField
-					label="Tenant ID"
 					value={currentTenantId}
+					placeholder={tenantId}
 					type="text"
 					name="tenantId"
 					handleChange={(e) => setCurrentTenantId(e.target.value)}

diff --git a/...onents/tenants/tenantDetail/editCoreConfigPropertyDialog/EditCoreConfigPropertyDialog.tsx b/...onents/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 (
 		<Dialog
-			title="Edit Property?"
+			title="Edit Property"
 			onCloseDialog={onCloseDialog}>
 			<DialogContent>
 				<div>

diff --git 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/providerListDialog/ProviderListDialog.tsx b/src/ui/components/tenants/tenantDetail/providerListDialog/ProviderListDialog.tsx
@@ -38,7 +38,6 @@ export const ProviderListDialog = ({
 	return (
 		<Dialog
 			onCloseDialog={onCloseDialog}
-			closeOnOverlayClick
 			className="provider-dialog-container">
 			<DialogContent>
 				<div>

diff --git 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;
 					}

diff --git a/...ui/components/tenants/tenantDetail/thirdPartyProviderConfig/thirdPartyProviderConfig.scss b/...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
@@ -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;
 		}
 	}

diff --git 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;
 		}
 	}
 }
diff --git 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;
+}