From 7657e42cff23d4721d1df223da4e06cfe8e71914 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Tue, 3 May 2022 15:08:10 -0300 Subject: [PATCH] chore: Adds a storybook to FilterableTable (#19897) --- .../components/ResultSet/ResultSet.test.jsx | 2 +- .../src/SqlLab/components/ResultSet/index.tsx | 2 +- .../FilterableTable.stories.tsx | 73 +++++++++++++++++++ .../FilterableTable/FilterableTable.test.tsx | 2 +- .../{FilterableTable.tsx => index.tsx} | 67 +++++++++++------ 5 files changed, 119 insertions(+), 27 deletions(-) create mode 100644 superset-frontend/src/components/FilterableTable/FilterableTable.stories.tsx rename superset-frontend/src/components/FilterableTable/{FilterableTable.tsx => index.tsx} (93%) diff --git a/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.jsx b/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.jsx index 7822810e9..c04e23613 100644 --- a/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.jsx +++ b/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.jsx @@ -28,7 +28,7 @@ import Loading from 'src/components/Loading'; import configureStore from 'redux-mock-store'; import thunk from 'redux-thunk'; import fetchMock from 'fetch-mock'; -import FilterableTable from 'src/components/FilterableTable/FilterableTable'; +import FilterableTable from 'src/components/FilterableTable'; import ExploreResultsButton from 'src/SqlLab/components/ExploreResultsButton'; import ResultSet from 'src/SqlLab/components/ResultSet'; import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace'; diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx index b81b47146..d2c4b41ff 100644 --- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx +++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx @@ -39,7 +39,7 @@ import ProgressBar from 'src/components/ProgressBar'; import Loading from 'src/components/Loading'; import FilterableTable, { MAX_COLUMNS_FOR_TABLE, -} from 'src/components/FilterableTable/FilterableTable'; +} from 'src/components/FilterableTable'; import CopyToClipboard from 'src/components/CopyToClipboard'; import { prepareCopyToClipboardTabularData } from 'src/utils/common'; import { exploreChart } from 'src/explore/exploreUtils'; diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.stories.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.stories.tsx new file mode 100644 index 000000000..3b774f4f4 --- /dev/null +++ b/superset-frontend/src/components/FilterableTable/FilterableTable.stories.tsx @@ -0,0 +1,73 @@ +/** + * 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 FilterableTable, { FilterableTableProps } from '.'; + +export default { + title: 'FilterableTable', + component: FilterableTable, +}; + +export const InteractiveTable = (args: FilterableTableProps) => ( +
+ +
+); + +InteractiveTable.args = { + filterText: '', + orderedColumnKeys: ['id', 'name', 'age', 'location'], + data: [ + { + id: 1, + name: 'John', + age: 32, + location: { city: 'Barcelona', country: 'Spain' }, + }, + { + id: 2, + name: 'Mary', + age: 53, + location: { city: 'Madrid', country: 'Spain' }, + }, + { + id: 3, + name: 'Peter', + age: 60, + location: { city: 'Paris', country: 'France' }, + }, + ], + height: 300, + headerHeight: 30, + overscanColumnCount: 0, + overscanRowCount: 0, + rowHeight: 30, + striped: true, + expandedColumns: [], +}; + +InteractiveTable.argTypes = {}; + +InteractiveTable.story = { + parameters: { + knobs: { + disable: true, + }, + }, +}; diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx index 3cb58ce6d..494af6033 100644 --- a/superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx +++ b/superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx @@ -21,7 +21,7 @@ import { ReactWrapper } from 'enzyme'; import { styledMount as mount } from 'spec/helpers/theming'; import FilterableTable, { MAX_COLUMNS_FOR_TABLE, -} from 'src/components/FilterableTable/FilterableTable'; +} from 'src/components/FilterableTable'; import { render, screen } from 'spec/helpers/testing-library'; import userEvent from '@testing-library/user-event'; diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/superset-frontend/src/components/FilterableTable/index.tsx similarity index 93% rename from superset-frontend/src/components/FilterableTable/FilterableTable.tsx rename to superset-frontend/src/components/FilterableTable/index.tsx index 6fdb6f964..621565b15 100644 --- a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx +++ b/superset-frontend/src/components/FilterableTable/index.tsx @@ -29,7 +29,13 @@ import { SortIndicator, Table, } from 'react-virtualized'; -import { getMultipleTextDimensions, t, styled } from '@superset-ui/core'; +import { + getMultipleTextDimensions, + t, + styled, + SupersetTheme, + withTheme, +} from '@superset-ui/core'; import Button from '../Button'; import CopyToClipboard from '../CopyToClipboard'; import ModalTrigger from '../ModalTrigger'; @@ -60,26 +66,6 @@ function safeJsonObjectParse( const GRID_POSITION_ADJUSTMENT = 4; const SCROLL_BAR_HEIGHT = 15; -const JSON_TREE_THEME = { - scheme: 'monokai', - author: 'wimer hazenberg (http://www.monokai.nl)', - base00: '#272822', - base01: '#383830', - base02: '#49483e', - base03: '#75715e', - base04: '#a59f85', - base05: '#f8f8f2', - base06: '#f5f4f1', - base07: '#f9f8f5', - base08: '#f92672', - base09: '#fd971f', - base0A: '#f4bf75', - base0B: '#a6e22e', - base0C: '#a1efe4', - base0D: '#66d9ef', - base0E: '#ae81ff', - base0F: '#cc6633', -}; // This regex handles all possible number formats in javascript, including ints, floats, // exponential notation, NaN, and Infinity. // See https://stackoverflow.com/a/30987109 for more details @@ -198,7 +184,7 @@ export const MAX_COLUMNS_FOR_TABLE = 50; type CellDataType = string | number | null; type Datum = Record; -interface FilterableTableProps { +export interface FilterableTableProps { orderedColumnKeys: string[]; data: Record[]; height: number; @@ -209,6 +195,7 @@ interface FilterableTableProps { rowHeight: number; striped: boolean; expandedColumns: string[]; + theme: SupersetTheme; } interface FilterableTableState { @@ -218,7 +205,7 @@ interface FilterableTableState { displayedList: Datum[]; } -export default class FilterableTable extends PureComponent< +class FilterableTable extends PureComponent< FilterableTableProps, FilterableTableState > { @@ -244,6 +231,8 @@ export default class FilterableTable extends PureComponent< container: React.RefObject; + jsonTreeTheme: Record; + constructor(props: FilterableTableProps) { super(props); this.list = this.formatTableData(props.data); @@ -258,6 +247,7 @@ export default class FilterableTable extends PureComponent< this.renderTable = this.renderTable.bind(this); this.rowClassName = this.rowClassName.bind(this); this.sort = this.sort.bind(this); + this.getJsonTreeTheme = this.getJsonTreeTheme.bind(this); // columns that have complex type and were expanded into sub columns this.complexColumns = props.orderedColumnKeys.reduce( @@ -286,6 +276,31 @@ export default class FilterableTable extends PureComponent< this.fitTableToWidthIfNeeded(); } + getJsonTreeTheme() { + if (!this.jsonTreeTheme) { + const { theme } = this.props; + this.jsonTreeTheme = { + base00: theme.colors.grayscale.dark2, + base01: theme.colors.grayscale.dark1, + base02: theme.colors.grayscale.base, + base03: theme.colors.grayscale.light1, + base04: theme.colors.grayscale.light2, + base05: theme.colors.grayscale.light3, + base06: theme.colors.grayscale.light4, + base07: theme.colors.grayscale.light5, + base08: theme.colors.error.base, + base09: theme.colors.error.light1, + base0A: theme.colors.error.light2, + base0B: theme.colors.success.base, + base0C: theme.colors.primary.light1, + base0D: theme.colors.primary.base, + base0E: theme.colors.primary.dark1, + base0F: theme.colors.error.dark1, + }; + } + return this.jsonTreeTheme; + } + getDatum(list: Datum[], index: number) { return list[index % list.length]; } @@ -439,7 +454,9 @@ export default class FilterableTable extends PureComponent< ) { return ( } + modalBody={ + + } modalFooter={