From 68ee86010a3133e1214715004c36d02e7ab535d8 Mon Sep 17 00:00:00 2001
From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com>
Date: Mon, 11 Dec 2023 12:04:50 +0100
Subject: [PATCH] [ACS-6323] dynamic content list changing columns order with
 drag drop (#3557)

* ACS-6323 Allow to drag and drop name column

* ACS-6323 Made rest columns in personal files as draggable

* ACS-6323 Enabled dragging columns for rest of lists

* ACS-6323 Small correction

* ACS-6323 Fixed e2e

* ACS-6323 Fixed e2e

* ACS-6323 Fixed e2e

* ACS-6323 Fixed e2e

* ACS-6323 Fixed e2e

* ACS-6323 Fixed e2e

* ACS-6323 Fixed e2e

* ACS-6323 Fixed e2e

* ACS-6323 Revert change

* e2e test fix

* e2e test fix

---------

Co-authored-by: akash.rathod@hyland.com <akash.rathod@hyland.com>
---
 .../aca-content/assets/app.extensions.json    | 109 ++++++++++++------
 .../favorite-libraries.component.html         |   2 +
 .../favorites/favorites.component.html        |   2 +
 .../lib/components/files/files.component.html |   2 +
 .../libraries/libraries.component.html        |   2 +
 .../recent-files/recent-files.component.html  |   2 +
 .../search-libraries-results.component.html   |   2 +
 .../search-results.component.html             |  12 +-
 .../shared-files/shared-files.component.html  |   2 +
 .../trashcan/trashcan.component.html          |   2 +
 .../src/components/data-table/data-table.ts   |   1 +
 11 files changed, 97 insertions(+), 41 deletions(-)

diff --git a/projects/aca-content/assets/app.extensions.json b/projects/aca-content/assets/app.extensions.json
index 9ab45014e..6469d51f2 100644
--- a/projects/aca-content/assets/app.extensions.json
+++ b/projects/aca-content/assets/app.extensions.json
@@ -2125,7 +2125,8 @@
           "sortable": true,
           "template": "app.columns.name",
           "desktopOnly": false,
-          "order": 20
+          "order": 20,
+          "draggable": true
         },
         {
           "id": "app.files.size",
@@ -2136,7 +2137,8 @@
           "class": "adf-no-grow-cell adf-ellipsis-cell",
           "sortable": true,
           "desktopOnly": true,
-          "order": 30
+          "order": 30,
+          "draggable": true
         },
         {
           "id": "app.files.modifiedOn",
@@ -2147,7 +2149,8 @@
           "class": "adf-ellipsis-cell adf-expand-cell-1",
           "sortable": true,
           "desktopOnly": true,
-          "order": 40
+          "order": 40,
+          "draggable": true
         },
         {
           "id": "app.files.modifiedBy",
@@ -2158,7 +2161,8 @@
           "class": "adf-ellipsis-cell adf-expand-cell-1",
           "sortable": true,
           "desktopOnly": true,
-          "order": 50
+          "order": 50,
+          "draggable": true
         },
         {
           "id": "app.filer.tags",
@@ -2170,6 +2174,7 @@
           "sortable": false,
           "desktopOnly": true,
           "order": 60,
+          "draggable": true,
           "rules": {
             "visible": "app.areTagsEnabled"
           }
@@ -2194,7 +2199,8 @@
           "sortable": true,
           "template": "app.columns.libraryName",
           "desktopOnly": false,
-          "order": 20
+          "order": 20,
+          "draggable": true
         },
         {
           "id": "app.libraries.description",
@@ -2204,7 +2210,8 @@
           "class": "adf-ellipsis-cell adf-expand-cell-5",
           "sortable": true,
           "desktopOnly": true,
-          "order": 30
+          "order": 30,
+          "draggable": true
         },
         {
           "id": "app.libraries.role",
@@ -2215,7 +2222,8 @@
           "sortable": true,
           "template": "app.columns.libraryRole",
           "desktopOnly": false,
-          "order": 40
+          "order": 40,
+          "draggable": true
         },
         {
           "id": "app.libraries.visibility",
@@ -2226,7 +2234,8 @@
           "sortable": true,
           "template": "app.columns.libraryStatus",
           "desktopOnly": true,
-          "order": 50
+          "order": 50,
+          "draggable": true
         }
       ],
       "favoriteLibraries": [
@@ -2248,7 +2257,8 @@
           "sortable": true,
           "template": "app.columns.libraryName",
           "desktopOnly": false,
-          "order": 20
+          "order": 20,
+          "draggable": true
         },
         {
           "id": "app.favorite.libraries.description",
@@ -2258,7 +2268,8 @@
           "class": "adf-ellipsis-cell adf-expand-cell-5",
           "sortable": true,
           "desktopOnly": true,
-          "order": 30
+          "order": 30,
+          "draggable": true
         },
         {
           "id": "app.favorite.libraries.role",
@@ -2269,7 +2280,8 @@
           "sortable": true,
           "template": "app.columns.libraryRole",
           "desktopOnly": false,
-          "order": 40
+          "order": 40,
+          "draggable": true
         },
         {
           "id": "app.favorite.libraries.visibility",
@@ -2280,7 +2292,8 @@
           "sortable": true,
           "template": "app.columns.libraryStatus",
           "desktopOnly": true,
-          "order": 50
+          "order": 50,
+          "draggable": true
         }
       ],
       "shared": [
@@ -2301,7 +2314,8 @@
           "sortable": true,
           "template": "app.columns.name",
           "desktopOnly": false,
-          "order": 20
+          "order": 20,
+          "draggable": true
         },
         {
           "id": "app.shared.location",
@@ -2313,7 +2327,8 @@
           "sortable": true,
           "template": "app.columns.location",
           "desktopOnly": true,
-          "order": 30
+          "order": 30,
+          "draggable": true
         },
         {
           "id": "app.shared.size",
@@ -2324,7 +2339,8 @@
           "class": "adf-no-grow-cell adf-ellipsis-cell",
           "sortable": true,
           "desktopOnly": true,
-          "order": 40
+          "order": 40,
+          "draggable": true
         },
         {
           "id": "app.shared.modifiedOn",
@@ -2336,7 +2352,8 @@
           "format": "timeAgo",
           "sortable": true,
           "desktopOnly": true,
-          "order": 50
+          "order": 50,
+          "draggable": true
         },
         {
           "id": "app.shared.modifiedBy",
@@ -2347,7 +2364,8 @@
           "class": "adf-ellipsis-cell adf-expand-cell-2",
           "sortable": true,
           "desktopOnly": true,
-          "order": 60
+          "order": 60,
+          "draggable": true
         },
         {
           "id": "app.shared.sharedBy",
@@ -2358,7 +2376,8 @@
           "class": "adf-ellipsis-cell adf-no-grow-cell",
           "sortable": true,
           "desktopOnly": true,
-          "order": 70
+          "order": 70,
+          "draggable": true
         },
         {
           "id": "app.filer.tags",
@@ -2370,6 +2389,7 @@
           "sortable": false,
           "desktopOnly": true,
           "order": 80,
+          "draggable": true,
           "rules": {
             "visible": "app.areTagsEnabled"
           }
@@ -2393,7 +2413,8 @@
           "sortable": true,
           "template": "app.columns.name",
           "desktopOnly": false,
-          "order": 20
+          "order": 20,
+          "draggable": true
         },
         {
           "id": "app.recent.location",
@@ -2404,7 +2425,8 @@
           "sortable": true,
           "template": "app.columns.location",
           "desktopOnly": true,
-          "order": 30
+          "order": 30,
+          "draggable": true
         },
         {
           "id": "app.recent.size",
@@ -2415,7 +2437,8 @@
           "class": "adf-no-grow-cell adf-ellipsis-cell",
           "sortable": true,
           "desktopOnly": true,
-          "order": 40
+          "order": 40,
+          "draggable": true
         },
         {
           "id": "app.recent.modifiedOn",
@@ -2426,7 +2449,8 @@
           "class": "adf-ellipsis-cell adf-expand-cell-1",
           "sortable": true,
           "desktopOnly": true,
-          "order": 50
+          "order": 50,
+          "draggable": true
         },
         {
           "id": "app.filer.tags",
@@ -2438,6 +2462,7 @@
           "sortable": false,
           "desktopOnly": true,
           "order": 60,
+          "draggable": true,
           "rules": {
             "visible": "app.areTagsEnabled"
           }
@@ -2461,7 +2486,8 @@
           "sortable": true,
           "template": "app.columns.name",
           "desktopOnly": false,
-          "order": 20
+          "order": 20,
+          "draggable": true
         },
         {
           "id": "app.favorites.location",
@@ -2472,7 +2498,8 @@
           "sortable": true,
           "template": "app.columns.location",
           "desktopOnly": true,
-          "order": 30
+          "order": 30,
+          "draggable": true
         },
         {
           "id": "app.favorites.size",
@@ -2482,7 +2509,8 @@
           "class": "adf-no-grow-cell adf-ellipsis-cell",
           "sortable": true,
           "desktopOnly": true,
-          "order": 40
+          "order": 40,
+          "draggable": true
         },
         {
           "id": "app.favorites.modifiedOn",
@@ -2493,7 +2521,8 @@
           "class": "adf-ellipsis-cell adf-expand-cell-1",
           "sortable": true,
           "desktopOnly": true,
-          "order": 50
+          "order": 50,
+          "draggable": true
         },
         {
           "id": "app.favorites.modifiedBy",
@@ -2504,7 +2533,8 @@
           "class": "adf-ellipsis-cell adf-expand-cell-1",
           "sortable": true,
           "desktopOnly": true,
-          "order": 60
+          "order": 60,
+          "draggable": true
         },
         {
           "id": "app.filer.tags",
@@ -2516,6 +2546,7 @@
           "sortable": false,
           "desktopOnly": true,
           "order": 70,
+          "draggable": true,
           "rules": {
             "visible": "app.areTagsEnabled"
           }
@@ -2539,7 +2570,8 @@
           "sortable": true,
           "template": "app.columns.trashcanName",
           "desktopOnly": false,
-          "order": 20
+          "order": 20,
+          "draggable": true
         },
         {
           "id": "app.trashcan.location",
@@ -2550,7 +2582,8 @@
           "sortable": true,
           "template": "app.columns.location",
           "desktopOnly": true,
-          "order": 30
+          "order": 30,
+          "draggable": true
         },
         {
           "id": "app.trashcan.size",
@@ -2561,7 +2594,8 @@
           "class": "adf-no-grow-cell adf-ellipsis-cell",
           "sortable": true,
           "desktopOnly": true,
-          "order": 40
+          "order": 40,
+          "draggable": true
         },
         {
           "id": "app.trashcan.deletedOn",
@@ -2572,7 +2606,8 @@
           "class": "adf-ellipsis-cell",
           "sortable": true,
           "desktopOnly": true,
-          "order": 50
+          "order": 50,
+          "draggable": true
         }
       ],
       "search-libraries": [
@@ -2594,7 +2629,8 @@
           "sortable": true,
           "template": "app.columns.libraryName",
           "desktopOnly": false,
-          "order": 20
+          "order": 20,
+          "draggable": true
         },
         {
           "id": "app.favorite.libraries.description",
@@ -2605,7 +2641,8 @@
           "sortable": true,
           "template": "app.columns.libraryDescription",
           "desktopOnly": true,
-          "order": 30
+          "order": 30,
+          "draggable": true
         },
         {
           "id": "app.libraries.role",
@@ -2616,7 +2653,8 @@
           "sortable": true,
           "template": "app.columns.libraryRole",
           "desktopOnly": false,
-          "order": 40
+          "order": 40,
+          "draggable": true
         },
         {
           "id": "app.libraries.visibility",
@@ -2627,7 +2665,8 @@
           "sortable": true,
           "template": "app.columns.libraryStatus",
           "desktopOnly": true,
-          "order": 50
+          "order": 50,
+          "draggable": true
         }
       ]
     }
