add search to the services tree in ISV and CSP view (#1073)

Author: WangLiNaruto

src/components/content/catalog/services/tree/CatalogFullView.tsx

@@ -17,6 +17,7 @@ import {
     serviceVersionKeyQuery,
 } from '../../../../utils/constants';
 import { getAllKeysFromCatalogTree } from '../../../common/catalog/catalogProps';
+import { filterNodes } from '../../../common/tree/filterTreeData';
 import ServiceProvider from '../details/ServiceProvider';
 import { ServiceTree } from './ServiceTree';
 
@@ -30,6 +31,8 @@ export function CatalogFullView({
     category: category;
 }): React.JSX.Element {
     const [urlParams] = useSearchParams();
+    const [searchValue, setSearchValue] = useState('');
+
     const serviceNameInQuery = useMemo(() => {
         const queryInUri = decodeURI(urlParams.get(serviceNameKeyQuery) ?? '');
         if (queryInUri.length > 0) {
@@ -102,6 +105,23 @@ export function CatalogFullView({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectKey]);
 
+    function isParentTreeSelected(selectedKeyInTree: React.Key): boolean {
+        let isParentNode: boolean = false;
+        treeData.forEach((dataNode: DataNode) => {
+            if (dataNode.key === selectedKeyInTree) {
+                isParentNode = true;
+            }
+        });
+        return isParentNode;
+    }
+
+    const onSelect = (selectedKeys: React.Key[]) => {
+        if (selectedKeys.length === 0 || isParentTreeSelected(selectedKeys[0])) {
+            return;
+        }
+        setSelectKey(selectedKeys[0]);
+    };
+
     return (
         <>
             <div className={catalogStyles.leftClass}>
@@ -110,9 +130,10 @@ export function CatalogFullView({
                     &nbsp;Service Tree
                 </div>
                 <ServiceTree
-                    treeData={treeData}
+                    treeData={filterNodes(treeData, searchValue)}
                     selectKey={selectKey}
-                    setSelectKey={setSelectKey}
+                    onSelect={onSelect}
+                    setSearchValue={setSearchValue}
                     isViewDisabled={isViewDisabled}
                 />
             </div>

src/components/content/catalog/services/tree/ServiceTree.tsx

@@ -3,47 +3,47 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Tree } from 'antd';
+import { Input, Tree } from 'antd';
 import { DataNode } from 'antd/es/tree';
 import React from 'react';
 
+const { Search } = Input;
+
 export function ServiceTree({
     treeData,
     selectKey,
-    setSelectKey,
+    onSelect,
+    setSearchValue,
     isViewDisabled,
 }: {
     treeData: DataNode[];
     selectKey: React.Key;
-    setSelectKey: (selectedKey: React.Key) => void;
+    onSelect: (selectedKey: React.Key[]) => void;
+    setSearchValue: (searchValue: string) => void;
     isViewDisabled: boolean;
 }): React.JSX.Element {
-    function isParentTreeSelected(selectKey: React.Key): boolean {
-        let isParentNode: boolean = false;
-        treeData.forEach((dataNode: DataNode) => {
-            if (dataNode.key === selectKey) {
-                isParentNode = true;
-            }
-        });
-        return isParentNode;
-    }
-
-    const onSelect = (selectedKeys: React.Key[]) => {
-        if (selectedKeys.length === 0 || isParentTreeSelected(selectedKeys[0])) {
-            return;
-        }
-        setSelectKey(selectedKeys[0]);
-    };
-
     return (
-        <Tree
-            showIcon={true}
-            defaultExpandAll={true}
-            autoExpandParent={true}
-            onSelect={onSelect}
-            selectedKeys={[selectKey]}
-            treeData={treeData}
-            disabled={isViewDisabled}
-        />
+        <>
+            <Search
+                style={{ marginBottom: 8 }}
+                placeholder={'Search by name or version'}
+                title={'Search by name or version'}
+                onChange={(e) => {
+                    setSearchValue(e.target.value);
+                }}
+                onSearch={(e) => {
+                    setSearchValue(e);
+                }}
+            />
+            <Tree
+                showIcon={true}
+                defaultExpandAll={true}
+                autoExpandParent={true}
+                onSelect={onSelect}
+                selectedKeys={[selectKey]}
+                treeData={treeData}
+                disabled={isViewDisabled}
+            />
+        </>
     );
 }

src/components/content/common/tree/filterTreeData.ts

@@ -0,0 +1,20 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { DataNode } from 'antd/es/tree';
+
+export function filterNodes(nodes: DataNode[], searchValue: string): DataNode[] {
+    return nodes
+        .map((node) => {
+            const matches = node.key.toString().toLowerCase().includes(searchValue.toLowerCase());
+
+            if (!node.children) {
+                return matches ? node : null;
+            }
+            const filteredChildren = filterNodes(node.children, searchValue);
+            return filteredChildren.length > 0 || matches ? { ...node, children: filteredChildren } : null;
+        })
+        .filter(Boolean) as DataNode[];
+}

src/components/content/registeredServices/tree/RegisteredServicesFullView.tsx

@@ -17,6 +17,7 @@ import {
     serviceVersionKeyQuery,
 } from '../../../utils/constants.tsx';
 import { getFourthLevelKeysFromAvailableServicesTree } from '../../common/registeredServices/registeredServiceProps.ts';
+import { filterNodes } from '../../common/tree/filterTreeData';
 import { RegisteredServicesTree } from './RegisteredServicesTree.tsx';
 import ServiceContent from './ServiceContent.tsx';
 
@@ -28,6 +29,7 @@ export function RegisteredServicesFullView({
     availableServiceList: ServiceTemplateDetailVo[];
 }): React.JSX.Element {
     const [urlParams] = useSearchParams();
+    const [searchValue, setSearchValue] = useState('');
 
     const serviceNamespaceInQuery = useMemo(() => {
         const queryInUri = decodeURI(urlParams.get(serviceNamespaceQuery) ?? '');
@@ -121,6 +123,23 @@ export function RegisteredServicesFullView({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedKeyInTree]);
 
+    function isParentTreeSelected(selectedKeyInTree: React.Key): boolean {
+        let isParentNode: boolean = false;
+        treeData.forEach((dataNode: DataNode) => {
+            if (dataNode.key === selectedKeyInTree) {
+                isParentNode = true;
+            }
+        });
+        return isParentNode;
+    }
+
+    const onSelect = (selectedKeys: React.Key[]) => {
+        if (selectedKeys.length === 0 || isParentTreeSelected(selectedKeys[0])) {
+            return;
+        }
+        setSelectedKeyInTree(selectedKeys[0]);
+    };
+
     return (
         <>
             <div className={catalogStyles.leftClass}>
@@ -129,9 +148,10 @@ export function RegisteredServicesFullView({
                     &nbsp;Services
                 </div>
                 <RegisteredServicesTree
-                    treeData={treeData}
+                    treeData={filterNodes(treeData, searchValue)}
                     selectedKeyInTree={selectedKeyInTree}
-                    setSelectedKeyInTree={setSelectedKeyInTree}
+                    onSelect={onSelect}
+                    setSearchValue={setSearchValue}
                 />
             </div>
             <div className={catalogStyles.middleClass} />

src/components/content/registeredServices/tree/RegisteredServicesTree.tsx

@@ -3,44 +3,44 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Tree } from 'antd';
+import { Input, Tree } from 'antd';
 import { DataNode } from 'antd/es/tree';
 import React from 'react';
 
+const { Search } = Input;
+
 export function RegisteredServicesTree({
     treeData,
     selectedKeyInTree,
-    setSelectedKeyInTree,
+    onSelect,
+    setSearchValue,
 }: {
     treeData: DataNode[];
     selectedKeyInTree: React.Key;
-    setSelectedKeyInTree: (selectedKey: React.Key) => void;
+    onSelect: (selectedKey: React.Key[]) => void;
+    setSearchValue: (searchValue: string) => void;
 }): React.JSX.Element {
-    function isParentTreeSelected(selectedKeyInTree: React.Key): boolean {
-        let isParentNode: boolean = false;
-        treeData.forEach((dataNode: DataNode) => {
-            if (dataNode.key === selectedKeyInTree) {
-                isParentNode = true;
-            }
-        });
-        return isParentNode;
-    }
-
-    const onSelect = (selectedKeys: React.Key[]) => {
-        if (selectedKeys.length === 0 || isParentTreeSelected(selectedKeys[0])) {
-            return;
-        }
-        setSelectedKeyInTree(selectedKeys[0]);
-    };
-
     return (
-        <Tree
-            showIcon={true}
-            defaultExpandAll={true}
-            autoExpandParent={true}
-            onSelect={onSelect}
-            selectedKeys={[selectedKeyInTree]}
-            treeData={treeData}
-        />
+        <>
+            <Search
+                style={{ marginBottom: 8 }}
+                placeholder={'Search by category,name,version'}
+                title={'Search by category, service name or version'}
+                onChange={(e) => {
+                    setSearchValue(e.target.value);
+                }}
+                onSearch={(e) => {
+                    setSearchValue(e);
+                }}
+            />
+            <Tree
+                showIcon={true}
+                defaultExpandAll={true}
+                autoExpandParent={true}
+                onSelect={onSelect}
+                selectedKeys={[selectedKeyInTree]}
+                treeData={treeData}
+            />
+        </>
     );
 }

src/styles/catalog.module.css

@@ -14,8 +14,8 @@
 
 .catalog-middleware .left-class {
     height: 100%;
-    padding: 24px;
-    width: 300px;
+    padding: 8px;
+    width: 18%;
 }
 
 .catalog-middleware .left-title-class {