seach improvement

packages/web/src/datagrid/ColumnManager.js

@@ -5,6 +5,7 @@ import { filterName } from '@dbgate/datalib';
 import { ExpandIcon } from '../icons';
 import InlineButton from '../widgets/InlineButton';
 import { ManagerInnerContainer } from './ManagerStyles';
+import SearchInput from '../widgets/SearchInput';
 
 const Wrapper = styled.div``;
 
@@ -29,10 +30,10 @@ const Button = styled.button`
   // width: 50px;
 `;
 
-const Input = styled.input`
+// const Input = styled.input`
-  flex: 1;
+//   flex: 1;
-  min-width: 90px;
+//   min-width: 90px;
-`;
+// `;
 
 // function ExpandIcon({ display, column, isHover, ...other }) {
 //   if (column.foreignKey) {
@@ -89,12 +90,7 @@ export default function ColumnManager(props) {
   return (
     <>
       <SearchBoxWrapper>
-        <Input
+        <SearchInput placeholder="Search" filter={columnFilter} setFilter={setColumnFilter} />
-          type="text"
-          placeholder="Search"
-          value={columnFilter}
-          onChange={(e) => setColumnFilter(e.target.value)}
-        />
         <InlineButton onClick={() => display.hideAllColumns()}>Hide</InlineButton>
         <InlineButton onClick={() => display.showAllColumns()}>Show</InlineButton>
       </SearchBoxWrapper>

packages/web/src/datagrid/ReferenceManager.js

@@ -2,17 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 import { ManagerInnerContainer } from './ManagerStyles';
 import { LinkIcon, ReferenceIcon } from '../icons';
+import SearchInput from '../widgets/SearchInput';
+import { filterName } from '@dbgate/datalib';
 
 const SearchBoxWrapper = styled.div`
   display: flex;
   margin-bottom: 5px;
 `;
 
-const Input = styled.input`
-  flex: 1;
-  min-width: 90px;
-`;
-
 const Header = styled.div`
   font-weight: bold;
 `;
@@ -53,53 +50,57 @@ export default function ReferenceManager(props) {
   return (
     <>
       <SearchBoxWrapper>
-        <Input type="text" placeholder="Search" value={filter} onChange={(e) => setFilter(e.target.value)} />
+        <SearchInput placeholder="Search" filter={filter} setFilter={setFilter} />
       </SearchBoxWrapper>
       <ManagerInnerContainer>
         {foreignKeys && foreignKeys.length > 0 && (
           <>
             <Header>References tables ({foreignKeys.length})</Header>
-            {foreignKeys.map((fk) => (
+            {foreignKeys
-              <ManagerRow
+              .filter((fk) => filterName(filter, fk.refTableName))
-                key={fk.constraintName}
+              .map((fk) => (
-                Icon={LinkIcon}
+                <ManagerRow
-                tableName={fk.refTableName}
+                  key={fk.constraintName}
-                columns={fk.columns}
+                  Icon={LinkIcon}
-                onClick={() =>
+                  tableName={fk.refTableName}
-                  props.onReferenceClick({
+                  columns={fk.columns}
-                    schemaName: fk.refSchemaName,
+                  onClick={() =>
-                    pureName: fk.refTableName,
+                    props.onReferenceClick({
-                    columns: fk.columns.map((col) => ({
+                      schemaName: fk.refSchemaName,
-                      baseName: col.columnName,
+                      pureName: fk.refTableName,
-                      refName: col.refColumnName,
+                      columns: fk.columns.map((col) => ({
-                    })),
+                        baseName: col.columnName,
-                  })
+                        refName: col.refColumnName,
-                }
+                      })),
-              />
+                    })
-            ))}
+                  }
+                />
+              ))}
           </>
         )}
         {dependencies && dependencies.length > 0 && (
           <>
             <Header>Dependend tables ({dependencies.length})</Header>
-            {dependencies.map((fk) => (
+            {dependencies
-              <ManagerRow
+              .filter((fk) => filterName(filter, fk.pureName))
-                key={fk.constraintName}
+              .map((fk) => (
-                Icon={ReferenceIcon}
+                <ManagerRow
-                tableName={fk.pureName}
+                  key={fk.constraintName}
-                columns={fk.columns}
+                  Icon={ReferenceIcon}
-                onClick={() =>
+                  tableName={fk.pureName}
-                  props.onReferenceClick({
+                  columns={fk.columns}
-                    schemaName: fk.schemaName,
+                  onClick={() =>
-                    pureName: fk.pureName,
+                    props.onReferenceClick({
-                    columns: fk.columns.map((col) => ({
+                      schemaName: fk.schemaName,
-                      baseName: col.refColumnName,
+                      pureName: fk.pureName,
-                      refName: col.columnName,
+                      columns: fk.columns.map((col) => ({
-                    })),
+                        baseName: col.refColumnName,
-                  })
+                        refName: col.columnName,
-                }
+                      })),
-              />
+                    })
-            ))}
+                  }
+                />
+              ))}
           </>
         )}
       </ManagerInnerContainer>

packages/web/src/widgets/DatabaseWidget.js

@@ -17,13 +17,13 @@ import {
 import {
   SearchBoxWrapper,
   WidgetsInnerContainer,
-  Input,
   WidgetsMainContainer,
   WidgetsOuterContainer,
   WidgetTitle,
 } from './WidgetStyles';
 import axios from '../utility/axios';
 import LoadingInfo from './LoadingInfo';
+import SearchInput from './SearchInput';
 
 function SubDatabaseList({ data }) {
   const setDb = useSetCurrentDatabase();
@@ -64,7 +64,7 @@ function ConnectionList() {
     <>
       <WidgetTitle>Connections</WidgetTitle>
       <SearchBoxWrapper>
-        <Input type="text" placeholder="Search connection" value={filter} onChange={(e) => setFilter(e.target.value)} />
+        <SearchInput placeholder="Search connection" filter={filter} setFilter={setFilter} />
         <InlineButton onClick={handleRefreshConnections}>Refresh</InlineButton>
       </SearchBoxWrapper>
 
@@ -98,12 +98,7 @@ function SqlObjectList({ conid, database }) {
     <>
       <WidgetTitle>Tables, views, functions</WidgetTitle>
       <SearchBoxWrapper>
-        <Input
+        <SearchInput placeholder="Search tables or objects" filter={filter} setFilter={setFilter} />
-          type="text"
-          placeholder="Search tables or objects"
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-        />
         <InlineButton onClick={handleRefreshDatabase}>Refresh</InlineButton>
       </SearchBoxWrapper>
       <WidgetsInnerContainer>

packages/web/src/widgets/FilesWidget.js

@@ -8,7 +8,6 @@ import openedTabAppObject from '../appobj/openedTabAppObject';
 import {
   SearchBoxWrapper,
   WidgetsInnerContainer,
-  Input,
   WidgetsMainContainer,
   WidgetsOuterContainer,
   WidgetTitle,

packages/web/src/widgets/SearchInput.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import keycodes from '../utility/keycodes';
+
+const StyledInput = styled.input`
+  flex: 1;
+  min-width: 90px;
+`;
+
+export default function SearchInput({ placeholder, filter, setFilter }) {
+  const handleKeyDown = (ev) => {
+    if (ev.keyCode == keycodes.escape) {
+      setFilter('');
+    }
+  };
+  return (
+    <StyledInput
+      type="text"
+      placeholder={placeholder}
+      value={filter}
+      onChange={(e) => setFilter(e.target.value)}
+      onFocus={(e) => e.target.select()}
+      onKeyDown={handleKeyDown}
+    />
+  );
+}

packages/web/src/widgets/WidgetStyles.js

@@ -43,10 +43,10 @@ export function WidgetsInnerContainer({ children }) {
   return <StyledWidgetsInnerContainer leftPanelWidth={leftPanelWidth}>{children}</StyledWidgetsInnerContainer>;
 }
 
-export const Input = styled.input`
+// export const Input = styled.input`
-  flex: 1;
+//   flex: 1;
-  min-width: 90px;
+//   min-width: 90px;
-`;
+// `;
 
 export const WidgetTitle = styled.div`
   padding: 5px;