Skip to content

Commit 6918706

Browse files
fhlavacfhlavac
authored
Merge pull request #28 from fhlavac/main
Pull in new features from the v5 branch
2 parents a85a623 + 3b9b951 commit 6918706

File tree

61 files changed

+11076
-4547
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+11076
-4547
lines changed

‎cypress.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export default defineConfig({
1313
},
1414

1515
component: {
16+
viewportHeight: 1024,
17+
viewportWidth: 1400,
1618
devServer: {
1719
framework: "react",
1820
bundler: "webpack",

‎cypress/component/DataView.cy.tsx‎

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

88
interface Repository {
99
name: string;
@@ -19,21 +19,16 @@ const PAGINATION = {
1919
}
2020

2121
const repositories: Repository[] = [
22-
{ name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
23-
{ name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
24-
{ name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
25-
{ name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
26-
{ name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
27-
{ name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
22+
{ name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
23+
{ name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
24+
{ name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
25+
{ name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
26+
{ name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
27+
{ name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
2828
];
29+
const rows = repositories.map(item => Object.values(item));
2930

30-
const cols: Record<keyof Repository, string> = {
31-
name: 'Repositories',
32-
branches: 'Branches',
33-
prs: 'Pull requests',
34-
workspaces: 'Workspaces',
35-
lastCommit: 'Last commit'
36-
};
31+
const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
3732

3833
describe('DataView', () => {
3934
it('renders the data view layout', () => {
@@ -61,24 +56,7 @@ describe('DataView', () => {
6156
/>
6257
}
6358
/>
64-
<Table aria-label="Repositories table" ouiaId={ouiaId}>
65-
<Thead data-ouia-component-id={`${ouiaId}-thead`}>
66-
<Tr ouiaId={`${ouiaId}-tr-head`}>
67-
{Object.values(cols).map((column, index) => <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>)}
68-
</Tr>
69-
</Thead>
70-
<Tbody>
71-
{repositories.map((repo, rowIndex) => (
72-
<Tr key={repo.name}>
73-
<Td data-ouia-component-id={`${ouiaId}-td-${rowIndex}-name`} dataLabel={cols.name}>{repo.name}</Td>
74-
<Td data-ouia-component-id={`${ouiaId}-td-${rowIndex}-branches`} dataLabel={cols.branches}>{repo.branches}</Td>
75-
<Td data-ouia-component-id={`${ouiaId}-td-${rowIndex}-prs`} dataLabel={cols.prs}>{repo.prs}</Td>
76-
<Td data-ouia-component-id={`${ouiaId}-td-${rowIndex}-workspaces`} dataLabel={cols.workspaces}>{repo.workspaces}</Td>
77-
<Td data-ouia-component-id={`${ouiaId}-td-${rowIndex}-last-commit`} dataLabel={cols.lastCommit}>{repo.lastCommit}</Td>
78-
</Tr>
79-
))}
80-
</Tbody>
81-
</Table>
59+
<DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
8260
<DataViewToolbar ouiaId="DataViewFooter" pagination={<Pagination isCompact {...PAGINATION} />} />
8361
</DataView>
8462
);
@@ -91,11 +69,11 @@ describe('DataView', () => {
9169
cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
9270
cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
9371

94-
cy.get('[data-ouia-component-id="data-td-0-name"]').contains('one');
95-
cy.get('[data-ouia-component-id="data-td-2-branches"]').contains('two - 3');
96-
cy.get('[data-ouia-component-id="data-td-3-prs"]').contains('null');
97-
cy.get('[data-ouia-component-id="data-td-4-workspaces"]').contains('four - 5');
98-
cy.get('[data-ouia-component-id="data-td-5-last-commit"]').contains('five - 6');
72+
cy.get('[data-ouia-component-id="data-td-0-0"]').contains('Repository one');
73+
cy.get('[data-ouia-component-id="data-td-2-1"]').contains('Branch three');
74+
cy.get('[data-ouia-component-id="data-td-3-2"]').contains('Pull request four');
75+
cy.get('[data-ouia-component-id="data-td-4-3"]').contains('Workspace five');
76+
cy.get('[data-ouia-component-id="data-td-5-4"]').contains('Timestamp six');
9977

10078
cy.get('[data-ouia-component-id="DataViewFooter-pagination"]').should('exist');
10179
});

‎cypress/component/DataViewTable.cy.tsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import React from 'react';
2+
import { DataViewTable, DataViewTrTree } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
3+
4+
interface Repository {
5+
name: string;
6+
branches: string | null;
7+
prs: string | null;
8+
workspaces: string;
9+
lastCommit: string;
10+
children?: Repository[];
11+
}
12+
13+
const repositories: Repository[] = [
14+
{ name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
15+
{ name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
16+
{ name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
17+
{ name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
18+
{ name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
19+
{ name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
20+
];
21+
const rows = repositories.map(item => Object.values(item));
22+
23+
const repositoriesTree: Repository[] = [
24+
{
25+
name: 'Repository one',
26+
branches: 'Branch one',
27+
prs: 'Pull request one',
28+
workspaces: 'Workspace one',
29+
lastCommit: 'Timestamp one',
30+
children: [
31+
{ name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
32+
{ name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
33+
]
34+
},
35+
{
36+
name: 'Repository four',
37+
branches: 'Branch four',
38+
prs: 'Pull request four',
39+
workspaces: 'Workspace four',
40+
lastCommit: 'Timestamp four',
41+
children: [ { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' } ]
42+
},
43+
{ name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
44+
];
45+
46+
47+
48+
const buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories.map((repo) => ({
49+
row: [ repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit ],
50+
id: repo.name, // unique ID for each row
51+
...(repo.children
52+
? {
53+
children: buildRows(repo.children) // build rows for children
54+
}
55+
: {})
56+
}));
57+
58+
const treeRows = buildRows(repositoriesTree);
59+
60+
const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
61+
62+
describe('DataViewTable', () => {
63+
64+
it('renders a basic data view table', () => {
65+
const ouiaId = 'data';
66+
67+
cy.mount(
68+
<DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
69+
);
70+
71+
cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
72+
cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');
73+
cy.get('[data-ouia-component-id="data-th-2"]').contains('Pull requests');
74+
cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
75+
cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
76+
77+
cy.get('[data-ouia-component-id="data-td-0-0"]').contains('Repository one');
78+
cy.get('[data-ouia-component-id="data-td-2-1"]').contains('Branch three');
79+
cy.get('[data-ouia-component-id="data-td-3-2"]').contains('Pull request four');
80+
cy.get('[data-ouia-component-id="data-td-4-3"]').contains('Workspace five');
81+
cy.get('[data-ouia-component-id="data-td-5-4"]').contains('Timestamp six');
82+
});
83+
84+
it('renders a tree data view table', () => {
85+
const ouiaId = 'tree';
86+
87+
cy.mount(
88+
<DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={treeRows} />
89+
);
90+
91+
cy.get('[data-ouia-component-id="tree-td-0-0"]')
92+
.should('exist')
93+
.find('button')
94+
.should('have.length', 2);
95+
96+
cy.get('[data-ouia-component-id="tree-td-3-0"]')
97+
.should('exist')
98+
.find('button')
99+
.should('have.length', 2);
100+
101+
cy.get('[data-ouia-component-id="tree-td-5-0"]')
102+
.should('exist')
103+
.find('button')
104+
.should('have.length', 1);
105+
106+
cy.get('[data-ouia-component-id="tree-th-0"]').contains('Repositories');
107+
cy.get('[data-ouia-component-id="tree-th-1"]').contains('Branches');
108+
cy.get('[data-ouia-component-id="tree-th-2"]').contains('Pull requests');
109+
cy.get('[data-ouia-component-id="tree-th-3"]').contains('Workspaces');
110+
cy.get('[data-ouia-component-id="tree-th-4"]').contains('Last commit');
111+
112+
cy.get('[data-ouia-component-id="tree-td-0-0"]').contains('Repository one');
113+
cy.get('[data-ouia-component-id="tree-td-0-0"]').should('be.visible');
114+
cy.get('[data-ouia-component-id="tree-td-2-1"]').contains('Branch three');
115+
cy.get('[data-ouia-component-id="tree-td-2-1"]').should('not.be.visible');
116+
cy.get('[data-ouia-component-id="tree-td-3-2"]').contains('Pull request four');
117+
cy.get('[data-ouia-component-id="tree-td-4-3"]').contains('Workspace five');
118+
cy.get('[data-ouia-component-id="tree-td-4-3"]').should('not.be.visible');
119+
cy.get('[data-ouia-component-id="tree-td-5-4"]').contains('Timestamp six');
120+
cy.get('[data-ouia-component-id="tree-td-5-4"]').should('be.visible');
121+
});
122+
});

‎cypress/component/DataViewTableBasic.cy.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React from 'react';
2+
import { DataViewTableBasic } from '@patternfly/react-data-view/dist/dynamic/DataViewTableBasic';
3+
import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
4+
5+
interface Repository {
6+
name: string;
7+
branches: string | null;
8+
prs: string | null;
9+
workspaces: string;
10+
lastCommit: string;
11+
children?: Repository[];
12+
}
13+
14+
const repositories: Repository[] = [
15+
{ name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
16+
{ name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
17+
{ name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
18+
{ name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
19+
{ name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
20+
{ name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
21+
];
22+
const rows = repositories.map(item => Object.values(item));
23+
24+
const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
25+
26+
describe('DataViewTableBasic', () => {
27+
28+
it('renders a basic data view table', () => {
29+
const ouiaId = 'data';
30+
31+
cy.mount(
32+
<DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
33+
);
34+
35+
cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
36+
cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');
37+
cy.get('[data-ouia-component-id="data-th-2"]').contains('Pull requests');
38+
cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
39+
cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
40+
41+
cy.get('[data-ouia-component-id="data-td-0-0"]').contains('Repository one');
42+
cy.get('[data-ouia-component-id="data-td-2-1"]').contains('Branch three');
43+
cy.get('[data-ouia-component-id="data-td-3-2"]').contains('Pull request four');
44+
cy.get('[data-ouia-component-id="data-td-4-3"]').contains('Workspace five');
45+
cy.get('[data-ouia-component-id="data-td-5-4"]').contains('Timestamp six');
46+
});
47+
48+
it('renders a basic data view table with an empty state', () => {
49+
const ouiaId = 'data';
50+
51+
cy.mount(
52+
<DataView activeState="empty">
53+
<DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ empty: <div data-ouia-component-id="data-tr-empty">No data found</div> }} />
54+
</DataView>
55+
);
56+
57+
cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
58+
cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');
59+
cy.get('[data-ouia-component-id="data-th-2"]').contains('Pull requests');
60+
cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
61+
cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
62+
63+
cy.get('[data-ouia-component-id="data-tr-empty"]').should('be.visible');
64+
cy.get('[data-ouia-component-id="data-tr-empty"]').contains('No data found');
65+
});
66+
67+
it('renders a basic data view table with an error state', () => {
68+
const ouiaId = 'data';
69+
70+
cy.mount(
71+
<DataView activeState="error">
72+
<DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ error: <div data-ouia-component-id="data-tr-error">Some error</div> }} />
73+
</DataView>
74+
);
75+
76+
cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
77+
cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');
78+
cy.get('[data-ouia-component-id="data-th-2"]').contains('Pull requests');
79+
cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
80+
cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
81+
82+
cy.get('[data-ouia-component-id="data-tr-error"]').should('be.visible');
83+
cy.get('[data-ouia-component-id="data-tr-error"]').contains('Some error');
84+
});
85+
86+
it('renders a basic data view table with a loading state', () => {
87+
const ouiaId = 'data';
88+
89+
cy.mount(
90+
<DataView activeState="loading">
91+
<DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ loading: <div data-ouia-component-id="data-tr-loading">Data is loading</div> }} />
92+
</DataView>
93+
);
94+
95+
cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
96+
cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');
97+
cy.get('[data-ouia-component-id="data-th-2"]').contains('Pull requests');
98+
cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
99+
cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
100+
101+
cy.get('[data-ouia-component-id="data-tr-loading"]').should('be.visible');
102+
cy.get('[data-ouia-component-id="data-tr-loading"]').contains('Data is loading');
103+
});
104+
105+
});

‎cypress/component/DataViewTableHead.cy.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 { DataViewTableHead } from '@patternfly/react-data-view/dist/dynamic/DataViewTableHead';
3+
4+
const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
5+
6+
describe('DataViewTableHead', () => {
7+
8+
it('renders a data view table head', () => {
9+
const ouiaId = 'data';
10+
11+
cy.mount(
12+
<DataViewTableHead ouiaId={ouiaId} columns={columns} />
13+
);
14+
15+
cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
16+
cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');
17+
cy.get('[data-ouia-component-id="data-th-2"]').contains('Pull requests');
18+
cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
19+
cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
20+
});
21+
});

0 commit comments

Comments
 (0)