fix(storage): keep separate search for groups and nodes (#3037)

Author: DaryaVorontsova

src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx

@@ -96,7 +96,7 @@ export function GroupedStorageGroupsComponent({
     viewContext,
 }: PaginatedStorageProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const {searchValue, storageGroupsGroupByParam, visibleEntities, handleShowAllGroups} =
+    const {groupsSearchValue, storageGroupsGroupByParam, visibleEntities, handleShowAllGroups} =
         useStorageQueryParams();
 
     const {columnsToShow, columnsToSelect, setColumns} = useStorageGroupsSelectedColumns({
@@ -111,7 +111,7 @@ export function GroupedStorageGroupsComponent({
             nodeId,
             groupId,
             pDiskId,
-            filter: searchValue,
+            filter: groupsSearchValue,
             shouldUseGroupsHandler: true,
             group: storageGroupsGroupByParam,
         },
@@ -152,7 +152,7 @@ export function GroupedStorageGroupsComponent({
                         groupId={groupId}
                         pDiskId={pDiskId}
                         filterGroupBy={storageGroupsGroupByParam}
-                        searchValue={searchValue}
+                        searchValue={groupsSearchValue}
                         visibleEntities={'all'}
                         scrollContainerRef={scrollContainerRef}
                         onIsExpandedChange={setIsGroupExpanded}
@@ -190,7 +190,7 @@ export function GroupedStorageGroupsComponent({
             initialState={initialState}
             tableWrapperProps={{
                 scrollContainerRef,
-                scrollDependencies: [searchValue, storageGroupsGroupByParam, tableGroups],
+                scrollDependencies: [groupsSearchValue, storageGroupsGroupByParam, tableGroups],
                 loading: isLoading,
                 className: b('groups-wrapper'),
             }}

src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx

@@ -18,7 +18,7 @@ export function StorageGroupsComponent({
     scrollContainerRef,
     initialEntitiesCount,
 }: PaginatedStorageProps) {
-    const {searchValue, visibleEntities, handleShowAllGroups} = useStorageQueryParams();
+    const {groupsSearchValue, visibleEntities, handleShowAllGroups} = useStorageQueryParams();
 
     const storageGroupsHandlerHasGrouping = useStorageGroupsHandlerHasGrouping();
 
@@ -49,7 +49,7 @@ export function StorageGroupsComponent({
                     nodeId={nodeId}
                     groupId={groupId}
                     pDiskId={pDiskId}
-                    searchValue={searchValue}
+                    searchValue={groupsSearchValue}
                     visibleEntities={visibleEntities}
                     onShowAll={handleShowAllGroups}
                     scrollContainerRef={scrollContainerRef}
@@ -60,7 +60,7 @@ export function StorageGroupsComponent({
             }
             tableWrapperProps={{
                 scrollContainerRef,
-                scrollDependencies: [searchValue, visibleEntities],
+                scrollDependencies: [groupsSearchValue, visibleEntities],
             }}
         />
     );

src/containers/Storage/PaginatedStorageGroups/StorageGroupsControls.tsx

@@ -32,11 +32,11 @@ export function StorageGroupsControls({
     entitiesLoading,
 }: StorageControlsProps) {
     const {
-        searchValue,
+        groupsSearchValue,
         storageType,
         visibleEntities,
         storageGroupsGroupByParam,
-        handleTextFilterChange,
+        handleTextFilterGroupsChange,
         handleStorageTypeChange,
         handleVisibleEntitiesChange,
         handleStorageGroupsGroupByParamChange,
@@ -60,8 +60,8 @@ export function StorageGroupsControls({
     return (
         <React.Fragment>
             <Search
-                value={searchValue}
-                onChange={handleTextFilterChange}
+                value={groupsSearchValue}
+                onChange={handleTextFilterGroupsChange}
                 placeholder={i18n('controls_groups-search-placeholder')}
                 className={b('search')}
             />

src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx

@@ -98,7 +98,8 @@ export function GroupedStorageNodesComponent({
 }: PaginatedStorageProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
-    const {searchValue, storageNodesGroupByParam, handleShowAllNodes} = useStorageQueryParams();
+    const {nodesSearchValue, storageNodesGroupByParam, handleShowAllNodes} =
+        useStorageQueryParams();
 
     const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
     const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
@@ -111,7 +112,7 @@ export function GroupedStorageNodesComponent({
         {
             database,
             with: 'all',
-            filter: searchValue,
+            filter: nodesSearchValue,
             node_id: nodeId,
             group_id: groupId,
             group: storageNodesGroupByParam,
@@ -151,7 +152,7 @@ export function GroupedStorageNodesComponent({
                         database={database}
                         nodeId={nodeId}
                         groupId={groupId}
-                        searchValue={searchValue}
+                        searchValue={nodesSearchValue}
                         visibleEntities="all"
                         filterGroupBy={storageNodesGroupByParam}
                         scrollContainerRef={scrollContainerRef}
@@ -191,7 +192,7 @@ export function GroupedStorageNodesComponent({
             initialState={initialState}
             tableWrapperProps={{
                 scrollContainerRef,
-                scrollDependencies: [searchValue, storageNodesGroupByParam, tableGroups],
+                scrollDependencies: [nodesSearchValue, storageNodesGroupByParam, tableGroups],
                 loading: isLoading,
                 className: b('groups-wrapper'),
             }}

src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx

@@ -18,7 +18,7 @@ export function StorageNodesComponent({
     scrollContainerRef,
     initialEntitiesCount,
 }: PaginatedStorageProps) {
-    const {searchValue, visibleEntities, nodesUptimeFilter, handleShowAllNodes} =
+    const {nodesSearchValue, visibleEntities, nodesUptimeFilter, handleShowAllNodes} =
         useStorageQueryParams();
 
     const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
@@ -52,7 +52,7 @@ export function StorageNodesComponent({
                     database={database}
                     nodeId={nodeId}
                     groupId={groupId}
-                    searchValue={searchValue}
+                    searchValue={nodesSearchValue}
                     visibleEntities={visibleEntities}
                     nodesUptimeFilter={nodesUptimeFilter}
                     onShowAll={handleShowAllNodes}
@@ -65,7 +65,7 @@ export function StorageNodesComponent({
             }
             tableWrapperProps={{
                 scrollContainerRef,
-                scrollDependencies: [searchValue, visibleEntities, nodesUptimeFilter],
+                scrollDependencies: [nodesSearchValue, visibleEntities, nodesUptimeFilter],
             }}
         />
     );

src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx

@@ -31,12 +31,12 @@ export function StorageNodesControls({
     entitiesLoading,
 }: StorageControlsProps) {
     const {
-        searchValue,
+        nodesSearchValue,
         storageType,
         visibleEntities,
         nodesUptimeFilter,
         storageNodesGroupByParam,
-        handleTextFilterChange,
+        handleTextFilterNodesChange,
         handleStorageTypeChange,
         handleVisibleEntitiesChange,
         handleUptimeFilterChange,
@@ -50,8 +50,8 @@ export function StorageNodesControls({
     return (
         <React.Fragment>
             <Search
-                value={searchValue}
-                onChange={handleTextFilterChange}
+                value={nodesSearchValue}
+                onChange={handleTextFilterNodesChange}
                 placeholder={i18n('controls_nodes-search-placeholder')}
                 className={b('search')}
             />

src/containers/Storage/constants.ts

@@ -0,0 +1,4 @@
+export const STORAGE_SEARCH_PARAM_BY_TYPE: Record<string, string> = {
+    groups: 'groupsSearch',
+    nodes: 'nodesSearch',
+};

src/containers/Storage/useStorageQueryParams.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {StringParam, useQueryParams} from 'use-query-params';
 
 import type {StorageType, VisibleEntities} from '../../store/reducers/storage/types';
@@ -6,11 +8,14 @@ import {NodesUptimeFilterValues, nodesUptimeFilterValuesSchema} from '../../util
 
 import {storageGroupsGroupByParamSchema} from './PaginatedStorageGroupsTable/columns/constants';
 import {storageNodesGroupByParamSchema} from './PaginatedStorageNodesTable/columns/constants';
+import {STORAGE_SEARCH_PARAM_BY_TYPE} from './constants';
 
 export function useStorageQueryParams() {
     const [queryParams, setQueryParams] = useQueryParams({
         type: StringParam,
         visible: StringParam,
+        groupsSearch: StringParam,
+        nodesSearch: StringParam,
         search: StringParam,
         uptimeFilter: StringParam,
         storageNodesGroupBy: StringParam,
@@ -20,7 +25,8 @@ export function useStorageQueryParams() {
     const storageType = storageTypeSchema.parse(queryParams.type);
 
     const visibleEntities = visibleEntitiesSchema.parse(queryParams.visible);
-    const searchValue = queryParams.search ?? '';
+    const groupsSearchValue = queryParams.groupsSearch ?? '';
+    const nodesSearchValue = queryParams.nodesSearch ?? '';
     const nodesUptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
 
     const storageGroupsGroupByParam = storageGroupsGroupByParamSchema.parse(
@@ -30,8 +36,20 @@ export function useStorageQueryParams() {
         queryParams.storageNodesGroupBy,
     );
 
-    const handleTextFilterChange = (value: string) => {
-        setQueryParams({search: value || undefined}, 'replaceIn');
+    React.useEffect(() => {
+        if (queryParams.search) {
+            const patch: Record<string, string | undefined> = {search: undefined};
+            patch[STORAGE_SEARCH_PARAM_BY_TYPE[storageType]] = queryParams.search;
+            setQueryParams(patch, 'replaceIn');
+        }
+    }, [queryParams.search, storageType]);
+
+    const handleTextFilterGroupsChange = (value: string) => {
+        setQueryParams({groupsSearch: value || undefined}, 'replaceIn');
+    };
+
+    const handleTextFilterNodesChange = (value: string) => {
+        setQueryParams({nodesSearch: value || undefined}, 'replaceIn');
     };
 
     const handleVisibleEntitiesChange = (value: VisibleEntities) => {
@@ -49,6 +67,7 @@ export function useStorageQueryParams() {
     const handleStorageGroupsGroupByParamChange = (value: string) => {
         setQueryParams({storageGroupsGroupBy: value}, 'replaceIn');
     };
+
     const handleStorageNodesGroupByParamChange = (value: string) => {
         setQueryParams({storageNodesGroupBy: value}, 'replaceIn');
     };
@@ -65,12 +84,14 @@ export function useStorageQueryParams() {
     return {
         storageType,
         visibleEntities,
-        searchValue,
+        groupsSearchValue,
+        nodesSearchValue,
         nodesUptimeFilter,
         storageGroupsGroupByParam,
         storageNodesGroupByParam,
 
-        handleTextFilterChange,
+        handleTextFilterGroupsChange,
+        handleTextFilterNodesChange,
         handleVisibleEntitiesChange,
         handleStorageTypeChange,
         handleUptimeFilterChange,