diff --git a/cypress/component/DataViewFilterAllSelected.cy.tsx b/cypress/component/DataViewFilterAllSelected.cy.tsx new file mode 100644 index 00000000..6e53fa33 --- /dev/null +++ b/cypress/component/DataViewFilterAllSelected.cy.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { mount } from 'cypress/react'; +import { BasicExample } from '../../packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/AllSelectedExample'; + +describe('BasicExample Component', () => { + beforeEach(() => { + mount(); + }); + + it('displays all rows by default', () => { + cy.get('table tbody tr').should('have.length', 5); + }); + + it('filters to selected rows when toggled', () => { + cy.get('table tbody tr') + .first() + .find('input[type="checkbox"]') + .check(); + + cy.get('#selected-row-switch').click(); + + cy.get('table tbody tr').should('have.length', 1); + }); + + it('switches back to all when last selected row is unselected', () => { + cy.get('table tbody tr') + .first() + .find('input[type="checkbox"]') + .check(); + + cy.get('#selected-row-switch').click(); + + cy.get('table tbody tr').should('have.length', 1); + + cy.get('table tbody tr') + .first() + .find('input[type="checkbox"]') + .uncheck(); + + cy.get('table tbody tr').should('have.length', 5); + }); +}); diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/AllSelectedExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/AllSelectedExample.tsx new file mode 100644 index 00000000..4a412395 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/AllSelectedExample.tsx @@ -0,0 +1,116 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import { Pagination, ToggleGroup, ToggleGroupItem, Tooltip } from '@patternfly/react-core'; +import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks'; +import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView'; +import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar'; +import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; +import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups'; + +const TOGGLE_ALL = 'all'; +const TOGGLE_SELECTED = 'selected'; + +const perPageOptions = [ + { title: '5', value: 5 }, + { title: '10', value: 10 } +]; + +interface Repository { + name: string; + branches: string | null; + prs: string | null; + workspaces: string; + lastCommit: string; +}; + +const repositories: Repository[] = [ + { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' }, + { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' }, + { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' }, + { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' }, + { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' }, + { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' } +]; + +const rows = repositories.map(item => Object.values(item)); + +const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ]; + +const ouiaId = 'LayoutExample'; + +export const BasicExample: React.FunctionComponent = () => { + const pagination = useDataViewPagination({ perPage: 5 }); + const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] }); + const [ selectedToggle, setSelectedToggle ] = useState(TOGGLE_ALL); + const { selected, onSelect } = selection; + const { page, perPage, onSetPage } = pagination; + + const pageRows = useMemo(() => (selectedToggle === TOGGLE_SELECTED ? selected : rows).slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage, selectedToggle, selected ]); + + const handleBulkSelect = (value: BulkSelectValue) => { + value === BulkSelectValue.none && onSelect(false); + value === BulkSelectValue.all && onSelect(true, rows); + }; + + const handleItemClick = (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, _isSelected: boolean) => { + const id = event.currentTarget.id; + + if (id === TOGGLE_SELECTED && selected.length === 0) { + return; + } + + if (selectedToggle !== id) { + setSelectedToggle(id); + onSetPage(undefined, 1); + } + }; + + useEffect(() => { + if (selected.length === 0) { + setSelectedToggle(TOGGLE_ALL); + } + }, [ selected ]); + + return ( + + + } + toggleGroup={ + + + + + } + pagination={} + /> + + {selected.length === 0 && ( document.getElementById('selected-row-switch') as HTMLButtonElement} + />)} + + + + ); +}; diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md b/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md index 1901f424..5d8864a4 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md @@ -15,8 +15,9 @@ sortValue: 2 propComponents: ['DataViewToolbar', 'DataViewFilters', 'DataViewTextFilter', 'DataViewCheckboxFilter'] sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md --- -import { useMemo } from 'react'; +import { useMemo, useState, useEffect } from 'react'; import { BrowserRouter, useSearchParams } from 'react-router-dom'; +import { Pagination, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; import { useDataViewPagination, useDataViewSelection, useDataViewFilters } from '@patternfly/react-data-view/dist/dynamic/Hooks'; import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView'; import { BulkSelect, BulkSelectValue, ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups'; @@ -140,3 +141,14 @@ This example demonstrates the setup and usage of filters within the data view. I ```js file="./FiltersExample.tsx" ``` + + +## All/selected data switch +All/selected data switch allows users to toggle between displaying the entire table (All) and only the rows they have selected (Selected). If the user deselects the last selected row, the filter automatically switches back to All, displaying all table rows again. Until at least one row is selected, a tooltip with guidance is displayed, and the Selected button does not perform any action. The Selected button is intentionally not disabled for accessibility reasons but instead has `aria-disabled` set. + +### All/selected example +This example demonstrates the setup and usage of All/selected row switch. + +```js file="./AllSelectedExample.tsx" + +``` \ No newline at end of file diff --git a/packages/module/patternfly-docs/generated/index.js b/packages/module/patternfly-docs/generated/index.js index 6ddf783e..fb3f2d80 100644 --- a/packages/module/patternfly-docs/generated/index.js +++ b/packages/module/patternfly-docs/generated/index.js @@ -2,8 +2,8 @@ module.exports = { '/extensions/data-view/toolbar/react': { id: "Toolbar", title: "Data view toolbar", - toc: [[{"text":"Toolbar example"}],{"text":"Toolbar actions"},[{"text":"Actions example"}],{"text":"Pagination"},[{"text":"Pagination state"},{"text":"Pagination example"}],{"text":"Selection"},[{"text":"Selection state"},{"text":"Selection example"}],{"text":"Filters"},[{"text":"Filters state"},{"text":"Filtering example"}]], - examples: ["Toolbar example","Actions example","Pagination example","Selection example","Filtering example"], + toc: [[{"text":"Toolbar example"}],{"text":"Toolbar actions"},[{"text":"Actions example"}],{"text":"Pagination"},[{"text":"Pagination state"},{"text":"Pagination example"}],{"text":"Selection"},[{"text":"Selection state"},{"text":"Selection example"}],{"text":"Filters"},[{"text":"Filters state"},{"text":"Filtering example"}],{"text":"All/selected data switch"},[{"text":"All/selected example"}]], + examples: ["Toolbar example","Actions example","Pagination example","Selection example","Filtering example","All/selected example"], section: "extensions", subsection: "Data view", source: "react", diff --git a/packages/module/src/DataViewToolbar/DataViewToolbar.tsx b/packages/module/src/DataViewToolbar/DataViewToolbar.tsx index 5410e706..6c7af333 100644 --- a/packages/module/src/DataViewToolbar/DataViewToolbar.tsx +++ b/packages/module/src/DataViewToolbar/DataViewToolbar.tsx @@ -13,13 +13,15 @@ export interface DataViewToolbarProps extends Omit = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => { +export const DataViewToolbar: React.FC = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => { const defaultClearFilters = useRef(