redis search keys

packages/web/src/widgets/DbKeysSubTree.svelte

@@ -17,6 +17,8 @@
 
   export let reloadToken = 0;
   export let connection;
+  export let filter;
+
   let reloadToken2 = 0;
 
   let maxShowCount = SHOW_INCREMENT;
@@ -24,7 +26,7 @@
   // $: items = useDatabaseKeys({ conid, database, root, reloadToken });
 </script>
 
-{#await apiCall('database-connections/load-keys', { conid, database, root, reloadToken, reloadToken2 })}
+{#await apiCall('database-connections/load-keys', { conid, database, root, filter, reloadToken, reloadToken2 })}
   <LoadingInfo message="Loading key list" wrapper />
 {:then items}
   {@const itemsSorted = _.sortBy(items || [], 'text')}
@@ -36,6 +38,7 @@
       {root}
       {connection}
       {item}
+      {filter}
       {indentLevel}
       onRefreshParent={() => {
         reloadToken2 += 1;

packages/web/src/widgets/DbKeysTree.svelte

@@ -53,7 +53,7 @@
 </script>
 
 <SearchBoxWrapper>
-  <SearchInput placeholder="Search keys" bind:value={filter} />
+  <SearchInput placeholder="Search keys" bind:value={filter} isDebounced />
   <CloseSearchButton bind:filter />
   <InlineButton on:click={handleAddKey} title="Add new key">
     <FontIcon icon="icon plus-thick" />
@@ -63,5 +63,5 @@
   </InlineButton>
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
-  <DbKeysSubTree {conid} {database} root="" {reloadToken} connection={$currentDatabase?.connection} />
+  <DbKeysSubTree {conid} {database} root="" {reloadToken} connection={$currentDatabase?.connection} {filter} />
 </WidgetsInnerContainer>

packages/web/src/widgets/DbKeysTreeNode.svelte

@@ -23,6 +23,7 @@
 
   export let item;
   export let indentLevel = 0;
+  export let filter;
 
   export let onRefreshParent;
 
@@ -170,5 +171,13 @@
 </div> -->
 
 {#if isExpanded}
-  <DbKeysSubTree {conid} {database} root={item.root} indentLevel={indentLevel + 1} {reloadToken} {connection} />
+  <DbKeysSubTree
+    {conid}
+    {database}
+    root={item.root}
+    indentLevel={indentLevel + 1}
+    {reloadToken}
+    {connection}
+    {filter}
+  />
 {/if}