app object module methods, search in connection list

packages/web/src/widgets/ConnectionList.svelte

@@ -6,12 +6,14 @@
   import { useConnectionList, useServerStatus } from '../utility/metadataLoaders';
   import SearchBoxWrapper from './SearchBoxWrapper.svelte';
   import AppObjectList from '../appobj/AppObjectList.svelte';
-  import ConnectionAppObject from '../appobj/ConnectionAppObject.svelte';
+  import * as connectionAppObject from '../appobj/ConnectionAppObject.svelte';
   import SubDatabaseList from '../appobj/SubDatabaseList.svelte';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
 
+  let filter = '';
+
   $: connectionsWithStatus =
     $connections && $serverStatus
       ? $connections.map(conn => ({ ...conn, status: $serverStatus[conn._id] }))
@@ -19,14 +21,15 @@
 </script>
 
 <SearchBoxWrapper>
-  <SearchInput placeholder="Search connection" />
+  <SearchInput placeholder="Search connection" bind:value={filter} />
   <InlineButton>Refresh</InlineButton>
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
   <AppObjectList
     list={_.sortBy(connectionsWithStatus, ({ displayName, server }) => (displayName || server || '').toUpperCase())}
-    component={ConnectionAppObject}
+    module={connectionAppObject}
     subItemsComponent={SubDatabaseList}
     expandOnClick
+    {filter}
   />
 </WidgetsInnerContainer>

packages/web/src/widgets/SearchInput.svelte

@@ -1,8 +1,26 @@
 <script lang="ts">
+  import keycodes from '../utility/keycodes';
+
   export let placeholder;
+  export let value;
+
+  let domInput;
+
+  function handleKeyDown(e) {
+    if (e.keyCode == keycodes.escape) {
+      value = '';
+    }
+  }
 </script>
 
-<input type="text" {placeholder} />
+<input
+  type="text"
+  {placeholder}
+  bind:value
+  on:keydown={handleKeyDown}
+  bind:this={domInput}
+  on:focus={e => domInput.select()}
+/>
 
 <style>
   input {

packages/web/src/widgets/SqlObjectList.svelte

@@ -6,7 +6,7 @@
   import SearchBoxWrapper from './SearchBoxWrapper.svelte';
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import _ from 'lodash';
-  import DatabaseObjectAppObject from '../appobj/DatabaseObjectAppObject.svelte';
+  import * as databaseObjectAppObject from '../appobj/DatabaseObjectAppObject.svelte';
   import { currentDatabase } from '../stores';
 
   export let conid;
@@ -30,5 +30,5 @@
   <InlineButton>Refresh</InlineButton>
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
-  <AppObjectList list={objectList.map(x => ({ ...x, conid, database }))} component={DatabaseObjectAppObject} />
+  <AppObjectList list={objectList.map(x => ({ ...x, conid, database }))} module={databaseObjectAppObject} />
 </WidgetsInnerContainer>