From 99c049bd27eb93b3a9719fde9ed8e8c60ca75511 Mon Sep 17 00:00:00 2001
From: Huan-Cheng Chang <changhc84@gmail.com>
Date: Wed, 3 Feb 2021 15:57:44 +0100
Subject: [PATCH] feat(ui): Node search tool in UI Workflow viewer (#5000)

Signed-off-by: Huan-Cheng Chang <changhc84@gmail.com>
---
 ui/src/app/shared/components/graph/graph-panel.scss | 5 +++++
 ui/src/app/shared/components/graph/graph-panel.tsx  | 8 +++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/shared/components/graph/graph-panel.scss b/ui/src/app/shared/components/graph/graph-panel.scss
index 07af039dd5d5..57dcb576df44 100644
--- a/ui/src/app/shared/components/graph/graph-panel.scss
+++ b/ui/src/app/shared/components/graph/graph-panel.scss
@@ -24,6 +24,11 @@
   }
 }
 
+.node-search-bar {
+  display: inline-block;
+  margin-left: 10px;
+}
+
 .graph-options-panel {
   margin: 10px;
   padding: 10px;
diff --git a/ui/src/app/shared/components/graph/graph-panel.tsx b/ui/src/app/shared/components/graph/graph-panel.tsx
index 0a6a069e4f25..15e9ee22abae 100644
--- a/ui/src/app/shared/components/graph/graph-panel.tsx
+++ b/ui/src/app/shared/components/graph/graph-panel.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {useEffect} from 'react';
+import {TextInput} from '../../../shared/components/text-input';
 import {ScopedLocalStorage} from '../../scoped-local-storage';
 import {FilterDropDown} from '../filter-drop-down';
 import {Icon} from '../icon';
@@ -55,6 +56,7 @@ export const GraphPanel = (props: Props) => {
     const [nodeGenres, setNodeGenres] = React.useState<NodeGenres>(storage.getItem('nodeGenres', props.nodeGenres));
     const [nodeClassNames, setNodeClassNames] = React.useState<NodeClassNames>(storage.getItem('nodeClassNames', props.nodeClassNames));
     const [nodeTags, setNodeTags] = React.useState<NodeTags>(props.nodeTags);
+    const [nodeSearchKeyword, setNodeSearchKeyword] = React.useState<string>('');
 
     useEffect(() => storage.setItem('nodeSize', nodeSize, props.nodeSize), [nodeSize]);
     useEffect(() => storage.setItem('horizontal', horizontal, props.horizontal), [horizontal]);
@@ -73,7 +75,8 @@ export const GraphPanel = (props: Props) => {
         return (
             nodeGenres[label.genre] &&
             (!nodeClassNames || Object.entries(nodeClassNames).find(([className, checked]) => checked && (label.classNames || '').split(' ').includes(className))) &&
-            (!nodeTags || Object.entries(nodeTags).find(([tag, checked]) => !label.tags || (checked && label.tags.has(tag))))
+            (!nodeTags || Object.entries(nodeTags).find(([tag, checked]) => !label.tags || (checked && label.tags.has(tag)))) &&
+            props.graph.nodes.get(id).label.includes(nodeSearchKeyword)
         );
     };
 
@@ -132,6 +135,9 @@ export const GraphPanel = (props: Props) => {
                         <i className='fa fa-bolt' />
                     </a>
                     {props.options}
+                    <div className='node-search-bar'>
+                        <TextInput value={nodeSearchKeyword} onChange={v => setNodeSearchKeyword(v)} placeholder={'Search'} />
+                    </div>
                 </div>
             )}
             <div className={'graph ' + props.classNames}>