Merge pull request #137 from supertokens/improve/ux

fix: Improve ux when deleting user from dashboard

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.10.4] - 2024-03-08
+
+-   Improves UX when deleting a user from the dashboard.
+-   Fixes Deleting linked accounts on user details page.
+
 ## [0.10.3] - 2024-01-26
 
 -   Fixes scroll issues on diffrent browsers.

package.json

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

src/ui/components/userDetail/loginMethods/LoginMethods.tsx

@@ -383,9 +383,9 @@ const Methods: React.FC<MethodProps> = ({
 	);
 };
 
-type LoginMethodProps = { refetchAllData: () => Promise<void> };
+type LoginMethodProps = { refetchAllData: () => Promise<void>; refetchUsersList: () => void };
 
-export const LoginMethods: React.FC<LoginMethodProps> = ({ refetchAllData }) => {
+export const LoginMethods: React.FC<LoginMethodProps> = ({ refetchAllData, refetchUsersList }) => {
 	const { userDetail, setUserDetails } = useUserDetailContext();
 	const { updateUserInformation } = useUserService();
 	const methods = userDetail.details.loginMethods;
@@ -401,6 +401,10 @@ export const LoginMethods: React.FC<LoginMethodProps> = ({ refetchAllData }) =>
 			const didSucceed = deleteSucceed !== undefined && deleteSucceed.status === "OK";
 			showToast(getDeleteUserToast(didSucceed));
 			await refetchAllData();
+			window.scrollTo({
+				top: 0,
+			});
+			refetchUsersList();
 		},
 		[showToast]
 	);
@@ -410,7 +414,7 @@ export const LoginMethods: React.FC<LoginMethodProps> = ({ refetchAllData }) =>
 				getUserDeleteConfirmationProps({
 					loginMethod: loginMethod,
 					user: userDetail.details,
-					onDeleteCallback: (user) => onDeleteCallback(user.id),
+					onDeleteCallback: (userId) => onDeleteCallback(userId),
 					all: false,
 				})
 			),

src/ui/components/userDetail/userDetail.tsx

@@ -23,7 +23,6 @@ import { getTenantsObjectsForIds } from "../../../utils/user";
 import { PopupContentContext } from "../../contexts/PopupContentContext";
 import { User, UserRecipeType } from "../../pages/usersList/types";
 import { getMissingTenantIdModalProps } from "../common/modals/TenantIdModals";
-import { OnSelectUserFunction } from "../usersListTable/UsersListTable";
 import { UserDetailContextProvider } from "./context/UserDetailContext";
 import { LoginMethods } from "./loginMethods/LoginMethods";
 import "./tenantList/UserTenantsList.scss";
@@ -38,14 +37,15 @@ import UserRolesList from "./userRoles/UserRolesList";
 export type UserDetailProps = {
 	user: string;
 	onBackButtonClicked: () => void;
-	onDeleteCallback: OnSelectUserFunction;
+	onDeleteCallback: (userId: string) => void;
 	onSendEmailVerificationCallback: (user: User) => Promise<boolean>;
 	onUpdateEmailVerificationStatusCallback: (
 		userId: string,
 		isVerified: boolean,
 		tenantId: string | undefined
 	) => Promise<boolean>;
 	onChangePasswordCallback: (userId: string, newPassword: string) => Promise<void>;
+	refetchUsersList: () => void;
 };
 
 export const UserDetail: React.FC<UserDetailProps> = (props) => {
@@ -255,7 +255,10 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 
 				<UserRolesList />
 
-				<LoginMethods refetchAllData={refetchAllData} />
+				<LoginMethods
+					refetchAllData={refetchAllData}
+					refetchUsersList={props.refetchUsersList}
+				/>
 
 				<UserMetaDataSection />
 

src/ui/components/userDetail/userDetailForm.tsx

@@ -27,7 +27,6 @@ import { getMissingTenantIdModalProps } from "../common/modals/TenantIdModals";
 import InputField from "../inputField/InputField";
 import { LayoutModalProps } from "../layout/layoutModal";
 import { ToastNotificationProps } from "../toast/toastNotification";
-import { OnSelectUserFunction } from "../usersListTable/UsersListTable";
 import "./userDetailForm.scss";
 
 type PasswordChangeCallback = (password?: string) => Promise<void>;
@@ -61,7 +60,7 @@ type UserDeleteConfirmationProps = UserProps & {
 type UserUnlinkConfirmationProps = { onConfirmed: (isConfirmed: boolean) => void; loginMethod: LoginMethod };
 
 type UserDeleteConfirmationTriggerProps = UserProps & {
-	onDeleteCallback: OnSelectUserFunction;
+	onDeleteCallback: (userId: string) => void;
 	loginMethod?: LoginMethod;
 	all: boolean;
 };
@@ -549,7 +548,11 @@ export const getUserDeleteConfirmationProps = (props: UserDeleteConfirmationTrig
 
 	const onConfirmedDelete = (isConfirmed: boolean) => {
 		if (isConfirmed) {
-			onDeleteCallback(user);
+			if (loginMethod) {
+				onDeleteCallback(loginMethod.recipeUserId);
+			} else {
+				onDeleteCallback(user.id);
+			}
 		}
 		closeConfirmDeleteRef.current?.();
 	};

src/ui/pages/usersList/UsersList.tsx

@@ -394,6 +394,10 @@ export const UserListPage = () => {
 			const deleteSucceed = await deleteUser(userId, true);
 			const didSucceed = deleteSucceed !== undefined && deleteSucceed.status === "OK";
 			if (didSucceed) {
+				if (reloadListRef.current) {
+					// refetches the users list after deleting a user.
+					void reloadListRef.current();
+				}
 				backToList();
 			}
 			showToast(getDeleteUserToast(didSucceed));
@@ -469,9 +473,14 @@ export const UserListPage = () => {
 			}>
 			{isSelectedUserNotEmpty && (
 				<UserDetail
+					refetchUsersList={() => {
+						if (reloadListRef.current) {
+							void reloadListRef.current();
+						}
+					}}
 					user={selectedUser}
 					onBackButtonClicked={backToList}
-					onDeleteCallback={({ id }) => onUserDelete(id)}
+					onDeleteCallback={(userId) => onUserDelete(userId)}
 					onSendEmailVerificationCallback={({ id, tenantIds }) => {
 						return sendUserEmailVerification(id, tenantIds.length > 0 ? tenantIds[0] : undefined);
 					}}
@@ -491,7 +500,7 @@ export const UserListPage = () => {
 				css={isSelectedUserNotEmpty ? { display: "none" } : undefined}
 				reloadRef={reloadListRef}
 				onChangePasswordCallback={changePassword}
-				onDeleteCallback={({ id }) => onUserDelete(id)}
+				onDeleteCallback={(userId) => onUserDelete(userId)}
 			/>
 		</AppEnvContextProvider>
 	);

src/version.ts

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