Skip to content

Commit

Permalink
Update EuiBasicTable and EuiInMemoryTable props to accept 'all'
Browse files Browse the repository at this point in the history 
- this involves type update and either `'all` or `typeof number` checks to ensure correct behavior

NB: in the case of `renderTableCaption` (which were DRYed out), those numbers are meant for aria labels and are +1 incremented unlike other pagination indices
  • Loading branch information
@cee-chen
cee-chen committed Feb 11, 2022
1 parent 2a05385 commit 8efabe6
Show file tree
Hide file tree
Showing 9 changed files with 415 additions and 45 deletions.
112 changes: 112 additions & 0 deletions src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2371,6 +2371,118 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
</div>
`;

exports[`EuiBasicTable with pagination - show all 1`] = `
<div
className="euiBasicTable"
>
<div>
<EuiTableHeaderMobile>
<EuiFlexGroup
alignItems="baseline"
justifyContent="spaceBetween"
responsive={false}
>
<EuiFlexItem
grow={false}
/>
<EuiFlexItem
grow={false}
/>
</EuiFlexGroup>
</EuiTableHeaderMobile>
<EuiTable
id="__table_generated-id"
responsive={true}
tableLayout="fixed"
>
<EuiScreenReaderOnly>
<caption
className="euiTableCaption"
>
<EuiDelayRender
delay={500}
>
<EuiI18n
default="This table contains {itemCount} rows out of {totalItemCount} rows; Page {page} of {pageCount}."
token="euiBasicTable.tableAutoCaptionWithPagination"
values={
Object {
"itemCount": 2,
"page": 1,
"pageCount": 1,
"totalItemCount": 2,
}
}
/>
</EuiDelayRender>
</caption>
</EuiScreenReaderOnly>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
data-test-subj="tableHeaderCell_name_0"
description="description"
key="_data_h_name_0"
>
Name
</EuiTableHeaderCell>
</EuiTableHeader>
<EuiTableBody
bodyRef={[Function]}
>
<EuiTableRow
isSelected={false}
>
<EuiTableRowCell
align="left"
key="_data_column_name_0_0"
mobileOptions={
Object {
"header": "Name",
"render": undefined,
}
}
setScopeRow={false}
textOnly={true}
>
name1
</EuiTableRowCell>
</EuiTableRow>
<EuiTableRow
isSelected={false}
>
<EuiTableRowCell
align="left"
key="_data_column_name_1_0"
mobileOptions={
Object {
"header": "Name",
"render": undefined,
}
}
setScopeRow={false}
textOnly={true}
>
name2
</EuiTableRowCell>
</EuiTableRow>
</EuiTableBody>
</EuiTable>
</div>
<EuiI18n
default="Pagination for table: {tableCaption}"
token="euiBasicTable.tablePagination"
values={
Object {
"tableCaption": undefined,
}
}
>
<Component />
</EuiI18n>
</div>
`;

exports[`EuiBasicTable with pagination 1`] = `
<div
className="euiBasicTable"
Expand Down
172 changes: 172 additions & 0 deletions src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1704,6 +1704,178 @@ exports[`EuiInMemoryTable with pagination 1`] = `
/>
`;

exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = `
<div
aria-label="aria-label"
class="euiBasicTable testClass1 testClass2"
data-test-subj="test subject string"
>
<div>
<div
class="euiTableHeaderMobile"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
/>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
/>
</div>
</div>
<table
class="euiTable euiTable--responsive"
id="__table_generated-id"
tabindex="-1"
>
<caption
class="euiScreenReaderOnly euiTableCaption"
/>
<thead>
<tr>
<th
class="euiTableHeaderCell"
data-test-subj="tableHeaderCell_name_0"
role="columnheader"
scope="col"
>
<span
class="euiTableCellContent"
>
<span
class="euiTableCellContent__text"
title="; description"
>
Name
</span>
<span
class="euiScreenReaderOnly"
>
description
</span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr
class="euiTableRow"
>
<td
class="euiTableRowCell euiTableRowCell--middle"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
>
Name
</div>
<div
class="euiTableCellContent"
>
<span
class="euiTableCellContent__text"
>
name1
</span>
</div>
</td>
</tr>
<tr
class="euiTableRow"
>
<td
class="euiTableRowCell euiTableRowCell--middle"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
>
Name
</div>
<div
class="euiTableCellContent"
>
<span
class="euiTableCellContent__text"
>
name2
</span>
</div>
</td>
</tr>
<tr
class="euiTableRow"
>
<td
class="euiTableRowCell euiTableRowCell--middle"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
>
Name
</div>
<div
class="euiTableCellContent"
>
<span
class="euiTableCellContent__text"
>
name3
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div
class="euiSpacer euiSpacer--m"
/>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow eui-xScroll"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiPopover euiPopover--anchorUpRight"
>
<div
class="euiPopover__anchor"
>
<button
class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
data-test-subj="tablePaginationPopoverButton"
type="button"
>
<span
class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
>
<span
class="euiButtonContent__icon"
color="inherit"
data-euiicon-type="arrowDown"
/>
<span
class="euiButtonEmpty__text"
>
Showing all
</span>
</span>
</button>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
/>
</div>
</div>
</div>
`;

exports[`EuiInMemoryTable with pagination and default page size and index 1`] = `
<EuiBasicTable
aria-label="aria-label"
Expand Down
23 changes: 23 additions & 0 deletions src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,29 @@ exports[`PaginationBar render - hiding per page options 1`] = `
</div>
`;

exports[`PaginationBar render - show all pageSize 1`] = `
<div>
<EuiSpacer
size="m"
/>
<EuiTablePagination
activePage={0}
aria-label="aria-label"
itemsPerPage="all"
itemsPerPageOptions={
Array [
1,
5,
"all",
]
}
onChangeItemsPerPage={[Function]}
onChangePage={[Function]}
pageCount={1}
/>
</div>
`;

exports[`PaginationBar render 1`] = `
<div>
<EuiSpacer
Expand Down
26 changes: 26 additions & 0 deletions src/components/basic_table/basic_table.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,32 @@ describe('EuiBasicTable', () => {
expect(component).toMatchSnapshot();
});

test('with pagination - show all', () => {
const props: EuiBasicTableProps<BasicItem> = {
items: [
{ id: '1', name: 'name1' },
{ id: '2', name: 'name2' },
],
columns: [
{
field: 'name',
name: 'Name',
description: 'description',
},
],
pagination: {
pageIndex: 0,
pageSize: 'all',
pageSizeOptions: [1, 5, 'all'],
totalItemCount: 2,
},
onChange: () => {},
};
const component = shallow(<EuiBasicTable {...props} />);

expect(component).toMatchSnapshot();
});

test('with pagination and error', () => {
const props: EuiBasicTableProps<BasicItem> = {
items: [
Expand Down
Loading

0 comments on commit 8efabe6

Please sign in to comment.