fix: [UIE-8142] - IAM RBAC: fix roles table expand (linode#12659)

* feat: [UIE-8142] - IAM RBAC: fix roles table expand

* feat: [UIE-8142] - changeset

Author: mpolotsk-akamai

packages/manager/.changeset/pr-12659-fixed-1754657214437.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+IAM RBAC: Accidental row expansion in Roles table when selecting roles via checkbox ([#12659](https://github.com/linode/manager/pull/12659))

packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx

@@ -44,7 +44,6 @@ interface Props {
 }
 const DEFAULT_PAGE_SIZE = 10;
 export const RolesTable = ({ roles = [] }: Props) => {
-  const [expandedRows, setExpandedRows] = useState<string[]>([]);
   // Filter string for the search bar
   const [filterString, setFilterString] = React.useState('');
   const [filterableEntityType, setFilterableEntityType] =
@@ -147,12 +146,7 @@ export const RolesTable = ({ roles = [] }: Props) => {
     pagination.handlePageSizeChange(newSize);
     pagination.handlePageChange(1);
   };
-  const handleExpandToggle = (e: React.MouseEvent, name: string) => {
-    e.stopPropagation();
-    setExpandedRows((prev) =>
-      prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name]
-    );
-  };
+
   return (
     <>
       <Paper sx={(theme) => ({ marginTop: theme.tokens.spacing.S16 })}>
@@ -253,7 +247,6 @@ export const RolesTable = ({ roles = [] }: Props) => {
               paginatedRows.map((roleRow) => (
                 <TableRow
                   expandable
-                  expanded={expandedRows.includes(roleRow.name)}
                   hoverable
                   key={roleRow.name}
                   rowborder
@@ -262,7 +255,6 @@ export const RolesTable = ({ roles = [] }: Props) => {
                   selected={selectedRows.includes(roleRow)}
                 >
                   <TableCell
-                    onClick={(e) => handleExpandToggle(e, roleRow.name)}
                     style={{ minWidth: '26%', wordBreak: 'break-word' }}
                   >
                     {roleRow.name}
@@ -296,11 +288,7 @@ export const RolesTable = ({ roles = [] }: Props) => {
                     slot="expanded"
                     style={{ marginBottom: 12, padding: 0, width: '100%' }}
                   >
-                    {expandedRows.includes(roleRow.name) && (
-                      <RolesTableExpandedRow
-                        permissions={roleRow.permissions}
-                      />
-                    )}
+                    <RolesTableExpandedRow permissions={roleRow.permissions} />
                   </TableRowExpanded>
                 </TableRow>
               ))