diff --git a/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html b/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html
index 5a004c6d6..0b4dbadbe 100644
--- a/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html
+++ b/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html
@@ -35,6 +35,7 @@
           <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
             <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
+                [draggable]="column.draggable"
                 [key]="column.key"
                 [title]="column.title"
                 [type]="column.type"
@@ -52,6 +53,7 @@
             <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
                 [key]="column.key"
+                [draggable]="column.draggable"
                 [title]="column.title"
                 [type]="column.type"
                 [format]="column.format"
diff --git a/projects/aca-content/src/lib/components/favorites/favorites.component.html b/projects/aca-content/src/lib/components/favorites/favorites.component.html
index 3ae915cf5..dce5af70b 100644
--- a/projects/aca-content/src/lib/components/favorites/favorites.component.html
+++ b/projects/aca-content/src/lib/components/favorites/favorites.component.html
@@ -32,6 +32,7 @@
               <data-column
                 [key]="column.key"
                 [title]="column.title"
+                [draggable]="column.draggable"
                 [type]="column.type"
                 [format]="column.format"
                 [class]="column.class"
@@ -49,6 +50,7 @@
                 [key]="column.key"
                 [title]="column.title"
                 [type]="column.type"
+                [draggable]="column.draggable"
                 [format]="column.format"
                 [class]="column.class"
                 [sortable]="column.sortable"
