diff --git a/frontend/src/component/strategies/CustomStrategyInfo/CustomStrategyInfo.tsx b/frontend/src/component/strategies/CustomStrategyInfo/CustomStrategyInfo.tsx index 3c1c6c4912..83c1d0c7e9 100644 --- a/frontend/src/component/strategies/CustomStrategyInfo/CustomStrategyInfo.tsx +++ b/frontend/src/component/strategies/CustomStrategyInfo/CustomStrategyInfo.tsx @@ -3,6 +3,7 @@ import { FC } from 'react'; const Paragraph: FC = ({ children }) => ( ({ marginBottom: theme.spacing(2), diff --git a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx index 5f379070a4..29277f6f28 100644 --- a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx +++ b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx @@ -22,17 +22,15 @@ import useToast from 'hooks/useToast'; import { formatUnknownError } from 'utils/formatUnknownError'; import { IStrategy } from 'interfaces/strategy'; import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell'; -import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; import { sortTypes } from 'utils/sortTypes'; -import { useTable, useGlobalFilter, useSortBy } from 'react-table'; -import { AddStrategyButton } from './AddStrategyButton/AddStrategyButton'; +import { useTable, useSortBy } from 'react-table'; import { StrategySwitch } from './StrategySwitch/StrategySwitch'; import { StrategyEditButton } from './StrategyEditButton/StrategyEditButton'; import { StrategyDeleteButton } from './StrategyDeleteButton/StrategyDeleteButton'; -import { Search } from 'component/common/Search/Search'; import { Badge } from 'component/common/Badge/Badge'; import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; import { CustomStrategyInfo } from '../CustomStrategyInfo/CustomStrategyInfo'; +import { AddStrategyButton } from './AddStrategyButton/AddStrategyButton'; interface IDialogueMetaData { show: boolean; @@ -40,17 +38,28 @@ interface IDialogueMetaData { onConfirm: () => void; } +const StyledBox = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(2), +})); + const StyledBadge = styled(Badge)(({ theme }) => ({ marginLeft: theme.spacing(1), display: 'inline-block', })); +const StyledTypography = styled(Typography)(({ theme }) => ({ + display: 'flex', + fontSize: theme.fontSizes.mainHeader, +})); + const Subtitle: FC<{ title: string; description: string; link: string; }> = ({ title, description, link }) => ( - + {title} } /> - -); - -const PredefinedStrategyTitle = () => ( - ({ marginBottom: theme.spacing(1.5) })}> - - + ); const CustomStrategyTitle: FC = () => ( @@ -101,6 +100,16 @@ const CustomStrategyTitle: FC = () => ( ); +const PredefinedStrategyTitle = () => ( + + + +); + export const StrategiesList = () => { const navigate = useNavigate(); const [dialogueMetaData, setDialogueMetaData] = useState( @@ -240,7 +249,6 @@ export const StrategiesList = () => { ), - disableGlobalFilter: true, }, { id: 'Name', @@ -304,7 +312,6 @@ export const StrategiesList = () => { ), width: 150, minWidth: 120, - disableGlobalFilter: true, disableSortBy: true, }, { @@ -313,7 +320,6 @@ export const StrategiesList = () => { }, { accessor: 'sortOrder', - disableGlobalFilter: true, sortType: 'number', }, ], @@ -328,27 +334,18 @@ export const StrategiesList = () => { [] ); - const { - getTableProps, - getTableBodyProps, - headerGroups, - rows, - prepareRow, - state: { globalFilter }, - setGlobalFilter, - } = useTable( - { - columns: columns as any[], // TODO: fix after `react-table` v8 update - data: data.predefined, - initialState, - sortTypes, - autoResetGlobalFilter: false, - autoResetSortBy: false, - disableSortRemove: true, - }, - useGlobalFilter, - useSortBy - ); + const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = + useTable( + { + columns: columns as any[], // TODO: fix after `react-table` v8 update + data: data.predefined, + initialState, + sortTypes, + autoResetSortBy: false, + disableSortRemove: true, + }, + useSortBy + ); const { getTableProps: customGetTableProps, @@ -356,18 +353,15 @@ export const StrategiesList = () => { headerGroups: customHeaderGroups, rows: customRows, prepareRow: customPrepareRow, - setGlobalFilter: customSetGlobalFilter, } = useTable( { columns: columns as any[], // TODO: fix after `react-table` v8 update data: data.custom, initialState, sortTypes, - autoResetGlobalFilter: false, autoResetSortBy: false, disableSortRemove: true, }, - useGlobalFilter, useSortBy ); @@ -379,29 +373,17 @@ export const StrategiesList = () => { })); }; - let strategyTypeCount = rows.length; - return ( - { - setGlobalFilter(...props); - customSetGlobalFilter(...props); - }} - /> - } - /> - } - > - - ({ paddingBottom: theme.spacing(4) })}> - + + + + + } + > + @@ -422,27 +404,34 @@ export const StrategiesList = () => { 0} - show={ - - No predefined strategies found matching - “ - {globalFilter} - ” - - } - elseShow={ - - No strategies available. - - } - /> + + No strategies available. + } /> + + + setDialogueMetaData((prev: IDialogueMetaData) => ({ + ...prev, + show: false, + })) + } + /> + + + + + } + > -
{
0} - show={ - - No custom strategies found matching - “ - {globalFilter} - ” - - } - elseShow={} - /> - } + show={} />
-
- - setDialogueMetaData((prev: IDialogueMetaData) => ({ - ...prev, - show: false, - })) - } - /> -
+ + setDialogueMetaData((prev: IDialogueMetaData) => ({ + ...prev, + show: false, + })) + } + /> + + ); };