diff --git a/.changeset/strong-cars-drum.md b/.changeset/strong-cars-drum.md new file mode 100644 index 00000000000..8a7298a26ad --- /dev/null +++ b/.changeset/strong-cars-drum.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': patch +--- + +Fixes an issue with inconsistent tooltip display in the permission row diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx index c372ebb6b4b..2fb88536102 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx +++ b/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 ( - + {getName(t, permission)} {roleList.map(({ _id, name, description }) => ( - + ))} ); diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx index 68a050b431d..c3752505e7a 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx +++ b/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 && } {permissions?.length > 0 && ( <> - + {t('Name')} {roleList?.map(({ _id, name, description }) => )} diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx index a1d76062ceb..cc9fec9dab4 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx +++ b/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; - 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, {!loading && ( - + {description || name} )} diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/__snapshots__/PermissionsTable.spec.tsx.snap b/apps/meteor/client/views/admin/permissions/PermissionsTable/__snapshots__/PermissionsTable.spec.tsx.snap index fd49f996804..c3685ddaaf6 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/__snapshots__/PermissionsTable.spec.tsx.snap +++ b/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" >