diff --git a/projects/aca-content/src/lib/components/files/files.component.html b/projects/aca-content/src/lib/components/files/files.component.html
index c24e0e63a..08798be29 100644
--- a/projects/aca-content/src/lib/components/files/files.component.html
+++ b/projects/aca-content/src/lib/components/files/files.component.html
@@ -47,6 +47,7 @@
                   [sortable]="column.sortable"
                   [sortingKey]="column.sortingKey || column.key"
                   [isHidden]="column.isHidden"
+                  [draggable]="column.draggable"
                 >
                   <ng-template let-context>
                     <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
@@ -64,6 +65,7 @@
                   [sortable]="column.sortable"
                   [sortingKey]="column.sortingKey || column.key"
                   [isHidden]="column.isHidden"
+                  [draggable]="column.draggable"
                 >
                 </data-column>
               </ng-container>
diff --git a/projects/aca-content/src/lib/components/libraries/libraries.component.html b/projects/aca-content/src/lib/components/libraries/libraries.component.html
index 26c0fe84f..78583e30d 100644
--- a/projects/aca-content/src/lib/components/libraries/libraries.component.html
+++ b/projects/aca-content/src/lib/components/libraries/libraries.component.html
@@ -38,6 +38,7 @@
                 [title]="column.title"
                 [type]="column.type"
                 [format]="column.format"
