feat(app): able to set a parent

packages/web/src/appobj/AppObjectGroup.svelte

@@ -10,6 +10,7 @@
   export let group;
   export let groupFunc;
   export let items;
+  export let groupIconFunc = plusExpandIcon;
   export let module;
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
@@ -37,7 +38,7 @@
 
 <div class="group" on:click={() => (isExpanded = !isExpanded)}>
   <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,6 +19,7 @@
   export let getIsExpanded = null;
   export let setIsExpanded = null;
 
+  export let groupIconFunc = plusExpandIcon;
   export let groupFunc = undefined;
 
   $: filtered = !groupFunc
@@ -71,6 +73,7 @@
       {module}
       items={groups[group]}
       {expandIconFunc}
+      {groupIconFunc}
       {isExpandable}
       {subItemsComponent}
       {checkedObjectsStore}

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,7 @@
   import { apiCall } from '../utility/api';
   import LargeButton from '../buttons/LargeButton.svelte';
   import { matchingProps } from '../tabs/TableDataTab.svelte';
+  import { plusExpandIcon, chevronExpandIcon } from '../icons/expandIcons';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
@@ -40,6 +41,9 @@
     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 });
@@ -63,7 +67,26 @@
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
   <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}
+  />
+  {#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 +107,13 @@
     </ToolbarButton> -->
   {/if}
 </WidgetsInnerContainer>
+
+
+
+<style>
+  .br {
+    background: var(--theme-bg-2);
+    height: 1px;
+    margin: 5px 10px;
+  }
+</style>