delete filter

client/src/components/__test__/filter/Filter.spec.tsx

@@ -1,49 +0,0 @@
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act } from 'react-dom/test-utils';
-import Filter from '../../filter/Filter';
-import { fireEvent } from '@testing-library/react';
-
-let container: any = null;
-
-// jest.mock('../../customButton/CustomButton', () => {
-//   return props => {
-//     <button>{props.children}</button>;
-//   };
-// });
-
-jest.mock('@material-ui/core/styles/makeStyles', () => {
-  return () => () => ({});
-});
-
-describe('Test Filter', () => {
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    unmountComponentAtNode(container);
-    container.remove();
-    container = null;
-  });
-
-  test('test filter props', () => {
-    const options = [
-      { label: 'a', value: 1 },
-      { label: 'b', value: 2 },
-    ];
-    const filterSpy = jest.fn();
-    act(() => {
-      render(
-        <Filter
-          filterOptions={options}
-          filterTitle="test"
-          onFilter={filterSpy}
-        />,
-        container
-      );
-    });
-    fireEvent.click(container.querySelector('button'));
-    expect(container.querySelector('p').textContent).toEqual('test');
-  });
-});

client/src/components/copy/Copy.tsx

@@ -1,6 +1,6 @@
 import { IconButton, makeStyles } from '@material-ui/core';
 import { useState } from 'react';
-import * as React from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { copyToCommand } from '../../utils/Common';
 import CustomToolTip from '../customToolTip/CustomToolTip';

client/src/components/customCard/CustomCard.tsx

@@ -11,7 +11,7 @@ import {
   Tooltip,
 } from '@material-ui/core';
 import { FC } from 'react';
-import * as React from 'react';
+import React from 'react';
 import icons from '../icons/Icons';
 import { ICustomCardProps, IMenu } from './Types';
 

client/src/components/filter/Filter.tsx

@@ -1,163 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import * as React from 'react';
-import CustomButton from '../customButton/CustomButton';
-import ICONS from '../icons/Icons';
-import {
-  Typography,
-  makeStyles,
-  Theme,
-  createStyles,
-  Button,
-} from '@material-ui/core';
-import { FilterType } from './Types';
-import Icons from '../icons/Icons';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import { useTranslation } from 'react-i18next';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      position: 'relative',
-      display: 'inline-block',
-      margin: theme.spacing(0, 2),
-    },
-    count: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: '16px',
-      height: '16px',
-      marginLeft: theme.spacing(1),
-      fontSize: '12px',
-      borderRadius: '50%',
-      backgroundColor: theme.palette.common.white,
-    },
-    options: {
-      position: 'absolute',
-      top: '120%',
-      width: '360px',
-      padding: theme.spacing(4, 3),
-      backgroundColor: theme.palette.common.white,
-      color: 'rgba(0, 0, 0, 0.33)',
-      border: '2px solid rgba(0, 0, 0, 0.15)',
-      zIndex: theme.zIndex.tooltip,
-    },
-    title: {
-      marginBottom: theme.spacing(1),
-      textTransform: 'uppercase',
-      boxShadow: 'initial',
-    },
-    btnRoot: {
-      color: theme.palette.common.black,
-      marginRight: theme.spacing(3),
-      opacity: 0.33,
-      '&:hover': {
-        color: theme.palette.common.black,
-        opacity: 0.6,
-      },
-    },
-    active: {
-      color: theme.palette.common.black,
-      opacity: 0.6,
-      backgroundColor: theme.palette.primary.light,
-    },
-    typoButton: {
-      textTransform: 'none',
-    },
-  })
-);
-
-const Filter: FC<FilterType> = props => {
-  const classes = useStyles();
-  const [selected, setSelected] = useState<string[]>([]);
-  const [show, setShow] = useState<boolean>(false);
-  const { t } = useTranslation('btn');
-
-  const { filterOptions = [], onFilter, filterTitle = '' } = props;
-
-  const handleClick = (e: React.MouseEvent) => {
-    setShow(!show);
-  };
-
-  const handleFilter = (value: string) => {
-    !selected.includes(value) && setSelected([...selected, value]);
-  };
-
-  const handleClose = (e: React.MouseEvent, value: string) => {
-    e.stopPropagation();
-    setSelected(v => v.filter(text => value !== text));
-  };
-
-  const CloseIcon = (props: { value: string }) => (
-    <>
-      {Icons.clear({
-        onClick: (e: React.MouseEvent) => handleClose(e, props.value),
-      })}
-    </>
-  );
-
-  useEffect(() => {
-    onFilter && onFilter(selected);
-  }, [selected, onFilter]);
-
-  const handleClickAway = () => {
-    setShow(false);
-  };
-
-  return (
-    <div className={classes.root}>
-      <CustomButton
-        size="small"
-        onClick={handleClick}
-        startIcon={ICONS.filter()}
-        color="primary"
-      >
-        <Typography variant="button">{t('filter')} </Typography>
-        {selected.length ? (
-          <Typography
-            className={classes.count}
-            variant="button"
-            component="span"
-          >
-            {selected.length}
-          </Typography>
-        ) : null}
-      </CustomButton>
-      {show && (
-        <ClickAwayListener onClickAway={handleClickAway}>
-          <div className={classes.options}>
-            <Typography className={classes.title}>{filterTitle}</Typography>
-            {filterOptions.map(v => (
-              <Button
-                key={v.value}
-                size="small"
-                color="default"
-                classes={{
-                  root: classes.btnRoot,
-                }}
-                className={selected.includes(v.value) ? classes.active : ''}
-                endIcon={
-                  selected.includes(v.value) ? (
-                    <CloseIcon value={v.value} />
-                  ) : null
-                }
-                onClick={() => {
-                  handleFilter(v.value);
-                }}
-              >
-                <Typography
-                  variant="button"
-                  classes={{ button: classes.typoButton }}
-                >
-                  {v.label}
-                </Typography>
-              </Button>
-            ))}
-          </div>
-        </ClickAwayListener>
-      )}
-    </div>
-  );
-};
-
-export default Filter;

