Merge pull request #411 from qlaffont/master

FEAT: Folders support

.node-version

@@ -0,0 +1 @@
+16.14.2

packages/api/src/controllers/connections.js

@@ -62,6 +62,7 @@ function getPortalCollections() {
       displayName: process.env[`LABEL_${id}`],
       isReadOnly: process.env[`READONLY_${id}`],
       databases: process.env[`DBCONFIG_${id}`] ? safeJsonParse(process.env[`DBCONFIG_${id}`]) : null,
+      parent: process.env[`PARENT_${id}`] || undefined,
 
       // SSH tunnel
       useSshTunnel: process.env[`USE_SSH_${id}`],

packages/web/src/appobj/AppObjectGroup.svelte

@@ -10,10 +10,12 @@
   export let group;
   export let groupFunc;
   export let items;
+  export let groupIconFunc = plusExpandIcon;
   export let module;
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
   export let passProps;
+  export let onDropOnGroup = undefined;
 
   let isExpanded = true;
 
@@ -35,9 +37,19 @@
   }
 </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={plusExpandIcon(isExpanded)} />
+    <FontIcon icon={groupIconFunc(isExpanded)} />
   </span>
 
   {group}

packages/web/src/appobj/AppObjectList.svelte

@@ -2,6 +2,7 @@
   import _ from 'lodash';
   import { asyncFilter } from '../utility/common';
   import AppObjectGroup from './AppObjectGroup.svelte';
+  import { plusExpandIcon } from '../icons/expandIcons';
 
   import AppObjectListItem from './AppObjectListItem.svelte';
 
@@ -18,7 +19,9 @@
   export let getIsExpanded = null;
   export let setIsExpanded = null;
 
+  export let groupIconFunc = plusExpandIcon;
   export let groupFunc = undefined;
+  export let onDropOnGroup = undefined;
 
   $: filtered = !groupFunc
     ? list.filter(data => {
@@ -71,6 +74,7 @@
       {module}
       items={groups[group]}
       {expandIconFunc}
+      {groupIconFunc}
       {isExpandable}
       {subItemsComponent}
       {checkedObjectsStore}
@@ -80,6 +84,7 @@
       {passProps}
       {getIsExpanded}
       {setIsExpanded}
+      {onDropOnGroup}
     />
   {/each}
 {:else}

packages/web/src/settings/ConnectionDriverFields.svelte

@@ -217,6 +217,19 @@
         disabled={isConnected}
       />
     </div>
+    </div>
+  {/if}
+
+{#if driver}
+  <div>
+    <div class="is-full select-row">
+      <!-- TODO: Able to use with svelte-select the possibility to use isCreatable & isClearable -->
+      <FormTextField
+        label="Parent Folder"
+        name="parent"
+        disabled={isConnected}
+      />
+    </div>
   </div>
 {/if}
 

packages/web/src/widgets/ConnectionList.svelte

@@ -25,6 +25,8 @@
   import { apiCall } from '../utility/api';
   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();
@@ -40,12 +42,29 @@
     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)
+    : [];
+
   const handleRefreshConnections = () => {
     for (const conid of $openedConnections) {
       apiCall('server-connections/refresh', { conid });
     }
   };
 
+  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>
 
@@ -61,9 +80,36 @@
     <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(connectionsWithStatusFiltered, connection => (getConnectionLabel(connection) || '').toUpperCase())}
+    list={_.sortBy(connectionsWithParent, connection => (getConnectionLabel(connection) || '').toUpperCase())}
+    module={connectionAppObject}
+    subItemsComponent={SubDatabaseList}
+    expandOnClick
+    isExpandable={data => $openedConnections.includes(data._id) && !data.singleDatabase}
+    {filter}
+    passProps={{ connectionColorFactory: $connectionColorFactory, showPinnedInsteadOfUnpin: true }}
+    getIsExpanded={data => $expandedConnections.includes(data._id) && !data.singleDatabase}
+    setIsExpanded={(data, value) => {
+      expandedConnections.update(old => (value ? [...old, data._id] : old.filter(x => x != data._id)));
+    }}
+    groupIconFunc={chevronExpandIcon}
+    groupFunc={data => data.parent}
+    expandIconFunc={plusExpandIcon}
+    onDropOnGroup={handleDropOnGroup}
+  />
+  {#if connectionsWithParent?.length > 0 && connectionsWithoutParent?.length > 0}
+    <div class="br" />
+  {/if}
+  <AppObjectList
+    list={_.sortBy(connectionsWithoutParent, connection => (getConnectionLabel(connection) || '').toUpperCase())}
     module={connectionAppObject}
     subItemsComponent={SubDatabaseList}
     expandOnClick
@@ -84,3 +130,11 @@
     </ToolbarButton> -->
   {/if}
 </WidgetsInnerContainer>
+
+<style>
+  .br {
+    background: var(--theme-bg-2);
+    height: 1px;
+    margin: 5px 10px;
+  }
+</style>

packages/web/src/widgets/WidgetsInnerContainer.svelte

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