ui: Update searchbar css

querybook/webapp/components/DataDocStatementExecution/StatementResult.tsx

@@ -8,11 +8,12 @@ import {
 } from 'components/StatementResultTable/StatementResultTable';
 import { IStatementExecution, IStatementResult } from 'const/queryExecution';
 import { StatementExecutionResultSizes } from 'const/queryResultLimit';
+import { MIN_COLUMN_TO_SHOW_FILTER } from 'const/uiConfig';
 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 { formatNumber } from 'lib/utils/number';
 import { IStoreState } from 'redux/store/types';
 import { TextButton } from 'ui/Button/Button';
 import { InfoButton } from 'ui/Button/InfoButton';
@@ -402,9 +403,11 @@ const ColumnToggleMenuButton: React.FC<{
     const [keyword, setKeyword] = useState('');
     const filteredColumnNames = useMemo(
         () =>
-            columnNames.filter((names) =>
-                names.toLowerCase().includes(keyword.toLowerCase())
-            ),
+            keyword === ''
+                ? columnNames
+                : columnNames.filter((names) =>
+                      names.toLowerCase().includes(keyword.toLowerCase())
+                  ),
         [columnNames, keyword]
     );
     const isAllSelected = useMemo(
@@ -414,16 +417,19 @@ const ColumnToggleMenuButton: React.FC<{
 
     const getPopoverContent = () => (
         <div className="StatementResult-column-toggle-menu">
-            <div onClick={stopPropagation}>
-                <SearchBar
-                    value={keyword}
-                    onSearch={setKeyword}
-                    placeholder="Search"
-                    transparent
-                    delayMethod="throttle"
-                    hasClearSearch={true}
-                />
-            </div>
+            {columnNames.length >= MIN_COLUMN_TO_SHOW_FILTER && (
+                <div onClick={stopPropagation}>
+                    <SearchBar
+                        value={keyword}
+                        onSearch={setKeyword}
+                        placeholder="Search"
+                        transparent
+                        delayMethod="throttle"
+                        hasClearSearch={true}
+                    />
+                </div>
+            )}
+
             <div key="all">
                 <Checkbox
                     title={

querybook/webapp/components/QueryRunButton/QueryRunButton.scss

@@ -35,6 +35,13 @@
         .engine-selector-wrapper {
             max-height: 50vh;
             overflow-y: auto;
+
+            .SearchBar input {
+                background-color: var(--bg);
+                &:hover {
+                    background-color: var(--bg-hover);
+                }
+            }
         }
     }
 

querybook/webapp/components/QueryRunButton/QueryRunButton.tsx

@@ -1,27 +1,28 @@
 import clsx from 'clsx';
 import * as React from 'react';
-import { useState, useMemo } from 'react';
+import { useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import { IQueryEngine, QueryEngineStatus } from 'const/queryEngine';
 import { queryEngineStatusToIconStatus } from 'const/queryStatusIcon';
 import { TooltipDirection } from 'const/tooltip';
+import { MIN_ENGINE_TO_SHOW_FILTER } from 'const/uiConfig';
 import {
     ALLOW_UNLIMITED_QUERY,
     DEFAULT_ROW_LIMIT,
     ROW_LIMIT_SCALE,
 } 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 { formatNumber } from 'lib/utils/number';
 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 { SearchBar } from 'ui/SearchBar/SearchBar';
 import { StatusIcon } from 'ui/StatusIcon/StatusIcon';
 import { Tag } from 'ui/Tag/Tag';
-import { SearchBar } from 'ui/SearchBar/SearchBar';
 
 import './QueryRunButton.scss';
 
@@ -178,13 +179,12 @@ export const QueryEngineSelector: React.FC<IQueryEngineSelectorProps> = ({
             className="engine-selector-dropdown"
         >
             <div className="engine-selector-wrapper">
-                {queryEngines.length > 3 && (
+                {queryEngines.length >= MIN_ENGINE_TO_SHOW_FILTER && (
                     <div onClick={stopPropagation}>
                         <SearchBar
                             value={keyword}
                             onSearch={setKeyword}
                             placeholder="Search"
-                            transparent
                             delayMethod="throttle"
                             hasClearSearch={true}
                         />

querybook/webapp/components/Search/SearchOverview.scss

@@ -22,9 +22,9 @@
     }
 
     .search-bar-wrapper {
+        padding: 0px var(--padding) 4px;
         .SearchBar {
             flex-grow: 1;
-            padding: 0px var(--padding) 4px;
             .DebouncedInput {
                 input {
                     padding: var(--padding);

querybook/webapp/const/uiConfig.ts

@@ -0,0 +1,13 @@
+/**
+ * This constant controls the minimum engines
+ * presented in the env for the engine picker
+ * to display a search bar
+ */
+export const MIN_ENGINE_TO_SHOW_FILTER = 4;
+
+/**
+ * this constant controls the minimum number
+ * of column from query results where we show
+ * the search bar in "hide columns" popover
+ */
+export const MIN_COLUMN_TO_SHOW_FILTER = 5;

querybook/webapp/ui/SearchBar/SearchBar.scss

@@ -6,34 +6,12 @@
     .DebouncedInput {
         flex: 1;
     }
-    &.transparent {
-        .DebouncedInput {
-            input {
-                padding: 12px;
-            }
-        }
-    }
+
     .SearchIcon {
         position: absolute;
-        right: 16px;
-        top: 10px;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
         color: var(--icon);
     }
-
-    .search-bar-clear-sep {
-        border-left: var(--border);
-        height: 20px;
-    }
-
-    &.clear-search {
-        .DebouncedInput {
-            flex: 9;
-        }
-        .SearchIcon {
-            flex: 1;
-        }
-        .Button{
-            flex: 1;
-        }
-    }
 }

querybook/webapp/ui/SearchBar/SearchBar.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 
 import { matchKeyPress } from 'lib/utils/keyboard';
-import { Button } from 'ui/Button/Button';
+import { IconButton } from 'ui/Button/IconButton';
 import { DebouncedInput } from 'ui/DebouncedInput/DebouncedInput';
 import { Icon } from 'ui/Icon/Icon';
 
@@ -74,20 +74,16 @@ export const SearchBar: React.FunctionComponent<ISearchBarProps> = ({
         SearchBar: true,
         [className]: Boolean(className),
         transparent,
-        'clear-search': hasClearSearch,
     });
 
     const clearSearchButton =
         !searchIcon && hasClearSearch && value ? (
-            <>
-                <span className="search-bar-clear-sep" />
-                <Button
-                    theme="text"
-                    pushable
-                    onClick={() => onSearch('')}
-                    title="Clear"
-                />
-            </>
+            <IconButton
+                icon="X"
+                onClick={() => onSearch('')}
+                className="SearchIcon"
+                noPadding
+            />
         ) : null;
 
     return (