snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx

@@ -0,0 +1,112 @@
+import type { IPermission, IRole } from '@rocket.chat/core-typings';
+import { css } from '@rocket.chat/css-in-js';
+import { Pagination, Palette } from '@rocket.chat/fuselage';
+import { GenericTable, GenericTableHeader, GenericTableHeaderCell, GenericTableBody } from '@rocket.chat/ui-client';
+import type { usePagination } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PermissionRow from './PermissionRow';
+import PermissionsTableFilter from './PermissionsTableFilter';
+import RoleHeader from './RoleHeader';
+import GenericNoResults from '../../../../components/GenericNoResults';
+
+export type PermissionsTableProps = {
+	roleList: IRole[];
+	permissions: IPermission[];
+	setFilter: (filter: string) => void;
+	total: number;
+	paginationData: ReturnType<typeof usePagination>;
+};
+
+const PermissionsTable = ({ roleList, permissions, setFilter, total, paginationData }: PermissionsTableProps) => {
+	const { t } = useTranslation();
+
+	const addPermissionRole = useEndpoint('POST', '/v1/permissions.addRole');
+	const removePermissionRole = useEndpoint('POST', '/v1/permissions.removeRole');
+
+	const grantRole = useCallback(
+		async (permissionId: IPermission['_id'], role: IRole['_id']) => {
+			await addPermissionRole({ permissionId, role });
+		},
+		[addPermissionRole],
+	);
+
+	const removeRole = useCallback(
+		async (permissionId: IPermission['_id'], role: IRole['_id']) => {
+			await removePermissionRole({ permissionId, role });
+		},
+		[removePermissionRole],
+	);
+
+	const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = paginationData;
+
+	const tableCustomStyle = css`
+		// Makes the first column of the table sticky
+		tr > th {
+			&:first-child {
+				position: sticky;
+				left: 0;
+				background-color: ${Palette.surface['surface-light']};
+				z-index: 12;
+			}
+		}
+		tr > td {
+			&:first-child {
+				position: sticky;
+				left: 0;
+				box-shadow: -1px 0 0 ${Palette.stroke['stroke-light']} inset;
+				background-color: ${Palette.surface['surface-light']};
+				z-index: 11;
+			}
+		}
+
+		tr:hover {
+			td {
+				&:first-child {
+					background-color: ${Palette.surface['surface-hover']};
+				}
+			}
+			td > :nth-child(2) {
+				visibility: visible;
+				opacity: 1;
+			}
+		}
+	`;
+
+	return (
+		<>
+			<PermissionsTableFilter onChange={setFilter} />
+			{permissions?.length === 0 && <GenericNoResults />}
+			{permissions?.length > 0 && (
+				<>
+					<GenericTable className={[tableCustomStyle]} fixed={false}>
+						<GenericTableHeader>
+							<GenericTableHeaderCell width='x120'>{t('Name')}</GenericTableHeaderCell>
+							{roleList?.map(({ _id, name, description }) => (
+								<RoleHeader key={_id} _id={_id} name={name} description={description} />
+							))}
+						</GenericTableHeader>
+						<GenericTableBody>
+							{permissions.map((permission) => (
+								<PermissionRow key={permission._id} permission={permission} roleList={roleList} onGrant={grantRole} onRemove={removeRole} />
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={total}
+						onSetItemsPerPage={setItemsPerPage}
+						onSetCurrent={setCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+		</>
+	);
+};
+
+export default PermissionsTable;