diff --git a/locales/en/plugin__nmstate-console-plugin.json b/locales/en/plugin__nmstate-console-plugin.json index ffe5fa1b..90453adc 100644 --- a/locales/en/plugin__nmstate-console-plugin.json +++ b/locales/en/plugin__nmstate-console-plugin.json @@ -110,7 +110,6 @@ "Scheduling will not be possible at this state": "Scheduling will not be possible at this state", "Search": "Search", "Search by IP address...": "Search by IP address...", - "Search IP address": "Search IP address", "selector key": "selector key", "selector value": "selector value", "Server": "Server", diff --git a/src/views/states/list/StatesList.tsx b/src/views/states/list/StatesList.tsx index aa0e3269..e5ee9ff0 100644 --- a/src/views/states/list/StatesList.tsx +++ b/src/views/states/list/StatesList.tsx @@ -27,8 +27,7 @@ import useDrawerInterface from './hooks/useDrawerInterface'; import useSelectedFilters from './hooks/useSelectedFilters'; import useSortStates from './hooks/useSortStates'; import useStateColumns, { COLUMN_NAME_ID } from './hooks/useStateColumns'; -import useStateFilters from './hooks/useStateFilters'; -import { FILTER_TYPES } from './constants'; +import { useStateFilters, useStateSearchFilters } from './hooks/useStateFilters'; import './states-list.scss'; @@ -50,8 +49,13 @@ const StatesList: FC = () => { const { onPaginationChange, pagination } = usePagination(); const [columns, activeColumns] = useStateColumns(); const filters = useStateFilters(); + const searchFilters = useStateSearchFilters(); + const selectedFilters = useSelectedFilters(); - const [data, filteredData, onFilterChange] = useListPageFilter(states, filters); + const [data, filteredData, onFilterChange] = useListPageFilter(states, [ + ...filters, + ...searchFilters, + ]); const { sortedStates, nameSortParams } = useSortStates(filteredData); @@ -66,11 +70,9 @@ const StatesList: FC = () => { filter?.type !== FILTER_TYPES.IP_ADDRESS)} + rowFilters={filters} + rowSearchFilters={searchFilters} hideLabelFilter - nameFilterTitle={t('IP address')} - nameFilterPlaceholder={t('Search by IP address...')} - nameFilter={FILTER_TYPES.IP_ADDRESS} onFilterChange={(...args) => { onFilterChange(...args); onPaginationChange({ diff --git a/src/views/states/list/hooks/useStateFilters.ts b/src/views/states/list/hooks/useStateFilters.ts index 8bd085bc..0fe19fa5 100644 --- a/src/views/states/list/hooks/useStateFilters.ts +++ b/src/views/states/list/hooks/useStateFilters.ts @@ -1,14 +1,13 @@ import { useNMStateTranslation } from 'src/utils/hooks/useNMStateTranslation'; -import { RowFilter } from '@openshift-console/dynamic-plugin-sdk'; +import { RowFilter, RowSearchFilter } from '@openshift-console/dynamic-plugin-sdk'; import { InterfaceType, NodeNetworkConfigurationInterface, V1beta1NodeNetworkState } from '@types'; import { FILTER_TYPES } from '../constants'; import { searchInterfaceByIP } from '../utilts'; -const useStateFilters = (): RowFilter[] => { +export const useStateSearchFilters = (): RowSearchFilter[] => { const { t } = useNMStateTranslation(); - return [ { type: FILTER_TYPES.IP_ADDRESS, @@ -21,10 +20,16 @@ const useStateFilters = (): RowFilter[] => { return interfaces?.some((iface) => searchInterfaceByIP(searchIPAddress, iface)); }, - isMatch: () => true, - filterGroupName: t('Search IP address'), - items: [], + filterGroupName: t('IP address'), + placeholder: t('Search by IP address...'), }, + ]; +}; + +export const useStateFilters = (): RowFilter[] => { + const { t } = useNMStateTranslation(); + + return [ { filterGroupName: t('Interface state'), type: FILTER_TYPES.INTERFACE_STATE, @@ -98,5 +103,3 @@ const useStateFilters = (): RowFilter[] => { }, ]; }; - -export default useStateFilters;