feat(listviews): SIP-34 filters for charts, dashboards, datasets (#10335

)
apache · Jul 27, 2020 · 6f56cd5 · 6f56cd5
1 parent 4b3d6d1
commit 6f56cd5
Show file tree

Hide file tree

Showing 22 changed files with 678 additions and 988 deletions.
diff --git a/superset-frontend/spec/javascripts/components/ListView/ListView_spec.jsx b/superset-frontend/spec/javascripts/components/ListView/ListView_spec.jsx
@@ -19,7 +19,6 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { MenuItem } from 'react-bootstrap';
 import { QueryParamProvider } from 'use-query-params';
 import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 
@@ -42,6 +41,7 @@ function makeMockLocation(query) {
   };
 }
 
+const fetchSelectsMock = jest.fn(() => []);
 const mockedProps = {
   title: 'Data Table',
   columns: [
@@ -60,10 +60,26 @@ const mockedProps = {
     },
   ],
   filters: [
+    {
+      Header: 'ID',
+      id: 'id',
+      input: 'select',
+      selects: [{ label: 'foo', value: 'bar' }],
+      operator: 'eq',
+    },
     {
       Header: 'Name',
       id: 'name',
-      operators: [{ label: 'Starts With', value: 'sw' }],
+      input: 'search',
+      operator: 'ct',
+    },
+    {
+      Header: 'Age',
+      id: 'age',
+      input: 'select',
+      fetchSelects: fetchSelectsMock,
+      paginate: true,
+      operator: 'eq',
     },
   ],
   data: [
@@ -145,59 +161,6 @@ describe('ListView', () => {
                                     `);
   });
 
-  it('calls fetchData on filter', () => {
-    act(() => {
-      wrapper
-        .find('.dropdown-toggle')
-        .children('button')
-        .at(0)
-        .props()
-        .onClick();
-
-      wrapper
-        .find(MenuItem)
-        .at(0)
-        .props()
-        .onSelect({ id: 'name', Header: 'name' });
-    });
-    wrapper.update();
-
-    act(() => {
-      wrapper.find('.filter-inputs input[type="text"]').prop('onChange')({
-        persist() {},
-        currentTarget: { value: 'foo' },
-      });
-    });
-    wrapper.update();
-
-    act(() => {
-      wrapper.find('[data-test="apply-filters"]').last().prop('onClick')();
-    });
-    wrapper.update();
-
-    expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
-Array [
-  Object {
-    "filters": Array [
-      Object {
-        "id": "name",
-        "operator": "sw",
-        "value": "foo",
-      },
-    ],
-    "pageIndex": 0,
-    "pageSize": 1,
-    "sortBy": Array [
-      Object {
-        "desc": false,
-        "id": "id",
-      },
-    ],
-  },
-]
-`);
-  });
-
   it('renders pagination controls', () => {
     expect(wrapper.find(Pagination).exists()).toBe(true);
     expect(wrapper.find(Pagination.Prev).exists()).toBe(true);
@@ -212,26 +175,20 @@ Array [
     wrapper.update();
 
     expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
-Array [
-  Object {
-    "filters": Array [
-      Object {
-        "id": "name",
-        "operator": "sw",
-        "value": "foo",
-      },
-    ],
-    "pageIndex": 1,
-    "pageSize": 1,
-    "sortBy": Array [
-      Object {
-        "desc": false,
-        "id": "id",
-      },
-    ],
-  },
-]
-`);
+      Array [
+        Object {
+          "filters": Array [],
+          "pageIndex": 1,
+          "pageSize": 1,
+          "sortBy": Array [
+            Object {
+              "desc": false,
+              "id": "id",
+            },
+          ],
+        },
+      ]
+    `);
   });
 
   it('handles bulk actions on 1 row', () => {
@@ -339,46 +296,6 @@ Array [
       '"Invalid filter config, some_column is not present in columns"',
     );
   });
-});
-
-describe('ListView with new UI filters', () => {
-  const fetchSelectsMock = jest.fn(() => []);
-  const newFiltersProps = {
-    ...mockedProps,
-    isSIP34FilterUIEnabled: true,
-    filters: [
-      {
-        Header: 'ID',
-        id: 'id',
-        input: 'select',
-        selects: [{ label: 'foo', value: 'bar' }],
-        operator: 'eq',
-      },
-      {
-        Header: 'Name',
-        id: 'name',
-        input: 'search',
-        operator: 'ct',
-      },
-      {
-        Header: 'Age',
-        id: 'age',
-        input: 'select',
-        fetchSelects: fetchSelectsMock,
-        paginate: true,
-        operator: 'eq',
-      },
-    ],
-  };
-
-  const wrapper = factory(newFiltersProps);
-
-  afterEach(() => {
-    mockedProps.fetchData.mockClear();
-    mockedProps.bulkActions.forEach(ba => {
-      ba.onSelect.mockClear();
-    });
-  });
 
   it('renders UI filters', () => {
     expect(wrapper.find(ListViewFilters)).toHaveLength(1);
@@ -407,43 +324,53 @@ describe('ListView with new UI filters', () => {
       wrapper.find('[data-test="search-input"]').last().props().onBlur();
     });
 
-    expect(newFiltersProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
-Array [
-  Object {
-    "filters": Array [
-      Object {
-        "id": "id",
-        "operator": "eq",
-        "value": "bar",
-      },
-    ],
-    "pageIndex": 0,
-    "pageSize": 1,
-    "sortBy": Array [],
-  },
-]
-`);
-
-    expect(newFiltersProps.fetchData.mock.calls[1]).toMatchInlineSnapshot(`
-Array [
-  Object {
-    "filters": Array [
-      Object {
-        "id": "id",
-        "operator": "eq",
-        "value": "bar",
-      },
-      Object {
-        "id": "name",
-        "operator": "ct",
-        "value": "something",
-      },
-    ],
-    "pageIndex": 0,
-    "pageSize": 1,
-    "sortBy": Array [],
-  },
-]
-`);
+    expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "filters": Array [
+            Object {
+              "id": "id",
+              "operator": "eq",
+              "value": "bar",
+            },
+          ],
+          "pageIndex": 0,
+          "pageSize": 1,
+          "sortBy": Array [
+            Object {
+              "desc": false,
+              "id": "id",
+            },
+          ],
+        },
+      ]
+    `);
+
+    expect(mockedProps.fetchData.mock.calls[1]).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "filters": Array [
+            Object {
+              "id": "id",
+              "operator": "eq",
+              "value": "bar",
+            },
+            Object {
+              "id": "name",
+              "operator": "ct",
+              "value": "something",
+            },
+          ],
+          "pageIndex": 0,
+          "pageSize": 1,
+          "sortBy": Array [
+            Object {
+              "desc": false,
+              "id": "id",
+            },
+          ],
+        },
+      ]
+    `);
   });
 });
diff --git a/...cripts/views/chartList/ChartList_spec.jsx → ...ripts/views/CRUD/chart/ChartList_spec.jsx b/...cripts/views/chartList/ChartList_spec.jsx → ...ripts/views/CRUD/chart/ChartList_spec.jsx
@@ -23,7 +23,7 @@ import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 
-import ChartList from 'src/views/chartList/ChartList';
+import ChartList from 'src/views/CRUD/chart/ChartList';
 import ListView from 'src/components/ListView/ListView';
 
 // store needed for withToasts(ChartTable)
@@ -48,13 +48,6 @@ const mockCharts = [...new Array(3)].map((_, i) => ({
 
 fetchMock.get(chartsInfoEndpoint, {
   permissions: ['can_list', 'can_edit'],
-  filters: {
-    slice_name: [],
-    description: [],
-    viz_type: [],
-    datasource_name: [],
-    owners: [],
-  },
 });
 fetchMock.get(chartssOwnersEndpoint, {
   result: [],
@@ -95,11 +88,6 @@ describe('ChartList', () => {
     expect(callsI).toHaveLength(1);
   });
 
-  it('fetches owners', () => {
-    const callsO = fetchMock.calls(/chart\/related\/owners/);
-    expect(callsO).toHaveLength(1);
-  });
-
   it('fetches data', () => {
     wrapper.update();
     const callsD = fetchMock.calls(/chart\/\?q/);

diff --git a/...iews/dashboardList/DashboardList_spec.jsx → ...ews/CRUD/dashboard/DashboardList_spec.jsx b/...iews/dashboardList/DashboardList_spec.jsx → ...ews/CRUD/dashboard/DashboardList_spec.jsx
@@ -23,7 +23,7 @@ import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 
-import DashboardList from 'src/views/dashboardList/DashboardList';
+import DashboardList from 'src/views/CRUD/dashboard/DashboardList';
 import ListView from 'src/components/ListView/ListView';
 import PropertiesModal from 'src/dashboard/components/PropertiesModal';
 
@@ -50,12 +50,6 @@ const mockDashboards = [...new Array(3)].map((_, i) => ({
 
 fetchMock.get(dashboardsInfoEndpoint, {
   permissions: ['can_list', 'can_edit'],
-  filters: {
-    dashboard_title: [],
-    slug: [],
-    owners: [],
-    published: [],
-  },
 });
 fetchMock.get(dashboardOwnersEndpoint, {
   result: [],
@@ -86,11 +80,6 @@ describe('DashboardList', () => {
     expect(callsI).toHaveLength(1);
   });
 
-  it('fetches owners', () => {
-    const callsO = fetchMock.calls(/dashboard\/related\/owners/);
-    expect(callsO).toHaveLength(1);
-  });
-
   it('fetches data', () => {
     wrapper.update();
     const callsD = fetchMock.calls(/dashboard\/\?q/);

diff --git a/...ts/views/datasetList/DatasetList_spec.jsx → ...s/views/CRUD/dataset/DatasetList_spec.jsx b/...ts/views/datasetList/DatasetList_spec.jsx → ...s/views/CRUD/dataset/DatasetList_spec.jsx
@@ -23,7 +23,7 @@ import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 
-import DatasetList from 'src/views/datasetList/DatasetList';
+import DatasetList from 'src/views/CRUD/dataset/DatasetList';
 import ListView from 'src/components/ListView/ListView';
 import Button from 'src/components/Button';
 import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
@@ -54,13 +54,6 @@ const mockdatasets = [...new Array(3)].map((_, i) => ({
 
 fetchMock.get(datasetsInfoEndpoint, {
   permissions: ['can_list', 'can_edit', 'can_add', 'can_delete'],
-  filters: {
-    database: [],
-    schema: [],
-    table_name: [],
-    owners: [],
-    is_sqllab_view: [],
-  },
 });
 fetchMock.get(datasetsOwnersEndpoint, {
   result: [],
@@ -105,11 +98,6 @@ describe('DatasetList', () => {
     expect(callsI).toHaveLength(1);
   });
 
-  it('fetches owners', () => {
-    const callsO = fetchMock.calls(/dataset\/related\/owners/);
-    expect(callsO).toHaveLength(1);
-  });
-
   it('fetches data', () => {
     const callsD = fetchMock.calls(/dataset\/\?q/);
     expect(callsD).toHaveLength(1);

diff --git a/superset-frontend/src/components/ErrorMessage/TimeoutErrorMessage.tsx b/superset-frontend/src/components/ErrorMessage/TimeoutErrorMessage.tsx
@@ -22,8 +22,8 @@ import { styled, supersetTheme } from '@superset-ui/style';
 import { t, tn } from '@superset-ui/translation';
 
 import { noOp } from 'src/utils/common';
+import Button from 'src/views/CRUD/dataset/Button';
 import Icon from '../Icon';
-import Button from '../../views/datasetList/Button';
 import { ErrorMessageComponentProps } from './types';
 import CopyToClipboard from '../CopyToClipboard';
 import IssueCode from './IssueCode';