Skip to content

Commit 995b46b

Browse files
fhlavacfhlavac
authored
Merge pull request #112 from fhlavac/cg
Add conditional text filtering to DataView
2 parents e797073 + 7bfb9e5 commit 995b46b

File tree

26 files changed

+1189
-37
lines changed

26 files changed

+1189
-37
lines changed

‎cypress/component/DataViewFilters.cy.tsx

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React from 'react';
2+
import { useDataViewFilters } from '@patternfly/react-data-view/dist/dynamic/Hooks';
3+
import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
4+
import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
5+
import { DataViewToolbar } from '@patternfly/react-data-view/dist/esm/DataViewToolbar';
6+
import { FilterIcon } from '@patternfly/react-icons';
7+
8+
const filtersProps = {
9+
ouiaId: 'DataViewFilters',
10+
toggleIcon: <FilterIcon />,
11+
values: { name: '', branch: '' }
12+
};
13+
14+
interface RepositoryFilters {
15+
name: string,
16+
branch: string
17+
};
18+
19+
const DataViewToolbarWithState = (props: any) => { // eslint-disable-line @typescript-eslint/no-explicit-any
20+
const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({ initialFilters: { name: '', branch: '' } });
21+
22+
return (
23+
<DataViewToolbar
24+
ouiaId='FiltersExampleHeader'
25+
clearAllFilters = {clearAllFilters}
26+
filters={
27+
<DataViewFilters {...filtersProps} onChange={(_e, values) => onSetFilters(values)} values={filters} {...props}>
28+
<DataViewTextFilter filterId="name" title='Name' placeholder='Filter by name' />
29+
<DataViewTextFilter filterId="branch" title='Branch' placeholder='Filter by branch' />
30+
</DataViewFilters>
31+
}
32+
/>
33+
);
34+
};
35+
36+
describe('DataViewFilters', () => {
37+
it('renders DataViewFilters with menu and filter items', () => {
38+
cy.mount(<DataViewToolbarWithState />);
39+
cy.get('[data-ouia-component-id="DataViewFilters"]').should('exist');
40+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
41+
42+
cy.contains('Name').should('exist');
43+
cy.contains('Branch').should('exist');
44+
});
45+
46+
it('can select a filter option', () => {
47+
cy.mount(<DataViewToolbarWithState />);
48+
cy.get('[data-ouia-component-id="DataViewFilters"]').should('contain.text', 'Name');
49+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
50+
cy.contains('Branch').click();
51+
52+
cy.get('[data-ouia-component-id="DataViewFilters"]').should('contain.text', 'Branch');
53+
});
54+
55+
it('responds to input and clears the filters', () => {
56+
cy.mount(<DataViewToolbarWithState />);
57+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
58+
cy.contains('Name').click();
59+
60+
cy.get('input[placeholder="Filter by name"]').type('Repository one');
61+
cy.get('.pf-v5-c-chip__text').should('have.length', 1);
62+
cy.get('input[placeholder="Filter by name"]').clear();
63+
cy.get('.pf-v5-c-chip__text').should('have.length', 0);
64+
});
65+
66+
it('displays chips for selected filters', () => {
67+
cy.mount(<DataViewToolbarWithState />);
68+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
69+
cy.contains('Name').click();
70+
cy.get('input[placeholder="Filter by name"]').type('Repository one');
71+
72+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
73+
cy.contains('Branch').click();
74+
cy.get('input[placeholder="Filter by branch"]').type('Main branch');
75+
76+
cy.get('.pf-v5-c-chip__text').should('have.length', 2);
77+
cy.get('.pf-v5-c-chip__text').eq(0).should('contain.text', 'Repository one');
78+
cy.get('.pf-v5-c-chip__text').eq(1).should('contain.text', 'Main branch');
79+
});
80+
81+
it('removes filters by clicking individual chips', () => {
82+
cy.mount(<DataViewToolbarWithState />);
83+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
84+
cy.contains('Name').click();
85+
cy.get('input[placeholder="Filter by name"]').type('Repository one');
86+
87+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
88+
cy.contains('Branch').click();
89+
cy.get('input[placeholder="Filter by branch"]').type('Main branch');
90+
91+
cy.get('[data-ouia-component-id="close"]').should('have.length', 2);
92+
93+
cy.get('[data-ouia-component-id="close"]').first().click();
94+
cy.get('[data-ouia-component-id="close"]').last().click();
95+
96+
cy.get('[data-ouia-component-id="close"]').should('have.length', 0);
97+
});
98+
99+
it('clears all filters using the clear-all button', () => {
100+
cy.mount(<DataViewToolbarWithState />);
101+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
102+
cy.contains('Name').click();
103+
cy.get('input[placeholder="Filter by name"]').type('Repository one');
104+
105+
cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click();
106+
cy.contains('Branch').click();
107+
cy.get('input[placeholder="Filter by branch"]').type('Main branch');
108+
109+
cy.get('[data-ouia-component-id="FiltersExampleHeader-clear-all-filters"]').should('exist').click();
110+
});
111+
});

