review changes

supertokens · Nov 20, 2023 · 488b212 · 488b212
1 parent 27cc554
commit 488b212
Show file tree

Hide file tree

Showing 13 changed files with 400 additions and 310 deletions.
diff --git a/server/index.ts b/server/index.ts
@@ -36,7 +36,9 @@ app.use(morgan("[:date[iso]] :url :method :status :response-time ms - :res[conte
 SuperTokens.init({
 	framework: "express",
 	supertokens: {
-		connectionURI: "try.supertokens.com",
+		connectionURI: "https://st-dev-7c44fa21-8441-11ee-99f0-d55666d35437.aws.supertokens.io",
+		apiKey: "H6-01W52AVFwxV4t8wqqrbbn8a",
+		// connectionURI: "try.supertokens.com",
 	},
 	appInfo: {
 		appName: "Dashboard Dev Node",

diff --git a/src/ui/components/table/table.scss b/src/ui/components/table/table.scss
@@ -77,6 +77,12 @@
 }
 
 .table.theme-blue tbody tr {
+	&.disable-row {
+		cursor: none;
+		pointer-events: none;
+		opacity: 0.6;
+	}
+
 	&:hover {
 		background: var(--color-secondary-light);
 	}

diff --git a/src/ui/components/userDetail/userDetail.tsx b/src/ui/components/userDetail/userDetail.tsx
@@ -56,8 +56,8 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 	const [userMetaData, setUserMetaData] = useState<string | undefined>(undefined);
 	const [shouldShowLoadingOverlay, setShowLoadingOverlay] = useState<boolean>(false);
 	const [isLoading, setIsLoading] = useState(false);
-	const [userRoles, setUserRoles] = useState<string[]>([]);
-	const [isUserRolesFeatureEnabled, setIsUserRolesFeatureEnabled] = useState(true);
+	const [userRoles, setUserRoles] = useState<string[] | undefined>(undefined);
+	const [isUserRolesFeatureEnabled, setIsUserRolesFeatureEnabled] = useState<boolean | undefined>(undefined);
 
 	const { getUser, updateUserInformation } = useUserService();
 	const { getUserMetaData } = useMetadataService();

diff --git a/src/ui/components/userDetail/userRoles/UserRolesList.tsx b/src/ui/components/userDetail/userRoles/UserRolesList.tsx
@@ -15,7 +15,6 @@
 import { useState } from "react";
 import { ReactComponent as CrossIcon } from "../../../../assets/cross.svg";
 import { ReactComponent as PlusSquareIcon } from "../../../../assets/plus-square.svg";
-import { getSelectedTenantId } from "../../../../utils";
 import Badge from "../../badge";
 import { LayoutPanel } from "../../layout/layoutPanel";
 import { UserRolesListHeader } from "./UserRolesListHeader";
@@ -26,15 +25,15 @@ import DeleteUserRoleDialog from "../../userroles/components/dialogs/DeleteUserR
 import "./userRolesList.scss";
 
 type UserRolesListProps = {
-	roles: string[];
+	roles: string[] | undefined;
 	userId: string;
-	isFeatureEnabled: boolean;
+	isFeatureEnabled: boolean | undefined;
 };
 
 export default function UserRolesList(props: UserRolesListProps) {
 	const { roles, userId } = props;
 
-	const [assignedRoles, setAssignedRoles] = useState(roles);
+	const [assignedRoles, setAssignedRoles] = useState<string[] | undefined>(roles);
 
 	const [showAddRoleDialog, setShowAddRoleDialog] = useState(false);
 	const [roleToDelete, setRoleToDelete] = useState<undefined | string>(undefined);
@@ -46,21 +45,22 @@ export default function UserRolesList(props: UserRolesListProps) {
 		if (isEditing === true) {
 			return (
 				<div className="roles-list-container">
-					{assignedRoles.map((role) => {
-						return (
-							<Badge
-								key={role}
-								type="success"
-								text={role}>
-								<CrossIcon
-									onClick={() => {
-										setRoleToDelete(role);
-										setShowDeleteDialogRole(true);
-									}}
-								/>
-							</Badge>
-						);
-					})}
+					{assignedRoles !== undefined &&
+						assignedRoles.map((role) => {
+							return (
+								<Badge
+									key={role}
+									type="success"
+									text={role}>
+									<CrossIcon
+										onClick={() => {
+											setRoleToDelete(role);
+											setShowDeleteDialogRole(true);
+										}}
+									/>
+								</Badge>
+							);
+						})}
 					<button
 						className="add-role-btn"
 						onClick={() => setShowAddRoleDialog(true)}>
@@ -72,26 +72,36 @@ export default function UserRolesList(props: UserRolesListProps) {
 
 		return (
 			<div className="roles-list-container">
-				{assignedRoles.length < 1 ? (
+				{assignedRoles !== undefined && assignedRoles.length < 1 ? (
 					<button
 						data-disable-hover="true"
 						className="add-role-btn">
 						No assigned User Roles
 					</button>
 				) : null}
-				{assignedRoles.map((role) => {
-					return (
-						<Badge
-							key={role}
-							type="success"
-							text={role}
-						/>
-					);
-				})}
+				{assignedRoles !== undefined &&
+					assignedRoles.map((role) => {
+						return (
+							<Badge
+								key={role}
+								type="success"
+								text={role}
+							/>
+						);
+					})}
 			</div>
 		);
 	}
 
+	if (props.isFeatureEnabled !== undefined && props.isFeatureEnabled === false) {
+		return (
+			<Alert
+				title="Feature is not enabled"
+				content="Please enable this feature first to manage your user roles and permissions!"
+			/>
+		);
+	}
+
 	return (
 		<LayoutPanel
 			header={
@@ -102,43 +112,29 @@ export default function UserRolesList(props: UserRolesListProps) {
 				/>
 			}
 			headerBorder>
-			{props.isFeatureEnabled ? (
-				<>
-					<div className="user-roles-list-wrapper">
-						<ul>
-							<li>
-								All roles assigned to the user for tenant: <span>{getSelectedTenantId()}</span>
-							</li>
-						</ul>
-						{renderContent()}
-					</div>
-					{showAddRoleDialog ? (
-						<AssignRolesDialog
-							userId={userId}
-							assignedRoles={assignedRoles}
-							setAssignedRoles={setAssignedRoles}
-							onCloseDialog={() => setShowAddRoleDialog(false)}
-						/>
-					) : null}
-					{showDeleteRoleDialog && roleToDelete !== undefined ? (
-						<DeleteUserRoleDialog
-							roleToDelete={roleToDelete}
-							userId={userId}
-							assignedRoles={assignedRoles}
-							setAssignedRoles={setAssignedRoles}
-							onCloseDialog={() => {
-								setRoleToDelete(undefined);
-								setShowDeleteDialogRole(false);
-							}}
-						/>
-					) : null}
-				</>
-			) : (
-				<Alert
-					title="Feature is not enabled"
-					content="Please enable this feature first to manage your user roles and permissions!"
-				/>
-			)}
+			<>
+				<div className="user-roles-list-wrapper">{renderContent()}</div>
+				{assignedRoles !== undefined && showAddRoleDialog ? (
+					<AssignRolesDialog
+						userId={userId}
+						assignedRoles={assignedRoles}
+						setAssignedRoles={setAssignedRoles}
+						onCloseDialog={() => setShowAddRoleDialog(false)}
+					/>
+				) : null}
+				{assignedRoles !== undefined && showDeleteRoleDialog && roleToDelete !== undefined ? (
+					<DeleteUserRoleDialog
+						roleToDelete={roleToDelete}
+						userId={userId}
+						assignedRoles={assignedRoles}
+						setAssignedRoles={setAssignedRoles}
+						onCloseDialog={() => {
+							setRoleToDelete(undefined);
+							setShowDeleteDialogRole(false);
+						}}
+					/>
+				) : null}
+			</>
 		</LayoutPanel>
 	);
 }
diff --git a/src/ui/components/userDetail/userRoles/UserRolesListHeader.tsx b/src/ui/components/userDetail/userRoles/UserRolesListHeader.tsx
@@ -1,41 +1,46 @@
-import { getImageUrl } from "../../../../utils";
+import { getImageUrl, getSelectedTenantId } from "../../../../utils";
 import Button from "../../button";
 import IconButton from "../../common/iconButton";
 
 type UserRolesListHeaderProps = {
 	setIsEditing: (value: boolean) => void;
 	isEditing: boolean;
-	isFeatureEnabled: boolean;
+	isFeatureEnabled: boolean | undefined;
 };
 
 export const UserRolesListHeader = ({ setIsEditing, isEditing, isFeatureEnabled }: UserRolesListHeaderProps) => {
+	if (isFeatureEnabled === undefined && isFeatureEnabled === false) {
+		return null;
+	}
+
 	return (
 		<>
-			<div className="title">Asssigned User Roles</div>
-			{isFeatureEnabled ? (
-				<>
-					{!isEditing ? (
-						<IconButton
-							size="small"
-							text="Edit"
-							tint="var(--color-link)"
-							icon={getImageUrl("edit.svg")}
-							onClick={() => {
-								setIsEditing(true);
-							}}
-						/>
-					) : (
-						<div className="metadata-actions actions">
-							<Button
-								size="sm"
-								color="secondary"
-								onClick={() => setIsEditing(false)}>
-								Save
-							</Button>
-						</div>
-					)}
-				</>
-			) : null}
+			<div>
+				<div className="title">Asssigned User Roles</div>
+				<span className="subtext">
+					All roles assigned to the user for tenant: <span>{getSelectedTenantId()}</span>
+				</span>
+			</div>
+			{!isEditing ? (
+				<IconButton
+					size="small"
+					text="Edit"
+					tint="var(--color-link)"
+					icon={getImageUrl("edit.svg")}
+					onClick={() => {
+						setIsEditing(true);
+					}}
+				/>
+			) : (
+				<div className="metadata-actions actions">
+					<Button
+						size="sm"
+						color="secondary"
+						onClick={() => setIsEditing(false)}>
+						Save
+					</Button>
+				</div>
+			)}
 		</>
 	);
 };
diff --git a/src/ui/components/userDetail/userRoles/userRolesList.scss b/src/ui/components/userDetail/userRoles/userRolesList.scss
@@ -1,28 +1,10 @@
 .user-roles-list-wrapper {
-	& > ul {
-		padding: 0px 24px 24px 24px;
-		border-bottom: 1px solid var(--color-border);
-
-		li {
-			color: var(--color-secondary-text);
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 23px;
-
-			& > span {
-				font-weight: 500;
-			}
-		}
-	}
-
 	& > .roles-list-container {
 		display: flex;
 		justify-content: flex-start;
 		gap: 14px;
 		flex-wrap: wrap;
 		align-items: center;
-		margin-top: 20px;
 
 		.no-roles-found {
 			padding: 20px 0px;
@@ -63,6 +45,23 @@
 	}
 }
 
+.subtext {
+	color: var(--color-secondary-text);
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 23px;
+
+	& > span {
+		font-weight: 500;
+	}
+
+	@media (max-width: 440px) {
+		font-size: 12px;
+		line-height: 18px;
+	}
+}
+
 .feature-not-enabled {
 	margin-top: -10px;
 	color: #6e6a65;