update assignroles pagination code

supertokens · Nov 9, 2023 · 9b02eb7 · 9b02eb7
1 parent ed399c8
commit 9b02eb7
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 29 deletions.
diff --git a/src/api/userroles/role/index.ts b/src/api/userroles/role/index.ts
@@ -17,28 +17,35 @@ import { getApiUrl, useFetchData } from "../../../utils";
 
 type Roles = Array<{ role: string; permissions: string[] }>;
 
+type GetRolesQuery = {
+	page: string;
+	limit: string;
+};
+
 type GetRolesResponse =
 	| {
 			status: "OK";
 			roles: Roles;
 			totalPages: number;
 			rolesCount: number;
 	  }
+	| {
+			status: "OK";
+			roles: string[];
+			totalPages: undefined;
+	  }
 	| {
 			status: "FEATURE_NOT_ENABLED_ERROR";
 	  };
 
 export const useRolesService = () => {
 	const fetchData = useFetchData();
 
-	const getRoles = async (page: number, limit = 10): Promise<GetRolesResponse> => {
+	const getRoles = async (query?: GetRolesQuery): Promise<GetRolesResponse> => {
 		const response = await fetchData({
 			url: getApiUrl("/api/userroles/roles"),
 			method: "GET",
-			query: {
-				page: page.toString(),
-				limit: limit.toString(),
-			},
+			query,
 		});
 
 		if (response.ok) {

diff --git a/src/ui/components/userDetail/userRoles/UserRolesList.tsx b/src/ui/components/userDetail/userRoles/UserRolesList.tsx
@@ -72,7 +72,13 @@ export default function UserRolesList(props: UserRolesListProps) {
 
 		return (
 			<div className="roles-list-container">
-				{assignedRoles.length < 1 ? <button className="add-role-btn">No assigned User Roles</button> : null}
+				{assignedRoles.length < 1 ? (
+					<button
+						data-disable-hover="true"
+						className="add-role-btn">
+						No assigned User Roles
+					</button>
+				) : null}
 				{assignedRoles.map((role) => {
 					return (
 						<Badge

diff --git a/src/ui/components/userDetail/userRoles/userRolesList.scss b/src/ui/components/userDetail/userRoles/userRolesList.scss
@@ -49,8 +49,7 @@
 				fill: #6e6a65;
 			}
 
-			&:hover {
-				border-radius: 6px;
+			&:hover:not([data-disable-hover="true"]) {
 				border: 1px solid rgba(0, 122, 255, 0.5);
 
 				color: var(--color-secondary);

diff --git a/src/ui/components/userroles/components/RolesTable.tsx b/src/ui/components/userroles/components/RolesTable.tsx
@@ -58,9 +58,9 @@ export function RolesTable({ setIsFeatureEnabled }: { setIsFeatureEnabled: (valu
 		setIsLoading(true);
 		setRoles([]);
 		try {
-			const response = await getRoles(page, PAGINATION_LIMIT);
+			const response = await getRoles({ limit: PAGINATION_LIMIT.toString(), page: page.toString() });
 
-			if (response.status === "OK") {
+			if (response.status === "OK" && response.totalPages !== undefined) {
 				if (response.roles.length < 1 && page !== 1) {
 					setPage(page - 1);
 					return;

diff --git a/src/ui/components/userroles/components/dialogs/AssignRoles.tsx b/src/ui/components/userroles/components/dialogs/AssignRoles.tsx
@@ -70,6 +70,22 @@ export default function AssignRolesDialog({
 		}
 	}
 
+	const fetchRoles = async () => {
+		setIsLoading(true);
+		const response = await getRoles();
+		if (response.status === "OK" && response.totalPages === undefined) {
+			setRoles(response.roles);
+			const normalizedRoles = response.roles.filter((r) => assignedRoles.includes(r) === false);
+			setNormalizedRoles(normalizedRoles);
+			setFilteredRoles(normalizedRoles);
+		}
+		setIsLoading(false);
+	};
+
+	useEffect(() => {
+		void fetchRoles();
+	}, []);
+
 	function renderRoles() {
 		if (isLoading === true) {
 			return (
@@ -137,24 +153,6 @@ export default function AssignRolesDialog({
 		});
 	}
 
-	const fetchRoles = async () => {
-		setIsLoading(true);
-		const response = await getRoles(1);
-
-		if (response.status === "OK") {
-			const roles = response.roles.map((r) => r.role);
-			setRoles(roles);
-			const normalizedRoles = roles.filter((r) => assignedRoles.includes(r) === false);
-			setNormalizedRoles(normalizedRoles);
-			setFilteredRoles(normalizedRoles);
-		}
-		setIsLoading(false);
-	};
-
-	useEffect(() => {
-		void fetchRoles();
-	}, []);
-
 	return (
 		<Dialog closeDialog={closeDialog}>
 			<DialogContent>
@@ -168,6 +166,7 @@ export default function AssignRolesDialog({
 								alt="search icon"
 							/>
 							<InputField
+								disabled={isLoading}
 								forceShowError={true}
 								name="search-box"
 								type="text"

diff --git a/src/ui/pages/userroles/index.tsx b/src/ui/pages/userroles/index.tsx
@@ -36,7 +36,7 @@ export default function UserRolesList() {
 				<div className="userroles-container">
 					<h1 className="users-list-title">Roles and Permissions</h1>
 					<p className="text-small users-list-subtitle">
-						One place to manage all your user Roles and Permissions. Edit roles and permissions according to
+						One place to manage all your user roles and permissions. Edit roles and permissions according to
 						your needs.
 					</p>
 					{isFeatureEnabled ? (