‎cypress/component/DataViewTextFilter.cy.tsx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React, { useState } from 'react';
2+
import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
3+
import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
4+
5+
const defaultProps = {
6+
filterId: 'name',
7+
title: 'Name',
8+
value: '',
9+
ouiaId: 'DataViewTextFilter',
10+
placeholder: 'Filter by name'
11+
};
12+
13+
const DataViewToolbarWithState = (props: any) => { // eslint-disable-line @typescript-eslint/no-explicit-any
14+
const [ value, setValue ] = useState('Repository one');
15+
16+
return (
17+
<DataViewToolbar clearAllFilters={() => setValue('')}>
18+
<DataViewTextFilter {...defaultProps} value={value} onChange={() => setValue('')} {...props} />
19+
</DataViewToolbar>
20+
);
21+
};
22+
23+
describe('DataViewTextFilter', () => {
24+
25+
it('renders DataViewTextFilter with correct initial values', () => {
26+
cy.mount(<DataViewToolbarWithState value="" />);
27+
cy.get('[data-ouia-component-id="DataViewTextFilter"]').should('exist');
28+
cy.get('[data-ouia-component-id="DataViewTextFilter-input"] input')
29+
.should('have.attr', 'placeholder', 'Filter by name')
30+
.and('have.value', '');
31+
});
32+
33+
it('accepts input when passed', () => {
34+
cy.mount(<DataViewToolbarWithState value="" />);
35+
cy.get('[data-ouia-component-id="DataViewTextFilter-input"] input')
36+
.type('Repository one')
37+
.should('have.value', 'Repository one');
38+
});
39+
40+
it('displays a chip when value is present and removes it on delete', () => {
41+
cy.mount(<DataViewToolbarWithState />);
42+
cy.get('[data-ouia-component-id="DataViewTextFilter-input"] input').should('have.value', 'Repository one');
43+
44+
cy.get('.pf-v5-c-chip__text').contains('Repository one');
45+
cy.get('.pf-m-chip-group button.pf-v5-c-button.pf-m-plain').click();
46+
47+
cy.get('.pf-v5-c-chip__text').should('not.exist');
48+
cy.get('[data-ouia-component-id="DataViewTextFilter-input"] input').should('have.value', '');
49+
});
50+
51+
it('clears input when the clear button is clicked', () => {
52+
cy.mount(<DataViewToolbarWithState />);
53+
cy.get('[data-ouia-component-id="DataViewTextFilter-input"] input').should('have.value', 'Repository one');
54+
55+
cy.get('[data-ouia-component-id="DataViewToolbar-clear-all-filters"]').click();
56+
57+
cy.get('[data-ouia-component-id="DataViewTextFilter-input"] input').should('have.value', '');
58+
});
59+
60+
it('hides or shows the toolbar item based on showToolbarItem prop', () => {
61+
cy.mount(
62+
<DataViewToolbar>
63+
<DataViewTextFilter {...defaultProps} showToolbarItem={false} />
64+
</DataViewToolbar>
65+
);
66+
cy.get('[data-ouia-component-id="DataViewTextFilter"]').should('not.exist');
67+
68+
cy.mount(
69+
<DataViewToolbar>
70+
<DataViewTextFilter {...defaultProps} showToolbarItem />
71+
</DataViewToolbar>
72+
);
73+
cy.get('[data-ouia-component-id="DataViewTextFilter"]').should('exist');
74+
});
75+
});

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ source: react
1111
# If you use typescript, the name of the interface to display props for
1212
# These are found through the sourceProps function provided in patternfly-docs.source.js
1313
sortValue: 4
14-
propComponents: ['DataViewToolbar', 'DataViewTableBasic', 'DataViewTableTree']
14+
propComponents: ['DataViewToolbar', 'DataViewTableBasic', 'DataViewTableTree', 'DataViewTrTree', 'DataViewTrObject']
1515
sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
1616
---
1717
import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
@@ -26,7 +26,7 @@ import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynami
2626

