diff --git a/.travis.yml b/.travis.yml index f410e3d41..4452e66d1 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,7 +1,7 @@ language: node_js node_js: - - '10.10' + - '10.15' cache: - npm: true diff --git a/package.json b/package.json index f10175b43..d744e8fb1 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,8 @@ "build:assets": "node ./buildAssets.js", "commit": "superset-commit", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0", - "type": "NODE_ENV=production beemo typescript --workspaces=\"@superset-ui/((preset|plugin)-*)\" --noEmit", - "type:dts": "NODE_ENV=production beemo typescript --workspaces=\"@superset-ui/((preset|plugin)-*)\" --emitDeclarationOnly", + "type": "NODE_ENV=production beemo typescript --workspaces=\"@superset-ui/((preset|plugin)-!(chart-xy))\" --noEmit", + "type:dts": "NODE_ENV=production beemo typescript --workspaces=\"@superset-ui/((preset|plugin)-!(chart-xy))\" --emitDeclarationOnly", "lint": "beemo create-config prettier && beemo eslint \"./packages/*/{src,test,storybook}/**/*.{js,jsx,ts,tsx}\"", "lint:fix": "beemo create-config prettier && beemo eslint --fix \"./packages/*/{src,test,storybook}/**/*.{js,jsx,ts,tsx}\"", "jest": "beemo jest --color --coverage --react", diff --git a/packages/superset-ui-legacy-plugin-chart-paired-t-test/src/TTestTable.jsx b/packages/superset-ui-legacy-plugin-chart-paired-t-test/src/TTestTable.jsx index 6c0862d2f..bef6d7757 100644 --- a/packages/superset-ui-legacy-plugin-chart-paired-t-test/src/TTestTable.jsx +++ b/packages/superset-ui-legacy-plugin-chart-paired-t-test/src/TTestTable.jsx @@ -59,6 +59,7 @@ class TTestTable extends React.Component { }; } + // eslint-disable-next-line react/no-deprecated componentWillMount() { const { control } = this.state; this.computeTTest(control); // initially populate table diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/LineMulti/LineMulti.jsx b/packages/superset-ui-legacy-preset-chart-nvd3/src/LineMulti/LineMulti.jsx index 189882be6..6f76070fe 100644 --- a/packages/superset-ui-legacy-preset-chart-nvd3/src/LineMulti/LineMulti.jsx +++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/LineMulti/LineMulti.jsx @@ -67,6 +67,7 @@ class LineMulti extends React.Component { this.loadData(this.props); } + // eslint-disable-next-line react/no-deprecated componentWillReceiveProps(nextProps) { this.loadData(nextProps); } diff --git a/packages/superset-ui-plugin-chart-icicle-event/src/IcicleEventChart.tsx b/packages/superset-ui-plugin-chart-icicle-event/src/IcicleEventChart.tsx index 1017554da..c383f68f0 100644 --- a/packages/superset-ui-plugin-chart-icicle-event/src/IcicleEventChart.tsx +++ b/packages/superset-ui-plugin-chart-icicle-event/src/IcicleEventChart.tsx @@ -64,6 +64,8 @@ function defaultContentRenderer( } export default class IcicleEventChart extends Component { + private chartRef = createRef(); + static defaultProps = { boxMargin: { x: 1, @@ -73,8 +75,6 @@ export default class IcicleEventChart extends Component { contentRenderer: defaultContentRenderer, }; - private chartRef = createRef(); - constructor(props: Props) { super(props); diff --git a/packages/superset-ui-plugin-chart-table/package.json b/packages/superset-ui-plugin-chart-table/package.json index 2878fb889..7041b47f5 100644 --- a/packages/superset-ui-plugin-chart-table/package.json +++ b/packages/superset-ui-plugin-chart-table/package.json @@ -26,7 +26,7 @@ "access": "public" }, "dependencies": { - "@airbnb/lunar": "^2.16.0", + "@airbnb/lunar": "^2.35.0", "@airbnb/lunar-icons": "^2.1.4", "@types/dompurify": "^0.0.33", "dompurify": "^1.0.11" diff --git a/packages/superset-ui-plugin-chart-table/src/Table.tsx b/packages/superset-ui-plugin-chart-table/src/Table.tsx index c92663a32..9643210d5 100644 --- a/packages/superset-ui-plugin-chart-table/src/Table.tsx +++ b/packages/superset-ui-plugin-chart-table/src/Table.tsx @@ -5,7 +5,7 @@ import Input from '@airbnb/lunar/lib/components/Input'; import withStyles, { WithStylesProps } from '@airbnb/lunar/lib/composers/withStyles'; import { Renderers, ParentRow, ColumnMetadata } from '@airbnb/lunar/lib/components/DataTable/types'; import dompurify from 'dompurify'; -import { getRenderer, ColumnType, heightType, Cell } from './renderer'; +import { getRenderer, ColumnType, Cell } from './renderer'; type Props = { data: ParentRow[]; @@ -40,7 +40,7 @@ const CHAR_WIDTH = 10; const CELL_PADDING = 32; -const MAX_COLUMN_WIDTH = 500; +const MAX_COLUMN_WIDTH = 300; export type TableProps = Props & Readonly; @@ -59,7 +59,7 @@ function getCellHash(cell: Cell) { return `${cell.key}#${cell.value}`; } -function getText(value: string | number) { +function getText(value: unknown) { if (typeof value === 'string') { const span = document.createElement('span'); const sanitizedString = dompurify.sanitize(value); @@ -251,7 +251,7 @@ class TableVis extends React.PureComponent { keys={keys} columnMetadata={columnMetadata} zebra - rowHeight={heightType} + dynamicRowHeight renderers={renderers} height={tableHeight} width={Math.max(calculatedWidth, width)} diff --git a/packages/superset-ui-plugin-chart-table/src/renderer.tsx b/packages/superset-ui-plugin-chart-table/src/renderer.tsx index ba311759b..bb3e75426 100644 --- a/packages/superset-ui-plugin-chart-table/src/renderer.tsx +++ b/packages/superset-ui-plugin-chart-table/src/renderer.tsx @@ -5,7 +5,7 @@ import React, { CSSProperties } from 'react'; import { HEIGHT_TO_PX } from '@airbnb/lunar/lib/components/DataTable/constants'; import { RendererProps } from '@airbnb/lunar/lib/components/DataTable/types'; -import Interweave from '@airbnb/lunar/lib/components/Interweave'; +import dompurify from 'dompurify'; const NEGATIVE_COLOR = '#FFA8A8'; const POSITIVE_COLOR = '#ced4da'; @@ -49,7 +49,10 @@ export const getRenderer = ({ handleCellSelected: (cell: Cell) => any; }) => (props: RendererProps) => { const { keyName } = props; - const value = props.row.rowData.data[keyName]; + let value = props.row.rowData.data[keyName]; + if (!column.format) { + value = dompurify.sanitize(value as string); + } const isMetric = column.type === 'metric'; let Parent; @@ -57,15 +60,14 @@ export const getRenderer = ({ const boxStyle: CSSProperties = { backgroundColor: - enableFilter && isSelected({ key: keyName, value }) ? SELECTION_COLOR : undefined, + enableFilter && isSelected({ key: keyName as string, value }) ? SELECTION_COLOR : undefined, cursor: cursorStyle, - margin: '0px -16px', + margin: '4px -16px', }; const boxContainerStyle: CSSProperties = { alignItems: 'center', display: 'flex', - height: HEIGHT_TO_PX[heightType], margin: '0px 16px', position: 'relative', textAlign: isMetric ? 'right' : 'left', @@ -80,18 +82,19 @@ export const getRenderer = ({ if (isMetric) { let left = 0; let width = 0; + const numericValue = value as number; if (alignPositiveNegative) { width = Math.abs( - Math.round((value / Math.max(column.maxValue!, Math.abs(column.minValue!))) * 100), + Math.round((numericValue / Math.max(column.maxValue!, Math.abs(column.minValue!))) * 100), ); } else { const posExtent = Math.abs(Math.max(column.maxValue!, 0)); const negExtent = Math.abs(Math.min(column.minValue!, 0)); const tot = posExtent + negExtent; - left = Math.round((Math.min(negExtent + value, negExtent) / tot) * 100); - width = Math.round((Math.abs(value) / tot) * 100); + left = Math.round((Math.min(negExtent + numericValue, negExtent) / tot) * 100); + width = Math.round((Math.abs(numericValue) / tot) * 100); } - const color = colorPositiveNegative && value < 0 ? NEGATIVE_COLOR : POSITIVE_COLOR; + const color = colorPositiveNegative && numericValue < 0 ? NEGATIVE_COLOR : POSITIVE_COLOR; Parent = ({ children }: { children: React.ReactNode }) => { const barStyle: CSSProperties = { @@ -122,12 +125,19 @@ export const getRenderer = ({ isMetric ? null : handleCellSelected({ - key: keyName, + key: keyName as string, value, }) } > - {column.format ? column.format(value) : } + + {column.format ? ( + column.format(value) + ) : ( + // eslint-disable-next-line react/no-danger +
+ )} +
); }; diff --git a/packages/superset-ui-plugins-demo/package.json b/packages/superset-ui-plugins-demo/package.json index de020da9d..0502ef517 100644 --- a/packages/superset-ui-plugins-demo/package.json +++ b/packages/superset-ui-plugins-demo/package.json @@ -39,7 +39,6 @@ "@storybook/react": "^5.0.9", "@types/react": "^16.8.8", "@types/storybook__react": "3.0.7", - "@types/storybook__addon-knobs": "^5.0.0", "bootstrap": "^4.3.1", "react": "^16.6.0", "storybook-addon-jsx": "^7.1.0" diff --git a/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js b/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js index 98a854c2c..6a811342b 100644 --- a/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js +++ b/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js @@ -17,8 +17,18 @@ keys.forEach((key, i) => { .join(''); }); item.ds = '2019-09-09'; -item.html = 'Link Test'; + +const getHTML = () => { + const randomText = Array(Math.floor(Math.random() * 20)) + .fill('very') + .join(' '); + + return `Link Test with a ${randomText} long title`; +}; export default Array(ROW_COUNT) .fill(0) - .map(_ => ({ ...item })); + .map(_ => ({ + ...item, + html: getHTML(), + })); diff --git a/packages/superset-ui-preset-chart-xy/package.json b/packages/superset-ui-preset-chart-xy/package.json index 8d63f9e34..7f64d41ec 100644 --- a/packages/superset-ui-preset-chart-xy/package.json +++ b/packages/superset-ui-preset-chart-xy/package.json @@ -21,6 +21,7 @@ ], "author": "Superset", "license": "Apache-2.0", + "private": true, "bugs": { "url": "https://github.com/apache-superset/superset-ui-plugins/issues" }, diff --git a/packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx b/packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx index cbabc75dd..a5dbfb011 100644 --- a/packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx +++ b/packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx @@ -46,12 +46,12 @@ type Props = { Readonly; export default class BoxPlot extends React.PureComponent { - static defaultProps = defaultProps; - private createEncoder = createEncoderSelector(Encoder); private createMargin = createMarginSelector(); + static defaultProps = defaultProps; + constructor(props: Props) { super(props); diff --git a/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx b/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx index 37a70b396..3d4c6bd67 100644 --- a/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx +++ b/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx @@ -80,8 +80,6 @@ export interface SeriesValue { const CIRCLE_STYLE = { strokeWidth: 1.5 }; export default class LineChart extends PureComponent { - static defaultProps = defaultProps; - private createEncoder = createEncoderSelector(Encoder); private createAllSeries = createSelector( @@ -128,6 +126,7 @@ export default class LineChart extends PureComponent { private createMargin = createMarginSelector(); + static defaultProps = defaultProps; constructor(props: Props) { super(props); diff --git a/packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx b/packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx index ad8a9656f..e1bf6acf1 100644 --- a/packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx +++ b/packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx @@ -55,12 +55,12 @@ export interface EncodedPoint { } export default class ScatterPlot extends PureComponent { - static defaultProps = defaultProps; - private createEncoder = createEncoderSelector(Encoder); private createMargin = createMarginSelector(); + static defaultProps = defaultProps; + constructor(props: Props) { super(props);