Allow drag-n-drop columns collection tree node as comma separated columns. #4419

docs/en_US/release_notes_8_3.rst

@@ -20,6 +20,7 @@ Bundled PostgreSQL Utilities
 New features
 ************
 
+  | `Issue #4419 <https://github.com/pgadmin-org/pgadmin4/issues/4419>`_ -  Added support to rename columns in Views.
   | `Issue #6380 <https://github.com/pgadmin-org/pgadmin4/issues/6380>`_ -  Added support to rename columns in Views.
   | `Issue #6392 <https://github.com/pgadmin-org/pgadmin4/issues/6392>`_ -  Added BYPASSRLS|NOBYPASSRLS option while creating a Role.
   | `Issue #6557 <https://github.com/pgadmin-org/pgadmin4/issues/6557>`_ -  Use COOKIE_DEFAULT_PATH or SCRIPT_NAME in session cookie path.

web/pgadmin/static/js/tree/ObjectExplorer.jsx

@@ -15,7 +15,8 @@ function postTreeReady(b) {
     'collation domain domain_constraints fts_configuration fts_dictionary fts_parser fts_template synonym table partition type sequence package view mview foreign_table edbvar',
     'schema column database cast event_trigger extension language foreign_data_wrapper foreign_server user_mapping compound_trigger index index_constraint primary_key unique_constraint check_constraint exclusion_constraint foreign_key rule',
     'trigger trigger_function',
-    'edbfunc function edbproc procedure'
+    'edbfunc function edbproc procedure',
+    'coll-column'
   ];
   const getQualifiedName = (data, item)=>{
     if(draggableTypes[0].includes(data._type)) {
@@ -77,6 +78,11 @@ function postTreeReady(b) {
         cur: curPos,
       };
     },
+    [draggableTypes[4]] : (_data, item)=>{
+      return item?.children?.map((ci)=>{
+        return getQualifiedName(ci._metadata.data);
+      }).join(', ') ?? '';
+    }
   });
 
   b.tree.onNodeCopy((data, item)=>{

web/pgadmin/static/js/tree/tree.js

@@ -563,10 +563,14 @@ export class Tree {
       /* setDragImage is not supported in IE. We leave it to
       * its default look and feel
       */
+      const dropText = _.escape(dropDetails.text);
+      if(!dropText) {
+        e.preventDefault();
+      }
       if (e.dataTransfer.setDragImage) {
         const dragItem = document.createElement('div');
         dragItem.classList.add('drag-tree-node');
-        dragItem.innerHTML = `<span>${_.escape(dropDetails.text)}</span>`;
+        dragItem.innerHTML = `<span>${dropText}</span>`;
 
         document.querySelector('body .drag-tree-node')?.remove();
         document.body.appendChild(dragItem);

web/pgadmin/static/scss/_pgadmin.style.scss

@@ -861,6 +861,10 @@ table.table-empty-rows{
   border: $input-border-width solid $input-focus-border-color;
   border-radius: $input-border-radius;
   padding: $input-btn-padding-y $input-btn-padding-x;
+  max-width: 30%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 ::placeholder {