connection context menu

packages/web/src/appobj/AppObjectCore.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import FontIcon from '../icons/FontIcon.svelte';
+  import contextMenu from '../utility/contextMenu';
 
   export let icon;
   export let title;
@@ -10,9 +11,10 @@
   export let statusIcon = undefined;
   export let statusTitle = undefined;
   export let extInfo = undefined;
+  export let menu = undefined;
 </script>
 
-<div class="main" class:isBold draggable on:click>
+<div class="main" class:isBold draggable on:click use:contextMenu={menu}>
   {prefix}
   {#if isBusy}
     <FontIcon icon="icon loading" />

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -1,7 +1,38 @@
+<script context="module">
+  const getContextMenu = (data, $openedConnections) => () => {
+    const handleRefresh = () => {
+      axios.post('server-connections/refresh', { conid: data._id });
+    };
+    const handleDisconnect = () => {
+      openedConnections.update(list => list.filter(x => x != data._id));
+    };
+    const handleConnect = () => {
+      openedConnections.update(list => _.uniq([...list, data._id]));
+    };
+
+    return [
+      !$openedConnections.includes(data._id) && {
+        text: 'Connect',
+        onClick: handleConnect,
+      },
+      $openedConnections.includes(data._id) &&
+        data.status && {
+          text: 'Refresh',
+          onClick: handleRefresh,
+        },
+      $openedConnections.includes(data._id) && {
+        text: 'Disconnect',
+        onClick: handleDisconnect,
+      },
+    ];
+  };
+</script>
+
 <script lang="ts">
   import _ from 'lodash';
   import AppObjectCore from './AppObjectCore.svelte';
   import { currentDatabase, extensions, openedConnections } from '../stores';
+  import axios from '../utility/axios';
 
   export let commonProps;
   export let data;
@@ -35,8 +66,27 @@
       if (status && status.name == 'error') {
         statusTitle = status.message;
       }
+    } else {
+      statusIcon = null;
+      statusTitle = null;
     }
   }
+
+  // const handleEdit = () => {
+  //   showModal(modalState => <ConnectionModal modalState={modalState} connection={data} />);
+  // };
+  // const handleDelete = () => {
+  //   showModal(modalState => (
+  //     <ConfirmModal
+  //       modalState={modalState}
+  //       message={`Really delete connection ${data.displayName || data.server}?`}
+  //       onConfirm={() => axios.post('connections/delete', data)}
+  //     />
+  //   ));
+  // };
+  // const handleCreateDatabase = () => {
+  //   showModal(modalState => <CreateDatabaseModal modalState={modalState} conid={data._id} />);
+  // };
 </script>
 
 <AppObjectCore
@@ -47,6 +97,7 @@
   statusIcon={statusIcon || engineStatusIcon}
   statusTitle={statusTitle || engineStatusTitle}
   {extInfo}
+  menu={getContextMenu(data, $openedConnections)}
   on:click
   on:click={() => ($openedConnections = _.uniq([...$openedConnections, data._id]))}
 />

packages/web/src/modals/CurrentDropDownMenu.svelte

@@ -1,4 +1,5 @@
 <script>
+  import _ from 'lodash';
   import { currentDropDownMenu } from '../stores';
   import DropDownMenu from './DropDownMenu.svelte';
 </script>
@@ -7,7 +8,7 @@
   <DropDownMenu
     left={$currentDropDownMenu.left}
     top={$currentDropDownMenu.top}
-    items={$currentDropDownMenu.items}
+    items={_.compact(_.flatten($currentDropDownMenu.items))}
     on:close={() => ($currentDropDownMenu = null)}
   />
 {/if}

packages/web/src/utility/contextMenu.ts

@@ -15,5 +15,8 @@ export default function contextMenu(node, items) {
     destroy() {
       node.removeEventListener('contextmenu', handleContextMenu);
     },
+    update(value) {
+      items = value;
+    },
   };
 }

packages/web/src/widgets/TabsPanel.svelte

@@ -102,7 +102,7 @@
     }
   };
 
-  const tabContextMenu = (tabid, props) => () => {
+  const getContextMenu = (tabid, props) => () => {
     const { conid, database } = props || {};
     const res = [
       {
@@ -147,7 +147,7 @@
           class:selected={tab.selected}
           on:click={e => handleTabClick(e, tab.tabid)}
           on:mouseup={e => handleMouseUp(e, tab.tabid)}
-          use:contextMenu={tabContextMenu(tab.tabid, tab.props)}
+          use:contextMenu={getContextMenu(tab.tabid, tab.props)}
         >
           <FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />
           <span class="file-name">