Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-19 13:29:41 +02:00
Code Issues Releases Activity

fix(ui): use expand button in sidebar and tables [EE-6844] (#11608)

Browse source
This commit is contained in:
Chaim Lev-Ari 2024-05-15 08:26:23 +03:00 • committed by GitHub
parent 413b9c3b04
commit a808f83e7d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 155 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

30
app/react/components/datatables/expand-column.tsx
View file

@ -1,7 +1,6 @@
import { ChevronDown, ChevronUp } from 'lucide-react';
import { ColumnDef } from '@tanstack/react-table';
import { Button } from '@@/buttons';
import { CollapseExpandButton } from '../CollapseExpandButton';
import { DefaultType } from './types';
@ -13,32 +12,25 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
return (
hasExpandableItems && (
<Button
<CollapseExpandButton
isExpanded={table.getIsAllRowsExpanded()}
onClick={table.getToggleAllRowsExpandedHandler()}
color="none"
icon={table.getIsAllRowsExpanded() ? ChevronDown : ChevronUp}
title="Expand all"
data-cy="expand-all-rows-button"
aria-label="Expand all rows"
aria-label={
table.getIsAllRowsExpanded()
? 'Collapse all rows'
: 'Expand all rows'
}
/>
)
);
},
cell: ({ row }) =>
row.getCanExpand() && (
<Button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
row.toggleExpanded();
}}
color="none"
icon={row.getIsExpanded() ? ChevronDown : ChevronUp}
title={row.getIsExpanded() ? 'Collapse' : 'Expand'}
<CollapseExpandButton
isExpanded={row.getIsExpanded()}
onClick={row.getToggleExpandedHandler()}
data-cy={`expand-row-button_${row.index}`}
aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
aria-expanded={row.getIsExpanded()}
/>
),
enableColumnFilter: false,