[charts] adds new filters ui (#9530)

* [charts] adds new filters ui

* move null check to be more visible

* better filter lists and async filter functionality

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

@@ -35,6 +35,10 @@ const mockedProps = {
       Header: 'ID',
       sortable: true,
     },
+    {
+      accessor: 'age',
+      Header: 'Age',
+    },
     {
       accessor: 'name',
       Header: 'Name',
@@ -287,6 +291,7 @@ Array [
 });
 
 describe('ListView with new UI filters', () => {
+  const fetchSelectsMock = jest.fn(() => []);
   const newFiltersProps = {
     ...mockedProps,
     useNewUIFilters: true,
@@ -304,6 +309,13 @@ describe('ListView with new UI filters', () => {
         input: 'search',
         operator: 'ct',
       },
+      {
+        Header: 'Age',
+        id: 'age',
+        input: 'select',
+        fetchSelects: fetchSelectsMock,
+        operator: 'eq',
+      },
     ],
   };
 
@@ -320,11 +332,15 @@ describe('ListView with new UI filters', () => {
     expect(wrapper.find(ListViewFilters)).toHaveLength(1);
   });
 
+  it('fetched selects if function is provided', () => {
+    expect(fetchSelectsMock).toHaveBeenCalled();
+  });
+
   it('calls fetchData on filter', () => {
     act(() => {
       wrapper
         .find('[data-test="filters-select"]')
-        .last()
+        .first()
         .props()
         .onChange({ value: 'bar' });
     });
@@ -332,7 +348,7 @@ describe('ListView with new UI filters', () => {
     act(() => {
       wrapper
         .find('[data-test="filters-search"]')
-        .last()
+        .first()
         .props()
         .onChange({ currentTarget: { value: 'something' } });
     });
@@ -348,42 +364,42 @@ describe('ListView with new UI filters', () => {
     });
 
     expect(newFiltersProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
-  Array [
-    Object {
-      "filters": Array [
-        Object {
-          "id": "id",
-          "operator": "eq",
-          "value": "bar",
-        },
-      ],
-      "pageIndex": 0,
-      "pageSize": 1,
-      "sortBy": Array [],
-    },
-  ]
-  `);
+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 [],
-    },
-  ]
-  `);
+Array [
+  Object {
+    "filters": Array [
+      Object {
+        "id": "id",
+        "operator": "eq",
+        "value": "bar",
+      },
+      Object {
+        "id": "name",
+        "operator": "ct",
+        "value": "something",
+      },
+    ],
+    "pageIndex": 0,
+    "pageSize": 1,
+    "sortBy": Array [],
+  },
+]
+`);
   });
 });

superset-frontend/spec/javascripts/views/chartList/ChartList_spec.jsx

@@ -32,6 +32,8 @@ const store = mockStore({});
 const chartsInfoEndpoint = 'glob:*/api/v1/chart/_info*';
 const chartssOwnersEndpoint = 'glob:*/api/v1/chart/related/owners*';
 const chartsEndpoint = 'glob:*/api/v1/chart/?*';
+const chartsVizTypesEndpoint = 'glob:*/api/v1/chart/viz_types';
+const chartsDtasourcesEndpoint = 'glob:*/api/v1/chart/datasources';
 
 const mockCharts = [...new Array(3)].map((_, i) => ({
   changed_on: new Date().toISOString(),
@@ -40,6 +42,7 @@ const mockCharts = [...new Array(3)].map((_, i) => ({
   slice_name: `cool chart ${i}`,
   url: 'url',
   viz_type: 'bar',
+  datasource_name: `ds${i}`,
 }));
 
 fetchMock.get(chartsInfoEndpoint, {
@@ -60,6 +63,16 @@ fetchMock.get(chartsEndpoint, {
   chart_count: 3,
 });
 
+fetchMock.get(chartsVizTypesEndpoint, {
+  result: [],
+  count: 0,
+});
+
+fetchMock.get(chartsDtasourcesEndpoint, {
+  result: [],
+  count: 0,
+});
+
 describe('ChartList', () => {
   const mockedProps = {};
   const wrapper = mount(<ChartList {...mockedProps} />, {