[Dashboard] new listview filters & emotion infra (#9462)

* [Dashboard] listview filters to match new design

* use title_or_slug filter

* use ?. operator

* move components to components folder

superset-frontend/spec/javascripts/components/ListView/ListView_spec.jsx

@@ -20,43 +20,45 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { MenuItem, Pagination } from 'react-bootstrap';
+import Select from 'react-select';
 
 import ListView from 'src/components/ListView/ListView';
+import ListViewFilters from 'src/components/ListView/Filters';
 import ListViewPagination from 'src/components/ListView/Pagination';
 import { areArraysShallowEqual } from 'src/reduxUtils';
 
+const mockedProps = {
+  title: 'Data Table',
+  columns: [
+    {
+      accessor: 'id',
+      Header: 'ID',
+      sortable: true,
+    },
+    {
+      accessor: 'name',
+      Header: 'Name',
+    },
+  ],
+  filters: [
+    {
+      Header: 'Name',
+      id: 'name',
+      operators: [{ label: 'Starts With', value: 'sw' }],
+    },
+  ],
+  data: [
+    { id: 1, name: 'data 1' },
+    { id: 2, name: 'data 2' },
+  ],
+  count: 2,
+  pageSize: 1,
+  fetchData: jest.fn(() => []),
+  loading: false,
+  bulkActions: [{ name: 'do something', onSelect: jest.fn() }],
+};
+
 describe('ListView', () => {
-  const mockedProps = {
-    title: 'Data Table',
-    columns: [
-      {
-        accessor: 'id',
-        Header: 'ID',
-        sortable: true,
-      },
-      {
-        accessor: 'name',
-        Header: 'Name',
-        filterable: true,
-      },
-    ],
-    filters: [
-      {
-        Header: 'Name',
-        id: 'name',
-        operators: [{ label: 'Starts With', value: 'sw' }],
-      },
-    ],
-    data: [
-      { id: 1, name: 'data 1' },
-      { id: 2, name: 'data 2' },
-    ],
-    count: 2,
-    pageSize: 1,
-    fetchData: jest.fn(() => []),
-    loading: false,
-    bulkActions: [{ name: 'do something', onSelect: jest.fn() }],
-  };
   const wrapper = mount(<ListView {...mockedProps} />);
 
   afterEach(() => {
@@ -138,34 +140,35 @@ describe('ListView', () => {
     wrapper.update();
 
     expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
-                  Array [
-                    Object {
-                      "filters": Array [
-                        Object {
-                          "Header": "name",
-                          "id": "name",
-                          "operator": "sw",
-                          "value": "foo",
-                        },
-                      ],
-                      "pageIndex": 0,
-                      "pageSize": 1,
-                      "sortBy": Array [
-                        Object {
-                          "desc": false,
-                          "id": "id",
-                        },
-                      ],
-                    },
-                  ]
-            `);
+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);
     expect(wrapper.find(Pagination.Item).exists()).toBe(true);
     expect(wrapper.find(Pagination.Next).exists()).toBe(true);
   });
+
   it('calls fetchData on page change', () => {
     act(() => {
       wrapper.find(ListViewPagination).prop('onChange')(2);
@@ -173,28 +176,28 @@ describe('ListView', () => {
     wrapper.update();
 
     expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
-                  Array [
-                    Object {
-                      "filters": Array [
-                        Object {
-                          "Header": "name",
-                          "id": "name",
-                          "operator": "sw",
-                          "value": "foo",
-                        },
-                      ],
-                      "pageIndex": 1,
-                      "pageSize": 1,
-                      "sortBy": Array [
-                        Object {
-                          "desc": false,
-                          "id": "id",
-                        },
-                      ],
-                    },
-                  ]
-            `);
+Array [
+  Object {
+    "filters": Array [
+      Object {
+        "id": "name",
+        "operator": "sw",
+        "value": "foo",
+      },
+    ],
+    "pageIndex": 1,
+    "pageSize": 1,
+    "sortBy": Array [
+      Object {
+        "desc": false,
+        "id": "id",
+      },
+    ],
+  },
+]
+`);
   });
+
   it('handles bulk actions on 1 row', () => {
     act(() => {
       wrapper
@@ -228,6 +231,7 @@ describe('ListView', () => {
                                     ]
                         `);
   });
+
   it('handles bulk actions on all rows', () => {
     act(() => {
       wrapper
@@ -265,6 +269,7 @@ describe('ListView', () => {
                         ]
                 `);
   });
+
   it('Throws an exception if filter missing in columns', () => {
     expect.assertions(1);
     const props = {
@@ -280,3 +285,105 @@ describe('ListView', () => {
     }
   });
 });
+
+describe('ListView with new UI filters', () => {
+  const newFiltersProps = {
+    ...mockedProps,
+    useNewUIFilters: true,
+    filters: [
+      {
+        Header: 'ID',
+        id: 'id',
+        input: 'select',
+        selects: [{ label: 'foo', value: 'bar' }],
+        operator: 'eq',
+      },
+      {
+        Header: 'Name',
+        id: 'name',
+        input: 'search',
+        operator: 'ct',
+      },
+    ],
+  };
+
+  const wrapper = mount(<ListView {...newFiltersProps} />);
+
+  afterEach(() => {
+    mockedProps.fetchData.mockClear();
+    mockedProps.bulkActions.forEach(ba => {
+      ba.onSelect.mockClear();
+    });
+  });
+
+  it('renders UI filters', () => {
+    expect(wrapper.find(ListViewFilters)).toHaveLength(1);
+  });
+
+  it('calls fetchData on filter', () => {
+    act(() => {
+      wrapper
+        .find('[data-test="filters-select"]')
+        .last()
+        .props()
+        .onChange({ value: 'bar' });
+    });
+
+    act(() => {
+      wrapper
+        .find('[data-test="filters-search"]')
+        .last()
+        .props()
+        .onChange({ currentTarget: { value: 'something' } });
+    });
+
+    wrapper.update();
+
+    act(() => {
+      wrapper
+        .find('[data-test="filters-search"]')
+        .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 [],
+    },
+  ]
+  `);
+  });
+});