iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: convert controlUtils to TypeScript (2 of 2) (#13520)

This commit is contained in:
Jesse Yang 2021-03-11 17:19:15 -08:00 committed by GitHub
parent 1470e70c10
commit 7656b2e68b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 436 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

546
superset-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

52
superset-frontend/package.json
View File

@ -65,34 +65,34 @@
"@babel/runtime-corejs3": "^7.12.5",
"@data-ui/sparkline": "^0.0.84",
"@emotion/core": "^10.0.35",
"@superset-ui/chart-controls": "^0.17.15",
"@superset-ui/chart-controls": "^0.17.17",
"@superset-ui/core": "^0.17.15",
"@superset-ui/legacy-plugin-chart-calendar": "^0.17.15",
"@superset-ui/legacy-plugin-chart-chord": "^0.17.15",
"@superset-ui/legacy-plugin-chart-country-map": "^0.17.15",
"@superset-ui/legacy-plugin-chart-event-flow": "^0.17.15",
"@superset-ui/legacy-plugin-chart-force-directed": "^0.17.15",
"@superset-ui/legacy-plugin-chart-heatmap": "^0.17.15",
"@superset-ui/legacy-plugin-chart-histogram": "^0.17.15",
"@superset-ui/legacy-plugin-chart-horizon": "^0.17.15",
"@superset-ui/legacy-plugin-chart-map-box": "^0.17.15",
"@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.15",
"@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.15",
"@superset-ui/legacy-plugin-chart-partition": "^0.17.15",
"@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.15",
"@superset-ui/legacy-plugin-chart-rose": "^0.17.15",
"@superset-ui/legacy-plugin-chart-sankey": "^0.17.15",
"@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.15",
"@superset-ui/legacy-plugin-chart-sunburst": "^0.17.15",
"@superset-ui/legacy-plugin-chart-treemap": "^0.17.15",
"@superset-ui/legacy-plugin-chart-world-map": "^0.17.15",
"@superset-ui/legacy-preset-chart-big-number": "^0.17.15",
"@superset-ui/legacy-plugin-chart-calendar": "^0.17.17",
"@superset-ui/legacy-plugin-chart-chord": "^0.17.17",
"@superset-ui/legacy-plugin-chart-country-map": "^0.17.17",
"@superset-ui/legacy-plugin-chart-event-flow": "^0.17.17",
"@superset-ui/legacy-plugin-chart-force-directed": "^0.17.17",
"@superset-ui/legacy-plugin-chart-heatmap": "^0.17.17",
"@superset-ui/legacy-plugin-chart-histogram": "^0.17.17",
"@superset-ui/legacy-plugin-chart-horizon": "^0.17.17",
"@superset-ui/legacy-plugin-chart-map-box": "^0.17.17",
"@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.17",
"@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.17",
"@superset-ui/legacy-plugin-chart-partition": "^0.17.17",
"@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.17",
"@superset-ui/legacy-plugin-chart-rose": "^0.17.17",
"@superset-ui/legacy-plugin-chart-sankey": "^0.17.17",
"@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.17",
"@superset-ui/legacy-plugin-chart-sunburst": "^0.17.17",
"@superset-ui/legacy-plugin-chart-treemap": "^0.17.17",
"@superset-ui/legacy-plugin-chart-world-map": "^0.17.17",
"@superset-ui/legacy-preset-chart-big-number": "^0.17.17",
"@superset-ui/legacy-preset-chart-deckgl": "^0.4.6",
"@superset-ui/legacy-preset-chart-nvd3": "^0.17.15",
"@superset-ui/plugin-chart-echarts": "^0.17.15",
"@superset-ui/plugin-chart-table": "^0.17.15",
"@superset-ui/plugin-chart-word-cloud": "^0.17.15",
"@superset-ui/preset-chart-xy": "^0.17.15",
"@superset-ui/legacy-preset-chart-nvd3": "^0.17.17",
"@superset-ui/plugin-chart-echarts": "^0.17.17",
"@superset-ui/plugin-chart-table": "^0.17.17",
"@superset-ui/plugin-chart-word-cloud": "^0.17.17",
"@superset-ui/preset-chart-xy": "^0.17.17",
"@vx/responsive": "^0.0.195",
"abortcontroller-polyfill": "^1.1.9",
"antd": "^4.9.4",

71
superset-frontend/spec/javascripts/explore/controlUtils_spec.jsx → superset-frontend/spec/javascripts/explore/controlUtils_spec.tsx
View File

@ -16,8 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
import { getChartControlPanelRegistry, t } from '@superset-ui/core';
import {
ControlConfig,
ControlPanelState,
CustomControlItem,
DatasourceMeta,
} from '@superset-ui/chart-controls';
import {
getControlConfig,
getControlState,
@ -30,13 +35,20 @@ import {
controlPanelSectionsChartOptionsTable,
} from 'spec/javascripts/explore/fixtures';
const getKnownControlConfig = (controlKey: string, vizType: string) =>
getControlConfig(controlKey, vizType) as ControlConfig;
const getKnownControlState = (...args: Parameters<typeof getControlState>) =>
getControlState(...args) as Exclude<ReturnType<typeof getControlState>, null>;
describe('controlUtils', () => {
const state = {
datasource: {
columns: ['a', 'b', 'c'],
const state: ControlPanelState = {
datasource: ({
columns: [{ column_name: 'a' }],
metrics: [{ metric_name: 'first' }, { metric_name: 'second' }],
},
} as unknown) as DatasourceMeta,
controls: {},
form_data: { datasource: '1__table', viz_type: 'table' },
};
beforeAll(() => {
@ -66,15 +78,14 @@ describe('controlUtils', () => {
describe('getControlConfig', () => {
it('returns a valid spatial controlConfig', () => {
const spatialControl = getControlConfig('color_scheme', 'test-chart');
expect(spatialControl.type).toEqual('ColorSchemeControl');
expect(spatialControl?.type).toEqual('ColorSchemeControl');
});
it('overrides according to vizType', () => {
let control = getControlConfig('color_scheme', 'test-chart');
let control = getKnownControlConfig('color_scheme', 'test-chart');
expect(control.label).toEqual('Color Scheme');
// deck_polygon overrides and removes validators
control = getControlConfig('color_scheme', 'test-chart-override');
control = getKnownControlConfig('color_scheme', 'test-chart-override');
expect(control.label).toEqual('My beautiful colors');
});
@ -102,27 +113,21 @@ describe('controlUtils', () => {
describe('applyMapStateToPropsToControl,', () => {
it('applies state to props as expected', () => {
let control = getControlConfig('all_columns', 'table');
let control = getKnownControlConfig('all_columns', 'table');
control = applyMapStateToPropsToControl(control, state);
expect(control.options).toEqual(['a', 'b', 'c']);
});
it('removes the mapStateToProps key from the object', () => {
let control = getControlConfig('all_columns', 'table');
control = applyMapStateToPropsToControl(control, state);
expect(control.mapStateToProps[0]).toBe(undefined);
expect(control.options).toEqual([{ column_name: 'a' }]);
});
});
describe('getControlState', () => {
it('to still have the functions', () => {
const control = getControlState('metrics', 'table', state, ['a']);
const control = getKnownControlState('metrics', 'table', state, 'a');
expect(typeof control.mapStateToProps).toBe('function');
expect(typeof control.validators[0]).toBe('function');
expect(typeof control.validators?.[0]).toBe('function');
});
it('to fix multi with non-array values', () => {
const control = getControlState('all_columns', 'table', state, 'a');
it('to make sure value is array', () => {
const control = getKnownControlState('all_columns', 'table', state, 'a');
expect(control.value).toEqual(['a']);
});
@ -133,10 +138,10 @@ describe('controlUtils', () => {
state,
'stack',
);
expect(control.value).toBe('stack');
expect(control?.value).toBe('stack');
control = getControlState('stacked_style', 'test-chart', state, 'FOO');
expect(control.value).toBeNull();
expect(control?.value).toBeNull();
});
it('returns null for non-existent field', () => {
@ -146,19 +151,19 @@ describe('controlUtils', () => {
it('applies the default function for metrics', () => {
const control = getControlState('metrics', 'table', state);
expect(control.default).toEqual(['first']);
expect(control?.default).toEqual(['first']);
});
it('applies the default function for metric', () => {
const control = getControlState('metric', 'table', state);
expect(control.default).toEqual('first');
expect(control?.default).toEqual('first');
});
it('applies the default function, prefers count if it exists', () => {
const stateWithCount = {
...state,
datasource: {
...state.datasource,
...(state.datasource as DatasourceMeta),
metrics: [
{ metric_name: 'first' },
{ metric_name: 'second' },
@ -167,7 +172,7 @@ describe('controlUtils', () => {
},
};
const control = getControlState('metrics', 'table', stateWithCount);
expect(control.default).toEqual(['count']);
expect(control?.default).toEqual(['count']);
});
it('should not apply mapStateToProps when initializing', () => {
@ -175,15 +180,15 @@ describe('controlUtils', () => {
...state,
controls: undefined,
});
expect(typeof control.default).toBe('function');
expect(control.value).toBe(undefined);
expect(typeof control?.default).toBe('function');
expect(control?.value).toBe(undefined);
});
});
describe('validateControl', () => {
it('validates the control, returns an error if empty', () => {
const control = getControlState('metric', 'table', state, null);
expect(control.validationErrors).toEqual(['cannot be empty']);
expect(control?.validationErrors).toEqual(['cannot be empty']);
});
it('should not validate if control panel is initializing', () => {
const control = getControlState(
@ -192,7 +197,7 @@ describe('controlUtils', () => {
{ ...state, controls: undefined },
undefined,
);
expect(control.validationErrors).toBeUndefined();
expect(control?.validationErrors).toBeUndefined();
});
});
@ -209,14 +214,14 @@ describe('controlUtils', () => {
let controlItem = findControlItem(
controlPanelSectionsChartOptions,
'rose_area_proportion',
);
) as CustomControlItem;
expect(controlItem.name).toEqual('rose_area_proportion');
expect(controlItem).toHaveProperty('config');
controlItem = findControlItem(
controlPanelSectionsChartOptions,
'stacked_style',
);
) as CustomControlItem;
expect(controlItem.name).toEqual('stacked_style');
expect(controlItem).toHaveProperty('config');
});

15
superset-frontend/spec/javascripts/explore/fixtures.jsx → superset-frontend/spec/javascripts/explore/fixtures.tsx
View File

@ -19,9 +19,14 @@
import React from 'react';
import { t } from '@superset-ui/core';
import { ColumnOption } from '@superset-ui/chart-controls';
import {
ColumnMeta,
ColumnOption,
ControlConfig,
ControlPanelSectionConfig,
} from '@superset-ui/chart-controls';
export const controlPanelSectionsChartOptions = [
export const controlPanelSectionsChartOptions: ControlPanelSectionConfig[] = [
{
label: t('Chart Options'),
expanded: true,
@ -63,7 +68,7 @@ export const controlPanelSectionsChartOptions = [
},
];
export const controlPanelSectionsChartOptionsOnlyColorScheme = [
export const controlPanelSectionsChartOptionsOnlyColorScheme: ControlPanelSectionConfig[] = [
{
label: t('Chart Options'),
expanded: true,
@ -71,7 +76,7 @@ export const controlPanelSectionsChartOptionsOnlyColorScheme = [
},
];
export const controlPanelSectionsChartOptionsTable = [
export const controlPanelSectionsChartOptionsTable: ControlPanelSectionConfig[] = [
{
label: t('Chart Options'),
expanded: true,
@ -96,7 +101,7 @@ export const controlPanelSectionsChartOptionsTable = [
}),
commaChoosesOption: false,
freeForm: true,
},
} as ControlConfig<'SelectControl', ColumnMeta>,
},
],
],

28
superset-frontend/src/explore/controlUtils/getControlConfig.ts
View File

@ -23,20 +23,6 @@ import {
expandControlConfig,
} from '@superset-ui/chart-controls';
const getMemoizedControlConfig = memoizeOne(
(controlKey, controlPanelConfig) => {
const {
controlOverrides = {},
controlPanelSections = [],
} = controlPanelConfig;
const control = expandControlConfig(
findControlItem(controlPanelSections, controlKey),
controlOverrides,
);
return control && 'config' in control ? control.config : control;
},
);
/**
* Find control item from control panel config.
*/
@ -59,6 +45,20 @@ export function findControlItem(
);
}
const getMemoizedControlConfig = memoizeOne(
(controlKey, controlPanelConfig) => {
const {
controlOverrides = {},
controlPanelSections = [],
} = controlPanelConfig;
const control = expandControlConfig(
findControlItem(controlPanelSections, controlKey),
controlOverrides,
);
return control && 'config' in control ? control.config : control;
},
);
export const getControlConfig = function getControlConfig(
controlKey: string,
vizType: string,

86
superset-frontend/src/explore/controlUtils/index.js → superset-frontend/src/explore/controlUtils/getControlState.ts
View File

@ -16,21 +16,36 @@
* specific language governing permissions and limitations
* under the License.
*/
import { ReactNode } from 'react';
import {
DatasourceType,
ensureIsArray,
JsonValue,
QueryFormData,
} from '@superset-ui/core';
import {
ControlConfig,
ControlPanelState,
ControlState,
ControlType,
ControlValueValidator,
} from '@superset-ui/chart-controls';
import { getSectionsToRender } from './getSectionsToRender';
import { getControlConfig } from './getControlConfig';
export * from './getFormDataFromControls';
export * from './getControlConfig';
export * from './getSectionsToRender';
type ValidationError = JsonValue;
export function validateControl(control, processedState) {
const { validators } = control;
const validationErrors = [];
function execControlValidator<T = ControlType>(
control: ControlState<T>,
processedState: ControlState<T>,
) {
const validators = control.validators as ControlValueValidator[] | undefined;
const validationErrors: ValidationError[] = [];
if (validators && validators.length > 0) {
validators.forEach(f => {
const v = f.call(control, control.value, processedState);
if (v) {
validationErrors.push(v);
validators.forEach(validator => {
const error = validator.call(control, control.value, processedState);
if (error) {
validationErrors.push(error);
}
});
}
@ -38,22 +53,26 @@ export function validateControl(control, processedState) {
return { ...control, validationErrors };
}
function handleMissingChoice(control) {
/**
* Clear control values that are no longer in the `choices` list.
*/
function handleMissingChoice<T = ControlType>(control: ControlState<T>) {
// If the value is not valid anymore based on choices, clear it
const { value } = control;
if (
control.type === 'SelectControl' &&
!control.freeForm &&
control.choices &&
value
control.value
) {
const alteredControl = { ...control };
const choiceValues = control.choices.map(c => c[0]);
const choices = control.choices as [JsonValue, ReactNode][];
const value = ensureIsArray(control.value);
const choiceValues = choices.map(c => c[0]);
if (control.multi && value.length > 0) {
alteredControl.value = value.filter(el => choiceValues.indexOf(el) > -1);
alteredControl.value = value.filter(el => choiceValues.includes(el));
return alteredControl;
}
if (!control.multi && choiceValues.indexOf(value) < 0) {
if (!control.multi && !choiceValues.includes(value[0])) {
alteredControl.value = null;
return alteredControl;
}
@ -61,14 +80,17 @@ function handleMissingChoice(control) {
return control;
}
export function applyMapStateToPropsToControl(controlState, controlPanelState) {
export function applyMapStateToPropsToControl<T = ControlType>(
controlState: ControlState<T>,
controlPanelState: Partial<ControlPanelState>,
) {
const { mapStateToProps } = controlState;
let state = { ...controlState };
let { value } = state; // value is current user-input value
if (mapStateToProps && controlPanelState) {
state = {
...controlState,
...mapStateToProps(controlPanelState, controlState),
...mapStateToProps.call(controlState, controlPanelState, controlState),
};
// `mapStateToProps` may also provide a value
value = value || state.value;
@ -90,19 +112,19 @@ export function applyMapStateToPropsToControl(controlState, controlPanelState) {
value = [value];
}
state.value = value;
return validateControl(handleMissingChoice(state), state);
return execControlValidator(handleMissingChoice(state), state);
}
export function getControlStateFromControlConfig(
controlConfig,
controlPanelState,
value,
export function getControlStateFromControlConfig<T = ControlType>(
controlConfig: ControlConfig<T> | null,
controlPanelState: Partial<ControlPanelState>,
value?: JsonValue,
) {
// skip invalid config values
if (!controlConfig) {
return null;
}
const controlState = { ...controlConfig, value };
const controlState = { ...controlConfig, value } as ControlState<T>;
// only apply mapStateToProps when control states have been initialized
// or when explicitly didn't provide control panel state (mostly for testing)
if (
@ -114,7 +136,12 @@ export function getControlStateFromControlConfig(
return controlState;
}
export function getControlState(controlKey, vizType, state, value) {
export function getControlState(
controlKey: string,
vizType: string,
state: Partial<ControlPanelState>,
value?: JsonValue,
) {
return getControlStateFromControlConfig(
getControlConfig(controlKey, vizType),
state,
@ -122,12 +149,17 @@ export function getControlState(controlKey, vizType, state, value) {
);
}
export function getAllControlsState(vizType, datasourceType, state, formData) {
export function getAllControlsState(
vizType: string,
datasourceType: DatasourceType,
state: ControlPanelState,
formData: QueryFormData,
) {
const controlsState = {};
getSectionsToRender(vizType, datasourceType).forEach(section =>
section.controlSetRows.forEach(fieldsetRow =>
fieldsetRow.forEach(field => {
if (field && field.config && field.name) {
if (field && 'config' in field && field.config && field.name) {
const { config, name } = field;
controlsState[name] = getControlStateFromControlConfig(
config,

22
superset-frontend/src/explore/controlUtils/index.ts Normal file
View File

@ -0,0 +1,22 @@
/**
* 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.
*/
export * from './getSectionsToRender';
export * from './getControlConfig';
export * from './getControlState';
export * from './getFormDataFromControls';

12
superset-frontend/src/explore/reducers/getInitialState.ts
View File

@ -17,13 +17,11 @@
* under the License.
*/
import shortid from 'shortid';
import { DatasourceType, JsonObject, QueryFormData } from '@superset-ui/core';
import {
Datasource,
DatasourceType,
JsonObject,
QueryFormData,
} from '@superset-ui/core';
import { ControlStateMapping } from '@superset-ui/chart-controls';
ControlStateMapping,
DatasourceMeta,
} from '@superset-ui/chart-controls';
import { CommonBootstrapData } from 'src/types/bootstrapTypes';
import getToastsFromPyFlashMessages from 'src/messageToasts/utils/getToastsFromPyFlashMessages';
@ -39,7 +37,7 @@ export interface ExlorePageBootstrapData extends JsonObject {
can_add: boolean;
can_download: boolean;
can_overwrite: boolean;
datasource: Datasource;
datasource: DatasourceMeta;
form_data: QueryFormData;
datasource_id: number;
datasource_type: DatasourceType;