fix: Tooltip not being displayed consistently in permission row (RocketChat#36870)

Author: dougfabris

.changeset/strong-cars-drum.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue with inconsistent tooltip display in the permission row

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

@@ -1,9 +1,8 @@
 import type { IRole, IPermission } from '@rocket.chat/core-typings';
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import type { TFunction } from 'i18next';
 import type { ReactElement } from 'react';
-import { useState, memo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import RoleCell from './RoleCell';
@@ -36,28 +35,15 @@ type PermissionRowProps = {
 const PermissionRow = ({ permission, roleList, onGrant, onRemove }: PermissionRowProps): ReactElement => {
 	const { t } = useTranslation();
 	const { _id, roles } = permission;
-	const [hovered, setHovered] = useState(false);
 	const changeRole = useChangeRole({ onGrant, onRemove, permissionId: _id });
 
-	const onMouseEnter = useEffectEvent(() => setHovered(true));
-	const onMouseLeave = useEffectEvent(() => setHovered(false));
-
 	return (
-		<GenericTableRow key={_id} role='link' action tabIndex={0} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+		<GenericTableRow key={_id} role='link' action tabIndex={0}>
 			<GenericTableCell maxWidth='x300' withTruncatedText title={t(`${_id}_description` as TranslationKey)}>
 				{getName(t, permission)}
 			</GenericTableCell>
 			{roleList.map(({ _id, name, description }) => (
-				<RoleCell
-					key={_id}
-					_id={_id}
-					name={name}
-					description={description}
-					grantedRoles={roles}
-					onChange={changeRole}
-					lineHovered={hovered}
-					permissionId={_id}
-				/>
+				<RoleCell key={_id} _id={_id} name={name} description={description} grantedRoles={roles} onChange={changeRole} permissionId={_id} />
 			))}
 		</GenericTableRow>
 	);

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

@@ -25,7 +25,8 @@ const PermissionsTable = ({ roleList, permissions, setFilter, total, paginationP
 	const grantRole = useMethod('authorization:addPermissionToRole');
 	const removeRole = useMethod('authorization:removeRoleFromPermission');
 
-	const fixedColumnStyle = css`
+	const tableCustomStyle = css`
+		// Makes the first column of the table sticky
 		tr > th {
 			&:first-child {
 				position: sticky;
@@ -43,6 +44,18 @@ const PermissionsTable = ({ roleList, permissions, setFilter, total, paginationP
 				z-index: 11;
 			}
 		}
+
+		tr:hover {
+			td {
+				&:first-child {
+					background-color: ${Palette.surface['surface-hover']};
+				}
+			}
+			td > :nth-child(2) {
+				visibility: visible;
+				opacity: 1;
+			}
+		}
 	`;
 
 	return (
@@ -51,7 +64,7 @@ const PermissionsTable = ({ roleList, permissions, setFilter, total, paginationP
 			{permissions?.length === 0 && <GenericNoResults />}
 			{permissions?.length > 0 && (
 				<>
-					<GenericTable className={[fixedColumnStyle]} fixed={false}>
+					<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} />)}

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

@@ -12,12 +12,11 @@ type RoleCellProps = {
 	name: IRole['name'];
 	description: IRole['description'];
 	onChange: (roleId: IRole['_id'], granted: boolean) => Promise<boolean>;
-	lineHovered: boolean;
 	permissionId: string;
 	grantedRoles: IRole['_id'][];
 };
 
-const RoleCell = ({ _id, name, description, onChange, lineHovered, permissionId, grantedRoles = [] }: RoleCellProps): ReactElement => {
+const RoleCell = ({ _id, name, description, onChange, permissionId, grantedRoles = [] }: RoleCellProps): ReactElement => {
 	const [granted, setGranted] = useState(() => !!grantedRoles.includes(_id));
 	const [loading, setLoading] = useState(false);
 
@@ -37,7 +36,7 @@ const RoleCell = ({ _id, name, description, onChange, lineHovered, permissionId,
 			<Margins inline={2}>
 				<CheckBox checked={granted} onChange={handleChange} disabled={isDisabled} />
 				{!loading && (
-					<Box display='inline' color='hint' invisible={!lineHovered}>
+					<Box display='inline' color='hint' invisible>
 						{description || name}
 					</Box>
 				)}

apps/meteor/client/views/admin/permissions/PermissionsTable/__snapshots__/PermissionsTable.spec.tsx.snap

@@ -38,7 +38,7 @@ exports[`renders Default without crashing 1`] = `
               class="rcx-box rcx-box--full rcx-table__wrapper"
             >
               <table
-                class="rcx-box rcx-box--full rcx-table--sticky rcx-table rcx-css-1fepnl2"
+                class="rcx-box rcx-box--full rcx-table--sticky rcx-table rcx-css-1l69a2k"
               >
                 <thead
                   class="rcx-box rcx-box--full rcx-table__head"