chore: Adds a storybook to FilterableTable (#19897)

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';

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';

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) => (
+  <div css={{ maxWidth: 700 }}>
+    <FilterableTable {...args} />
+  </div>
+);
+
+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,
+    },
+  },
+};

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';
 

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<string, CellDataType>;
 
-interface FilterableTableProps {
+export interface FilterableTableProps {
   orderedColumnKeys: string[];
   data: Record<string, unknown>[];
   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<HTMLDivElement>;
 
+  jsonTreeTheme: Record<string, string>;
+
   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 (
       <ModalTrigger
-        modalBody={<JSONTree data={jsonObject} theme={JSON_TREE_THEME} />}
+        modalBody={
+          <JSONTree data={jsonObject} theme={this.getJsonTreeTheme()} />
+        }
         modalFooter={
           <Button>
             <CopyToClipboard shouldShowText={false} text={jsonString} />
@@ -758,3 +775,5 @@ export default class FilterableTable extends PureComponent<
     return this.renderTable();
   }
 }
+
+export default withTheme(FilterableTable);