CB-3641 fix: search in visible node name (#1815)

Co-authored-by: dariamarutkina <125263541+dariamarutkina@users.noreply.github.com>

webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/navigationTreeProjectSearchCompare.ts

@@ -8,10 +8,10 @@
 import { NAV_NODE_TYPE_RM_PROJECT } from '@cloudbeaver/core-resource-manager';
 import { EEquality, elementsTreeNameFilterNode, NavNodeFilterCompareFn } from '@cloudbeaver/plugin-navigation-tree';
 
-export const navigationTreeProjectSearchCompare: NavNodeFilterCompareFn = function navigationTreeProjectSearchCompare(node, filter) {
+export const navigationTreeProjectSearchCompare: NavNodeFilterCompareFn = function navigationTreeProjectSearchCompare(tree, node, filter) {
   if (node.nodeType === NAV_NODE_TYPE_RM_PROJECT) {
     return EEquality.none;
   }
 
-  return elementsTreeNameFilterNode(node, filter);
+  return elementsTreeNameFilterNode(tree, node, filter);
 };

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavNodeFilterCompareFn.ts

@@ -7,10 +7,12 @@
  */
 import type { NavNode } from '@cloudbeaver/core-navigation-tree';
 
+import type { IElementsTree } from './useElementsTree';
+
 export enum EEquality {
   none,
   partially,
   full,
 }
 
-export type NavNodeFilterCompareFn = (node: NavNode, filter: string) => EEquality;
+export type NavNodeFilterCompareFn = (tree: IElementsTree, node: NavNode, filter: string) => EEquality;

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx

@@ -16,7 +16,6 @@ import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { ElementsTreeContext } from '../ElementsTreeContext';
 import type { NavTreeControlComponent } from '../NavigationNodeComponent';
-import { transformNodeInfo } from '../transformNodeInfo';
 import { NavigationNodeControlLoader } from './NavigationNode/NavigationNodeLoaders';
 import type { INavigationNode } from './useNavigationNode';
 
@@ -50,6 +49,10 @@ export const NavigationNodeControlRenderer = observer<Props, HTMLDivElement>(
     const navNodeInfoResource = useService(NavNodeInfoResource);
     const observer = useRef<IntersectionObserver | null>(null);
 
+    if (!contextRef.context) {
+      throw new Error('ElementsTreeContext not found');
+    }
+
     useEffect(() => {
       if (elementRef.current) {
         observer.current = new IntersectionObserver(
@@ -94,7 +97,7 @@ export const NavigationNodeControlRenderer = observer<Props, HTMLDivElement>(
 
     const Control = navNode.control || externalControl || NavigationNodeControlLoader;
     const outdated = getComputed(() => navNodeInfoResource.isOutdated(node.id) && !treeNodeContext.loading);
-    const nodeInfo = transformNodeInfo(node, contextRef.context?.tree.nodeInfoTransformers ?? []);
+    const nodeInfo = contextRef.context?.tree.getTransformedNodeInfo(node);
 
     function onClickHandler(event: React.MouseEvent<HTMLDivElement>) {
       treeNodeContext.select(event.ctrlKey || event.metaKey);

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/elementsTreeNameFilter.ts

@@ -10,7 +10,7 @@ import { resourceKeyList } from '@cloudbeaver/core-sdk';
 import type { MetadataMap } from '@cloudbeaver/core-utils';
 
 import { EEquality, NavNodeFilterCompareFn } from './NavNodeFilterCompareFn';
-import type { IElementsTreeFilter, ITreeNodeState } from './useElementsTree';
+import type { IElementsTree, IElementsTreeFilter, ITreeNodeState } from './useElementsTree';
 
 function isDefined<T>(val: T | undefined | null): val is T {
   return val !== undefined && val !== null;
@@ -24,20 +24,21 @@ export function elementsTreeNameFilter(
   return (tree, filter, node, children, state) => {
     const nodeState = state.get(node.id);
 
-    if (filter === '' || nodeState.showInFilter || compare(node, filter) === EEquality.full) {
+    if (filter === '' || nodeState.showInFilter || compare(tree, node, filter) === EEquality.full) {
       return children;
     }
 
     const nodes = navNodeInfoResource
       .get(resourceKeyList(children))
       .filter(isDefined)
-      .filter(child => filterNode(navTreeResource, navNodeInfoResource, compare, filter, child, state));
+      .filter(child => filterNode(tree, navTreeResource, navNodeInfoResource, compare, filter, child, state));
 
     return nodes.map(node => node.id);
   };
 }
 
 function filterNode(
+  tree: IElementsTree,
   navTreeResource: NavTreeResource,
   navNodeInfoResource: NavNodeInfoResource,
   compare: NavNodeFilterCompareFn,
@@ -47,7 +48,7 @@ function filterNode(
 ): boolean {
   const nodeState = state.get(node.id);
 
-  if (compare(node, filter) !== EEquality.none || nodeState.showInFilter) {
+  if (compare(tree, node, filter) !== EEquality.none || nodeState.showInFilter) {
     return true;
   }
 
@@ -57,14 +58,15 @@ function filterNode(
   return navNodeInfoResource
     .get(resourceKeyList(children))
     .filter(isDefined)
-    .some(child => filterNode(navTreeResource, navNodeInfoResource, compare, filter, child, state));
+    .some(child => filterNode(tree, navTreeResource, navNodeInfoResource, compare, filter, child, state));
   // }
 
   // return false;
 }
 
-export function elementsTreeNameFilterNode(node: NavNode, filter: string): EEquality {
-  const nodeName = node.name?.toLowerCase().trim();
+export function elementsTreeNameFilterNode(tree: IElementsTree, node: NavNode, filter: string): EEquality {
+  const nodeInfo = tree.getTransformedNodeInfo(node);
+  const nodeName = nodeInfo.name?.toLowerCase().trim();
   const filterToLower = filter.toLowerCase().trim();
 
   if (nodeName === filterToLower) {

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/useElementsTree.ts

@@ -22,6 +22,7 @@ import { ILoadableState, MetadataMap, throttle } from '@cloudbeaver/core-utils';
 import type { IElementsTreeAction } from './IElementsTreeAction';
 import type { INavTreeNodeInfo } from './INavTreeNodeInfo';
 import type { NavigationNodeRendererComponent } from './NavigationNodeComponent';
+import { transformNodeInfo } from './transformNodeInfo';
 
 export type IElementsTreeCustomRenderer = (nodeId: string) => NavigationNodeRendererComponent | undefined;
 export type IElementsTreeCustomNodeInfo = (nodeId: string, info: INavTreeNodeInfo) => INavTreeNodeInfo;
@@ -105,6 +106,7 @@ export interface IElementsTree extends ILoadableState {
   state: MetadataMap<string, ITreeNodeState>;
   userData: IElementsTreeUserState;
 
+  getTransformedNodeInfo(node: NavNode): INavTreeNodeInfo;
   getNodeState: (nodeId: string) => ITreeNodeState;
   isNodeExpanded: (nodeId: string, ignoreFilter?: boolean) => boolean;
   isNodeExpandable: (nodeId: string) => boolean;
@@ -367,6 +369,9 @@ export function useElementsTree(options: IOptions): IElementsTree {
       getNodeState(nodeId: string) {
         return this.state.get(nodeId);
       },
+      getTransformedNodeInfo(node: NavNode): INavTreeNodeInfo {
+        return transformNodeInfo(node, this.nodeInfoTransformers);
+      },
       isNodeExpanded(nodeId: string, ignoreFilter?: boolean): boolean {
         if (nodeId === this.root) {
           return true;

webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/navigationTreeProjectSearchCompare.ts

@@ -10,10 +10,10 @@ import { NAV_NODE_TYPE_PROJECT } from '@cloudbeaver/core-projects';
 import { elementsTreeNameFilterNode } from '../ElementsTree/elementsTreeNameFilter';
 import { EEquality, type NavNodeFilterCompareFn } from '../ElementsTree/NavNodeFilterCompareFn';
 
-export const navigationTreeProjectSearchCompare: NavNodeFilterCompareFn = function navigationTreeProjectSearchCompare(node, filter) {
+export const navigationTreeProjectSearchCompare: NavNodeFilterCompareFn = function navigationTreeProjectSearchCompare(tree, node, filter) {
   if (node.nodeType === NAV_NODE_TYPE_PROJECT) {
     return EEquality.none;
   }
 
-  return elementsTreeNameFilterNode(node, filter);
+  return elementsTreeNameFilterNode(tree, node, filter);
 };