search - better work with focus, unified component

packages/web/src/datagrid/ColumnManager.js

@@ -6,6 +6,7 @@ import { ExpandIcon } from '../icons';
 import InlineButton from '../widgets/InlineButton';
 import { ManagerInnerContainer } from './ManagerStyles';
 import SearchInput from '../widgets/SearchInput';
+import { WidgetTitle } from '../widgets/WidgetStyles';
 
 const Wrapper = styled.div``;
 
@@ -87,10 +88,18 @@ function ColumnManagerRow(props) {
 export default function ColumnManager(props) {
   const { display } = props;
   const [columnFilter, setColumnFilter] = React.useState('');
+  const inputRef = React.useRef(null);
+
   return (
     <>
+      <WidgetTitle inputRef={inputRef}>Columns</WidgetTitle>
       <SearchBoxWrapper>
-        <SearchInput placeholder="Search" filter={columnFilter} setFilter={setColumnFilter} />
+        <SearchInput
+          placeholder="Search columns"
+          filter={columnFilter}
+          setFilter={setColumnFilter}
+          inputRef={inputRef}
+        />
         <InlineButton onClick={() => display.hideAllColumns()}>Hide</InlineButton>
         <InlineButton onClick={() => display.showAllColumns()}>Show</InlineButton>
       </SearchBoxWrapper>

packages/web/src/datagrid/DataGrid.js

@@ -47,12 +47,10 @@ export default function DataGrid(props) {
       <LeftContainer>
         <ManagerMainContainer>
           <Container1>
-            <WidgetTitle>Columns</WidgetTitle>
             <ColumnManager {...props} />
           </Container1>
           {props.showReferences && (
             <ManagerOuterContainer2>
-              <WidgetTitle>References</WidgetTitle>
               <ReferenceManager {...props} />
             </ManagerOuterContainer2>
           )}

packages/web/src/datagrid/ReferenceManager.js

@@ -4,6 +4,7 @@ import { ManagerInnerContainer } from './ManagerStyles';
 import { LinkIcon, ReferenceIcon } from '../icons';
 import SearchInput from '../widgets/SearchInput';
 import { filterName } from '@dbgate/datalib';
+import { WidgetTitle } from '../widgets/WidgetStyles';
 
 const SearchBoxWrapper = styled.div`
   display: flex;
@@ -46,11 +47,13 @@ export default function ReferenceManager(props) {
   const { baseTable } = display || {};
   const { foreignKeys } = baseTable || {};
   const { dependencies } = baseTable || {};
+  const inputRef = React.useRef(null);
 
   return (
     <>
+      <WidgetTitle inputRef={inputRef}>References</WidgetTitle>
       <SearchBoxWrapper>
-        <SearchInput placeholder="Search" filter={filter} setFilter={setFilter} />
+        <SearchInput placeholder="Search references" filter={filter} setFilter={setFilter} inputRef={inputRef} />
       </SearchBoxWrapper>
       <ManagerInnerContainer>
         {foreignKeys && foreignKeys.length > 0 && (

packages/web/src/widgets/DatabaseWidget.js

@@ -58,13 +58,14 @@ function ConnectionList() {
       axios.post('server-connections/refresh', { conid });
     }
   };
+  const inputRef = React.useRef(null);
 
   const [filter, setFilter] = React.useState('');
   return (
     <>
-      <WidgetTitle>Connections</WidgetTitle>
+      <WidgetTitle inputRef={inputRef}>Connections</WidgetTitle>
       <SearchBoxWrapper>
-        <SearchInput placeholder="Search connection" filter={filter} setFilter={setFilter} />
+        <SearchInput placeholder="Search connection" filter={filter} setFilter={setFilter} inputRef={inputRef} />
         <InlineButton onClick={handleRefreshConnections}>Refresh</InlineButton>
       </SearchBoxWrapper>
 
@@ -94,11 +95,12 @@ function SqlObjectList({ conid, database }) {
       ((objects || {})[objectTypeField] || []).map((obj) => ({ ...obj, objectTypeField }))
     )
   );
+  const inputRef = React.useRef(null);
   return (
     <>
-      <WidgetTitle>Tables, views, functions</WidgetTitle>
+      <WidgetTitle inputRef={inputRef}>Tables, views, functions</WidgetTitle>
       <SearchBoxWrapper>
-        <SearchInput placeholder="Search tables or objects" filter={filter} setFilter={setFilter} />
+        <SearchInput inputRef={inputRef} placeholder="Search tables or objects" filter={filter} setFilter={setFilter} />
         <InlineButton onClick={handleRefreshDatabase}>Refresh</InlineButton>
       </SearchBoxWrapper>
       <WidgetsInnerContainer>

packages/web/src/widgets/SearchInput.js

@@ -7,7 +7,7 @@ const StyledInput = styled.input`
   min-width: 90px;
 `;
 
-export default function SearchInput({ placeholder, filter, setFilter }) {
+export default function SearchInput({ placeholder, filter, setFilter, inputRef = undefined }) {
   const handleKeyDown = (ev) => {
     if (ev.keyCode == keycodes.escape) {
       setFilter('');
@@ -15,6 +15,7 @@ export default function SearchInput({ placeholder, filter, setFilter }) {
   };
   return (
     <StyledInput
+      ref={inputRef}
       type="text"
       placeholder={placeholder}
       value={filter}

packages/web/src/widgets/WidgetStyles.js

@@ -48,10 +48,22 @@ export function WidgetsInnerContainer({ children }) {
 //   min-width: 90px;
 // `;
 
-export const WidgetTitle = styled.div`
+const StyledWidgetTitle = styled.div`
   padding: 5px;
   font-weight: bold;
   text-transform: uppercase;
   background-color: gray;
   // background-color: #CEC;
 `;
+
+export function WidgetTitle({ children, inputRef = undefined }) {
+  return (
+    <StyledWidgetTitle
+      onClick={() => {
+        if (inputRef && inputRef.current) inputRef.current.focus();
+      }}
+    >
+      {children}
+    </StyledWidgetTitle>
+  );
+}