Merge pull request #126 from supertokens/fix/handle-row-click

fix: Add click to entire user row.

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.8.6] - 2023-11-15
+
+-   Adds click action to the entire user row.
+
 ## [0.8.5] - 2023-10-5
 
 -   Fixes showing email verification UI even though it's not initialised.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dashboard",
-	"version": "0.8.5",
+	"version": "0.8.6",
 	"private": true,
 	"dependencies": {
 		"@babel/core": "^7.16.0",

src/ui/components/usersListTable/UsersListTable.scss

@@ -18,7 +18,7 @@
 $container-padding-v: 24px;
 
 .users-list-table-container {
-	padding: $container-padding-v 34px;
+	padding: $container-padding-v 0px;
 	display: block;
 	width: 100%;
 	max-width: 100%;
@@ -42,7 +42,7 @@ $container-padding-v: 24px;
 .users-list-table thead tr {
 	border-bottom: 1px solid var(--color-border);
 	th {
-		padding: 0 1em 24px 0;
+		padding: 0 1em 24px 34px;
 		font-weight: 500;
 		text-align: left;
 		width: 33%;
@@ -54,7 +54,7 @@ $container-padding-v: 24px;
 	td {
 		width: 33%;
 		max-width: 50%;
-		padding: 24px 1em 24px 0;
+		padding: 24px 1em 24px 34px;
 	}
 	&.empty-row {
 		td {
@@ -64,6 +64,10 @@ $container-padding-v: 24px;
 }
 
 .user-row {
+	&:hover {
+		cursor: pointer;
+		background: rgb(242, 247, 253);
+	}
 	.user-info {
 		display: flex;
 		flex-direction: column;
@@ -83,9 +87,6 @@ $container-padding-v: 24px;
 			color: var(--color-black);
 			font-weight: 500;
 			cursor: pointer;
-			&:hover {
-				color: var(--color-link);
-			}
 		}
 	}
 
@@ -218,6 +219,7 @@ $container-padding-v: 24px;
 	display: flex;
 	justify-content: flex-end;
 	padding-top: $container-padding-v;
+	padding-right: 34px;
 	position: sticky;
 	left: 0px;
 }

src/ui/components/usersListTable/UsersListTable.tsx

@@ -151,15 +151,36 @@ const UserTableRow: React.FC<
 	} & UserRowActionProps
 > = (props) => {
 	const { user, index, onSelect } = props;
+
+	let isClicked = false;
+	let didDrag = false;
+
 	return (
 		<tr
+			//	this code helps users to copy the text available on the row if they want
+			//	and will not accidentally open the user specific page.
+			onMouseDown={() => {
+				isClicked = true;
+			}}
+			onClick={() => {
+				if (!didDrag) {
+					onSelect(user);
+				} else {
+					didDrag = false;
+				}
+			}}
+			onMouseMove={() => {
+				if (isClicked) {
+					didDrag = true;
+				}
+			}}
+			onMouseUp={() => {
+				isClicked = false;
+			}}
 			key={index}
 			className="user-row">
 			<td>
-				<UserInfo
-					user={user}
-					onSelect={onSelect}
-				/>
+				<UserInfo user={user} />
 			</td>
 			<td>
 				<UserRecipePill user={user} />
@@ -171,36 +192,15 @@ const UserTableRow: React.FC<
 	);
 };
 
-const UserInfo = ({ user, onSelect }: { user: User; onSelect: OnSelectUserFunction }) => {
+const UserInfo = ({ user }: { user: User }) => {
 	const { firstName, lastName, emails } = user;
 	const methodFilter = user.loginMethods.filter((el) => el.recipeUserId === user.id);
 	const email = methodFilter.length > 0 ? methodFilter[0].email : user.emails[0];
 	const phone = methodFilter.length > 0 ? methodFilter[0].phoneNumber : user.phoneNumbers[0];
 	const name = `${firstName ?? ""} ${lastName ?? ""}`.trim();
-	let isClicked = false;
-	let didDrag = false;
-
 	return (
 		<div className="user-info">
 			<div
-				onMouseDown={() => {
-					isClicked = true;
-				}}
-				onClick={() => {
-					if (!didDrag) {
-						onSelect(user);
-					} else {
-						didDrag = false;
-					}
-				}}
-				onMouseMove={() => {
-					if (isClicked) {
-						didDrag = true;
-					}
-				}}
-				onMouseUp={() => {
-					isClicked = false;
-				}}
 				className="main"
 				title={name || email}>
 				{name || email || (phone && <PhoneDisplay phone={phone} />)}

src/version.ts

@@ -13,4 +13,4 @@
  * under the License.
  */
 
-export const package_version = "0.8.5";
+export const package_version = "0.8.6";