feat(CRUD): add new empty state (apache#19310)

* feat(CRUD): add new empty state * fix ci * add svg license
ValtechMobility · Jun 9, 2022 · 27e3aa0 · 27e3aa0
1 parent 8b16419
commit 27e3aa0
Show file tree

Hide file tree

Showing 13 changed files with 201 additions and 95 deletions.
diff --git a/superset-frontend/src/assets/images/filter-results.svg b/superset-frontend/src/assets/images/filter-results.svg
diff --git a/superset-frontend/src/components/Button/index.tsx b/superset-frontend/src/components/Button/index.tsx
@@ -56,6 +56,7 @@ export interface ButtonProps {
     | 'rightTop'
     | 'rightBottom';
   onClick?: OnClickHandler;
+  onMouseDown?: OnClickHandler;
   disabled?: boolean;
   buttonStyle?: ButtonStyle;
   buttonSize?: 'default' | 'small' | 'xsmall';

diff --git a/superset-frontend/src/components/EmptyState/index.tsx b/superset-frontend/src/components/EmptyState/index.tsx
@@ -17,8 +17,8 @@
  * under the License.
  */
 
-import React, { ReactNode } from 'react';
-import { css, styled, SupersetTheme } from '@superset-ui/core';
+import React, { ReactNode, SyntheticEvent } from 'react';
+import { styled, css, SupersetTheme } from '@superset-ui/core';
 import { Empty } from 'src/components';
 import Button from 'src/components/Button';
 
@@ -117,9 +117,7 @@ const ActionButton = styled(Button)`
 `;
 
 const getImage = (image: string | ReactNode) =>
-  typeof image === 'string'
-    ? `${process.env.APP_PREFIX}/static/assets/images/${image}`
-    : image;
+  typeof image === 'string' ? `/static/assets/images/${image}` : image;
 
 const getImageHeight = (size: EmptyStateSize) => {
   switch (size) {
@@ -142,6 +140,11 @@ const ImageContainer = ({ image, size }: ImageContainerProps) => (
   />
 );
 
+const handleMouseDown = (e: SyntheticEvent) => {
+  e.preventDefault();
+  e.stopPropagation();
+};
+
 export const EmptyStateBig = ({
   title,
   image,
@@ -161,7 +164,11 @@ export const EmptyStateBig = ({
       <BigTitle>{title}</BigTitle>
       {description && <BigDescription>{description}</BigDescription>}
       {buttonAction && buttonText && (
-        <ActionButton buttonStyle="primary" onClick={buttonAction}>
+        <ActionButton
+          buttonStyle="primary"
+          onClick={buttonAction}
+          onMouseDown={handleMouseDown}
+        >
           {buttonText}
         </ActionButton>
       )}
@@ -188,7 +195,11 @@ export const EmptyStateMedium = ({
       <Title>{title}</Title>
       {description && <Description>{description}</Description>}
       {buttonText && buttonAction && (
-        <ActionButton buttonStyle="primary" onClick={buttonAction}>
+        <ActionButton
+          buttonStyle="primary"
+          onClick={buttonAction}
+          onMouseDown={handleMouseDown}
+        >
           {buttonText}
         </ActionButton>
       )}

diff --git a/superset-frontend/src/components/ListView/Filters/Base.ts b/superset-frontend/src/components/ListView/Filters/Base.ts
@@ -31,3 +31,7 @@ export const FilterContainer = styled.div`
   align-items: center;
   width: ${SELECT_WIDTH}px;
 `;
+
+export type FilterHandler = {
+  clearFilter: () => void;
+};
diff --git a/superset-frontend/src/components/ListView/Filters/DateRange.tsx b/superset-frontend/src/components/ListView/Filters/DateRange.tsx
@@ -16,12 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useMemo, useState } from 'react';
+import React, {
+  useState,
+  useMemo,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 import moment, { Moment } from 'moment';
 import { styled } from '@superset-ui/core';
 import { RangePicker } from 'src/components/DatePicker';
 import { FormLabel } from 'src/components/Form';
-import { BaseFilter } from './Base';
+import { BaseFilter, FilterHandler } from './Base';
 
 interface DateRangeFilterProps extends BaseFilter {
   onSubmit: (val: number[]) => void;
@@ -38,17 +43,23 @@ const RangeFilterContainer = styled.div`
   width: 360px;
 `;
 
-export default function DateRangeFilter({
-  Header,
-  initialValue,
-  onSubmit,
-}: DateRangeFilterProps) {
+function DateRangeFilter(
+  { Header, initialValue, onSubmit }: DateRangeFilterProps,
+  ref: React.RefObject<FilterHandler>,
+) {
   const [value, setValue] = useState<ValueState | null>(initialValue ?? null);
   const momentValue = useMemo((): [Moment, Moment] | null => {
     if (!value || (Array.isArray(value) && !value.length)) return null;
     return [moment(value[0]), moment(value[1])];
   }, [value]);
 
+  useImperativeHandle(ref, () => ({
+    clearFilter: () => {
+      setValue(null);
+      onSubmit([]);
+    },
+  }));
+
   return (
     <RangeFilterContainer>
       <FormLabel>{Header}</FormLabel>
@@ -72,3 +83,5 @@ export default function DateRangeFilter({
     </RangeFilterContainer>
   );
 }
+
+export default forwardRef(DateRangeFilter);
diff --git a/superset-frontend/src/components/ListView/Filters/Search.tsx b/superset-frontend/src/components/ListView/Filters/Search.tsx
@@ -16,13 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState } from 'react';
-import { styled, t } from '@superset-ui/core';
+import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import { t, styled } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { AntdInput } from 'src/components';
 import { SELECT_WIDTH } from 'src/components/ListView/utils';
 import { FormLabel } from 'src/components/Form';
-import { BaseFilter } from './Base';
+import { BaseFilter, FilterHandler } from './Base';
 
 interface SearchHeaderProps extends BaseFilter {
   Header: string;
@@ -42,12 +42,10 @@ const StyledInput = styled(AntdInput)`
   border-radius: ${({ theme }) => theme.gridUnit}px;
 `;
 
-export default function SearchFilter({
-  Header,
-  name,
-  initialValue,
-  onSubmit,
-}: SearchHeaderProps) {
+function SearchFilter(
+  { Header, name, initialValue, onSubmit }: SearchHeaderProps,
+  ref: React.RefObject<FilterHandler>,
+) {
   const [value, setValue] = useState(initialValue || '');
   const handleSubmit = () => {
     if (value) {
@@ -61,6 +59,13 @@ export default function SearchFilter({
     }
   };
 
+  useImperativeHandle(ref, () => ({
+    clearFilter: () => {
+      setValue('');
+      onSubmit('');
+    },
+  }));
+
   return (
     <Container>
       <FormLabel>{Header}</FormLabel>
@@ -78,3 +83,5 @@ export default function SearchFilter({
     </Container>
   );
 }
+
+export default forwardRef(SearchFilter);
diff --git a/superset-frontend/src/components/ListView/Filters/Select.tsx b/superset-frontend/src/components/ListView/Filters/Select.tsx
@@ -16,12 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useMemo, useState } from 'react';
+import React, {
+  useState,
+  useMemo,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 import { t } from '@superset-ui/core';
 import { Select } from 'src/components';
 import { Filter, SelectOption } from 'src/components/ListView/types';
 import { FormLabel } from 'src/components/Form';
-import { BaseFilter, FilterContainer } from './Base';
+import { FilterContainer, BaseFilter, FilterHandler } from './Base';
 
 interface SelectFilterProps extends BaseFilter {
   fetchSelects?: Filter['fetchSelects'];
@@ -31,14 +36,17 @@ interface SelectFilterProps extends BaseFilter {
   selects: Filter['selects'];
 }
 
-function SelectFilter({
-  Header,
-  name,
-  fetchSelects,
-  initialValue,
-  onSelect,
-  selects = [],
-}: SelectFilterProps) {
+function SelectFilter(
+  {
+    Header,
+    name,
+    fetchSelects,
+    initialValue,
+    onSelect,
+    selects = [],
+  }: SelectFilterProps,
+  ref: React.RefObject<FilterHandler>,
+) {
   const [selectedOption, setSelectedOption] = useState(initialValue);
 
   const onChange = (selected: SelectOption) => {
@@ -53,6 +61,12 @@ function SelectFilter({
     setSelectedOption(undefined);
   };
 
+  useImperativeHandle(ref, () => ({
+    clearFilter: () => {
+      onClear();
+    },
+  }));
+
   const fetchAndFormatSelects = useMemo(
     () => async (inputValue: string, page: number, pageSize: number) => {
       if (fetchSelects) {
@@ -88,5 +102,4 @@ function SelectFilter({
     </FilterContainer>
   );
 }
-
-export default SelectFilter;
+export default forwardRef(SelectFilter);
diff --git a/superset-frontend/src/components/ListView/Filters/index.tsx b/superset-frontend/src/components/ListView/Filters/index.tsx
@@ -16,7 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, {
+  createRef,
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+} from 'react';
 import { withTheme } from '@superset-ui/core';
 
 import {
@@ -28,18 +33,32 @@ import {
 import SearchFilter from './Search';
 import SelectFilter from './Select';
 import DateRangeFilter from './DateRange';
+import { FilterHandler } from './Base';
 
 interface UIFiltersProps {
   filters: Filters;
   internalFilters: InternalFilter[];
   updateFilterValue: (id: number, value: FilterValue['value']) => void;
 }
 
-function UIFilters({
-  filters,
-  internalFilters = [],
-  updateFilterValue,
-}: UIFiltersProps) {
+function UIFilters(
+  { filters, internalFilters = [], updateFilterValue }: UIFiltersProps,
+  ref: React.RefObject<{ clearFilters: () => void }>,
+) {
+  const filterRefs = useMemo(
+    () =>
+      Array.from({ length: filters.length }, () => createRef<FilterHandler>()),
+    [filters.length],
+  );
+
+  useImperativeHandle(ref, () => ({
+    clearFilters: () => {
+      filterRefs.forEach((filter: any) => {
+        filter.current?.clearFilter?.();
+      });
+    },
+  }));
+
   return (
     <>
       {filters.map(
@@ -49,6 +68,7 @@ function UIFilters({
           if (input === 'select') {
             return (
               <SelectFilter
+                ref={filterRefs[index]}
                 Header={Header}
                 fetchSelects={fetchSelects}
                 initialValue={initialValue}
@@ -65,6 +85,7 @@ function UIFilters({
           if (input === 'search' && typeof Header === 'string') {
             return (
               <SearchFilter
+                ref={filterRefs[index]}
                 Header={Header}
                 initialValue={initialValue}
                 key={id}
@@ -76,6 +97,7 @@ function UIFilters({
           if (input === 'datetime_range') {
             return (
               <DateRangeFilter
+                ref={filterRefs[index]}
                 Header={Header}
                 initialValue={initialValue}
                 key={id}
@@ -91,4 +113,4 @@ function UIFilters({
   );
 }
 
-export default withTheme(UIFilters);
+export default withTheme(forwardRef(UIFilters));