From 48c7294464633b6e9533e6c1ce67679cef05c35e Mon Sep 17 00:00:00 2001
From: Lily Li <lli6@expediagroup.com>
Date: Wed, 18 Jan 2023 11:29:12 -0500
Subject: [PATCH 1/3] feat: add search box to hide columns popup

---
 .../StatementResult.tsx                       | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx b/querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx
index 96fe1a913..3c2af083a 100644
--- a/querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx
+++ b/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,53 @@ 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 key="hide-column-search" onClick={stopPropagation}>
+                <SearchBar
+                    value={keyword}
+                    onSearch={updateKeyword}
+                    placeholder="Search"
+                    transparent
+                    delayMethod="throttle"
+                />
+            </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}

From 6d9739f2315a835c50c53561805fe66764f75da0 Mon Sep 17 00:00:00 2001
From: Lily Li <lli6@expediagroup.com>
Date: Tue, 24 Jan 2023 15:23:03 -0800
Subject: [PATCH 2/3] feat: add clear button to hide columns search bar

---
 .../StatementResult.scss                          | 15 +++++++++++++++
 .../DataDocStatementExecution/StatementResult.tsx |  6 +++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/querybook/webapp/components/DataDocStatementExecution/StatementResult.scss b/querybook/webapp/components/DataDocStatementExecution/StatementResult.scss
index 07e4d4e51..86ab1d813 100644
--- a/querybook/webapp/components/DataDocStatementExecution/StatementResult.scss
+++ b/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;
+            }
+        }
+    }
 }
diff --git a/querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx b/querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx
index 3c2af083a..ce40bfc32 100644
--- a/querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx
+++ b/querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx
@@ -416,13 +416,17 @@ const ColumnToggleMenuButton: React.FC<{
 
     const getPopoverContent = () => (
         <div className="StatementResult-column-toggle-menu">
-            <div key="hide-column-search" onClick={stopPropagation}>
+            <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">

From 5d9204fc8fdd4607b8af10e42e4f3cf3784fad95 Mon Sep 17 00:00:00 2001
From: Lily Li <lli6@expediagroup.com>
Date: Wed, 1 Feb 2023 09:35:40 -0800
Subject: [PATCH 3/3] chore: refactor filteredColumnNames and SearchBar

---
 .../StatementResult.scss                      | 15 ------------
 .../StatementResult.tsx                       | 23 ++++++++-----------
 querybook/webapp/ui/SearchBar/SearchBar.scss  | 12 ++++++++++
 querybook/webapp/ui/SearchBar/SearchBar.tsx   |  1 +
 4 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/querybook/webapp/components/DataDocStatementExecution/StatementResult.scss b/querybook/webapp/components/DataDocStatementExecution/StatementResult.scss
index 86ab1d813..07e4d4e51 100644
--- a/querybook/webapp/components/DataDocStatementExecution/StatementResult.scss
+++ b/querybook/webapp/components/DataDocStatementExecution/StatementResult.scss
@@ -61,19 +61,4 @@
 .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;
-            }
-        }
-    }
 }
diff --git a/querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx b/querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx
index ce40bfc32..7ce97cca7 100644
--- a/querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx
+++ b/querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx
@@ -399,30 +399,25 @@ 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 filteredColumnNames = useMemo(
+        () =>
+            columnNames.filter((names) =>
+                names.toLowerCase().includes(keyword.toLowerCase())
+            ),
+        [columnNames, keyword]
+    );
     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}
-            >
+            <div onClick={stopPropagation}>
                 <SearchBar
                     value={keyword}
-                    onSearch={updateKeyword}
+                    onSearch={setKeyword}
                     placeholder="Search"
                     transparent
                     delayMethod="throttle"
diff --git a/querybook/webapp/ui/SearchBar/SearchBar.scss b/querybook/webapp/ui/SearchBar/SearchBar.scss
index f28dea6cd..283c6b0f9 100644
--- 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
index 1897b7cd1..986d748da 100644
--- 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 =