Skip to content

Commit 0973672

Browse files
fhlavacfhlavac
authored
Merge pull request #9 from fhlavac/selection
Add selection to DataView
2 parents 5d3c5f6 + e3461eb commit 0973672

32 files changed

Lines changed: 2149 additions & 1261 deletions

‎cypress/component/DataView.cy.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
22
import { Pagination } from '@patternfly/react-core';
33
import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
4+
import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
45
import DataView from '../../packages/module/dist/dynamic/DataView';
5-
import DataViewToolbar from '../../packages/module/dist/esm/DataViewToolbar';
6+
import DataViewToolbar from '../../packages/module/dist/dynamic/DataViewToolbar';
67

78
interface Repository {
89
name: string;
@@ -45,7 +46,21 @@ describe('DataView', () => {
4546

4647
cy.mount(
4748
<DataView>
48-
<DataViewToolbar pagination={<Pagination {...PAGINATION} ouiaId="DataViewToolbar-pagination" />} />
49+
<DataViewToolbar
50+
ouiaId="DataViewToolbar"
51+
pagination={<Pagination {...PAGINATION} />}
52+
bulkSelect={
53+
<BulkSelect
54+
canSelectAll
55+
pageCount={5}
56+
totalCount={10}
57+
selectedCount={2}
58+
pageSelected={false}
59+
pagePartiallySelected={true}
60+
onSelect={() => null}
61+
/>
62+
}
63+
/>
4964
<Table aria-label="Repositories table" ouiaId={ouiaId}>
5065
<Thead data-ouia-component-id={`${ouiaId}-thead`}>
5166
<Tr ouiaId={`${ouiaId}-tr-head`}>
@@ -64,10 +79,11 @@ describe('DataView', () => {
6479
))}
6580
</Tbody>
6681
</Table>
67-
<DataViewToolbar pagination={<Pagination isCompact {...PAGINATION} ouiaId="DataViewFooter-pagination" />} ouiaId="DataViewFooter" />
82+
<DataViewToolbar ouiaId="DataViewFooter" pagination={<Pagination isCompact {...PAGINATION} />} />
6883
</DataView>
6984
);
7085
cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist');
86+
cy.get('[data-ouia-component-id="DataViewToolbar-bulk-select"]').should('exist');
7187

7288
cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
7389
cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');

‎cypress/component/DataViewToolbar.cy.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
import React from 'react';
22
import { Pagination } from '@patternfly/react-core';
3+
import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
34
import DataViewToolbar from '../../packages/module/dist/dynamic/DataViewToolbar';
45

56
describe('DataViewToolbar', () => {
67
it('renders the data view toolbar', () => {
7-
cy.mount(<DataViewToolbar pagination={<Pagination page={1} perPage={10} ouiaId="DataViewToolbar-pagination" />} />)
8+
cy.mount(<DataViewToolbar pagination={<Pagination page={1} perPage={10} />}
9+
bulkSelect={
10+
<BulkSelect
11+
canSelectAll
12+
pageCount={5}
13+
totalCount={10}
14+
selectedCount={2}
15+
pageSelected={false}
16+
pagePartiallySelected={true}
17+
onSelect={() => null}
18+
/>
19+
}
20+
/>)
821
cy.get('[data-ouia-component-id="DataViewToolbar"]').should('exist');
922
cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist');
23+
cy.get('[data-ouia-component-id="DataViewToolbar-bulk-select"]').should('exist');
1024
});
1125
});

‎cypress/e2e/DataView.spec.cy.ts‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ describe('Test the Data view docs page', () => {
33
it('displays a layout with a table and paginates', () => {
44
const ouiaId = 'LayoutExample';
55

6-
cy.visit('http://localhost:8006/extensions/data-view/data-view-layout');
6+
cy.visit('http://localhost:8006/extensions/data-view/layout');
77

88
cy.get(`[data-ouia-component-id="${ouiaId}Header-pagination"]`).should('exist');
9+
cy.get(`[data-ouia-component-id="${ouiaId}Header-bulk-select"]`).should('exist');
910

1011
cy.get(`[data-ouia-component-id="${ouiaId}Footer-pagination"]`).should('exist');
12+
cy.get(`[data-ouia-component-id="${ouiaId}Footer-bulk-select"]`).should('not.exist');
1113

1214
cy.get(`[data-ouia-component-id="${ouiaId}-th-0"]`).contains('Repositories');
1315
cy.get(`[data-ouia-component-id="${ouiaId}-th-4"]`).contains('Last commit');
@@ -23,5 +25,35 @@ describe('Test the Data view docs page', () => {
2325
// move to previous page
2426
cy.get(`[data-action="previous"`).eq(1).click({ force: true });
2527
cy.get(`[data-ouia-component-id="${ouiaId}-td-0-4"]`).contains('five');
28+
29+
// test bulk select
30+
cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('not.be.checked')});
31+
32+
// page checkbox select
33+
cy.get(`[data-ouia-component-id="BulkSelect-checkbox"`).first().click();
34+
cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
35+
cy.contains('5 selected').should('exist');
36+
37+
// select none
38+
cy.get(`[data-ouia-component-id="BulkSelect-toggle"`).first().click({ force: true });
39+
cy.get(`[data-ouia-component-id="BulkSelect-select-none"`).first().click();
40+
cy.contains('5 selected').should('not.exist');
41+
42+
// select all
43+
cy.get(`[data-ouia-component-id="BulkSelect-toggle"`).first().click({ force: true });
44+
cy.get(`[data-ouia-component-id="BulkSelect-select-all"`).first().click();
45+
cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
46+
cy.contains('6 selected').should('exist');
47+
48+
// page checkbox deselect
49+
cy.get(`[data-ouia-component-id="BulkSelect-checkbox"`).first().click();
50+
cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('not.be.checked')});
51+
cy.contains('1 selected').should('exist');
52+
53+
// select page
54+
cy.get(`[data-ouia-component-id="BulkSelect-toggle"`).first().click({ force: true });
55+
cy.get(`[data-ouia-component-id="BulkSelect-select-page"`).first().click();
56+
cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
57+
cy.contains('6 selected').should('exist');
2658
})
27-
})
59+
});

