From ab94dd837bd1e850b52705679d580113611c3666 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 12 Jul 2023 12:43:47 +0300 Subject: [PATCH] CB-3641 fix: search in visible node name (#1815) Co-authored-by: dariamarutkina <125263541+dariamarutkina@users.noreply.github.com> --- .../navigationTreeProjectSearchCompare.ts | 4 ++-- .../ElementsTree/NavNodeFilterCompareFn.ts | 4 +++- .../NavigationNodeControlRenderer.tsx | 7 +++++-- .../ElementsTree/elementsTreeNameFilter.ts | 16 +++++++++------- .../ElementsTree/useElementsTree.ts | 5 +++++ .../navigationTreeProjectSearchCompare.ts | 4 ++-- 6 files changed, 26 insertions(+), 14 deletions(-) diff --git a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/navigationTreeProjectSearchCompare.ts b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/navigationTreeProjectSearchCompare.ts index b28892e97d..3c4a4cadb9 100644 --- a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/navigationTreeProjectSearchCompare.ts +++ b/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); }; diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavNodeFilterCompareFn.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavNodeFilterCompareFn.ts index ea00648d26..c5e861777d 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavNodeFilterCompareFn.ts +++ b/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; diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx index 08fc68d33c..217f66c8a3 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx +++ b/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( const navNodeInfoResource = useService(NavNodeInfoResource); const observer = useRef(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( 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) { treeNodeContext.select(event.ctrlKey || event.metaKey); diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/elementsTreeNameFilter.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/elementsTreeNameFilter.ts index b8d0459de6..ea57df0a5e 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/elementsTreeNameFilter.ts +++ b/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(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) { diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/useElementsTree.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/useElementsTree.ts index fd2271ad77..f04610a1e0 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/useElementsTree.ts +++ b/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; 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; diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/navigationTreeProjectSearchCompare.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/navigationTreeProjectSearchCompare.ts index 52e329a98f..3750a51274 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/navigationTreeProjectSearchCompare.ts +++ b/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); };