client/src/components/filter/Types.ts

@@ -1,5 +0,0 @@
-export type FilterType = {
-  filterOptions?: { label: string; value: any }[];
-  onFilter?: (selected: any[]) => void;
-  filterTitle?: string;
-};

client/src/components/grid/Table.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useRef, useState } from 'react';
-import * as React from 'react';
+import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';

client/src/components/grid/TableHead.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import * as React from 'react';
+import React from 'react';
 import { TableHeadType } from './Types';
 import {
   TableHead,

client/src/components/grid/TablePaginationActions.tsx

@@ -6,7 +6,7 @@ import {
   Typography,
 } from '@material-ui/core';
 import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons';
-import * as React from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TablePaginationActionsProps } from './Types';
 

client/src/components/grid/ToolBar.tsx

@@ -10,7 +10,6 @@ import {
 import CustomButton from '../customButton/CustomButton';
 import Icons from '../icons/Icons';
 import { ToolBarConfig, ToolBarType } from './Types';
-import Filter from '../filter/Filter';
 import SearchInput from '../textField/SearchInput';
 import TableSwitch from './TableSwitch';
 import { throwErrorForDev } from '../../utils/Common';
@@ -38,13 +37,7 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 const CustomToolBar: FC<ToolBarType> = props => {
-  const {
-    toolbarConfigs,
-    filterOptions = [],
-    onFilter,
-    filterTitle,
-    selected = [],
-  } = props;
+  const { toolbarConfigs, selected = [] } = props;
   const classes = useStyles();
 
   // remove hidden button
@@ -107,13 +100,6 @@ const CustomToolBar: FC<ToolBarType> = props => {
 
             return isIcon ? iconBtn : btn;
           })}
