drag & drop into/from connection folder

packages/web/src/appobj/AppObjectGroup.svelte

@@ -15,6 +15,7 @@
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
   export let passProps;
+  export let onDropOnGroup = undefined;
 
   let isExpanded = true;
 
@@ -36,7 +37,17 @@
   }
 </script>
 
-<div class="group" on:click={() => (isExpanded = !isExpanded)}>
+<div
+  class="group"
+  on:click={() => (isExpanded = !isExpanded)}
+  on:drop={e => {
+    var data = e.dataTransfer.getData('app_object_drag_data');
+    if (data && onDropOnGroup) {
+      e.stopPropagation();
+      onDropOnGroup(data, group);
+    }
+  }}
+>
   <span class="expand-icon">
     <FontIcon icon={groupIconFunc(isExpanded)} />
   </span>

packages/web/src/appobj/AppObjectList.svelte

@@ -21,6 +21,7 @@
 
   export let groupIconFunc = plusExpandIcon;
   export let groupFunc = undefined;
+  export let onDropOnGroup = undefined;
 
   $: filtered = !groupFunc
     ? list.filter(data => {
@@ -83,6 +84,7 @@
       {passProps}
       {getIsExpanded}
       {setIsExpanded}
+      {onDropOnGroup}
     />
   {/each}
 {:else}

packages/web/src/widgets/ConnectionList.svelte

@@ -26,6 +26,7 @@
   import LargeButton from '../buttons/LargeButton.svelte';
   import { matchingProps } from '../tabs/TableDataTab.svelte';
   import { plusExpandIcon, chevronExpandIcon } from '../icons/expandIcons';
+  import { safeJsonParse } from 'dbgate-tools';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
@@ -41,8 +42,12 @@
     x => !x.unsaved || $openedConnections.includes(x._id) || $openedSingleDatabaseConnections.includes(x._id)
   );
 
-  $: connectionsWithParent = connectionsWithStatusFiltered ? connectionsWithStatusFiltered?.filter((x) => x.parent !== undefined && x.parent !== null && x.parent.length !== 0) : [];
-  $: connectionsWithoutParent = connectionsWithStatusFiltered ? connectionsWithStatusFiltered?.filter((x) => x.parent === undefined || x.parent === null || x.parent.length === 0) : [];
+  $: connectionsWithParent = connectionsWithStatusFiltered
+    ? connectionsWithStatusFiltered?.filter(x => x.parent !== undefined && x.parent !== null && x.parent.length !== 0)
+    : [];
+  $: connectionsWithoutParent = connectionsWithStatusFiltered
+    ? connectionsWithStatusFiltered?.filter(x => x.parent === undefined || x.parent === null || x.parent.length === 0)
+    : [];
 
   const handleRefreshConnections = () => {
     for (const conid of $openedConnections) {
@@ -50,6 +55,16 @@
     }
   };
 
+  const handleDropOnGroup = (data, group) => {
+    const json = safeJsonParse(data);
+    if (json?._id) {
+      apiCall('connections/update', {
+        _id: json?._id,
+        values: { parent: group },
+      });
+    }
+  };
+
   const connectionColorFactory = useConnectionColorFactory(3);
 </script>
 
@@ -65,7 +80,14 @@
     <FontIcon icon="icon refresh" />
   </InlineButton>
 </SearchBoxWrapper>
-<WidgetsInnerContainer>
+<WidgetsInnerContainer
+  on:drop={e => {
+    var data = e.dataTransfer.getData('app_object_drag_data');
+    if (data) {
+      handleDropOnGroup(data, '');
+    }
+  }}
+>
   <AppObjectList
     list={_.sortBy(connectionsWithParent, connection => (getConnectionLabel(connection) || '').toUpperCase())}
     module={connectionAppObject}
@@ -81,9 +103,10 @@
     groupIconFunc={chevronExpandIcon}
     groupFunc={data => data.parent}
     expandIconFunc={plusExpandIcon}
+    onDropOnGroup={handleDropOnGroup}
   />
   {#if connectionsWithParent?.length > 0 && connectionsWithoutParent?.length > 0}
-    <div class="br"/>
+    <div class="br" />
   {/if}
   <AppObjectList
     list={_.sortBy(connectionsWithoutParent, connection => (getConnectionLabel(connection) || '').toUpperCase())}
@@ -108,8 +131,6 @@
   {/if}
 </WidgetsInnerContainer>
 
-
-
 <style>
   .br {
     background: var(--theme-bg-2);

packages/web/src/widgets/WidgetsInnerContainer.svelte

@@ -1,4 +1,4 @@
-<div><slot /></div>
+<div on:drop><slot /></div>
 
 <style>
   div {