[IMPROVE] Rewrite Admin Permissions to Typescript

Co-authored-by: gabriellsh <gabriel.henriques@rocket.chat>

apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/index.ts

+export { default } from './UsersInRoleTableWithData';

apps/meteor/client/views/admin/permissions/UsersInRole/index.ts

+export { default } from './UsersInRolePageWithData';

apps/meteor/client/views/admin/permissions/UsersInRoleTable.js

-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import React from 'react';
-
-import GenericModal from '../../../components/GenericModal';
-import GenericTable from '../../../components/GenericTable';
-import { useSetModal } from '../../../contexts/ModalContext';
-import { useEndpoint } from '../../../contexts/ServerContext';
-import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext';
-import { useTranslation } from '../../../contexts/TranslationContext';
-import UserRow from './UserRow';
-
-function UsersInRoleTable({ data, reload, roleName, roleId, description, total, params, setParams, rid }) {
-	const t = useTranslation();
-	const dispatchToastMessage = useToastMessageDispatch();
-
-	const setModal = useSetModal();
-	const closeModal = () => setModal();
-
-	const removeUser = useEndpoint('POST', 'roles.removeUserFromRole');
-
-	const onRemove = useMutableCallback((username) => {
-		const remove = async () => {
-			try {
-				await removeUser({ roleId, username, scope: rid });
-				dispatchToastMessage({ type: 'success', message: t('User_removed') });
-			} catch (error) {
-				dispatchToastMessage({ type: 'error', message: error });
-			}
-			closeModal();
-			reload();
-		};
-
-		setModal(
-			<GenericModal variant='danger' onConfirm={remove} onCancel={closeModal} confirmText={t('Delete')}>
-				{t('The_user_s_will_be_removed_from_role_s', username, description || roleName || roleId)}
-			</GenericModal>,
-		);
-	});
-
-	return (
-		<GenericTable
-			header={
-				<>
-					<GenericTable.HeaderCell>{t('Name')}</GenericTable.HeaderCell>
-					<GenericTable.HeaderCell>{t('Email')}</GenericTable.HeaderCell>
-					<GenericTable.HeaderCell w='x80'></GenericTable.HeaderCell>
-				</>
-			}
-			results={data}
-			params={params}
-			setParams={setParams}
-			total={total}
-		>
-			{(props) => <UserRow onRemove={onRemove} key={props._id} {...props} />}
-		</GenericTable>
-	);
-}
-
-export default UsersInRoleTable;

apps/meteor/client/views/admin/permissions/UsersInRoleTableContainer.js

-import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import React, { useState, useMemo } from 'react';
-
-import { useEndpointData } from '../../../hooks/useEndpointData';
-import UsersInRoleTable from './UsersInRoleTable';
-
-const UsersInRoleTableContainer = ({ rid, roleId, roleName, description, reloadRef }) => {
-	const [params, setParams] = useState({ current: 0, itemsPerPage: 25 });
-
-	const debouncedParams = useDebouncedValue(params, 500);
-
-	const query = useMemo(
-		() => ({
-			roomId: rid,
-			role: roleId,
-			...(debouncedParams.itemsPerPage && { count: debouncedParams.itemsPerPage }),
-			...(debouncedParams.current && { offset: debouncedParams.current }),
-		}),
-		[debouncedParams, rid, roleId],
-	);
-
-	const { value: data = {}, reload } = useEndpointData('roles.getUsersInRole', query);
-
-	reloadRef.current = reload;
-
-	const tableData = data?.users || [];
-
-	return (
-		<UsersInRoleTable
-			data={tableData}
-			total={data?.total}
-			reload={reload}
-			params={params}
-			setParams={setParams}
-			roleName={roleName}
-			roleId={roleId}
-			description={description}
-			rid={rid}
-		/>
-	);
-};
-
-export default UsersInRoleTableContainer;

apps/meteor/client/views/admin/permissions/hooks/useChangeRole.ts

