feat(plugin-chart-table): add column config control

.eslintrc.js

@@ -73,6 +73,7 @@ module.exports = {
     'no-mixed-operators': 0,
     'no-multi-assign': 0,
     'no-multi-spaces': 0,
+    'no-nested-ternary': 0,
     'no-prototype-builtins': 0,
     'no-restricted-properties': 0,
     'no-restricted-imports': [
@@ -156,6 +157,7 @@ module.exports = {
         'no-mixed-operators': 0,
         'no-multi-assign': 0,
         'no-multi-spaces': 0,
+        'no-nested-ternary': 0,
         'no-prototype-builtins': 0,
         'no-restricted-properties': 0,
         'no-shadow': 0, // re-enable up for discussion

packages/superset-ui-chart-controls/package.json

@@ -33,8 +33,9 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-bootstrap": "*",
-    "antd": "^4.9.1",
+    "antd": "^4.9.4",
     "react": "^16.13.1",
-    "react-bootstrap": "^0.33.1"
+    "react-bootstrap": "^0.33.1",
+    "react-icons": "^4.2.0"
   }
 }

packages/superset-ui-chart-controls/src/components/ColumnOption.tsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { Tooltip } from './Tooltip';
-import { ColumnTypeLabel } from './ColumnTypeLabel';
+import { ColumnTypeLabel, LaxColumnType } from './ColumnTypeLabel';
 import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
 import { ColumnMeta } from '../types';
 
@@ -30,7 +30,7 @@ export type ColumnOptionProps = {
 export function ColumnOption({ column, showType = false }: ColumnOptionProps) {
   const hasExpression = column.expression && column.expression !== column.column_name;
 
-  let columnType = column.type;
+  let columnType: LaxColumnType | undefined = column.type;
   if (column.is_dttm) {
     columnType = 'time';
   } else if (hasExpression) {

packages/superset-ui-chart-controls/src/components/ColumnTypeLabel.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -16,14 +17,31 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { ColumnType, GenericDataType } from '@superset-ui/core';
 import React from 'react';
 
+export type LaxColumnType = ColumnType | GenericDataType | 'expression' | 'aggregate' | 'time' | '';
+
 export type ColumnTypeLabelProps = {
-  type: string;
+  type?: LaxColumnType;
 };
 
-export function ColumnTypeLabel({ type }: ColumnTypeLabelProps) {
+export function ColumnTypeLabel({ type: type_ }: ColumnTypeLabelProps) {
+  const type: string =
+    type_ === undefined || type_ === null
+      ? '?'
+      : type_ === GenericDataType.BOOLEAN
+      ? 'bool'
+      : type_ === GenericDataType.NUMERIC
+      ? 'FLOAT'
+      : type_ === GenericDataType.TEMPORAL
+      ? 'time'
+      : type_ === GenericDataType.STRING
+      ? 'string'
+      : type_;
+
   let stringIcon;
+
   if (typeof type !== 'string') {
     stringIcon = '?';
   } else if (type === '' || type === 'expression') {

packages/superset-ui-chart-controls/src/components/ControlForm/ControlFormItem.tsx

@@ -0,0 +1,114 @@
+/**
+ * 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, { useState, FunctionComponentElement, ChangeEvent } from 'react';
+import { JsonValue, useTheme } from '@superset-ui/core';
+import ControlHeader, { ControlHeaderProps } from '../ControlHeader';
+import InfoTooltipWithTrigger from '../InfoTooltipWithTrigger';
+import { ControlFormItemComponents, ControlFormItemSpec } from './controls';
+
+export * from './controls';
+
+export type ControlFormItemProps = ControlFormItemSpec & {
+  name: string;
+  onChange?: (fieldValue: JsonValue) => void;
+};
+
+export type ControlFormItemNode = FunctionComponentElement<ControlFormItemProps>;
+
+/**
+ * Accept `false` or `0`, but not empty string.
+ */
+function isEmptyValue(value?: JsonValue) {
+  return value == null || value === '';
+}
+
+export function ControlFormItem({
+  name,
+  label,
+  description,
+  width,
+  validators,
+  required,
+  onChange,
+  value: initialValue,
+  defaultValue,
+  controlType,
+  ...props
+}: ControlFormItemProps) {
+  const { gridUnit } = useTheme();
+  const [hovered, setHovered] = useState(false);
+  const [value, setValue] = useState(initialValue === undefined ? defaultValue : initialValue);
+  const [validationErrors, setValidationErrors] = useState<
+    ControlHeaderProps['validationErrors']
+  >();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement> | JsonValue) => {
+    const fieldValue =
+      e && typeof e === 'object' && 'target' in e
+        ? e.target.type === 'checkbox' || e.target.type === 'radio'
+          ? e.target.checked
+          : e.target.value
+        : e;
+    const errors =
+      (validators
+        ?.map(validator => (!required && isEmptyValue(fieldValue) ? false : validator(fieldValue)))
+        .filter(x => !!x) as string[]) || [];
+    setValidationErrors(errors);
+    setValue(fieldValue);
+    if (errors.length === 0 && onChange) {
+      onChange(fieldValue as JsonValue);
+    }
+  };
+
+  const Control = ControlFormItemComponents[controlType];
+
+  return (
+    <div
+      css={{
+        margin: 2 * gridUnit,
+        width,
+      }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {controlType === 'Checkbox' ? (
+        <ControlFormItemComponents.Checkbox checked={value as boolean} onChange={handleChange}>
+          {label} {hovered && description && <InfoTooltipWithTrigger tooltip={description} />}
+        </ControlFormItemComponents.Checkbox>
+      ) : (
+        <>
+          {label && (
+            <ControlHeader
+              name={name}
+              label={label}
+              description={description}
+              validationErrors={validationErrors}
+              hovered={hovered}
+              required={required}
+            />
+          )}
+          {/* @ts-ignore */}
+          <Control {...props} value={value} onChange={handleChange} />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default ControlFormItem;

packages/superset-ui-chart-controls/src/components/ControlForm/controls.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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, { ReactNode } from 'react';
+import { Slider, InputNumber, Input } from 'antd';
+import Checkbox, { CheckboxProps } from 'antd/lib/checkbox';
+import Select, { SelectOption } from '../Select';
+import RadioButtonControl, {
+  RadioButtonOption,
+} from '../../shared-controls/components/RadioButtonControl';
+
+export const ControlFormItemComponents = {
+  Slider,
+  InputNumber,
+  Input,
+  Select,
+  // Directly export Checkbox will result in "using name from external module" error
+  // ref: https://stackoverflow.com/questions/43900035/ts4023-exported-variable-x-has-or-is-using-name-y-from-external-module-but
+  Checkbox: Checkbox as React.ForwardRefExoticComponent<
+    CheckboxProps & React.RefAttributes<HTMLInputElement>
+  >,
+  RadioButtonControl,
+};
+
+export type ControlType = keyof typeof ControlFormItemComponents;
+
+export type ControlFormValueValidator<V> = (value: V) => string | false;
+
+export type ControlFormItemSpec<T extends ControlType = ControlType> = {
+  controlType: T;
+  label: ReactNode;
+  description: ReactNode;
+  placeholder?: string;
+  required?: boolean;
+  validators?: ControlFormValueValidator<any>[];
+  width?: number | string;
+  /**
+   * Time to delay change propagation.
+   */
+  debounceDelay?: number;
+} & (T extends 'Select'
+  ? {
+      options: SelectOption<any>[];
+      value?: string;
+      defaultValue?: string;
+      creatable?: boolean;
+      minWidth?: number | string;
+      validators?: ControlFormValueValidator<string>[];
+    }
+  : T extends 'RadioButtonControl'
+  ? {
+      options: RadioButtonOption[];
+      value?: string;
+      defaultValue?: string;
+    }
+  : T extends 'Checkbox'
+  ? {
+      value?: boolean;
+      defaultValue?: boolean;
+    }
+  : T extends 'InputNumber' | 'Slider'
+  ? {
+      min?: number;
+      max?: number;
+      step?: number;
+      value?: number;
+      defaultValue?: number;
+      validators?: ControlFormValueValidator<number>[];
+    }
+  : T extends 'Input'
+  ? {
+      controlType: 'Input';
+      value?: string;
+      defaultValue?: string;
+      validators?: ControlFormValueValidator<string>[];
+    }
+  : {});