Skip to content

Commit

Permalink
[Dashboard] new listview filters & emotion infra (#9462)
Browse files Browse the repository at this point in the history 
* [Dashboard] listview filters to match new design

* use title_or_slug filter

* use ?. operator

* move components to components folder
  • Loading branch information
@nytai
nytai authored Apr 13, 2020
1 parent a797465 commit f90824f
Show file tree
Hide file tree
Showing 18 changed files with 1,359 additions and 431 deletions.
5 changes: 1 addition & 4 deletions superset-frontend/jest.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,10 @@ module.exports = {
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
globals: {
'ts-jest': {
babelConfig: true,
diagnostics: {
warnOnly: true,
},
tsConfig: {
jsx: 'react',
esModuleInterop: true,
},
},
},
};
627 changes: 484 additions & 143 deletions superset-frontend/package-lock.json
View file

Large diffs are not rendered by default.

11 changes: 9 additions & 2 deletions superset-frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"prod": "node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --mode=production --colors --progress",
"build-dev": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=development webpack --mode=development --colors --progress",
"build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production webpack --mode=production --colors --progress",
"lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx . && prettier --check '{src,stylesheets}/**/*.{css,less,sass,scss}'",
"lint": "prettier --check '{src,stylesheets}/**/*.{css,less,sass,scss}' && eslint --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx .",
"lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx,.ts,tsx . && npm run clean-css",
"clean-css": "prettier --write '{src,stylesheets}/**/*.{css,less,sass,scss}'"
},
Expand Down Expand Up @@ -53,6 +53,8 @@
"dependencies": {
"@babel/runtime-corejs3": "^7.8.4",
"@data-ui/sparkline": "^0.0.54",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@superset-ui/chart": "^0.12.11",
"@superset-ui/chart-composition": "^0.12.8",
"@superset-ui/color": "^0.12.8",
Expand Down Expand Up @@ -108,6 +110,7 @@
"d3-scale": "^2.1.2",
"dnd-core": "^2.6.0",
"dompurify": "^2.0.7",
"emotion-theming": "^10.0.27",
"geolib": "^2.0.24",
"immutable": "^3.8.2",
"interweave": "^11.2.0",
Expand Down Expand Up @@ -147,7 +150,7 @@
"react-split": "^2.0.4",
"react-sticky": "^6.0.2",
"react-syntax-highlighter": "^7.0.4",
"react-table": "^7.0.0-rc.15",
"react-table": "^7.0.4",
"react-transition-group": "^2.5.3",
"react-ultimate-pagination": "^1.2.0",
"react-virtualized": "9.19.1",
Expand Down Expand Up @@ -175,10 +178,12 @@
"@babel/preset-react": "^7.8.3",
"@babel/register": "^7.8.6",
"@hot-loader/react-dom": "^16.13.0",
"@types/classnames": "^2.2.9",
"@types/jest": "^25.1.4",
"@types/jquery": "^3.3.32",
"@types/react": "^16.9.23",
"@types/react-dom": "^16.9.5",
"@types/react-json-tree": "^0.6.11",
"@types/react-redux": "^7.1.7",
"@types/react-table": "^7.0.2",
"@types/react-ultimate-pagination": "^1.2.0",
Expand All @@ -189,12 +194,14 @@
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-emotion": "^10.0.29",
"babel-plugin-lodash": "^3.3.4",
"cache-loader": "^1.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"emotion-ts-plugin": "^0.5.3",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^6.2.2",
Expand Down
253 changes: 180 additions & 73 deletions superset-frontend/spec/javascripts/components/ListView/ListView_spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,43 +20,45 @@ import React from 'react';
import { mount, shallow } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { MenuItem, Pagination } from 'react-bootstrap';
import Select from 'react-select';

import ListView from 'src/components/ListView/ListView';
import ListViewFilters from 'src/components/ListView/Filters';
import ListViewPagination from 'src/components/ListView/Pagination';
import { areArraysShallowEqual } from 'src/reduxUtils';

const mockedProps = {
title: 'Data Table',
columns: [
{
accessor: 'id',
Header: 'ID',
sortable: true,
},
{
accessor: 'name',
Header: 'Name',
},
],
filters: [
{
Header: 'Name',
id: 'name',
operators: [{ label: 'Starts With', value: 'sw' }],
},
],
data: [
{ id: 1, name: 'data 1' },
{ id: 2, name: 'data 2' },
],
count: 2,
pageSize: 1,
fetchData: jest.fn(() => []),
loading: false,
bulkActions: [{ name: 'do something', onSelect: jest.fn() }],
};

describe('ListView', () => {
const mockedProps = {
title: 'Data Table',
columns: [
{
accessor: 'id',
Header: 'ID',
sortable: true,
},
{
accessor: 'name',
Header: 'Name',
filterable: true,
},
],
filters: [
{
Header: 'Name',
id: 'name',
operators: [{ label: 'Starts With', value: 'sw' }],
},
],
data: [
{ id: 1, name: 'data 1' },
{ id: 2, name: 'data 2' },
],
count: 2,
pageSize: 1,
fetchData: jest.fn(() => []),
loading: false,
bulkActions: [{ name: 'do something', onSelect: jest.fn() }],
};
const wrapper = mount(<ListView {...mockedProps} />);

afterEach(() => {
Expand Down Expand Up @@ -138,63 +140,64 @@ describe('ListView', () => {
wrapper.update();

expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
Array [
Object {
"filters": Array [
Object {
"Header": "name",
"id": "name",
"operator": "sw",
"value": "foo",
},
],
"pageIndex": 0,
"pageSize": 1,
"sortBy": Array [
Object {
"desc": false,
"id": "id",
},
],
},
]
`);
Array [
Object {
"filters": Array [
Object {
"id": "name",
"operator": "sw",
"value": "foo",
},
],
"pageIndex": 0,
"pageSize": 1,
"sortBy": Array [
Object {
"desc": false,
"id": "id",
},
],
},
]
`);
});

it('renders pagination controls', () => {
expect(wrapper.find(Pagination).exists()).toBe(true);
expect(wrapper.find(Pagination.Prev).exists()).toBe(true);
expect(wrapper.find(Pagination.Item).exists()).toBe(true);
expect(wrapper.find(Pagination.Next).exists()).toBe(true);
});

it('calls fetchData on page change', () => {
act(() => {
wrapper.find(ListViewPagination).prop('onChange')(2);
});
wrapper.update();

expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
Array [
Object {
"filters": Array [
Object {
"Header": "name",
"id": "name",
"operator": "sw",
"value": "foo",
},
],
"pageIndex": 1,
"pageSize": 1,
"sortBy": Array [
Object {
"desc": false,
"id": "id",
},
],
},
]
`);
Array [
Object {
"filters": Array [
Object {
"id": "name",
"operator": "sw",
"value": "foo",
},
],
"pageIndex": 1,
"pageSize": 1,
"sortBy": Array [
Object {
"desc": false,
"id": "id",
},
],
},
]
`);
});

it('handles bulk actions on 1 row', () => {
act(() => {
wrapper
Expand Down Expand Up @@ -228,6 +231,7 @@ describe('ListView', () => {
]
`);
});

it('handles bulk actions on all rows', () => {
act(() => {
wrapper
Expand Down Expand Up @@ -265,6 +269,7 @@ describe('ListView', () => {
]
`);
});

it('Throws an exception if filter missing in columns', () => {
expect.assertions(1);
const props = {
Expand All @@ -280,3 +285,105 @@ describe('ListView', () => {
}
});
});

describe('ListView with new UI filters', () => {
const newFiltersProps = {
...mockedProps,
useNewUIFilters: true,
filters: [
{
Header: 'ID',
id: 'id',
input: 'select',
selects: [{ label: 'foo', value: 'bar' }],
operator: 'eq',
},
{
Header: 'Name',
id: 'name',
input: 'search',
operator: 'ct',
},
],
};

const wrapper = mount(<ListView {...newFiltersProps} />);

afterEach(() => {
mockedProps.fetchData.mockClear();
mockedProps.bulkActions.forEach(ba => {
ba.onSelect.mockClear();
});
});

it('renders UI filters', () => {
expect(wrapper.find(ListViewFilters)).toHaveLength(1);
});

it('calls fetchData on filter', () => {
act(() => {
wrapper
.find('[data-test="filters-select"]')
.last()
.props()
.onChange({ value: 'bar' });
});

act(() => {
wrapper
.find('[data-test="filters-search"]')
.last()
.props()
.onChange({ currentTarget: { value: 'something' } });
});

wrapper.update();

act(() => {
wrapper
.find('[data-test="filters-search"]')
.last()
.props()
.onBlur();
});

expect(newFiltersProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
Array [
Object {
"filters": Array [
Object {
"id": "id",
"operator": "eq",
"value": "bar",
},
],
"pageIndex": 0,
"pageSize": 1,
"sortBy": Array [],
},
]
`);

expect(newFiltersProps.fetchData.mock.calls[1]).toMatchInlineSnapshot(`
Array [
Object {
"filters": Array [
Object {
"id": "id",
"operator": "eq",
"value": "bar",
},
Object {
"id": "name",
"operator": "ct",
"value": "something",
},
],
"pageIndex": 0,
"pageSize": 1,
"sortBy": Array [],
},
]
`);
});
});
Loading

0 comments on commit f90824f

Please sign in to comment.