‎fed-mini-modules.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
const fse = require('fs-extra');
2-
const glob = require('glob');
2+
const { globSync } = require('glob');
33
const path = require('path');
44

55
const root = process.cwd();
66

7-
const sourceFiles = glob
8-
.sync(`${root}/src/*/`)
7+
const sourceFiles = globSync(`${root}/src/*/`)
98
.map((name) => name.replace(/\/$/, ''));
109

11-
const indexTypings = glob.sync(`${root}/src/index.d.ts`);
10+
const indexTypings = globSync(`${root}/src/index.d.ts`);
1211

1312
async function copyTypings(files, dest) {
1413
const cmds = [];
@@ -21,7 +20,7 @@ async function copyTypings(files, dest) {
2120

2221
async function createPackage(file) {
2322
const fileName = file.split('/').pop();
24-
const esmSource = glob.sync(`${root}/esm/${fileName}/**/index.js`)[0];
23+
const esmSource = globSync(`${root}/esm/${fileName}/**/index.js`)[0];
2524
/**
2625
* Prevent creating package.json for directories with no JS files (like CSS directories)
2726
*/
@@ -36,7 +35,7 @@ async function createPackage(file) {
3635
main: 'index.js',
3736
module: esmRelative,
3837
};
39-
const typings = glob.sync(`${root}/src/${fileName}/*.d.ts`);
38+
const typings = globSync(`${root}/src/${fileName}/*.d.ts`);
4039
const cmds = [];
4140
content.typings = 'index.d.ts';
4241
cmds.push(copyTypings(typings, `${root}/${fileName}`));
@@ -56,6 +55,7 @@ async function run(files) {
5655
copyTypings(indexTypings, root);
5756
}
5857
} catch (error) {
58+
// eslint-disable-next-line no-console
5959
console.error(error);
6060
process.exit(1);
6161
}

0 commit comments

Comments
 (0)