This repository has been archived by the owner on Dec 10, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 271
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(legacy-table): avoid React DOM (#392)
* fix(legacy-table): avoid React DOM `jquery.datatables` will manipulate DOMs, sometimes remove them. In case of component being reloaded with updated props, React will not be able to find those removed nodes, causing a `cannot removeChild` error. Because of the the way to assign row keys, if table shape changes (add or remove columns), React may also have difficulty match the cached nodes via keys. In general it's a bad idea to directly manipulate React rendered DOM nodes, so we better just let `jquery.datatables` handle everything. In the future, once we removed `jquery.datatables`, a pure React component will not have such issues. * fix(legacy-table): handle the case when percentMetrics is null * fix(legacy-table): linting errors * refactor: use nimbus build * test(legacy-table): add React component tests * test(legacy-table): more sophisticated cases * fix: address PR #392 comments * chore(legacy-table): clean up tests case setups Not seeing the console.warn errors anymore. So cleaning it up. Previously it was from `<SuperChart />` component, but since we have updated the test case to not use <SuperChart>, we are good now. * fix(legacy-table): misleading comment
- Loading branch information
Showing
10 changed files
with
324 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
...et-ui-plugins/packages/superset-ui-legacy-plugin-chart-table/test/ReactDataTable.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| /** | ||
| * Licensed to the Apache Software Foundation (ASF) under one | ||
| * or more contributor license agreements. See the NOTICE file | ||
| * distributed with this work for additional information | ||
| * regarding copyright ownership. The ASF licenses this file | ||
| * to you under the Apache License, Version 2.0 (the | ||
| * "License"); you may not use this file except in compliance | ||
| * with the License. You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, | ||
| * software distributed under the License is distributed on an | ||
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
| * KIND, either express or implied. See the License for the | ||
| * specific language governing permissions and limitations | ||
| * under the License. | ||
| */ | ||
| import React from 'react'; | ||
| import { mount } from 'enzyme'; | ||
| import ReactDataTable from '../src/ReactDataTable'; | ||
| import transformProps from '../src/transformProps'; | ||
| import testData from './testData'; | ||
|
|
||
| describe('legacy-table', () => { | ||
| // Can test more prop transformation here. Not needed for now. | ||
| describe('transformProps', () => {}); | ||
|
|
||
| describe('ReactDataTable', () => { | ||
| let wrap: any; // the ReactDataTable wraper | ||
|
|
||
| it('render basic data', () => { | ||
| wrap = mount(<ReactDataTable {...transformProps(testData.basic)} />); | ||
| const tree = wrap.render(); // returns a CheerioWrapper with jQuery-like API | ||
| const cells = tree.find('td'); | ||
| expect(tree.hasClass('superset-legacy-chart-table')).toEqual(true); | ||
| expect(cells).toHaveLength(4); | ||
| expect(cells.eq(0).text()).toEqual('Michael'); | ||
| expect(cells.eq(3).attr('data-sort')).toEqual('2467'); | ||
| }); | ||
|
|
||
| it('render advanced data', () => { | ||
| // should successfull rerender with new props | ||
| wrap.setProps(transformProps(testData.advanced)); | ||
| const tree = wrap.render(); | ||
| const cells = tree.find('td'); | ||
| expect( | ||
| tree | ||
| .find('th') | ||
| .eq(1) | ||
| .text(), | ||
| ).toEqual('Sum of Num'); | ||
| expect(cells.eq(2).text()).toEqual('12.346%'); | ||
| expect(cells.eq(4).text()).toEqual('2.47k'); | ||
| }); | ||
| }); | ||
| }); |
108 changes: 108 additions & 0 deletions
108
plugins/superset-ui-plugins/packages/superset-ui-legacy-plugin-chart-table/test/testData.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| /** | ||
| * Licensed to the Apache Software Foundation (ASF) under one | ||
| * or more contributor license agreements. See the NOTICE file | ||
| * distributed with this work for additional information | ||
| * regarding copyright ownership. The ASF licenses this file | ||
| * to you under the Apache License, Version 2.0 (the | ||
| * "License"); you may not use this file except in compliance | ||
| * with the License. You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, | ||
| * software distributed under the License is distributed on an | ||
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
| * KIND, either express or implied. See the License for the | ||
| * specific language governing permissions and limitations | ||
| * under the License. | ||
| */ | ||
| import { ChartProps } from '@superset-ui/chart'; | ||
|
|
||
| const basicFormData = { | ||
| alignPn: false, | ||
| colorPn: false, | ||
| includeSearch: false, | ||
| orderDesc: true, | ||
| pageLength: 0, | ||
| metrics: [], | ||
| percentMetrics: null, | ||
| timeseriesLimitMetric: null, | ||
| tableFilter: false, | ||
| tableTimestampFormat: '%Y-%m-%d %H:%M:%S', | ||
| }; | ||
|
|
||
| const basicChartProps = { | ||
| width: 200, | ||
| height: 500, | ||
| annotationData: {}, | ||
| datasource: { | ||
| columnFormats: {}, | ||
| verboseMap: {}, | ||
| }, | ||
| rawDatasource: {}, | ||
| rawFormData: {}, | ||
| hooks: {}, | ||
| initialValues: {}, | ||
| queryData: { | ||
| data: { | ||
| columns: [], | ||
| records: [], | ||
| }, | ||
| }, | ||
| formData: basicFormData, | ||
| }; | ||
|
|
||
| /** | ||
| * Basic data input | ||
| */ | ||
| const basic: ChartProps = { | ||
| ...basicChartProps, | ||
| queryData: { | ||
| data: { | ||
| columns: ['name', 'sum__num'], | ||
| records: [ | ||
| { | ||
| name: 'Michael', | ||
| sum__num: 2467063, | ||
| '%pct_nice': 0.123456, | ||
| }, | ||
| { | ||
| name: 'Joe', | ||
| sum__num: 2467, | ||
| '%pct_nice': 0.00001, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| /** | ||
| * Advanced data input with | ||
| * - verbose map | ||
| * - metric columns | ||
| */ | ||
| const advanced: ChartProps = { | ||
| ...basic, | ||
| datasource: { | ||
| columnFormats: {}, | ||
| verboseMap: { | ||
| sum__num: 'Sum of Num', | ||
| }, | ||
| }, | ||
| formData: { | ||
| ...basicFormData, | ||
| metrics: ['sum__num'], | ||
| percentMetrics: ['pct_nice'], | ||
| }, | ||
| queryData: { | ||
| data: { | ||
| columns: ['name', 'sum__num', '%pct_nice'], | ||
| records: [...basic.queryData.data.records], | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default { | ||
| basic, | ||
| advanced, | ||
| }; |
Oops, something went wrong.