Refactored feature toggles table (#951)

* refactor: simplify table toolbar

* refactor: table links and padding

* fix: header icons colors

* fix: minor table style changes

src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts

@@ -4,6 +4,9 @@ export const useStyles = makeStyles()(theme => ({
  tableCellHeaderSortable: {
  padding: 0,
  position: 'relative',
+ '&:hover, &:focus': {
+ backgroundColor: theme.palette.grey[400],
+ },
  },
  sortButton: {
  all: 'unset',
@@ -15,9 +18,6 @@ export const useStyles = makeStyles()(theme => ({
  },
  display: 'flex',
  alignItems: 'center',
- '&:hover': {
- backgroundColor: theme.palette.grey[400],
- },
  boxSizing: 'inherit',
  cursor: 'pointer',
  },

src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts

@@ -14,8 +14,4 @@ export const useStyles = makeStyles()(theme => ({
  },
  },
  },
- icon: {
- marginLeft: theme.spacing(0.5),
- fontSize: 18,
- },
 }));

src/component/common/Table/Table.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { Box, Table as MUITable } from '@mui/material';
+
+export const Table: FC = ({ children }) => (
+ <Box sx={{ p: 4, pb: 0 }}>
+ <MUITable>{children}</MUITable>
+ </Box>
+);

src/component/common/Table/TableActions/TableActions.tsx

@@ -14,6 +14,9 @@ interface ITableActionsProps {
  isSeparated?: boolean;
 }
 
+/**
+ * @deprecated
+ */
 export const TableActions: FC<ITableActionsProps> = ({
  initialSearchValue: search,
  onSearch = () => {},

src/component/common/Table/TableCell/TableCell.styles.ts

@@ -0,0 +1,7 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ tableCell: {
+ padding: 0,
+ },
+}));

src/component/common/Table/TableCell/TableCell.tsx

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { TableCell as MUITableCell, TableCellProps } from '@mui/material';
+import { useStyles } from './TableCell.styles';
+
+export const TableCell: FC<TableCellProps> = ({ ...props }) => {
+ const { classes: styles } = useStyles();
+
+ return <MUITableCell className={styles.tableCell} {...props} />;
+};

src/component/common/Table/TablePanel/TablePanel.styles.ts → src/component/common/Table/TableContainer/TableContainer.styles.ts

@@ -7,8 +7,4 @@ export const useStyles = makeStyles()(theme => ({
  borderRadius: theme.spacing(1.5),
  paddingBottom: theme.spacing(4),
  },
- content: {
- padding: theme.spacing(4),
- paddingBottom: 0,
- },
 }));

src/component/common/Table/TableContainer/TableContainer.tsx

@@ -0,0 +1,15 @@
+import { forwardRef } from 'react';
+import { Paper, PaperProps } from '@mui/material';
+import { useStyles } from './TableContainer.styles';
+
+export const TableContainer = forwardRef<HTMLDivElement, PaperProps>(
+ ({ children, ...props }, ref) => {
+ const { classes } = useStyles();
+
+ return (
+ <Paper ref={ref} className={classes.panel} {...props}>
+ {children}
+ </Paper>
+ );
+ }
+);

src/component/common/Table/TablePlaceholder/TablePlaceholder.styles.ts

@@ -8,7 +8,6 @@ export const useStyles = makeStyles()(theme => ({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
- marginTop: theme.spacing(4),
- marginBottom: theme.spacing(4),
+ margin: theme.spacing(4),
  },
 }));

src/component/common/Table/TablePlaceholder/TablePlaceholder.tsx

@@ -2,10 +2,8 @@ import { FC } from 'react';
 import { Box } from '@mui/material';
 import { useStyles } from 'component/common/Table/TablePlaceholder/TablePlaceholder.styles';
 
-const TablePlaceholder: FC = ({ children }) => {
+export const TablePlaceholder: FC = ({ children }) => {
  const { classes: styles } = useStyles();
 
  return <Box className={styles.emptyStateListItem}>{children}</Box>;
 };
-
-export default TablePlaceholder;

src/component/common/Table/TableSearch/TableSearch.styles.ts

@@ -0,0 +1,59 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ searchField: {
+ width: '45px',
+ '& .search-icon': {
+ marginRight: 0,
+ },
+ '& .input-container, .clear-container': {
+ width: 0,
+ },
+ '& input::placeholder': {
+ color: 'transparent',
+ transition: 'color 0.6s',
+ },
+ '& input:focus-within::placeholder': {
+ color: theme.palette.text.primary,
+ },
+ },
+ searchFieldEnter: {
+ width: '250px',
+ transition: 'width 0.6s',
+ '& .search-icon': {
+ marginRight: '8px',
+ },
+ '& .input-container': {
+ width: '100%',
+ transition: 'width 0.6s',
+ },
+ '& .clear-container': {
+ width: '30px',
+ transition: 'width 0.6s',
+ },
+ '& .search-container': {
+ borderColor: theme.palette.grey[300],
+ },
+ },
+ searchFieldLeave: {
+ width: '45px',
+ transition: 'width 0.6s',
+ '& .search-icon': {
+ marginRight: 0,
+ transition: 'margin-right 0.6s',
+ },
+ '& .input-container, .clear-container': {
+ width: 0,
+ transition: 'width 0.6s',
+ },
+ '& .search-container': {
+ borderColor: 'transparent',
+ },
+ },
+ searchButton: {
+ marginTop: '-4px',
+ marginBottom: '-4px',
+ marginRight: '-4px',
+ marginLeft: '-4px',
+ },
+}));

