Skip to content

feat: Adding expand all/collapse all functionality for nested columns #1888

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 7, 2022
Merged

feat: Adding expand all/collapse all functionality for nested columns #1888

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7b1cb0e
Adding expand all/collapse all functionality for nested columns
kristenarmes Jun 6, 2022
e63ecc1
Updating icon and other PR comments
kristenarmes Jun 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/amundsen_application/static/.betterer.results
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -652,9 +652,9 @@ exports[`eslint`] = {
"js/pages/TableDetailPage/WatermarkLabel/index.tsx:2189911402": [
[29, 22, 21, "Must use destructuring props assignment", "587844958"]
],
"js/pages/TableDetailPage/index.tsx:953038643": [
[160, 2, 20, "key should be placed after componentDidUpdate", "3916788587"],
[206, 6, 13, "Do not use setState in componentDidUpdate", "57229240"]
"js/pages/TableDetailPage/index.tsx:105919838": [
[161, 2, 20, "key should be placed after componentDidUpdate", "3916788587"],
[208, 6, 13, "Do not use setState in componentDidUpdate", "57229240"]
],
"js/utils/textUtils.ts:2545492889": [
[19, 6, 46, "Unexpected lexical declaration in case block.", "156477898"]
Expand Down
340 changes: 265 additions & 75 deletions frontend/amundsen_application/static/js/components/Table/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ const formatChildrenDataMock = jest.fn().mockImplementation((rowValue) => ({
kind: rowValue.kind,
children: rowValue.children,
}));
const hasRowsToExpandMock = jest.fn().mockReturnValue(true);
const hasNoRowsToExpandMock = jest.fn().mockReturnValue(false);

const setup = (propOverrides?: Partial<TableProps>) => {
const { data, columns } = dataBuilder.build();
Expand Down Expand Up @@ -212,22 +214,52 @@ describe('Table', () => {
describe('when the data has nested children', () => {
const { columns, data } = dataBuilder.withCollapsedRow().build();

it('displays the expected specific type rows', () => {
const { wrapper } = setup({
data,
columns,
options: {
formatChildrenData: formatChildrenDataMock,
maxNumRows: 20,
},
describe('table body', () => {
it('renders expansion buttons for rows that are expandable', () => {
const { wrapper } = setup({
data,
columns,
});
const expected = data.filter((item) => item.isExpandable === true)
.length;
const actual = wrapper.find(
'.ams-table-body .ams-table-expanding-button'
).length;

expect(actual).toEqual(expected);
});

// The child rows include one array, one map, and one map within an array
// (multiplied by 2 for opener and closer)
const expected = 6;
const actual = wrapper.find('.is-specific-type-row').length;
describe('expanded row', () => {
it('renders hidden by default', () => {
const { wrapper } = setup({
data,
columns,
});
const expected = data.length;
const actual = wrapper.find('.ams-table-body .ams-table-row')
.length;

expect(actual).toEqual(expected);
expect(actual).toEqual(expected);
});
});

it('displays the expected specific type rows', () => {
const { wrapper } = setup({
data,
columns,
options: {
formatChildrenData: formatChildrenDataMock,
maxNumRows: 20,
},
});

// The child rows include one array, one map, and one map within an array
// (multiplied by 2 for opener and closer)
const expected = 6;
const actual = wrapper.find('.is-specific-type-row').length;

expect(actual).toEqual(expected);
});
});
});
});
Expand Down Expand Up @@ -596,66 +628,6 @@ describe('Table', () => {
});
});

describe('when a row is expandable', () => {
const { columns, data } = dataBuilder.withCollapsedRow().build();

describe('table header', () => {
it('renders a table header', () => {
const { wrapper } = setup({
data,
columns,
});
const expected = 1;
const actual = wrapper.find('.ams-table-header').length;

expect(actual).toEqual(expected);
});

it('renders the same amount of cells equal to columns length inside the header', () => {
const { wrapper } = setup({
data,
columns,
});
const expected = columns.length;
const actual = wrapper.find(
'.ams-table-header .ams-table-heading-cell'
).length;

expect(actual).toEqual(expected);
});
});

describe('table body', () => {
it('renders expansion buttons for rows that are expandable', () => {
const { wrapper } = setup({
data,
columns,
});
const expected = data.filter((item) => item.isExpandable === true)
.length;
const actual = wrapper.find(
'.ams-table-body .ams-table-expanding-button'
).length;

expect(actual).toEqual(expected);
});

describe('expanded row', () => {
it('renders hidden by default', () => {
const { wrapper } = setup({
data,
columns,
});
const expected = data.length;
const actual = wrapper.find('.ams-table-body .ams-table-row')
.length;

expect(actual).toEqual(expected);
});
});
});
});

describe('when emptyMessage is passed', () => {
const { columns, data } = dataBuilder.withEmptyData().build();
const TEST_EMPTY_MESSAGE = 'Test Empty Message';
Expand Down Expand Up @@ -837,15 +809,233 @@ describe('Table', () => {
});
});
});

describe('when shouldExpandAllRows is passed', () => {
const { columns, data } = dataBuilder.withCollapsedRow().build();

describe('when shouldExpandAllRows is true', () => {
it('displays the up icon in the header to collapse all rows', () => {
const { wrapper } = setup({
data,
columns,
options: {
shouldExpandAllRows: true,
hasRowsToExpand: hasRowsToExpandMock,
},
});

const expected = 1;
const actual = wrapper
.find(
'.ams-table-header .ams-table-heading-cell .ams-table-expanding-button'
)
.findWhere((node) => node.key() === 'collapseAllIcon').length;

expect(actual).toEqual(expected);
});
});

describe('when shouldExpandAllRows is undefined', () => {
it('displays the up icon in the header to collapse all rows', () => {
const { wrapper } = setup({
data,
columns,
options: {
shouldExpandAllRows: undefined,
hasRowsToExpand: hasRowsToExpandMock,
},
});

const expected = 1;
const actual = wrapper
.find(
'.ams-table-header .ams-table-heading-cell .ams-table-expanding-button'
)
.findWhere((node) => node.key() === 'collapseAllIcon').length;

expect(actual).toEqual(expected);
});
});

describe('when shouldExpandAllRows is false', () => {
it('displays the down icon in the header to expand all rows', () => {
const { wrapper } = setup({
data,
columns,
options: {
shouldExpandAllRows: false,
hasRowsToExpand: hasRowsToExpandMock,
},
});

const expected = 1;
const actual = wrapper
.find(
'.ams-table-header .ams-table-heading-cell .ams-table-expanding-button'
)
.findWhere((node) => node.key() === 'expandAllIcon').length;

expect(actual).toEqual(expected);
});
});
});

describe('when hasRowsToExpand is passed', () => {
const { columns, data } = dataBuilder.withCollapsedRow().build();

describe('when there are no expandable rows', () => {
it('does not render an expand/collapse all button in the first header cell', () => {
const { wrapper } = setup({
data,
columns,
options: {
hasRowsToExpand: hasNoRowsToExpandMock,
},
});

const expected = 0;
const actual = wrapper.find(
'.ams-table-header .ams-table-heading-cell .ams-table-expanding-button'
).length;

expect(actual).toEqual(expected);
});
});

describe('when there are expandable rows', () => {
it('renders an expand/collapse all button in the first header cell', () => {
const { wrapper } = setup({
data,
columns,
options: {
hasRowsToExpand: hasRowsToExpandMock,
},
});

const expected = 1;
const actual = wrapper.find(
'.ams-table-header .ams-table-heading-cell .ams-table-expanding-button'
).length;

expect(actual).toEqual(expected);
});
});
});
});
});