+                [draggable]="column.draggable"
                 [class]="column.class"
                 [sortable]="column.sortable"
                 [isHidden]="column.isHidden"
@@ -55,6 +56,7 @@
                 [type]="column.type"
                 [format]="column.format"
                 [class]="column.class"
+                [draggable]="column.draggable"
                 [sortable]="column.sortable"
                 [isHidden]="column.isHidden"
               >
diff --git a/projects/aca-content/src/lib/components/recent-files/recent-files.component.html b/projects/aca-content/src/lib/components/recent-files/recent-files.component.html
index 8659a5751..1fea167ca 100644
--- a/projects/aca-content/src/lib/components/recent-files/recent-files.component.html
+++ b/projects/aca-content/src/lib/components/recent-files/recent-files.component.html
@@ -36,6 +36,7 @@
                 [format]="column.format"
                 [class]="column.class"
                 [sortable]="column.sortable"
+                [draggable]="column.draggable"
                 [isHidden]="column.isHidden"
               >
                 <ng-template let-context>
@@ -53,6 +54,7 @@
                 [class]="column.class"
                 [sortable]="column.sortable"
                 [isHidden]="column.isHidden"
+                [draggable]="column.draggable"
               >
               </data-column>
             </ng-container>
diff --git a/projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.html b/projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.html
index e891d4251..103b60ebe 100644
--- a/projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.html
+++ b/projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.html
@@ -45,6 +45,7 @@
                     [format]="column.format"
                     [class]="column.class"
                     [sortable]="column.sortable"
+                    [draggable]="column.draggable"
                   >
                     <ng-template let-context>
                       <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
@@ -60,6 +61,7 @@
                     [format]="column.format"
                     [class]="column.class"
                     [sortable]="column.sortable"
+                    [draggable]="column.draggable"
                   >
                   </data-column>
                 </ng-container>
diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.html b/projects/aca-content/src/lib/components/search/search-results/search-results.component.html
index 8e99f06b5..039944ddb 100644
--- a/projects/aca-content/src/lib/components/search/search-results/search-results.component.html
+++ b/projects/aca-content/src/lib/components/search/search-results/search-results.component.html
@@ -58,13 +58,13 @@
                 </adf-data-column-header>
               </data-column>
 
-              <data-column key type="text"  class="adf-ellipsis-cell adf-expand-cell-5" title="APP.DOCUMENT_LIST.COLUMNS.NAME" [sortable]="false">
+              <data-column key type="text"  class="adf-ellipsis-cell adf-expand-cell-5" title="APP.DOCUMENT_LIST.COLUMNS.NAME" [sortable]="false" [draggable]="true">
                 <ng-template let-context>
                   <aca-search-results-row [context]="context"></aca-search-results-row>
                 </ng-template>
               </data-column>
 
-              <data-column key="properties"  title="Description" class="adf-expand-cell-3" [sortable]="false" *ngIf="!isSmallScreen">
+              <data-column key="properties"  title="Description" class="adf-expand-cell-3" [sortable]="false" *ngIf="!isSmallScreen" [draggable]="true">
                 <ng-template let-context>
                   <span class="adf-datatable-cell-value adf-ellipsis-cell">
                   {{context.row?.node?.entry?.properties && context.row?.node?.entry?.properties['cm:description']}}