src/component/common/Table/TableSearch/TableSearch.tsx

@@ -0,0 +1,75 @@
+import { FC, useState } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { Search } from '@mui/icons-material';
+import { useAsyncDebounce } from 'react-table';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import AnimateOnMount from 'component/common/AnimateOnMount/AnimateOnMount';
+import { TableSearchField } from './TableSearchField/TableSearchField';
+import { useStyles } from './TableSearch.styles';
+
+interface ITableSearchProps {
+ initialValue?: string;
+ onChange?: (value: string) => void;
+ placeholder?: string;
+}
+
+export const TableSearch: FC<ITableSearchProps> = ({
+ initialValue,
+ onChange = () => {},
+ placeholder = 'Search',
+}) => {
+ const [searchInputState, setSearchInputState] = useState(initialValue);
+ const [isSearchExpanded, setIsSearchExpanded] = useState(
+ Boolean(initialValue)
+ );
+ const [isAnimating, setIsAnimating] = useState(false);
+ const debouncedOnSearch = useAsyncDebounce(onChange, 200);
+
+ const { classes: styles } = useStyles();
+
+ const onBlur = (clear = false) => {
+ if (!searchInputState || clear) {
+ setIsSearchExpanded(false);
+ }
+ };
+
+ const onSearchChange = (value: string) => {
+ debouncedOnSearch(value);
+ setSearchInputState(value);
+ };
+
+ return (
+ <>
+ <AnimateOnMount
+ mounted={isSearchExpanded}
+ start={styles.searchField}
+ enter={styles.searchFieldEnter}
+ leave={styles.searchFieldLeave}
+ onStart={() => setIsAnimating(true)}
+ onEnd={() => setIsAnimating(false)}
+ >
+ <TableSearchField
+ value={searchInputState!}
+ onChange={onSearchChange}
+ placeholder={`${placeholder}…`}
+ onBlur={onBlur}
+ />
+ </AnimateOnMount>
+ <ConditionallyRender
+ condition={!isSearchExpanded && !isAnimating}
+ show={
+ <Tooltip title={placeholder} arrow>
+ <IconButton
+ aria-label={placeholder}
+ onClick={() => setIsSearchExpanded(true)}
+ size="large"
+ className={styles.searchButton}
+ >
+ <Search />
+ </IconButton>
+ </Tooltip>
+ }
+ />
+ </>
+ );
+};

src/component/common/Table/TableSearch/TableSearchField/TableSearchField.styles.ts

@@ -0,0 +1,43 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ container: {
+ display: 'flex',
+ alignItems: 'center',
+ flexWrap: 'wrap',
+ gap: '1rem',
+ },
+ search: {
+ display: 'flex',
+ alignItems: 'center',
+ backgroundColor: theme.palette.background.paper,
+ border: `1px solid ${theme.palette.grey[300]}`,
+ borderRadius: '25px',
+ padding: '3px 5px 3px 12px',
+ maxWidth: '450px',
+ [theme.breakpoints.down('sm')]: {
+ width: '100%',
+ },
+ '&.search-container:focus-within': {
+ borderColor: theme.palette.primary.light,
+ boxShadow: theme.boxShadows.main,
+ },
+ },
+ searchIcon: {
+ marginRight: 8,
+ color: theme.palette.grey[600],
+ },
+ clearContainer: {
+ width: '30px',
+ '& > button': {
+ padding: '7px',
+ },
+ },
+ clearIcon: {
+ color: theme.palette.grey[600],
+ fontSize: '18px',
+ },
+ inputRoot: {
+ width: '100%',
+ },
+}));

src/component/common/Table/TableSearch/TableSearchField/TableSearchField.tsx

@@ -0,0 +1,73 @@
+import { IconButton, InputBase, Tooltip } from '@mui/material';
+import { Search, Close } from '@mui/icons-material';
+import classnames from 'classnames';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useStyles } from './TableSearchField.styles';
+
+interface ITableSearchFieldProps {
+ value: string;
+ onChange: (value: string) => void;
+ className?: string;
+ placeholder: string;
+ onBlur?: (clear?: boolean) => void;
+}
+
+export const TableSearchField = ({
+ value = '',
+ onChange,
+ className,
+ placeholder,
+ onBlur,
+}: ITableSearchFieldProps) => {
+ const { classes: styles } = useStyles();
+
+ return (
+ <div className={styles.container}>
+ <div
+ className={classnames(
+ styles.search,
+ className,
+ 'search-container'
+ )}
+ >
+ <Search
+ className={classnames(styles.searchIcon, 'search-icon')}
+ />
+ <InputBase
+ autoFocus
+ placeholder={placeholder}
+ classes={{
+ root: classnames(styles.inputRoot, 'input-container'),
+ }}
+ inputProps={{ 'aria-label': placeholder }}
+ value={value}
+ onChange={e => onChange(e.target.value)}
+ onBlur={() => onBlur?.()}
+ />
+ <div
+ className={classnames(
+ styles.clearContainer,
+ 'clear-container'
+ )}
+ >
+ <ConditionallyRender
+ condition={Boolean(value)}
+ show={
+ <Tooltip title="Clear search query" arrow>
+ <IconButton
+ size="small"
+ onClick={() => {
+ onChange('');
+ onBlur?.(true);
+ }}
+ >
+ <Close className={styles.clearIcon} />
+ </IconButton>
+ </Tooltip>
+ }
+ />
+ </div>
+ </div>
+ </div>
+ );
+};