feat: add search box to hide columns popup

querybook/webapp/components/DataDocStatementExecution/StatementResult.scss

@@ -61,4 +61,19 @@
 .StatementResult-column-toggle-menu {
     max-height: 200px;
     overflow-y: auto;
+    .hide-column-search-bar-wrapper {
+        .SearchBar {
+            display: flex;
+            flex-direction: row;
+            .DebouncedInput {
+                flex: 9;
+            }
+            .SearchIcon {
+                flex: 1;
+            }
+            .Button{
+                flex: 1;
+            }
+        }
+    }
 }

querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx

@@ -12,6 +12,7 @@ import { useImmer } from 'hooks/useImmer';
 import { useToggleState } from 'hooks/useToggleState';
 import { getSelectStatementLimit } from 'lib/sql-helper/sql-limiter';
 import { formatNumber } from 'lib/utils/number';
+import { stopPropagation } from 'lib/utils/noop';
 import { IStoreState } from 'redux/store/types';
 import { TextButton } from 'ui/Button/Button';
 import { InfoButton } from 'ui/Button/InfoButton';
@@ -21,6 +22,7 @@ import { Loading } from 'ui/Loading/Loading';
 import { Message } from 'ui/Message/Message';
 import { Popover } from 'ui/Popover/Popover';
 import { PrettyNumber } from 'ui/PrettyNumber/PrettyNumber';
+import { SearchBar } from 'ui/SearchBar/SearchBar';
 import { IOptions, makeSelectOptions, Select } from 'ui/Select/Select';
 import { ShowMoreText } from 'ui/ShowMoreText/ShowMoreText';
 import { AccentText } from 'ui/StyledText/StyledText';
@@ -397,29 +399,57 @@ const ColumnToggleMenuButton: React.FC<{
 }> = ({ columnNames, columnVisibility, toggleVisibility }) => {
     const buttonRef = React.useRef<HTMLAnchorElement>();
     const [showPopover, _, toggleShowPopover] = useToggleState(false);
+    const [filteredColumnNames, setFilteredColumnNames] = useState(columnNames);
+    const [keyword, setKeyword] = useState('');
     const isAllSelected = useMemo(
         () => columnNames.every((columnName) => columnVisibility[columnName]),
         [columnNames, columnVisibility]
     );
 
+    const updateKeyword = (keyword: string) => {
+        const filtered = columnNames.filter((names) => {
+            return `${names.toLowerCase()}`.includes(keyword.toLowerCase());
+        });
+        setKeyword(keyword);
+        setFilteredColumnNames(filtered);
+    };
+
     const getPopoverContent = () => (
         <div className="StatementResult-column-toggle-menu">
+            <div
+                className="hide-column-search-bar-wrapper"
+                onClick={stopPropagation}
+            >
+                <SearchBar
+                    value={keyword}
+                    onSearch={updateKeyword}
+                    placeholder="Search"
+                    transparent
+                    delayMethod="throttle"
+                    hasClearSearch={true}
+                />
+            </div>
             <div key="all">
                 <Checkbox
-                    title={isAllSelected ? 'Hide All' : 'Select All'}
+                    title={
+                        (isAllSelected ? 'Hide All' : 'Select All') +
+                        (keyword === '' ? '' : ' Visible')
+                    }
                     value={isAllSelected}
                     onChange={() => {
                         if (isAllSelected) {
-                            columnNames.map((col) => toggleVisibility(col));
+                            filteredColumnNames.map((col) =>
+                                toggleVisibility(col)
+                            );
                         } else {
-                            columnNames
+                            filteredColumnNames
                                 .filter((col) => !columnVisibility[col])
                                 .map((column) => toggleVisibility(column));
                         }
                     }}
                 />
             </div>
-            {columnNames.map((columnName) => (
+            {filteredColumnNames.map((columnName) => (
                 <div key={columnName}>
                     <Checkbox
                         title={columnName}