@patternfly/react-data-view 1.0.0-prerelease.3 → 1.0.0-prerelease.5

package/patternfly-docs/content/extensions/data-view/examples/{DataViewToolbar/DataViewToolbar.md → Components/Components.md}

@@ -5,21 +5,25 @@ section: extensions
 subsection: Data view
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: Data view toolbar
+id: Components
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
+sortValue: 4
 propComponents: ['DataViewToolbar']
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbar.md
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
 ---
+import { BulkSelect } from '@patternfly/react-component-groups';
 import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 
-The **data view toolbar** component renders a default opinionated data view toolbar.
+## Data view toolbar
 
-### Basic example
+The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section. 
+
+Data view toolbar can contain a `pagination`, `bulkSelect` or any other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
 
-Data view toolbar can display a pagination using the `pagination` property accepting a React node. You can also pass a custom `ouiaId` for testing purposes.
+### Basic example
 
 ```js file="./DataViewToolbarExample.tsx"
 

package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarExample.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BulkSelect } from '@patternfly/react-component-groups';
+import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataViewToolbar 
+    pagination={
+      <Pagination page={1} perPage={10} />
+    }
+    bulkSelect={
+      <BulkSelect
+        selectedCount={0}
+        pageCount={5}
+        onSelect={() => null}
+      />  
+    } 
+  />
+)

package/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md

@@ -0,0 +1,77 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Data view
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Functionality
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+sortValue: 3
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md
+---
+import { useMemo } from 'react';
+import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+This is a list of functionality you can use to manage data displayed in the **data view**.
+
+# Pagination
+Allows to display data records on multiple pages and display the pagination state.
+
+### Toolbar usage
+Data view toolbar can display a pagination using the `pagination` property accepting a React node. You can also pass a custom `ouiaId` for testing purposes.
+
+### Pagination state
+
+The `useDataViewPagination` hook manages the pagination state of the data view. 
+
+**Initial values:**
+- `perPage` initial value
+- (optional) `page` initial value
+
+The retrieved values are named to match the PatternFly [pagination](/components/pagination) component props, so you can easily spread them.
+
+**Return values:**
+- current `page` number
+- `onSetPage` to modify current page
+- items `perPage` value
+- `onPerPageSelect` to modify per page value
+
+### Pagination example
+```js file="./PaginationExample.tsx"
+
+```
+
+# Selection
+Allows to select data records inside the data view and show the selection state.
+
+### Toolbar usage
+Data view toolbar can display a bulk selection component using the `bulkSelect` property accepting a React node. You can make use of a predefined [bulk select](/extensions/component-groups/bulk-select) from the [component groups](/extensions/component-groups/about-component-groups) extension.
+
+### Selection state
+
+The `useDataViewSelection` hook manages the selection state of the data view. 
+
+**Initial values:**
+- (optional) `initialSelected` array of record's identifiers selected by default 
+- (optional) `matchOption` function to check if given record is selected
+
+*When no `matchOption` is passed, the `Array.prototype.includes()` operation is performed on the `selected` array.*
+
+**Return values:**
+- `selected` array of currently selected records
+- `isSelected` function returning the selection state for given record
+- `onSelect` callback to modify the selection state and accepting `isSelecting` flag indicating if records are changing to selected or deselected and `items` containing affected records 
+
+### Selection example
+
+```js file="./SelectionExample.tsx"
+
+```
+

package/patternfly-docs/content/extensions/data-view/examples/Functionality/PaginationExample.tsx

@@ -0,0 +1,65 @@
+import React, { useMemo } from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
+import { useDataViewPagination } 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';
+
+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: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
+  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
+  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
+  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
+  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
+  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+];
+
+const cols = {
+  name: 'Repositories',
+  branches: 'Branches',
+  prs: 'Pull requests',
+  workspaces: 'Workspaces',
+  lastCommit: 'Last commit'
+};
+
+const ouiaId = 'LayoutExample';
+
+export const BasicExample: React.FunctionComponent = () => { 
+  const pagination = useDataViewPagination({ perPage: 5 });
+  const { page, perPage } = pagination;
+
+  const data = useMemo(() => repositories.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
+
+  return (
+    <DataView>
+      <DataViewToolbar ouiaId='DataViewHeader' pagination={<Pagination perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+      <Table aria-label="Repositories table" ouiaId={ouiaId}>
+        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
+          <Tr ouiaId={`${ouiaId}-tr-head`}>
+            {Object.values(cols).map((column, index) => <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>)}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {data.map((repo, rowIndex) => (
+            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
+              {Object.keys(cols).map((column, colIndex) => <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>{repo[column]}</Td>)}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+      <DataViewToolbar ouiaId='DataViewFooter' pagination={<Pagination isCompact perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+    </DataView>
+  )}

package/patternfly-docs/content/extensions/data-view/examples/Functionality/SelectionExample.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [
+  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
+  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
+  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
+  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
+  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
+  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+];
+
+const cols = {
+  name: 'Repositories',
+  branches: 'Branches',
+  prs: 'Pull requests',
+  workspaces: 'Workspaces',
+  lastCommit: 'Last commit'
+};
+
+const ouiaId = 'LayoutExample';
+
+export const BasicExample: React.FunctionComponent = () => { 
+  const selection = useDataViewSelection({});
+  const { selected, onSelect, isSelected } = selection;
+
+  const handleBulkSelect = (value: BulkSelectValue) => {
+    value === BulkSelectValue.none && onSelect(false);
+    value === BulkSelectValue.all && onSelect(true, repositories);
+  };
+
+  return (
+    <DataView>
+      <DataViewToolbar 
+        ouiaId='DataViewHeader'
+        bulkSelect={
+          <BulkSelect
+            canSelectAll
+            isDataPaginated={false}
+            totalCount={repositories.length}
+            selectedCount={selected.length}
+            onSelect={handleBulkSelect}
+          />
+        } 
+      />
+      <Table aria-label="Repositories table" ouiaId={ouiaId}>
+        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
+          <Tr ouiaId={`${ouiaId}-tr-head`}>
+            <Th key="row-select"/>
+            {Object.values(cols).map((column, index) => (
+              <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {repositories.map((repo, rowIndex) => (
+            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
+              <Td
+                key={`select-${rowIndex}`}
+                select={{
+                  rowIndex,
+                  onSelect: (_event, isSelecting) => onSelect(isSelecting, repo),
+                  isSelected: isSelected(repo),
+                  isDisabled: false
+                }}
+              />
+              {Object.keys(cols).map((column, colIndex) => (
+                <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>{repo[column]}</Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </DataView>
+  );
+}

package/patternfly-docs/content/extensions/data-view/examples/{DataView/DataView.md → Layout/Layout.md}

@@ -5,15 +5,18 @@ section: extensions
 subsection: Data view
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: Data view layout
+id: Layout
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
+sortValue: 2
 propComponents: ['DataView']
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md
 ---
-import { Pagination } from '@patternfly/react-core';
+import { useMemo } from 'react';
+import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
 import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 
@@ -23,14 +26,14 @@ The **data view** component renders record data in a configured layout.
 
 Data view is expected to consist of header, data part and footer stacked below each other and passed as `children`.
 
-```js file="./DataViewLayoutExample.tsx"
+```js file="./AbstractLayoutExample.tsx"
 
 ```
 
 ### Predefined layout components
 
