feat: tablechart plugin controls migration (#9847)

* delete controls

* move columnoption to controls

* update package and remove columnoption

* fix: remove console and fix import

* fix: lint

* update version

* fix last rebase

* fix: lint:
This commit is contained in:
Phillip Kelley-Dotson 2020-05-21 12:15:02 -07:00 committed by GitHub
parent a46af68922
commit 333dc8529e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 18 additions and 450 deletions

View File

@ -6898,9 +6898,9 @@
}
},
"@superset-ui/legacy-plugin-chart-table": {
"version": "0.13.5",
"resolved": "https://registry.npmjs.org/@superset-ui/legacy-plugin-chart-table/-/legacy-plugin-chart-table-0.13.5.tgz",
"integrity": "sha512-8AIb0y+HuDSpFA3b1Uv2bnXu0o5Bmv+KjWJn+eZZIIWLyL7l6NE79OMacjdrGglTGxu3fIa2lYf9ljINHEiCTg==",
"version": "0.13.16",
"resolved": "https://registry.npmjs.org/@superset-ui/legacy-plugin-chart-table/-/legacy-plugin-chart-table-0.13.16.tgz",
"integrity": "sha512-4j1bLmKhWEB9pXT4PEPUijLzpFmeskZU2WRBDNaidWUgw8vw0R5vSbSzlf9P5UIBnEgb2RfF/cWMT/FelDG3ug==",
"requires": {
"@types/datatables.net": "^1.10.18",
"@types/react-dom": "^16.9.6",
@ -6909,9 +6909,9 @@
},
"dependencies": {
"@types/react-dom": {
"version": "16.9.7",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.7.tgz",
"integrity": "sha512-GHTYhM8/OwUCf254WO5xqR/aqD3gC9kSTLpopWGpQLpnw23jk44RvMHsyUSEplvRJZdHxhJGMMLF0kCPYHPhQA==",
"version": "16.9.8",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",
"integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==",
"requires": {
"@types/react": "*"
}

View File

@ -84,7 +84,7 @@
"@superset-ui/legacy-plugin-chart-rose": "^0.13.10",
"@superset-ui/legacy-plugin-chart-sankey": "^0.13.10",
"@superset-ui/legacy-plugin-chart-sunburst": "^0.13.7",
"@superset-ui/legacy-plugin-chart-table": "^0.13.5",
"@superset-ui/legacy-plugin-chart-table": "^0.13.16",
"@superset-ui/legacy-plugin-chart-treemap": "^0.13.10",
"@superset-ui/legacy-plugin-chart-world-map": "^0.13.10",
"@superset-ui/legacy-preset-chart-big-number": "^0.13.14",

View File

@ -1,104 +0,0 @@
/**
* 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 { shallow } from 'enzyme';
import { InfoTooltipWithTrigger } from '@superset-ui/control-utils';
import ColumnOption from 'src/components/ColumnOption';
import ColumnTypeLabel from 'src/components/ColumnTypeLabel';
describe('ColumnOption', () => {
const defaultProps = {
column: {
column_name: 'foo',
verbose_name: 'Foo',
expression: 'SUM(foo)',
description: 'Foo is the greatest column of all',
},
showType: false,
};
let wrapper;
let props;
const factory = o => <ColumnOption {...o} />;
beforeEach(() => {
wrapper = shallow(factory(defaultProps));
props = { ...defaultProps };
});
it('is a valid element', () => {
expect(React.isValidElement(<ColumnOption {...defaultProps} />)).toBe(true);
});
it('shows a label with verbose_name', () => {
const lbl = wrapper.find('.option-label');
expect(lbl).toHaveLength(1);
expect(lbl.first().text()).toBe('Foo');
});
it('shows 2 InfoTooltipWithTrigger', () => {
expect(wrapper.find(InfoTooltipWithTrigger)).toHaveLength(2);
});
it('shows only 1 InfoTooltipWithTrigger when no descr', () => {
props.column.description = null;
wrapper = shallow(factory(props));
expect(wrapper.find(InfoTooltipWithTrigger)).toHaveLength(1);
});
it('shows a label with column_name when no verbose_name', () => {
props.column.verbose_name = null;
wrapper = shallow(factory(props));
expect(wrapper.find('.option-label').first().text()).toBe('foo');
});
it('shows a column type label when showType is true', () => {
wrapper = shallow(
factory({
...props,
showType: true,
column: {
expression: null,
type: 'str',
},
}),
);
expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
});
it('column with expression has correct column label if showType is true', () => {
props.showType = true;
wrapper = shallow(factory(props));
expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
expect(wrapper.find(ColumnTypeLabel).props().type).toBe('expression');
});
it('shows no column type label when type is null', () => {
wrapper = shallow(
factory({
...props,
showType: true,
column: {
expression: null,
type: null,
},
}),
);
expect(wrapper.find(ColumnTypeLabel)).toHaveLength(0);
});
it('dttm column has correct column label if showType is true', () => {
props.showType = true;
props.column.is_dttm = true;
wrapper = shallow(factory(props));
expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
expect(wrapper.find(ColumnTypeLabel).props().type).toBe('time');
});
});

View File

@ -19,6 +19,7 @@
import React from 'react';
import { shallow } from 'enzyme';
import { ColumnOption } from '@superset-ui/control-utils';
import ColumnTypeLabel from 'src/components/ColumnTypeLabel';
describe('ColumnOption', () => {

View File

@ -20,8 +20,8 @@
import React from 'react';
import { shallow } from 'enzyme';
import { ColumnOption } from '@superset-ui/control-utils';
import FilterDefinitionOption from 'src/explore/components/FilterDefinitionOption';
import ColumnOption from 'src/components/ColumnOption';
import AdhocMetricStaticOption from 'src/explore/components/AdhocMetricStaticOption';
import AdhocMetric, { EXPRESSION_TYPES } from 'src/explore/AdhocMetric';
import { AGGREGATES } from 'src/explore/constants';

View File

@ -20,9 +20,9 @@ import React from 'react';
import configureStore from 'redux-mock-store';
import { shallow } from 'enzyme';
import { ColumnOption } from '@superset-ui/control-utils';
import MetricDefinitionOption from 'src/explore/components/MetricDefinitionOption';
import MetricOption from 'src/components/MetricOption';
import ColumnOption from 'src/components/ColumnOption';
import AggregateOption from 'src/explore/components/AggregateOption';
describe('MetricDefinitionOption', () => {

View File

@ -20,6 +20,7 @@
import React from 'react';
import { getChartControlPanelRegistry } from '@superset-ui/chart';
import { t } from '@superset-ui/translation';
import { ColumnOption } from '@superset-ui/control-utils';
import {
getControlConfig,
getControlState,
@ -27,7 +28,6 @@ import {
applyMapStateToPropsToControl,
getAllControlsState,
} from 'src/explore/controlUtils';
import ColumnOption from 'src/components/ColumnOption';
describe('controlUtils', () => {
const state = {

View File

@ -1,70 +0,0 @@
/**
* 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 PropTypes from 'prop-types';
import { InfoTooltipWithTrigger } from '@superset-ui/control-utils';
import ColumnTypeLabel from './ColumnTypeLabel';
const propTypes = {
column: PropTypes.object.isRequired,
showType: PropTypes.bool,
};
const defaultProps = {
showType: false,
};
export default function ColumnOption({ column, showType }) {
const hasExpression =
column.expression && column.expression !== column.column_name;
let columnType = column.type;
if (column.is_dttm) {
columnType = 'time';
} else if (hasExpression) {
columnType = 'expression';
}
return (
<div className="column-option">
{showType && columnType && <ColumnTypeLabel type={columnType} />}
<span className="option-label column-option-label">
{column.verbose_name || column.column_name}
</span>
{column.description && (
<InfoTooltipWithTrigger
className="text-muted"
icon="info"
tooltip={column.description}
label={`descr-${column.column_name}`}
/>
)}
{hasExpression && (
<InfoTooltipWithTrigger
className="text-muted"
icon="question-circle-o"
tooltip={column.expression}
label={`expr-${column.column_name}`}
/>
)}
</div>
);
}
ColumnOption.propTypes = propTypes;
ColumnOption.defaultProps = defaultProps;

View File

@ -33,12 +33,12 @@ import 'brace/mode/sql';
import 'brace/theme/github';
import 'brace/ext/language_tools';
import { t } from '@superset-ui/translation';
import { ColumnOption } from '@superset-ui/control-utils';
import { AGGREGATES, AGGREGATES_OPTIONS } from '../constants';
import AdhocMetricEditPopoverTitle from './AdhocMetricEditPopoverTitle';
import columnType from '../propTypes/columnType';
import AdhocMetric, { EXPRESSION_TYPES } from '../AdhocMetric';
import ColumnOption from '../../components/ColumnOption';
import sqlKeywords from '../../SqlLab/utils/sqlKeywords';
const langTools = ace.acequire('ace/ext/language_tools');

View File

@ -18,8 +18,8 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { ColumnOption } from '@superset-ui/control-utils';
import ColumnOption from '../../components/ColumnOption';
import ColumnTypeLabel from '../../components/ColumnTypeLabel';
import AdhocMetricStaticOption from './AdhocMetricStaticOption';
import columnType from '../propTypes/columnType';

View File

@ -18,9 +18,9 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { ColumnOption } from '@superset-ui/control-utils';
import MetricOption from '../../components/MetricOption';
import ColumnOption from '../../components/ColumnOption';
import AggregateOption from './AggregateOption';
import columnType from '../propTypes/columnType';
import savedMetricType from '../propTypes/savedMetricType';

View File

@ -30,9 +30,8 @@ import {
Well,
} from 'react-bootstrap';
import { t } from '@superset-ui/translation';
import { ColumnOption } from '@superset-ui/control-utils';
import ControlHeader from '../ControlHeader';
import ColumnOption from '../../../components/ColumnOption';
import MetricOption from '../../../components/MetricOption';
import DatasourceModal from '../../../datasource/DatasourceModal';
import ChangeDatasourceModal from '../../../datasource/ChangeDatasourceModal';

View File

@ -19,9 +19,9 @@
import React from 'react';
import { t } from '@superset-ui/translation';
import { validateNonEmpty } from '@superset-ui/validator';
import { ColumnOption } from '@superset-ui/control-utils';
import { formatSelectOptionsForRange } from '../../modules/utils';
import { columnChoices } from '../controls';
import ColumnOption from '../../components/ColumnOption';
export default {
requiresTime: true,

View File

@ -22,7 +22,7 @@
import React from 'react';
import { t } from '@superset-ui/translation';
import { validateNonEmpty } from '@superset-ui/validator';
import ColumnOption from '../../components/ColumnOption';
import { ColumnOption } from '@superset-ui/control-utils';
import { D3_FORMAT_OPTIONS, columnChoices, PRIMARY_COLOR } from '../controls';
import { DEFAULT_VIEWPORT } from '../../explore/components/controls/ViewportControl';

View File

@ -1,256 +0,0 @@
/**
* 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 { t } from '@superset-ui/translation';
import { validateNonEmpty } from '@superset-ui/validator';
import { D3_TIME_FORMAT_OPTIONS } from '../controls';
import { formatSelectOptions } from '../../modules/utils';
import ColumnOption from '../../components/ColumnOption';
export default {
controlPanelSections: [
{
label: t('GROUP BY'),
description: t('Use this section if you want a query that aggregates'),
expanded: true,
controlSetRows: [
['groupby'],
['metrics'],
[
{
name: 'percent_metrics',
config: {
type: 'MetricsControl',
multi: true,
mapStateToProps: state => {
const datasource = state.datasource;
return {
columns: datasource ? datasource.columns : [],
savedMetrics: datasource ? datasource.metrics : [],
datasourceType: datasource && datasource.type,
};
},
default: [],
label: t('Percentage Metrics'),
validators: [],
description: t(
'Metrics for which percentage of total are to be displayed',
),
},
},
],
['timeseries_limit_metric', 'row_limit'],
[
{
name: 'include_time',
config: {
type: 'CheckboxControl',
label: t('Include Time'),
description: t(
'Whether to include the time granularity as defined in the time section',
),
default: false,
},
},
{
name: 'order_desc',
config: {
type: 'CheckboxControl',
label: t('Sort Descending'),
default: true,
description: t('Whether to sort descending or ascending'),
},
},
],
],
},
{
label: t('NOT GROUPED BY'),
description: t('Use this section if you want to query atomic rows'),
expanded: true,
controlSetRows: [
[
{
name: 'all_columns',
config: {
type: 'SelectControl',
multi: true,
label: t('Columns'),
default: [],
description: t('Columns to display'),
optionRenderer: c => <ColumnOption column={c} showType />,
valueRenderer: c => <ColumnOption column={c} />,
valueKey: 'column_name',
allowAll: true,
mapStateToProps: state => ({
options: state.datasource ? state.datasource.columns : [],
}),
commaChoosesOption: false,
freeForm: true,
},
},
],
[
{
name: 'order_by_cols',
config: {
type: 'SelectControl',
multi: true,
label: t('Ordering'),
default: [],
description: t('One or many metrics to display'),
mapStateToProps: state => ({
choices: state.datasource
? state.datasource.order_by_choices
: [],
}),
},
},
],
['row_limit', null],
],
},
{
label: t('Query'),
expanded: true,
controlSetRows: [['adhoc_filters']],
},
{
label: t('Options'),
expanded: true,
controlSetRows: [
[
{
name: 'table_timestamp_format',
config: {
type: 'SelectControl',
freeForm: true,
label: t('Table Timestamp Format'),
default: '%Y-%m-%d %H:%M:%S',
renderTrigger: true,
validators: [validateNonEmpty],
clearable: false,
choices: D3_TIME_FORMAT_OPTIONS,
description: t('Timestamp Format'),
},
},
],
[
{
name: 'page_length',
config: {
type: 'SelectControl',
freeForm: true,
renderTrigger: true,
label: t('Page Length'),
default: 0,
choices: formatSelectOptions([
0,
10,
25,
40,
50,
75,
100,
150,
200,
]),
description: t('Rows per page, 0 means no pagination'),
},
},
null,
],
[
{
name: 'include_search',
config: {
type: 'CheckboxControl',
label: t('Search Box'),
renderTrigger: true,
default: false,
description: t('Whether to include a client-side search box'),
},
},
{
name: 'table_filter',
config: {
type: 'CheckboxControl',
label: t('Emit Filter Events'),
renderTrigger: true,
default: false,
description: t('Whether to apply filter when items are clicked'),
},
},
],
[
{
name: 'align_pn',
config: {
type: 'CheckboxControl',
label: t('Align +/-'),
renderTrigger: true,
default: false,
description: t(
'Whether to align the background chart for +/- values',
),
},
},
{
name: 'color_pn',
config: {
type: 'CheckboxControl',
label: t('Color +/-'),
renderTrigger: true,
default: true,
description: t('Whether to color +/- values'),
},
},
],
[
{
name: 'show_cell_bars',
config: {
type: 'CheckboxControl',
label: t('Show Cell Bars'),
renderTrigger: true,
default: true,
description: t(
'Enable to display bar chart background elements in table columns',
),
},
},
null,
],
],
},
],
controlOverrides: {
metrics: {
validators: [],
},
},
sectionOverrides: {
druidTimeSeries: {
controlSetRows: [['granularity', 'druid_time_origin'], ['time_range']],
},
sqlaTimeSeries: {
controlSetRows: [['granularity_sqla', 'time_grain_sqla'], ['time_range']],
},
},
};

View File

@ -67,12 +67,12 @@ import {
validateNonEmpty,
} from '@superset-ui/validator';
import { ColumnOption } from '@superset-ui/control-utils';
import {
formatSelectOptionsForRange,
formatSelectOptions,
mainMetric,
} from '../modules/utils';
import ColumnOption from '../components/ColumnOption';
import { TIME_FILTER_LABELS } from './constants';
const categoricalSchemeRegistry = getCategoricalSchemeRegistry();

View File

@ -35,7 +35,6 @@ import FilterBox from '../explore/controlPanels/FilterBox';
import PairedTtest from '../explore/controlPanels/PairedTtest';
import Para from '../explore/controlPanels/Para';
import Separator from '../explore/controlPanels/Separator';
import Table from '../explore/controlPanels/Table';
import TimeTable from '../explore/controlPanels/TimeTable';
export default function setupPlugins() {
@ -49,7 +48,6 @@ export default function setupPlugins() {
.registerValue('paired_ttest', PairedTtest)
.registerValue('para', Para)
.registerValue('separator', Separator)
.registerValue('table', Table)
.registerValue('time_table', TimeTable)
.registerValue('deck_arc', DeckArc)
.registerValue('deck_geojson', DeckGeojson)