[dashboard, chart] fix ordering and filtering in listviews (#9212)

* [dashboard, chart] fix ordering and filtering

* fix owner name bug, better typing

* remove tslint comment

superset-frontend/package-lock.json

@@ -4921,7 +4921,6 @@
       "version": "0.6.11",
       "resolved": "https://registry.npmjs.org/@types/react-json-tree/-/react-json-tree-0.6.11.tgz",
       "integrity": "sha512-HP0Sf0ZHjCi1FHLJxh/pLaxaevEW6ILlV2C5Dn3EZFTkLjWkv+EVf/l/zvtmoU9ZwuO/3TKVeWK/700UDxunTw==",
-      "dev": true,
       "requires": {
         "@types/react": "*"
       }

superset-frontend/src/components/ListView/TableCollection.tsx

@@ -18,17 +18,16 @@
  */
 import React from 'react';
 import cx from 'classnames';
-import { Cell, HeaderGroup, Row } from 'react-table';
+import { TableInstance } from 'react-table';
 
-interface Props<D extends object = {}> {
+interface Props {
   getTableProps: (userProps?: any) => any;
   getTableBodyProps: (userProps?: any) => any;
-  prepareRow: (row: Row<D>) => any;
-  headerGroups: Array<HeaderGroup<D>>;
-  rows: Array<Row<D>>;
+  prepareRow: TableInstance['prepareRow'];
+  headerGroups: TableInstance['headerGroups'];
+  rows: TableInstance['rows'];
   loading: boolean;
 }
-/* tslint:disable:jsx-key */
 export default function TableCollection({
   getTableProps,
   getTableBodyProps,
@@ -36,30 +35,32 @@ export default function TableCollection({
   headerGroups,
   rows,
   loading,
-}: Props<any>) {
+}: Props) {
   return (
     <table {...getTableProps()} className="table table-hover">
       <thead>
         {headerGroups.map(headerGroup => (
           <tr {...headerGroup.getHeaderGroupProps()}>
-            {headerGroup.headers.map((column: any) => (
-              <th
-                {...column.getHeaderProps(column.getSortByToggleProps())}
-                data-test="sort-header"
-              >
-                {column.render('Header')}
-                {'  '}
-                {column.sortable && (
-                  <i
-                    className={cx('text-primary fa', {
-                      'fa-sort': !column.isSorted,
-                      'fa-sort-down': column.isSorted && column.isSortedDesc,
-                      'fa-sort-up': column.isSorted && !column.isSortedDesc,
-                    })}
-                  />
-                )}
-              </th>
-            ))}
+            {headerGroup.headers.map(column =>
+              column.hidden ? null : (
+                <th
+                  {...column.getHeaderProps(column.getSortByToggleProps())}
+                  data-test="sort-header"
+                >
+                  {column.render('Header')}
+                  {'  '}
+                  {column.sortable && (
+                    <i
+                      className={cx('text-primary fa', {
+                        'fa-sort': !column.isSorted,
+                        'fa-sort-down': column.isSorted && column.isSortedDesc,
+                        'fa-sort-up': column.isSorted && !column.isSortedDesc,
+                      })}
+                    />
+                  )}
+                </th>
+              ),
+            )}
           </tr>
         ))}
       </thead>
@@ -76,7 +77,9 @@ export default function TableCollection({
                 row.setState && row.setState({ hover: false })
               }
             >
-              {row.cells.map((cell: Cell<any>) => {
+              {row.cells.map(cell => {
+                if (cell.column.hidden) return null;
+
                 const columnCellProps = cell.column.cellProps || {};
 
                 return (

superset-frontend/src/types/react-table-config.d.ts

@@ -116,6 +116,8 @@ declare module 'react-table' {
       UseGroupByColumnOptions<D>,
       UseResizeColumnsColumnOptions<D>,
       UseSortByColumnOptions<D> {
+    hidden?: boolean;
+    sortable?: boolean;
     cellProps?: any;
   }
 

superset-frontend/src/views/chartList/ChartList.tsx

@@ -147,7 +147,7 @@ class ChartList extends React.PureComponent<Props, State> {
         },
       }: any) => <a href={dsLink}>{dsNameTxt}</a>,
       Header: t('Datasource'),
-      accessor: 'datasource_name_text',
+      accessor: 'datasource_name',
       sortable: true,
     },
     {
@@ -158,9 +158,9 @@ class ChartList extends React.PureComponent<Props, State> {
             changed_by_url: changedByUrl,
           },
         },
-      }: any) => <a href={changedByName}>{changedByUrl}</a>,
+      }: any) => <a href={changedByUrl}>{changedByName}</a>,
       Header: t('Creator'),
-      accessor: 'creator',
+      accessor: 'changed_by_fk',
       sortable: true,
     },
     {
@@ -173,6 +173,14 @@ class ChartList extends React.PureComponent<Props, State> {
       accessor: 'changed_on',
       sortable: true,
     },
+    {
+      accessor: 'description',
+      hidden: true,
+    },
+    {
+      accessor: 'owners',
+      hidden: true,
+    },
     {
       Cell: ({ row: { state, original } }: any) => {
         const handleDelete = () => this.handleChartDelete(original);
@@ -280,11 +288,20 @@ class ChartList extends React.PureComponent<Props, State> {
   };
 
   fetchData = ({ pageIndex, pageSize, sortBy, filters }: FetchDataConfig) => {
-    this.setState({ loading: true });
-    const filterExps = Object.keys(filters).map(fk => ({
-      col: fk,
-      opr: filters[fk].filterId,
-      value: filters[fk].filterValue,
+    // set loading state, cache the last config for fetching data in this component.
+    this.setState({
+      lastFetchDataConfig: {
+        filters,
+        pageIndex,
+        pageSize,
+        sortBy,
+      },
+      loading: true,
+    });
+    const filterExps = filters.map(({ id: col, operator: opr, value }) => ({
+      col,
+      opr,
+      value,
     }));
 
     const queryParams = JSON.stringify({
@@ -329,7 +346,6 @@ class ChartList extends React.PureComponent<Props, State> {
         {
           Header: 'Description',
           id: 'description',
-          input: 'textarea',
           operators: filterOperators.slice_name.map(convertFilter),
         },
         {

superset-frontend/src/views/dashboardList/DashboardList.tsx

@@ -174,9 +174,11 @@ class DashboardList extends React.PureComponent<Props, State> {
     },
     {
       accessor: 'slug',
+      hidden: true,
     },
     {
       accessor: 'owners',
+      hidden: true,
     },
     {
       Cell: ({ row: { state, original } }: any) => {

superset/views/chart/api.py

@@ -159,12 +159,18 @@ class ChartRestApi(SliceMixin, BaseOwnedModelRestApi):
         "params",
         "cache_timeout",
     ]
+    order_columns = [
+        "slice_name",
+        "viz_type",
+        "datasource_name",
+        "changed_by_fk",
+        "changed_on",
+    ]
+
     # Will just affect _info endpoint
     edit_columns = ["slice_name"]
     add_columns = edit_columns
 
-    # exclude_route_methods = ("info",)
-
     add_model_schema = ChartPostSchema()
     edit_model_schema = ChartPutSchema()