-You can make use of the predefined layout components to display a default header and footer. See [data view toolbar](/data-view/data-view-toolbar) for more information 
+You can make use of the predefined layout components to display a default header and footer. See [data view toolbar](/extensions/data-view/components#dataviewtoolbar) for more information 
 
-```js file="./DataViewPredefinedLayoutExample.tsx"
+```js file="./PredefinedLayoutExample.tsx"
 
 ```

package/patternfly-docs/content/extensions/data-view/examples/Layout/PredefinedLayoutExample.tsx

@@ -0,0 +1,120 @@
+import React, { useMemo } from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
+import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+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: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
+  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
+  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
+  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
+  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
+  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+];
+
+const cols = {
+  name: 'Repositories',
+  branches: 'Branches',
+  prs: 'Pull requests',
+  workspaces: 'Workspaces',
+  lastCommit: 'Last commit'
+};
+
+const ouiaId = 'LayoutExample';
+
+export const BasicExample: React.FunctionComponent = () => { 
+  const pagination = useDataViewPagination({ perPage: 5 });
+  const { page, perPage } = pagination;
+  const selection = useDataViewSelection({});
+  const { selected, onSelect, isSelected } = selection;
+
+  const pageData = useMemo(() => repositories.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
+
+  const handleBulkSelect = (value: BulkSelectValue) => {
+    value === BulkSelectValue.none && onSelect(false);
+    value === BulkSelectValue.all && onSelect(true, repositories);
+    value === BulkSelectValue.nonePage && onSelect(false, pageData);
+    value === BulkSelectValue.page && onSelect(true, pageData);
+  };
+
+  return (
+    <DataView>
+      <DataViewToolbar 
+        ouiaId='LayoutExampleHeader' 
+        bulkSelect={
+          <BulkSelect
+            canSelectAll
+            pageCount={pageData.length}
+            totalCount={repositories.length}
+            selectedCount={selected.length}
+            pageSelected={pageData.every(item => isSelected(item))}
+            pagePartiallySelected={pageData.some(item => isSelected(item)) && !pageData.every(item => isSelected(item))}
+            onSelect={handleBulkSelect}
+          />
+        } 
+        pagination={
+          <Pagination 
+            perPageOptions={perPageOptions} 
+            itemCount={repositories.length} 
+            {...pagination} 
+          />
+        } 
+      />
+      <Table aria-label="Repositories table" ouiaId={ouiaId}>
+        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
+          <Tr ouiaId={`${ouiaId}-tr-head`}>
+            <Th key="row-select"/>
+            {Object.values(cols).map((column, index) => (
+              <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {pageData.map((repo, rowIndex) => (
+            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
+              <Td
+                key={`select-${rowIndex}`}
+                select={{
+                  rowIndex,
+                  onSelect: (_event, isSelecting) => onSelect(isSelecting, repo),
+                  isSelected: isSelected(repo),
+                  isDisabled: false
+                }}
+              />
+              {Object.keys(cols).map((column, colIndex) => (
+                <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>{repo[column]}</Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+      <DataViewToolbar
+        ouiaId='LayoutExampleFooter'
+        pagination={
+          <Pagination 
+            isCompact  
+            perPageOptions={perPageOptions} 
+            itemCount={repositories.length} 
+            {...pagination} 
+          />
+        } 
+      />
+    </DataView>
+  );
+}

package/src/DataView/DataView.test.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom'
+import { render } from '@testing-library/react';
 import DataView from './DataView';
 
-describe('DataView', () => {
+const layoutItemStyling = {
+  width: '100%',
+  height: '5rem',
+  padding: 'var(--pf-t--global--spacer--md)',
+  border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
+};
 
-  it('should render data view', () => {
-    render(<DataView><>Data view content</></DataView>);
-    expect(screen.getByText('Data view content')).toBeInTheDocument();
+describe('DataView component', () => {
+  test('should render correctly', () => {
+    expect(render(
+      <DataView>
+        <div style={layoutItemStyling}>Header</div>
+        <div style={layoutItemStyling}>Data representation</div>
+        <div style={layoutItemStyling}>Footer</div>
+      </DataView>)).toMatchSnapshot();
   });
-
-});
+});

package/src/DataView/__snapshots__/DataView.test.tsx.snap

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataView component should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="pf-v6-l-stack"
+        data-ouia-component-id="DataView-stack}"
+      >
+        <div
+          class="pf-v6-l-stack__item"
+          data-ouia-component-id="DataView-stack-item-0"
+        >
+          <div
+            style="width: 100%; height: 5rem;"
+          >
+            Header
+          </div>
+        </div>
+        <div
+          class="pf-v6-l-stack__item"
+          data-ouia-component-id="DataView-stack-item-1"
+        >
+          <div
+            style="width: 100%; height: 5rem;"
+          >
+            Data representation
+          </div>
+        </div>
+        <div
+          class="pf-v6-l-stack__item"
+          data-ouia-component-id="DataView-stack-item-2"
+        >
+          <div
+            style="width: 100%; height: 5rem;"
+          >
+            Footer
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="pf-v6-l-stack"
+      data-ouia-component-id="DataView-stack}"
+    >
+      <div
+        class="pf-v6-l-stack__item"
+        data-ouia-component-id="DataView-stack-item-0"
+      >
+        <div
+          style="width: 100%; height: 5rem;"
+        >
+          Header
+        </div>
+      </div>
+      <div
+        class="pf-v6-l-stack__item"
+        data-ouia-component-id="DataView-stack-item-1"
+      >
+        <div
+          style="width: 100%; height: 5rem;"
+        >
+          Data representation
+        </div>
+      </div>
+      <div
+        class="pf-v6-l-stack__item"
+        data-ouia-component-id="DataView-stack-item-2"
+      >
+        <div
+          style="width: 100%; height: 5rem;"
+        >
+          Footer
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

package/src/DataViewToolbar/DataViewToolbar.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataViewToolbar from './DataViewToolbar';
+import { Pagination } from '@patternfly/react-core';
+
+describe('DataViewToolbar component', () => {
+  test('should render correctly', () => {
+    expect(render(
+      <DataViewToolbar pagination={<Pagination page={1} perPage={10} />} />)).toMatchSnapshot();
+  });
+});

package/src/DataViewToolbar/DataViewToolbar.tsx

@@ -1,21 +1,27 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
 
-export interface DataViewToolbarProps {
+export interface DataViewToolbarProps extends PropsWithChildren {
   /** Toolbar className */
   className?: string;
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** React component to display bulk select */
+  bulkSelect?: React.ReactNode;
   /** React component to display pagination */
   pagination?: React.ReactNode;
 }
 
-export const DataViewToolbar: React.FC<React.PropsWithChildren<DataViewToolbarProps>> = ({ className, ouiaId = 'DataViewToolbar', pagination, children, ...props }: React.PropsWithChildren<DataViewToolbarProps>) => (
+export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, pagination, children, ...props }: DataViewToolbarProps) => (
   <Toolbar ouiaId={ouiaId} className={className} {...props}>
     <ToolbarContent>
+      {bulkSelect && (
+        <ToolbarItem data-ouia-component-id={`${ouiaId}-bulk-select`}>
+          {bulkSelect}
+        </ToolbarItem>
+      )}
       {pagination && (
-        <ToolbarItem variant={ToolbarItemVariant.pagination}>
-          { /* TO DO: Make the pagination work later */ }
+        <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
           {pagination}
         </ToolbarItem>
       )}
@@ -25,3 +31,4 @@ export const DataViewToolbar: React.FC<React.PropsWithChildren<DataViewToolbarPr
 );
 
 export default DataViewToolbar;
+