+import type { IRole, IPermission } from '@rocket.chat/core-typings';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+
+import { useToastMessageDispatch } from '../../../../contexts/ToastMessagesContext';
+
+export const useChangeRole = ({
+	onGrant,
+	onRemove,
+	permissionId,
+}: {
+	onGrant: (permissionId: IPermission['_id'], roleId: IRole['_id']) => Promise<void>;
+	onRemove: (permissionId: IPermission['_id'], roleId: IRole['_id']) => Promise<void>;
+	permissionId: IPermission['_id'];
+}): ((roleId: IRole['_id'], granted: boolean) => Promise<boolean>) => {
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	return useMutableCallback(async (roleId, granted) => {
+		try {
+			if (granted) {
+				await onRemove(permissionId, roleId);
+			} else {
+				await onGrant(permissionId, roleId);
+			}
+			return !granted;
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+		return granted;
+	});
+};

apps/meteor/client/views/admin/permissions/hooks/usePermissionsAndRoles.ts

+import type { IRole, IPermission } from '@rocket.chat/core-typings';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useCallback } from 'react';
 
@@ -6,7 +7,12 @@ import { CONSTANTS } from '../../../../../app/authorization/lib';
 import { Roles } from '../../../../../app/models/client';
 import { useReactiveValue } from '../../../../hooks/useReactiveValue';
 
-export const usePermissionsAndRoles = (type = 'permissions', filter = '', limit = 25, skip = 0): Array<any> => {
+export const usePermissionsAndRoles = (
+	type = 'permissions',
+	filter = '',
+	limit = 25,
+	skip = 0,
+): { permissions: IPermission[]; total: number; roleList: IRole[]; reload: () => void } => {
 	const getPermissions = useCallback(() => {
 		const filterRegExp = new RegExp(filter, 'i');
 
@@ -25,12 +31,9 @@ export const usePermissionsAndRoles = (type = 'permissions', filter = '', limit
 		);
 	}, [filter, limit, skip, type]);
 
-	const getRoles = useMutableCallback(() => Roles.find().fetch());
-
 	const permissions = useReactiveValue(getPermissions);
+	const getRoles = useMutableCallback(() => Roles.find().fetch());
 	const roles = useReactiveValue(getRoles);
 
-	const reloadRoles = getRoles();
-
-	return [permissions.fetch(), permissions.count(false), roles, reloadRoles];
+	return { permissions: permissions.fetch(), total: permissions.count(false), roleList: roles, reload: getRoles };
 };

apps/meteor/client/views/admin/permissions/hooks/useRole.ts

+import type { IRole } from '@rocket.chat/core-typings';
+import { useCallback } from 'react';
+
+import { Roles } from '../../../../../app/models/client';
+import { useReactiveValue } from '../../../../hooks/useReactiveValue';
+
+export const useRole = (_id?: IRole['_id']): IRole => useReactiveValue(useCallback(() => Roles.findOne({ _id }), [_id]));

apps/meteor/client/views/admin/permissions/useRole.js

-import { useCallback } from 'react';
-
-import { Roles } from '../../../../app/models/client';
-import { useReactiveValue } from '../../../hooks/useReactiveValue';
-
-export const useRole = (_id) => useReactiveValue(useCallback(() => Roles.findOne({ _id }), [_id]));

packages/core-typings/src/IUser.ts

@@ -171,3 +171,8 @@ export type IUserDataEvent = {
       unset: Record<keyof IUser, boolean | 0 | 1>;
     }
 );
+
+export type IUserInRole = Pick<
+	IUser,
+	'_id' | 'name' | 'username' | 'emails' | 'avatarETag' | 'createdAt' | 'roles' | 'type' | 'active' | '_updatedAt'
+>;

packages/rest-typings/src/v1/roles.ts

 import Ajv, { JSONSchemaType } from "ajv";
 
 import type { RocketChatRecordDeleted } from "@rocket.chat/core-typings";
-import type { IRole, IUser } from "@rocket.chat/core-typings";
+import type { IRole, IUser, IUserInRole } from "@rocket.chat/core-typings";
 
 const ajv = new Ajv();
 
@@ -191,12 +191,12 @@ export type RolesEndpoints = {
 
   "roles.getUsersInRole": {
     GET: (params: {
-      roomId: string;
+      roomId?: string;
       role: string;
-      offset: number;
-      count: number;
+      offset?: number;
+      count?: number;
     }) => {
-      users: IUser[];
+      users: IUserInRole[];
       total: number;
     };
   };