CNV-39753: Search by ip and name together

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",

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 = () => {
             <ListPageFilter
               data={data}
               loaded={statesLoaded}
-              rowFilters={filters.filter((filter) => 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({

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<V1beta1NodeNetworkState>[] => {
+export const useStateSearchFilters = (): RowSearchFilter<V1beta1NodeNetworkState>[] => {
   const { t } = useNMStateTranslation();
-
   return [
     {
       type: FILTER_TYPES.IP_ADDRESS,
@@ -21,10 +20,16 @@ const useStateFilters = (): RowFilter<V1beta1NodeNetworkState>[] => {
 
         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<V1beta1NodeNetworkState>[] => {
+  const { t } = useNMStateTranslation();
+
+  return [
     {
       filterGroupName: t('Interface state'),
       type: FILTER_TYPES.INTERFACE_STATE,
@@ -98,5 +103,3 @@ const useStateFilters = (): RowFilter<V1beta1NodeNetworkState>[] => {
     },
   ];
 };
-
-export default useStateFilters;