@@ -72,10 +72,10 @@
                 </ng-template>
               </data-column>
 
-              <data-column key="content.sizeInBytes" type="fileSize" title="APP.DOCUMENT_LIST.COLUMNS.SIZE" class="adf-no-grow-cell adf-ellipsis-cell" [sortable]="false" *ngIf="!isSmallScreen"></data-column>
-              <data-column key="modifiedAt" type="date" title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON" class="adf-no-grow-cell adf-ellipsis-cell" format="timeAgo" [sortable]="false" *ngIf="!isSmallScreen"></data-column>
-              <data-column key="modifiedByUser.displayName" title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY" class="adf-no-grow-cell adf-ellipsis-cell" [sortable]="false" *ngIf="!isSmallScreen"></data-column>
-              <data-column key="$tags" type="text" title="APP.DOCUMENT_LIST.COLUMNS.TAGS" class="adf-full-width adf-expand-cell-4" [sortable]="false">
+              <data-column key="content.sizeInBytes" type="fileSize" title="APP.DOCUMENT_LIST.COLUMNS.SIZE" class="adf-no-grow-cell adf-ellipsis-cell" [sortable]="false" *ngIf="!isSmallScreen" [draggable]="true"></data-column>
+              <data-column key="modifiedAt" type="date" title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON" class="adf-no-grow-cell adf-ellipsis-cell" format="timeAgo" [sortable]="false" *ngIf="!isSmallScreen" [draggable]="true"></data-column>
+              <data-column key="modifiedByUser.displayName" title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY" class="adf-no-grow-cell adf-ellipsis-cell" [sortable]="false" *ngIf="!isSmallScreen" [draggable]="true"></data-column>
+              <data-column key="$tags" type="text" title="APP.DOCUMENT_LIST.COLUMNS.TAGS" class="adf-full-width adf-expand-cell-4" [sortable]="false" [draggable]="true">
                 <ng-template let-context>
                   <aca-tags-column [context]="context"></aca-tags-column>
                 </ng-template>
diff --git a/projects/aca-content/src/lib/components/shared-files/shared-files.component.html b/projects/aca-content/src/lib/components/shared-files/shared-files.component.html
index 013d7aa7b..7dcf95e57 100644
--- a/projects/aca-content/src/lib/components/shared-files/shared-files.component.html
+++ b/projects/aca-content/src/lib/components/shared-files/shared-files.component.html
@@ -36,6 +36,7 @@
                 [class]="column.class"
                 [sortable]="column.sortable"
                 [isHidden]="column.isHidden"
+                [draggable]="column.draggable"
               >
                 <ng-template let-context>
                   <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
@@ -45,6 +46,7 @@
 
             <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
+                [draggable]="column.draggable"
                 [key]="column.key"
                 [title]="column.title"
                 [type]="column.type"
diff --git a/projects/aca-content/src/lib/components/trashcan/trashcan.component.html b/projects/aca-content/src/lib/components/trashcan/trashcan.component.html
index d42f77d1f..a4ea7ad45 100644
--- a/projects/aca-content/src/lib/components/trashcan/trashcan.component.html
+++ b/projects/aca-content/src/lib/components/trashcan/trashcan.component.html
@@ -36,6 +36,7 @@
             <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
                 [key]="column.key"
+                [draggable]="column.draggable"
                 [title]="column.title"
                 [type]="column.type"
                 [format]="column.format"
@@ -57,6 +58,7 @@
                 [format]="column.format"
                 [class]="column.class"
                 [sortable]="column.sortable"
+                [draggable]="column.draggable"
                 [isHidden]="column.isHidden"
               >
               </data-column>
diff --git a/projects/aca-testing-shared/src/components/data-table/data-table.ts b/projects/aca-testing-shared/src/components/data-table/data-table.ts
index f0f3fc418..274fa1e28 100755
--- a/projects/aca-testing-shared/src/components/data-table/data-table.ts
+++ b/projects/aca-testing-shared/src/components/data-table/data-table.ts
@@ -92,6 +92,7 @@ export class DataTable extends Component {
     const sortColumn = await this.getSortedColumnHeaderText();
     let sortOrder = await this.getSortingOrder();
     if (sortColumn !== label) {
+      await browser.actions().mouseMove(this.getColumnHeaderByLabel(label)).perform();
       await this.getColumnHeaderByLabel(label).click();
       sortOrder = await this.getSortingOrder();
     }