feat: query engine search scroll (pinterest#1136)

* feat: query engine search scroll * chore: refactor updateKeyword and SearchBar --------- Co-authored-by: Lily Li <[email protected]>
arrowtail-precision · Jan 3, 2024 · 97d6be8 · 97d6be8
1 parent b6c0d4e
commit 97d6be8
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 7 deletions.
diff --git a/querybook/webapp/components/QueryRunButton/QueryRunButton.scss b/querybook/webapp/components/QueryRunButton/QueryRunButton.scss
@@ -32,6 +32,10 @@
                 }
             }
         }
+        .engine-selector-wrapper {
+            max-height: 50vh;
+            overflow-y: auto;
+        }
     }
 
     &.readonly {

diff --git a/querybook/webapp/components/QueryRunButton/QueryRunButton.tsx b/querybook/webapp/components/QueryRunButton/QueryRunButton.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import * as React from 'react';
+import { useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
 import { IQueryEngine, QueryEngineStatus } from 'const/queryEngine';
@@ -12,13 +13,15 @@ import {
 } from 'lib/sql-helper/sql-limiter';
 import { getShortcutSymbols, KeyMap } from 'lib/utils/keyboard';
 import { formatNumber } from 'lib/utils/number';
+import { stopPropagation } from 'lib/utils/noop';
 import { queryEngineStatusByIdEnvSelector } from 'redux/queryEngine/selector';
 import { AsyncButton, IAsyncButtonHandles } from 'ui/AsyncButton/AsyncButton';
 import { Dropdown } from 'ui/Dropdown/Dropdown';
 import { Icon } from 'ui/Icon/Icon';
 import { ListMenu } from 'ui/Menu/ListMenu';
 import { StatusIcon } from 'ui/StatusIcon/StatusIcon';
 import { Tag } from 'ui/Tag/Tag';
+import { SearchBar } from 'ui/SearchBar/SearchBar';
 
 import './QueryRunButton.scss';
 
@@ -155,19 +158,40 @@ export const QueryEngineSelector: React.FC<IQueryEngineSelectorProps> = ({
         );
     };
 
-    const engineItems = queryEngines.map((engineInfo) => ({
-        name: <span className="query-engine-name">{engineInfo.name}</span>,
-        onClick: onEngineIdSelect.bind(null, engineInfo.id),
-        checked: engineInfo.id === engineId,
-        tooltip: engineInfo.description,
-    }));
+    const [keyword, setKeyword] = useState('');
+
+    const engineItems = queryEngines
+        .filter((engineInfo) =>
+            `${engineInfo.name.toLowerCase()}`.includes(keyword.toLowerCase())
+        )
+        .map((engineInfo) => ({
+            name: <span className="query-engine-name">{engineInfo.name}</span>,
+            onClick: onEngineIdSelect.bind(null, engineInfo.id),
+            checked: engineInfo.id === engineId,
+            tooltip: engineInfo.description,
+        }));
+
     const engineButtonDOM = (
         <Dropdown
             customButtonRenderer={getEngineSelectorButtonDOM}
             layout={['bottom', 'right']}
             className="engine-selector-dropdown"
         >
-            <ListMenu items={engineItems} type="select" />
+            <div className="engine-selector-wrapper">
+                {queryEngines.length > 3 && (
+                    <div onClick={stopPropagation}>
+                        <SearchBar
+                            value={keyword}
+                            onSearch={setKeyword}
+                            placeholder="Search"
+                            transparent
+                            delayMethod="throttle"
+                            hasClearSearch={true}
+                        />
+                    </div>
+                )}
+                <ListMenu items={engineItems} type="select" />
+            </div>
         </Dropdown>
     );
 

diff --git a/querybook/webapp/ui/SearchBar/SearchBar.scss b/querybook/webapp/ui/SearchBar/SearchBar.scss
@@ -24,4 +24,16 @@
         border-left: var(--border);
         height: 20px;
     }
+
+    &.clear-search {
+        .DebouncedInput {
+            flex: 9;
+        }
+        .SearchIcon {
+            flex: 1;
+        }
+        .Button{
+            flex: 1;
+        }
+    }
 }
diff --git a/querybook/webapp/ui/SearchBar/SearchBar.tsx b/querybook/webapp/ui/SearchBar/SearchBar.tsx
@@ -74,6 +74,7 @@ export const SearchBar: React.FunctionComponent<ISearchBarProps> = ({
         SearchBar: true,
         [className]: Boolean(className),
         transparent,
+        'clear-search': hasClearSearch,
     });
 
     const clearSearchButton =