2727
The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section.
2828

29-
Data view toolbar can contain a `pagination`, `bulkSelect`, `actions` or other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
29+
Data view toolbar can contain a `pagination`, `bulkSelect`, `filters`, `actions` or other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
3030

3131
### Basic toolbar example
3232

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/FiltersExample.tsx

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React, { useMemo } from 'react';
2+
import { Pagination } from '@patternfly/react-core';
3+
import { BrowserRouter, useSearchParams } from 'react-router-dom';
4+
import { useDataViewFilters, useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
5+
import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
6+
import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
7+
import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
8+
import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
9+
import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
10+
11+
const perPageOptions = [
12+
{ title: '5', value: 5 },
13+
{ title: '10', value: 10 }
14+
];
15+
16+
interface Repository {
17+
name: string;
18+
branch: string | null;
19+
prs: string | null;
20+
workspaces: string;
21+
lastCommit: string;
22+
}
23+
24+
interface RepositoryFilters {
25+
name: string,
26+
branch: string
27+
}
28+
29+
const repositories: Repository[] = [
30+
{ name: 'Repository one', branch: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
31+
{ name: 'Repository two', branch: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
32+
{ name: 'Repository three', branch: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
33+
{ name: 'Repository four', branch: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
34+
{ name: 'Repository five', branch: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
35+
{ name: 'Repository six', branch: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
36+
];
37+
38+
const columns = [ 'Name', 'Branch', 'Pull requests', 'Workspaces', 'Last commit' ];
39+
40+
const ouiaId = 'LayoutExample';
41+
42+
const MyTable: React.FunctionComponent = () => {
43+
const [ searchParams, setSearchParams ] = useSearchParams();
44+
const pagination = useDataViewPagination({ perPage: 5 });
45+
const { page, perPage } = pagination;
46+
const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({ initialFilters: { name: '', branch: '' }, searchParams, setSearchParams });
47+
48+
const pageRows = useMemo(() => repositories
49+
.filter(item => (!filters.name || item.name?.toLocaleLowerCase().includes(filters.name?.toLocaleLowerCase())) && (!filters.branch || item.branch?.toLocaleLowerCase().includes(filters.branch?.toLocaleLowerCase())))
50+
.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage)
51+
.map(item => Object.values(item)), [ page, perPage, filters ]);
52+
53+
return (
54+
<DataView>
55+
<DataViewToolbar
56+
ouiaId='LayoutExampleHeader'
57+
clearAllFilters = {clearAllFilters}
58+
pagination={
59+
<Pagination
60+
perPageOptions={perPageOptions}
61+
itemCount={repositories.length}
62+
{...pagination}
63+
/>
64+
}
65+
filters={
66+
<DataViewFilters onChange={(_e, values) => onSetFilters(values)} values={filters}>
67+
<DataViewTextFilter filterId="name" title='Name' placeholder='Filter by name' />
68+
<DataViewTextFilter filterId="branch" title='Branch' placeholder='Filter by branch' />
69+
</DataViewFilters>
70+
}
71+
/>
72+
<DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
73+
<DataViewToolbar
74+
ouiaId='LayoutExampleFooter'
75+
pagination={
76+
<Pagination
77+
isCompact
78+
perPageOptions={perPageOptions}
79+
itemCount={repositories.length}
80+
{...pagination}
81+
/>
82+
}
83+
/>
84+
</DataView>
85+
);
86+
}
87+
88+
export const BasicExample: React.FunctionComponent = () => (
89+
<BrowserRouter>
90+
<MyTable/>
91+
</BrowserRouter>
92+
)

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,18 @@ source: react
1111
# If you use typescript, the name of the interface to display props for
1212
# These are found through the sourceProps function provided in patternfly-docs.source.js
1313
sortValue: 3
14+
propComponents: ['DataViewFilters', 'DataViewTextFilter']
1415
sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md
1516
---
1617
import { useMemo } from 'react';
17-
import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
18+
import { BrowserRouter, useSearchParams } from 'react-router-dom';
19+
import { useDataViewPagination, useDataViewSelection, useDataViewFilters } from '@patternfly/react-data-view/dist/dynamic/Hooks';
1820
import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
1921
import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
2022
import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
2123
import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
22-
import { BrowserRouter, useSearchParams } from 'react-router-dom';
24+
import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
25+
import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
2326

2427
This is a list of functionality you can use to manage data displayed in the **data view**.
2528

@@ -84,3 +87,34 @@ The `useDataViewSelection` hook manages the selection state of the data view.
8487
```js file="./SelectionExample.tsx"
8588

8689
```
90+
91+
# Filters
92+
Enables filtering of data records in the data view and displays the applied filter chips.
93+
94+
### Toolbar usage
95+
The data view toolbar can include a set of filters by passing a React node to the `filters` property. You can use predefined components `DataViewFilters` and `DataViewTextFilter` to customize and handle filtering directly in the toolbar. The `DataViewFilters` is a wrapper allowing conditional filtering using multiple attributes. If you need just a single filter, you can use `DataViewTextFilter` or a different filter component alone. Props of these filter components are listed at the bottom of this page.
96+
97+
You can decide between passing `value` and `onChange` event to every filter separately or pass `values` and `onChange` to the `DataViewFilters` wrapper which make them available to its children. Props directly passed to child filters have a higher priority than the "inherited" ones.
98+
99+
### Filters state
100+
101+
The `useDataViewFilters` hook manages the filter state of the data view. It allows you to define default filter values, synchronize filter state with URL parameters, and handle filter changes efficiently.
102+
103+
**Initial values:**
104+
- `initialFilters` object with default filter values
105+
- optional `searchParams` object for managing URL-based filter state
106+
- optional `setSearchParams` function to update the URL when filters are modified
107+
108+
The `useDataViewFilters` hook works well with the React Router library to support URL-based filtering. Alternatively, you can manage filter state in the URL using `URLSearchParams` and `window.history.pushState` APIs, or other routing libraries. If no URL parameters are provided, the filter state is managed internally.
109+
110+
**Return values:**
111+
- `filters` object representing the current filter values
112+
- `onSetFilters` function to update the filter state
113+
- `clearAllFilters` function to reset all filters to their initial values
114+
115+
### Filtering example
116+
This example demonstrates the setup and usage of filters within the data view. It includes text filters for different attributes, the ability to clear all filters, and persistence of filter state in the URL.
117+
118+
```js file="./FiltersExample.tsx"
119+
120+
```

‎packages/module/src/DataViewFilters/DataViewFilters.test.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import DataViewFilters from './DataViewFilters';
4+
import DataViewToolbar from '../DataViewToolbar';
5+
import DataViewTextFilter from '../DataViewTextFilter';
6+
7+
describe('DataViewFilters component', () => {
8+
const mockOnChange = jest.fn();
9+
10+
it('should render correctly', () => {
11+
const { container } = render(<DataViewToolbar
12+
filters={
13+
<DataViewFilters onChange={mockOnChange} values={{}}>
14+
<DataViewTextFilter filterId="one" title="One" />
15+
<DataViewTextFilter filterId="two" title="Two" />
16+
</DataViewFilters>
17+
}
18+
/>);
19+
expect(container).toMatchSnapshot();
20+
});
21+
});

0 commit comments

Comments
 (0)