-          {filterOptions.length && onFilter ? (
-            <Filter
-              filterOptions={filterOptions}
-              onFilter={onFilter}
-              filterTitle={filterTitle}
-            ></Filter>
-          ) : null}
         </Grid>
 
         {rightConfigs.length > 0 && (

client/src/components/grid/Types.ts

@@ -1,5 +1,4 @@
 import { IconsType } from '../icons/Types';
-import { FilterType } from '../filter/Types';
 import { SearchType } from '../textField/Types';
 import { ReactElement } from 'react';
 
@@ -12,7 +11,7 @@ export type ColorType = 'default' | 'inherit' | 'primary' | 'secondary';
 /**
  * selected: selected data in table checkbox
  */
-export type ToolBarType = FilterType & {
+export type ToolBarType = {
   toolbarConfigs: ToolBarConfig[];
   selected?: any[];
   setSelected?: (selected: any[]) => void;

client/src/components/grid/index.tsx

@@ -1,5 +1,5 @@
 import { FC, MouseEvent } from 'react';
-import * as React from 'react';
+import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
@@ -99,9 +99,6 @@ const MilvusGrid: FC<MilvusGridType> = props => {
     openCheckBox = true,
     disableSelect = false,
     noData = t('grid.noData'),
-    filterOptions = [],
-    onFilter,
-    filterTitle,
     showHoverStyle = true,
     selected = [],
     setSelected = () => {},
@@ -190,9 +187,6 @@ const MilvusGrid: FC<MilvusGridType> = props => {
         <Grid item>
           <CustomToolbar
             toolbarConfigs={toolbarConfigs}
-            filterOptions={filterOptions}
-            onFilter={onFilter}
-            filterTitle={filterTitle}
             selected={selected}
           ></CustomToolbar>
         </Grid>

client/src/components/icons/Icons.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IconsType } from './Types';
 import SearchIcon from '@material-ui/icons/Search';
 import AddIcon from '@material-ui/icons/Add';
@@ -7,7 +7,6 @@ import FileCopyIcon from '@material-ui/icons/FileCopy';
 import Visibility from '@material-ui/icons/Visibility';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import ClearIcon from '@material-ui/icons/Clear';
-import FilterListIcon from '@material-ui/icons/FilterList';
 import ReorderIcon from '@material-ui/icons/Reorder';
 import AppsIcon from '@material-ui/icons/Apps';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
@@ -24,7 +23,6 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   invisible: (props = {}) => <VisibilityOff {...props} />,
   error: (props = {}) => <CancelIcon {...props} />,
   clear: (props = {}) => <ClearIcon {...props} />,
-  filter: (props = {}) => <FilterListIcon {...props} />,
   more: (props = {}) => <MoreVertIcon {...props} />,
   app: (props = {}) => <AppsIcon {...props} />,
   success: (props = {}) => <CheckCircleIcon {...props} />,

client/src/components/icons/Types.ts

@@ -8,7 +8,6 @@ export type IconsType =
   | 'invisible'
   | 'error'
   | 'clear'
-  | 'filter'
   | 'app'
   | 'more'
   | 'success';

client/src/components/layout/GlobalEffect.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import * as React from 'react';
+import React from 'react';
 import axiosInstance from '../../http/Axios';
 import { rootContext } from '../../context/Root';
 import { CODE_STATUS } from '../../consts/Http';

client/src/components/menu/SimpleMenu.tsx

@@ -1,5 +1,5 @@
 import { FC, useMemo } from 'react';
-import * as React from 'react';
+import React from 'react';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import { generateId } from '../../utils/Common';

client/src/consts/Polling.ts

@@ -1,6 +0,0 @@
-export const POLLING_INTERVAL = 1000 * 30;
-
-export enum PollingTypeEnum {
-  databases = 'DATABASES',
-  queries = 'QUERY_SERVICES',
-}

client/src/consts/Reducer.ts

@@ -1,6 +0,0 @@
-// reducer actions
-export const ADD = 'add';
-export const UPDATE = 'update';
-export const INIT = 'init';
-export const DELETE = 'delete';
-export const RESET = 'reset';

client/src/consts/WebSocket.ts

@@ -1 +0,0 @@
-export const CONNECT = 'connect';