diff --git a/frontend/package.json b/frontend/package.json index 63c510d9d9..dc39314bb7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "unleash-frontend", "description": "unleash your features", - "version": "4.11.0-beta.2", + "version": "4.13.0-beta.0", "keywords": [ "unleash", "feature toggle", diff --git a/frontend/src/component/common/Table/TableSearch/TableSearch.tsx b/frontend/src/component/common/Table/TableSearch/TableSearch.tsx deleted file mode 100644 index 3fe2969511..0000000000 --- a/frontend/src/component/common/Table/TableSearch/TableSearch.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { IGetSearchContextOutput } from 'hooks/useSearch'; -import { FC, useState } from 'react'; -import { useAsyncDebounce } from 'react-table'; -import { TableSearchField } from './TableSearchField/TableSearchField'; - -interface ITableSearchProps { - initialValue?: string; - onChange?: (value: string) => void; - placeholder?: string; - hasFilters?: boolean; - getSearchContext?: () => IGetSearchContextOutput; -} - -/** - * @deprecated use `Search` instead. - */ -export const TableSearch: FC = ({ - initialValue, - onChange = () => {}, - placeholder, - hasFilters, - getSearchContext, -}) => { - const [searchInputState, setSearchInputState] = useState(initialValue); - const debouncedOnSearch = useAsyncDebounce(onChange, 200); - - const onSearchChange = (value: string) => { - debouncedOnSearch(value); - setSearchInputState(value); - }; - - return ( - - ); -}; diff --git a/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchField.styles.ts b/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchField.styles.ts deleted file mode 100644 index 59e56e1eaa..0000000000 --- a/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchField.styles.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - display: 'flex', - flexGrow: 1, - alignItems: 'center', - position: 'relative', - maxWidth: '400px', - [theme.breakpoints.down('md')]: { - marginTop: theme.spacing(1), - maxWidth: '100%', - }, - }, - search: { - display: 'flex', - alignItems: 'center', - backgroundColor: theme.palette.background.paper, - border: `1px solid ${theme.palette.grey[300]}`, - borderRadius: theme.shape.borderRadiusExtraLarge, - padding: '3px 5px 3px 12px', - width: '100%', - zIndex: 3, - '&.search-container:focus-within': { - borderColor: theme.palette.primary.light, - boxShadow: theme.boxShadows.main, - }, - }, - searchIcon: { - marginRight: 8, - color: theme.palette.inactiveIcon, - }, - clearContainer: { - width: '30px', - '& > button': { - padding: '7px', - }, - }, - clearIcon: { - color: theme.palette.grey[700], - fontSize: '18px', - }, - inputRoot: { - width: '100%', - }, -})); diff --git a/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchField.tsx b/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchField.tsx deleted file mode 100644 index 31e992d011..0000000000 --- a/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchField.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import { useRef, useState } from 'react'; -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'; -import { TableSearchFieldSuggestions } from './TableSearchFieldSuggestions/TableSearchFieldSuggestions'; -import { IGetSearchContextOutput } from 'hooks/useSearch'; -import { useKeyboardShortcut } from 'hooks/useKeyboardShortcut'; - -interface ITableSearchFieldProps { - value: string; - onChange: (value: string) => void; - className?: string; - placeholder?: string; - hasFilters?: boolean; - getSearchContext?: () => IGetSearchContextOutput; -} - -/** - * @deprecated use `Search` instead. - */ -export const TableSearchField = ({ - value = '', - onChange, - className, - placeholder: customPlaceholder, - hasFilters, - getSearchContext, -}: ITableSearchFieldProps) => { - const ref = useRef(); - const { classes: styles } = useStyles(); - const [showSuggestions, setShowSuggestions] = useState(false); - - const hotkey = useKeyboardShortcut( - { modifiers: ['ctrl'], key: 'k', preventDefault: true }, - () => { - if (document.activeElement === ref.current) { - ref.current?.blur(); - } else { - ref.current?.focus(); - } - } - ); - useKeyboardShortcut({ key: 'Escape' }, () => { - if (document.activeElement === ref.current) { - ref.current?.blur(); - } - }); - const placeholder = `${customPlaceholder ?? 'Search'} (${hotkey})`; - - return ( -
-
- - onChange(e.target.value)} - onFocus={() => setShowSuggestions(true)} - onBlur={() => setShowSuggestions(false)} - /> -
- - { - onChange(''); - ref.current?.focus(); - }} - > - - - - } - /> -
-
- - } - /> -
- ); -}; diff --git a/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchFieldSuggestions/SearchDescription/SearchDescription.tsx b/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchFieldSuggestions/SearchDescription/SearchDescription.tsx deleted file mode 100644 index 66396db282..0000000000 --- a/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchFieldSuggestions/SearchDescription/SearchDescription.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { styled } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { - getSearchTextGenerator, - IGetSearchContextOutput, -} from 'hooks/useSearch'; -import { VFC } from 'react'; - -const StyledHeader = styled('span')(({ theme }) => ({ - fontSize: theme.fontSizes.smallBody, - color: theme.palette.text.primary, -})); - -const StyledCode = styled('span')(({ theme }) => ({ - backgroundColor: theme.palette.secondaryContainer, - color: theme.palette.text.primary, - padding: theme.spacing(0, 0.5), - borderRadius: theme.spacing(0.5), -})); - -interface ISearchDescriptionProps { - filters: any[]; - getSearchContext: () => IGetSearchContextOutput; - searchableColumnsString: string; -} - -export const SearchDescription: VFC = ({ - filters, - getSearchContext, - searchableColumnsString, -}) => { - const searchContext = getSearchContext(); - const getSearchText = getSearchTextGenerator(searchContext.columns); - const searchText = getSearchText(searchContext.searchValue); - const searchFilters = filters.filter(filter => filter.values.length > 0); - - return ( - <> - - Searching for: -

- {searchText}{' '} - {searchableColumnsString - ? ` in ${searchableColumnsString}` - : ''} -

- - } - /> - 0} - show={ - <> - Filtering by: - {searchFilters.map(filter => ( -

- - {filter.values.join(',')} - {' '} - in {filter.header}. Options:{' '} - {filter.options.join(', ')} -

- ))} - - } - /> - - ); -}; diff --git a/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchFieldSuggestions/SearchInstructions/SearchInstructions.tsx b/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchFieldSuggestions/SearchInstructions/SearchInstructions.tsx deleted file mode 100644 index bfaf3a557e..0000000000 --- a/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchFieldSuggestions/SearchInstructions/SearchInstructions.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { styled } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { IGetSearchContextOutput } from 'hooks/useSearch'; -import { VFC } from 'react'; - -const StyledHeader = styled('span')(({ theme }) => ({ - fontSize: theme.fontSizes.smallBody, - color: theme.palette.text.primary, -})); - -const StyledCode = styled('span')(({ theme }) => ({ - backgroundColor: theme.palette.secondaryContainer, - color: theme.palette.text.primary, - padding: theme.spacing(0, 0.5), - borderRadius: theme.spacing(0.5), -})); - -interface ISearchInstructionsProps { - filters: any[]; - getSearchContext: () => IGetSearchContextOutput; - searchableColumnsString: string; -} - -export const SearchInstructions: VFC = ({ - filters, - getSearchContext, - searchableColumnsString, -}) => { - return ( - <> - - {filters.length > 0 - ? 'Filter your search with operators like:' - : `Start typing to search${ - searchableColumnsString - ? ` in ${searchableColumnsString}` - : '...' - }`} - - {filters.map(filter => ( -

- Filter by {filter.header}:{' '} - - {filter.name}:{filter.options[0]} - - 1} - show={ - <> - {' or '} - - {filter.name}: - {filter.options.slice(0, 2).join(',')} - - - } - /> -

- ))} - - ); -}; diff --git a/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchFieldSuggestions/TableSearchFieldSuggestions.tsx b/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchFieldSuggestions/TableSearchFieldSuggestions.tsx deleted file mode 100644 index db67131ef4..0000000000 --- a/frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchFieldSuggestions/TableSearchFieldSuggestions.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import { FilterList } from '@mui/icons-material'; -import { Box, Divider, Paper, styled } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { - getColumnValues, - getFilterableColumns, - getFilterValues, - IGetSearchContextOutput, -} from 'hooks/useSearch'; -import { useMemo, VFC } from 'react'; -import { SearchDescription } from './SearchDescription/SearchDescription'; -import { SearchInstructions } from './SearchInstructions/SearchInstructions'; - -const randomIndex = (arr: any[]) => Math.floor(Math.random() * arr.length); - -const StyledPaper = styled(Paper)(({ theme }) => ({ - position: 'absolute', - width: '100%', - left: 0, - top: '20px', - zIndex: 2, - padding: theme.spacing(4, 1.5, 1.5), - borderBottomLeftRadius: theme.spacing(1), - borderBottomRightRadius: theme.spacing(1), - boxShadow: '0px 8px 20px rgba(33, 33, 33, 0.15)', - fontSize: theme.fontSizes.smallBody, - color: theme.palette.text.secondary, - wordBreak: 'break-word', -})); - -const StyledBox = styled(Box)(({ theme }) => ({ - display: 'flex', - gap: theme.spacing(2), -})); - -const StyledFilterList = styled(FilterList)(({ theme }) => ({ - color: theme.palette.text.secondary, -})); - -const StyledDivider = styled(Divider)(({ theme }) => ({ - border: `1px dashed ${theme.palette.dividerAlternative}`, - margin: theme.spacing(1.5, 0), -})); - -const StyledCode = styled('span')(({ theme }) => ({ - backgroundColor: theme.palette.secondaryContainer, - color: theme.palette.text.primary, - padding: theme.spacing(0, 0.5), - borderRadius: theme.spacing(0.5), -})); - -interface TableSearchFieldSuggestionsProps { - getSearchContext: () => IGetSearchContextOutput; -} - -export const TableSearchFieldSuggestions: VFC< - TableSearchFieldSuggestionsProps -> = ({ getSearchContext }) => { - const searchContext = getSearchContext(); - - const randomRow = useMemo( - () => randomIndex(searchContext.data), - [searchContext.data] - ); - - const filters = getFilterableColumns(searchContext.columns) - .map(column => { - const filterOptions = searchContext.data.map(row => - getColumnValues(column, row) - ); - - return { - name: column.filterName, - header: column.Header ?? column.filterName, - options: [...new Set(filterOptions)].sort((a, b) => - a.localeCompare(b) - ), - suggestedOption: - filterOptions[randomRow] ?? `example-${column.filterName}`, - values: getFilterValues( - column.filterName, - searchContext.searchValue - ), - }; - }) - .sort((a, b) => a.name.localeCompare(b.name)); - - const searchableColumns = searchContext.columns.filter( - column => column.searchable && column.accessor - ); - - const searchableColumnsString = searchableColumns - .map(column => column.Header ?? column.accessor) - .join(', '); - - const suggestedTextSearch = - searchContext.data.length && searchableColumns.length - ? getColumnValues( - searchableColumns[0], - searchContext.data[randomRow] - ) - : 'example-search-text'; - - return ( - - - - - - } - elseShow={ - - } - /> - - - - 0} - show="Combine filters and search." - /> -

- Example:{' '} - - {filters.map(filter => ( - - {filter.name}:{filter.suggestedOption}{' '} - - ))} - {suggestedTextSearch} - -

- - ); -}; diff --git a/frontend/src/component/common/Table/index.ts b/frontend/src/component/common/Table/index.ts index 6f70e71d46..fc5e516ad4 100644 --- a/frontend/src/component/common/Table/index.ts +++ b/frontend/src/component/common/Table/index.ts @@ -1,4 +1,3 @@ -export { TableSearch } from './TableSearch/TableSearch'; export { SortableTableHeader } from './SortableTableHeader/SortableTableHeader'; export { TableBody, TableRow } from '@mui/material'; export { Table } from './Table/Table';