feat: Freezes permissions table first column (#31626)

.changeset/five-dragons-joke.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Freezes the permission table's first column allowing the user to visualize the permission name when scrolling horizontally

apps/meteor/client/components/GenericTable/GenericTable.tsx

@@ -1,12 +1,13 @@
 import { Box, Table } from '@rocket.chat/fuselage';
-import React, { type ForwardedRef, type ReactNode, type TableHTMLAttributes, forwardRef } from 'react';
+import type { ComponentProps } from 'react';
+import React, { type ForwardedRef, type ReactNode, forwardRef } from 'react';
 
 import ScrollableContentWrapper from '../ScrollableContentWrapper';
 
 type GenericTableProps = {
 	fixed?: boolean;
 	children: ReactNode;
-} & Omit<TableHTMLAttributes<HTMLTableElement>, 'is'>;
+} & ComponentProps<typeof Table>;
 
 export const GenericTable = forwardRef(function GenericTable(
 	{ fixed = true, children, ...props }: GenericTableProps,

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

@@ -1,4 +1,5 @@
-import { Margins, Tabs, Button, Pagination } from '@rocket.chat/fuselage';
+import { css } from '@rocket.chat/css-in-js';
+import { Margins, Tabs, Button, Pagination, Palette } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRoute, usePermission, useMethod, useTranslation, useSetModal } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -55,6 +56,26 @@ const PermissionsTable = ({ isEnterprise }: { isEnterprise: boolean }): ReactEle
 		});
 	});
 
+	const fixedColumnStyle = css`
+		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;
+			}
+		}
+	`;
+
 	return (
 		<Page flexDirection='row'>
 			<Page>
@@ -89,7 +110,7 @@ const PermissionsTable = ({ isEnterprise }: { isEnterprise: boolean }): ReactEle
 						{permissions?.length === 0 && <GenericNoResults />}
 						{permissions?.length > 0 && (
 							<>
-								<GenericTable fixed={false}>
+								<GenericTable className={[fixedColumnStyle]} fixed={false}>
 									<GenericTableHeader>
 										<GenericTableHeaderCell width='x120'>{t('Name')}</GenericTableHeaderCell>
 										{roleList?.map(({ _id, name, description }) => (

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

@@ -25,7 +25,7 @@ const RoleHeader = ({ _id, name, description }: RoleHeaderProps): ReactElement =
 
 	return (
 		<GenericTableHeaderCell pi={4} p={8}>
-			<Button icon='edit' secondary onClick={handleEditRole}>
+			<Button small icon='edit' secondary onClick={handleEditRole}>
 				{description || name}
 			</Button>
 		</GenericTableHeaderCell>