[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
apache · Apr 21, 2020 · 0b999e3 · 0b999e3
1 parent 9cf33e9
commit 0b999e3
Show file tree

Hide file tree

Showing 12 changed files with 366 additions and 100 deletions.
diff --git a/superset-frontend/spec/javascripts/components/ListView/ListView_spec.jsx b/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,19 +332,23 @@ 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' });
     });
 
     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 [],
+  },
+]
+`);
   });
 });
diff --git a/superset-frontend/spec/javascripts/views/chartList/ChartList_spec.jsx b/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} />, {

diff --git a/superset-frontend/src/components/ListView/Filters.tsx b/superset-frontend/src/components/ListView/Filters.tsx
@@ -20,7 +20,7 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { withTheme } from 'emotion-theming';
 
-import StyledSelect from 'src/components/StyledSelect';
+import StyledSelect, { AsyncStyledSelect } from 'src/components/StyledSelect';
 import SearchInput from 'src/components/SearchInput';
 import { Filter, Filters, FilterValue, InternalFilter } from './types';
 
@@ -32,6 +32,7 @@ interface SelectFilterProps extends BaseFilter {
   onSelect: (selected: any) => any;
   selects: Filter['selects'];
   emptyLabel?: string;
+  fetchSelects?: Filter['fetchSelects'];
 }
 
 const FilterContainer = styled.div`
@@ -51,11 +52,13 @@ function SelectFilter({
   emptyLabel = 'None',
   initialValue,
   onSelect,
+  fetchSelects,
 }: SelectFilterProps) {
   const clearFilterSelect = {
     label: emptyLabel,
     value: CLEAR_SELECT_FILTER_VALUE,
   };
+
   const options = React.useMemo(() => [clearFilterSelect, ...selects], [
     emptyLabel,
     selects,
@@ -73,17 +76,34 @@ function SelectFilter({
       selected.value === CLEAR_SELECT_FILTER_VALUE ? undefined : selected.value,
     );
   };
+  const fetchAndFormatSelects = async () => {
+    if (!fetchSelects) return { options: [clearFilterSelect] };
+    const selectValues = await fetchSelects();
+    return { options: [clearFilterSelect, ...selectValues] };
+  };
 
   return (
     <FilterContainer>
       <Title>{Header}:</Title>
-      <StyledSelect
-        data-test="filters-select"
-        value={value}
-        options={options}
-        onChange={onChange}
-        clearable={false}
-      />
+      {fetchSelects ? (
+        <AsyncStyledSelect
+          data-test="filters-select"
+          value={value}
+          onChange={onChange}
+          loadOptions={fetchAndFormatSelects}
+          placeholder={initialValue || emptyLabel}
+          loadingPlaceholder="Loading..."
+          clearable={false}
+        />
+      ) : (
+        <StyledSelect
+          data-test="filters-select"
+          value={value}
+          options={options}
+          onChange={onChange}
+          clearable={false}
+        />
+      )}
     </FilterContainer>
   );
 }
@@ -134,33 +154,36 @@ function UIFilters({
 }: UIFiltersProps) {
   return (
     <FilterWrapper>
-      {filters.map(({ Header, input, selects, unfilteredLabel }, index) => {
-        const initialValue =
-          internalFilters[index] && internalFilters[index].value;
-        if (input === 'select') {
-          return (
-            <SelectFilter
-              key={Header}
-              Header={Header}
-              selects={selects}
-              emptyLabel={unfilteredLabel}
-              initialValue={initialValue}
-              onSelect={(value: any) => updateFilterValue(index, value)}
-            />
-          );
-        }
-        if (input === 'search') {
-          return (
-            <SearchFilter
-              key={Header}
-              Header={Header}
-              initialValue={initialValue}
-              onSubmit={(value: string) => updateFilterValue(index, value)}
-            />
-          );
-        }
-        return null;
-      })}
+      {filters.map(
+        ({ Header, input, selects, unfilteredLabel, fetchSelects }, index) => {
+          const initialValue =
+            internalFilters[index] && internalFilters[index].value;
+          if (input === 'select') {
+            return (
+              <SelectFilter
+                key={Header}
+                Header={Header}
+                selects={selects}
+                emptyLabel={unfilteredLabel}
+                initialValue={initialValue}
+                fetchSelects={fetchSelects}
+                onSelect={(value: any) => updateFilterValue(index, value)}
+              />
+            );
+          }
+          if (input === 'search') {
+            return (
+              <SearchFilter
+                key={Header}
+                Header={Header}
+                initialValue={initialValue}
+                onSubmit={(value: string) => updateFilterValue(index, value)}
+              />
+            );
+          }
+          return null;
+        },
+      )}
     </FilterWrapper>
   );
 }

diff --git a/superset-frontend/src/components/ListView/types.ts b/superset-frontend/src/components/ListView/types.ts
@@ -36,14 +36,22 @@ export interface Filter {
   input?: 'text' | 'textarea' | 'select' | 'checkbox' | 'search';
   unfilteredLabel?: string;
   selects?: Select[];
+  onFilterOpen?: () => void;
+  fetchSelects?: () => Promise<Select[]>;
 }
 
 export type Filters = Filter[];
 
 export interface FilterValue {
   id: string;
   operator?: string;
-  value: string | boolean | number | null | undefined;
+  value:
+    | string
+    | boolean
+    | number
+    | null
+    | undefined
+    | { datasource_id: number; datasource_type: string };
 }
 
 export interface FetchDataConfig {

diff --git a/superset-frontend/src/components/StyledSelect.tsx b/superset-frontend/src/components/StyledSelect.tsx
@@ -18,7 +18,7 @@
  */
 import styled from '@emotion/styled';
 // @ts-ignore
-import Select from 'react-select';
+import Select, { Async } from 'react-select';
 
 export default styled(Select)`
   display: inline;
@@ -46,3 +46,30 @@ export default styled(Select)`
     border-bottom-left-radius: 0;
   }
 `;
+
+export const AsyncStyledSelect = styled(Async)`
+  display: inline;
+  &.is-focused:not(.is-open) > .Select-control {
+    border: none;
+    box-shadow: none;
+  }
+  .Select-control {
+    display: inline-table;
+    border: none;
+    width: 100px;
+    &:focus,
+    &:hover {
+      border: none;
+      box-shadow: none;
+    }
+
+    .Select-arrow-zone {
+      padding-left: 10px;
+    }
+  }
+  .Select-menu-outer {
+    margin-top: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+`;