close search button

packages/web/src/datagrid/ColumnManager.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { GridDisplay } from 'dbgate-datalib';
   import { filterName } from 'dbgate-tools';
+  import CloseSearchButton from '../elements/CloseSearchButton.svelte';
 
   import InlineButton from '../elements/InlineButton.svelte';
   import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
@@ -21,6 +22,7 @@
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search columns" bind:value={filter} />
+  <CloseSearchButton bind:filter />
   {#if isDynamicStructure && !isJsonView}
     <InlineButton
       on:click={() => {

packages/web/src/datagrid/ReferenceManager.svelte

@@ -2,6 +2,7 @@
   import { GridDisplay } from 'dbgate-datalib';
   import { filterName } from 'dbgate-tools';
   import { createEventDispatcher } from 'svelte';
+import CloseSearchButton from '../elements/CloseSearchButton.svelte';
 
   import InlineButton from '../elements/InlineButton.svelte';
   import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
@@ -26,6 +27,7 @@
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search references" bind:value={filter} />
+  <CloseSearchButton bind:filter />
 </SearchBoxWrapper>
 <ManagerInnerContainer width={managerSize}>
   {#if foreignKeys.length > 0}

packages/web/src/elements/CloseSearchButton.svelte

@@ -7,7 +7,13 @@
 </script>
 
 {#if filter}
-  <InlineButton on:click={() => (filter = '')} title="Clear filter">
+  <InlineButton
+    on:click
+    on:click={() => {
+      filter = '';
+    }}
+    title="Clear filter"
+  >
     <FontIcon icon="icon close" />
   </InlineButton>
 {/if}

packages/web/src/widgets/QueryHistoryList.svelte

@@ -10,6 +10,7 @@
   import socket from '../utility/socket';
   import axiosInstance from '../utility/axiosInstance';
   import openNewTab from '../utility/openNewTab';
+  import CloseSearchButton from '../elements/CloseSearchButton.svelte';
 
   let filter = '';
   let search = '';
@@ -43,11 +44,16 @@
       socket.off('query-history-changed', reloadItems);
     };
   });
-
 </script>
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search query history" {filter} bind:value={filter} />
+  <CloseSearchButton
+    bind:filter
+    on:click={() => {
+      search = '';
+    }}
+  />
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
   {#each historyItems as item}
@@ -98,5 +104,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
 </style>