describe('lifetime', () => {
describe('when collapsing and expanding rows', () => {
describe('when collapsing and expanding all rows', () => {
const { columns, data } = dataBuilder.withCollapsedRow().build();

describe('when clicking on button to collapse all', () => {
it('hides all child rows', () => {
const { wrapper } = setup({
data,
columns,
options: {
hasRowsToExpand: hasRowsToExpandMock,
formatChildrenData: formatChildrenDataMock,
maxNumRows: 20,
},
});

const mockToggleExpandingRows = jest.fn().mockImplementation(() => {
const currentShouldExpandAllRows = wrapper.props().options
?.shouldExpandAllRows;

wrapper.setProps({
options: {
...wrapper.props().options,
shouldExpandAllRows: !(
currentShouldExpandAllRows ||
currentShouldExpandAllRows === undefined
),
},
});
});
wrapper.setProps({
options: {
...wrapper.props().options,
toggleExpandingRows: mockToggleExpandingRows,
},
});

const expected = data.length;

wrapper
.find(
'.ams-table-header .ams-table-heading-cell .ams-table-expanding-button'
)
.at(0)
.simulate('click');

const actual = wrapper
.find('.ams-table-body .ams-table-row')
.not('.is-specific-type-row').length;

expect(actual).toEqual(expected);
});

describe('when clicking again to expand all', () => {
it('shows all child rows', () => {
const { wrapper } = setup({
data,
columns,
options: {
hasRowsToExpand: hasRowsToExpandMock,
formatChildrenData: formatChildrenDataMock,
maxNumRows: 20,
},
});

const mockToggleExpandingRows = jest.fn().mockImplementation(() => {
const currentShouldExpandAllRows = wrapper.props().options
?.shouldExpandAllRows;

wrapper.setProps({
options: {
...wrapper.props().options,
shouldExpandAllRows: !(
currentShouldExpandAllRows ||
currentShouldExpandAllRows === undefined
),
},
});
});
wrapper.setProps({
options: {
...wrapper.props().options,
toggleExpandingRows: mockToggleExpandingRows,
},
});

// 8 total child rows
const expected = data.length + 8;

wrapper
.find(
'.ams-table-header .ams-table-heading-cell .ams-table-expanding-button'
)
.at(0)
.simulate('click')
.simulate('click');

const actual = wrapper
.find('.ams-table-body .ams-table-row')
.not('.is-specific-type-row').length;

expect(actual).toEqual(expected);
});
});
});
});

describe('when collapsing and expanding individual rows', () => {
const { columns, data } = dataBuilder.withCollapsedRow().build();

describe('when clicking on collapse button', () => {
it('hide the expanded rows', () => {
it('hides the expanded rows', () => {
const { wrapper } = setup({
data,
columns,
Expand Down
Loading