Skip to content

Commit 8c14e4c

Browse files
fhlavacfhlavac
authored
Merge pull request #19 from fhlavac/tree
Support Tree Table in DataView
2 parents d8900b3 + a7db24b commit 8c14e4c

32 files changed

+3258
-195
lines changed

‎cypress/component/DataView.cy.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ 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
];
2929
const rows = repositories.map(item => Object.values(item));
3030

@@ -69,11 +69,11 @@ describe('DataView', () => {
6969
cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
7070
cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
7171

72-
cy.get('[data-ouia-component-id="data-td-0-0"]').contains('one');
73-
cy.get('[data-ouia-component-id="data-td-2-1"]').contains('two - 3');
74-
cy.get('[data-ouia-component-id="data-td-3-2"]').contains('null');
75-
cy.get('[data-ouia-component-id="data-td-4-3"]').contains('four - 5');
76-
cy.get('[data-ouia-component-id="data-td-5-4"]').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');
7777

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

‎cypress/component/DataViewTable.cy.tsx‎

Lines changed: 90 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,67 @@
11
import React from 'react';
2-
import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
2+
import { DataViewTable, DataViewTrTree } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
33

44
interface Repository {
55
name: string;
66
branches: string | null;
77
prs: string | null;
88
workspaces: string;
99
lastCommit: string;
10+
children?: Repository[];
1011
}
1112

1213
const repositories: Repository[] = [
13-
{ name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
14-
{ name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
15-
{ name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
16-
{ name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
17-
{ name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
18-
{ name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
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' }
1920
];
2021
const rows = repositories.map(item => Object.values(item));
2122

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+
2260
const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
2361

2462
describe('DataViewTable', () => {
2563

26-
it('renders the data view table', () => {
64+
it('renders a basic data view table', () => {
2765
const ouiaId = 'data';
2866

2967
cy.mount(
@@ -36,10 +74,49 @@ describe('DataViewTable', () => {
3674
cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
3775
cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
3876

39-
cy.get('[data-ouia-component-id="data-td-0-0"]').contains('one');
40-
cy.get('[data-ouia-component-id="data-td-2-1"]').contains('two - 3');
41-
cy.get('[data-ouia-component-id="data-td-3-2"]').contains('null');
42-
cy.get('[data-ouia-component-id="data-td-4-3"]').contains('four - 5');
43-
cy.get('[data-ouia-component-id="data-td-5-4"]').contains('five - 6');
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('not.be.visible');
44121
});
45122
});

‎cypress/component/DataViewTableBasic.cy.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import DataViewTableBasic from '@patternfly/react-data-view/dist/esm/DataViewTableBasic';
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 columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
24+
25+
describe('DataViewTableBasic', () => {
26+
27+
it('renders a basic data view table', () => {
28+
const ouiaId = 'data';
29+
30+
cy.mount(
31+
<DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
32+
);
33+
34+
cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
35+
cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');
36+
cy.get('[data-ouia-component-id="data-th-2"]').contains('Pull requests');
37+
cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
38+
cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
39+
40+
cy.get('[data-ouia-component-id="data-td-0-0"]').contains('Repository one');
41+
cy.get('[data-ouia-component-id="data-td-2-1"]').contains('Branch three');
42+
cy.get('[data-ouia-component-id="data-td-3-2"]').contains('Pull request four');
43+
cy.get('[data-ouia-component-id="data-td-4-3"]').contains('Workspace five');
44+
cy.get('[data-ouia-component-id="data-td-5-4"]').contains('Timestamp six');
45+
});
46+
});

‎cypress/component/DataViewTableHeader.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 { DataViewTableHeader } from '@patternfly/react-data-view/dist/dynamic/DataViewTableHeader';
3+
4+
const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
5+
6+
describe('DataViewTableHeader', () => {
7+
8+
it('renders a data view table header', () => {
9+
const ouiaId = 'data';
10+
11+
cy.mount(
12+
<DataViewTableHeader 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+
});

‎cypress/component/DataViewTableTree.cy.tsx‎

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

0 commit comments

Comments
 (0)