From 03794c1ad3a152a92451508fe34c589e6a38788e Mon Sep 17 00:00:00 2001
From: devaskim <dev.devaskim@gmail.com>
Date: Fri, 30 Sep 2022 21:00:29 +0500
Subject: [PATCH 1/4] Let user to drag-n-drop widget actions in list.

---
 .../home/components/home-components.module.ts |  5 ++-
 .../manage-widget-actions.component.html      | 12 +++++-
 .../action/manage-widget-actions.component.ts | 43 ++++++++++++++++++-
 .../assets/locale/locale.constant-en_US.json  |  1 +
 4 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts
index 7cfcf269de..c7ee635dae 100644
--- a/ui-ngx/src/app/modules/home/components/home-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts
@@ -173,6 +173,7 @@ import { RateLimitsDetailsDialogComponent } from '@home/components/profile/tenan
 import { AssetProfileComponent } from '@home/components/profile/asset-profile.component';
 import { AssetProfileDialogComponent } from '@home/components/profile/asset-profile-dialog.component';
 import { AssetProfileAutocompleteComponent } from '@home/components/profile/asset-profile-autocomplete.component';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
   declarations:
@@ -321,6 +322,7 @@ import { AssetProfileAutocompleteComponent } from '@home/components/profile/asse
   imports: [
     CommonModule,
     SharedModule,
+    DragDropModule,
     SharedHomeComponentsModule,
     WidgetSettingsModule,
     Lwm2mProfileComponentsModule,
@@ -453,7 +455,8 @@ import { AssetProfileAutocompleteComponent } from '@home/components/profile/asse
     RateLimitsListComponent,
     RateLimitsComponent,
     RateLimitsTextComponent,
-    RateLimitsDetailsDialogComponent
+    RateLimitsDetailsDialogComponent,
+    DragDropModule
   ],
   providers: [
     WidgetComponentService,
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
index c3c51a5d76..81ccd42da0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
@@ -60,7 +60,14 @@
     </mat-toolbar>
     <div fxFlex class="table-container">
       <table mat-table [dataSource]="dataSource"
-                 matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
+             matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear
+             cdkDropList [cdkDropListData]="dataSource" (cdkDropListDropped)="dropAction($event)">
+        <ng-container matColumnDef="actionSourceId">
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40px"> {{ 'widget-config.action-source-order' | translate }} </mat-header-cell>
+          <mat-cell *matCellDef="let action">
+            <mat-icon cdkDragHandle>reorder</mat-icon>
+          </mat-cell>
+        </ng-container>
         <ng-container matColumnDef="actionSourceName">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 20%"> {{ 'widget-config.action-source' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let action">
@@ -109,7 +116,8 @@
         </ng-container>
         <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
         <mat-row [ngClass]="{'mat-row-select': true}"
-                 *matRowDef="let action; columns: displayedColumns;"></mat-row>
+                 *matRowDef="let action; columns: displayedColumns;"
+                 cdkDrag [cdkDragData]="action"></mat-row>
       </table>
       <span [fxShow]="dataSource.isEmpty() | async"
             fxLayoutAlign="center center"
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
index b13343c75a..df9cdb4a04 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
@@ -54,6 +54,7 @@ import {
 import { deepClone } from '@core/utils';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
+import {CdkDragDrop, moveItemInArray, CdkDragHandle} from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'tb-manage-widget-actions',
@@ -106,7 +107,7 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
     const sortOrder: SortOrder = { property: 'actionSourceName', direction: Direction.ASC };
     this.pageLink = new PageLink(10, 0, null, sortOrder);
     this.dataSource = new WidgetActionsDatasource(this.translate, this.utils);
-    this.displayedColumns = ['actionSourceName', 'name', 'icon', 'typeName', 'actions'];
+    this.displayedColumns = ['actionSourceId', 'actionSourceName', 'name', 'icon', 'typeName', 'actions'];
   }
 
   ngOnInit(): void {
@@ -163,6 +164,46 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
     this.dataSource.loadActions(this.pageLink, reload);
   }
 
+  dropAction(event: CdkDragDrop<WidgetActionDescriptorInfo[]>) {
+    const droppedAction = event.item.data;
+    this.dataSource.getAllActions().subscribe(
+      (actions) => {
+        moveItemInArray(actions, event.previousIndex, event.currentIndex);
+
+        const isBackward = event.currentIndex > event.previousIndex;
+        let nearestNeighbourAction: WidgetActionDescriptorInfo = null;
+        for (let i: number = isBackward ? actions.length - 1 : 0;
+             isBackward ? i >= 0 : i < actions.length; isBackward ? --i : ++i) {
+          if (actions[i].id === droppedAction.id) {
+            break;
+          }
+          if (actions[i].actionSourceId === droppedAction.actionSourceId) {
+            nearestNeighbourAction = actions[i];
+          }
+        }
+
+        const targetActions = this.getOrCreateTargetActions(droppedAction.actionSourceId);
+        let oldIndex: number = -1;
+        let newIndex: number = nearestNeighbourAction ? -1 : (isBackward ? targetActions.length - 1 : 0);
+
+        for (let i: number = isBackward ? targetActions.length - 1 : 0;
+          isBackward ? i >= 0 : i < targetActions.length; isBackward ? --i : ++i) {
+          if (targetActions[i].id === droppedAction.id) {
+            oldIndex = i;
+          }
+          if (nearestNeighbourAction && targetActions[i].id === nearestNeighbourAction.id) {
+            newIndex = isBackward ? i - 1 : i + 1;
+          }
+          if (oldIndex !== -1 && newIndex !== -1) {
+            moveItemInArray(targetActions, oldIndex, newIndex);
+            this.onActionsUpdated();
+            return;
+          }
+        }
+      }
+    );
+  }
+
   addAction($event: Event) {
     this.openWidgetActionDialog($event);
   }
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 061f042e44..878ee53d3b 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3686,6 +3686,7 @@
         "add-action": "Add action",
         "search-actions": "Search actions",
         "no-actions-text": "No actions found",
+        "action-source-order": "Order",
         "action-source": "Action source",
         "action-source-required": "Action source is required.",
         "action-name": "Name",

From 8271b0534bc45c195ba72505f070bb548597cb44 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 2 Nov 2022 16:55:33 +0200
Subject: [PATCH 2/4] UI: Clear code and change style

---
 .../home/components/home-components.module.ts |  5 +--
 .../manage-widget-actions.component.html      | 35 +++++++++++++------
 .../manage-widget-actions.component.scss      | 13 +++++++
 .../action/manage-widget-actions.component.ts |  8 +++--
 .../assets/locale/locale.constant-en_US.json  |  1 -
 5 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts
index c7ee635dae..7cfcf269de 100644
--- a/ui-ngx/src/app/modules/home/components/home-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts
@@ -173,7 +173,6 @@ import { RateLimitsDetailsDialogComponent } from '@home/components/profile/tenan
 import { AssetProfileComponent } from '@home/components/profile/asset-profile.component';
 import { AssetProfileDialogComponent } from '@home/components/profile/asset-profile-dialog.component';
 import { AssetProfileAutocompleteComponent } from '@home/components/profile/asset-profile-autocomplete.component';
-import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
   declarations:
@@ -322,7 +321,6 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
   imports: [
     CommonModule,
     SharedModule,
-    DragDropModule,
     SharedHomeComponentsModule,
     WidgetSettingsModule,
     Lwm2mProfileComponentsModule,
@@ -455,8 +453,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
     RateLimitsListComponent,
     RateLimitsComponent,
     RateLimitsTextComponent,
-    RateLimitsDetailsDialogComponent,
-    DragDropModule
+    RateLimitsDetailsDialogComponent
   ],
   providers: [
     WidgetComponentService,
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
index 81ccd42da0..be94218f4a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
@@ -59,36 +59,49 @@
       </div>
     </mat-toolbar>
     <div fxFlex class="table-container">
-      <table mat-table [dataSource]="dataSource"
+      <table mat-table
+             [dataSource]="dataSource"
              matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear
-             cdkDropList [cdkDropListData]="dataSource" (cdkDropListDropped)="dropAction($event)">
+             cdkDropList cdkDropListOrientation="vertical"
+             [cdkDropListData]="dataSource"
+             (cdkDropListDropped)="dropAction($event)"
+             [cdkDropListDisabled]="dragDisabled"
+             class="tb-drop-list">
         <ng-container matColumnDef="actionSourceId">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40px"> {{ 'widget-config.action-source-order' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef style="width: 36px"></mat-header-cell>
           <mat-cell *matCellDef="let action">
-            <mat-icon cdkDragHandle>reorder</mat-icon>
+            <div cdkDragHandle
+                 class="tb-drag-handle"
+                 style="min-width: 36px"
+                 (mousedown)="dragDisabled = false"
+                 (mouseup)="dragDisabled = true"
+                 matTooltip="{{ 'action.drag' | translate }}"
+                 matTooltipPosition="above">
+              <mat-icon>drag_handle</mat-icon>
+            </div>
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actionSourceName">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 20%"> {{ 'widget-config.action-source' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let action">
+          <mat-cell *matCellDef="let action" style="width: 20%">
             {{ action.actionSourceName }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="name">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> {{ 'widget-config.action-name' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let action">
+          <mat-cell *matCellDef="let action" style="width: 30%">
             {{ action.name }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="icon">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40px"> {{ 'widget-config.action-icon' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let action">
+          <mat-header-cell *matHeaderCellDef style="width: 40px"> {{ 'widget-config.action-icon' | translate }} </mat-header-cell>
+          <mat-cell *matCellDef="let action" style="width: 40px">
             <mat-icon>{{ action.icon }}</mat-icon>
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="typeName">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 50%"> {{ 'widget-config.action-type' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let action">
+          <mat-cell *matCellDef="let action" style="width: 50%">
             {{ action.typeName }}
           </mat-cell>
         </ng-container>
@@ -114,8 +127,8 @@
             </div>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': true}"
+        <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+        <mat-row class="mat-row-select tb-draggable"
                  *matRowDef="let action; columns: displayedColumns;"
                  cdkDrag [cdkDragData]="action"></mat-row>
       </table>
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.scss b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.scss
index 0a4e22cea0..53c881df72 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.scss
@@ -41,4 +41,17 @@
   .mat-sort-header-sorted .mat-sort-header-arrow {
     opacity: 1 !important;
   }
+
+  .tb-draggable {
+    &.cdk-drag-placeholder {
+      opacity: 0;
+    }
+    &.cdk-drag-preview {
+      box-sizing: border-box;
+      border-radius: 4px;
+      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+      0 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    }
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
index df9cdb4a04..8c329df938 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
@@ -54,7 +54,7 @@ import {
 import { deepClone } from '@core/utils';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
-import {CdkDragDrop, moveItemInArray, CdkDragHandle} from '@angular/cdk/drag-drop';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'tb-manage-widget-actions',
@@ -86,6 +86,7 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
 
   viewsInited = false;
   dirtyValue = false;
+  dragDisabled = true;
 
   private widgetResize$: ResizeObserver;
 
@@ -164,7 +165,8 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
     this.dataSource.loadActions(this.pageLink, reload);
   }
 
-  dropAction(event: CdkDragDrop<WidgetActionDescriptorInfo[]>) {
+  dropAction(event: CdkDragDrop<WidgetActionsDatasource>) {
+    this.dragDisabled = true;
     const droppedAction = event.item.data;
     this.dataSource.getAllActions().subscribe(
       (actions) => {
@@ -183,7 +185,7 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
         }
 
         const targetActions = this.getOrCreateTargetActions(droppedAction.actionSourceId);
-        let oldIndex: number = -1;
+        let oldIndex = -1;
         let newIndex: number = nearestNeighbourAction ? -1 : (isBackward ? targetActions.length - 1 : 0);
 
         for (let i: number = isBackward ? targetActions.length - 1 : 0;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 878ee53d3b..061f042e44 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3686,7 +3686,6 @@
         "add-action": "Add action",
         "search-actions": "Search actions",
         "no-actions-text": "No actions found",
-        "action-source-order": "Order",
         "action-source": "Action source",
         "action-source-required": "Action source is required.",
         "action-name": "Name",

From 896f07218b0bdca2a32c3fff78305cd72b2c68b2 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 3 Nov 2022 12:36:17 +0200
Subject: [PATCH 3/4] UI: Improvement widget drag and drop actions function

---
 .../manage-widget-actions.component.html      |  4 +-
 .../action/manage-widget-actions.component.ts | 49 +++++--------------
 2 files changed, 13 insertions(+), 40 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
index be94218f4a..0941a20d00 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
@@ -88,7 +88,7 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="name">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> {{ 'widget-config.action-name' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'widget-config.action-name' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let action" style="width: 30%">
             {{ action.name }}
           </mat-cell>
@@ -100,7 +100,7 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="typeName">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 50%"> {{ 'widget-config.action-type' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef style="width: 50%"> {{ 'widget-config.action-type' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let action" style="width: 50%">
             {{ action.typeName }}
           </mat-cell>
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
index 8c329df938..5b746e95bc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
@@ -37,7 +37,7 @@ import { Direction, SortOrder } from '@shared/models/page/sort-order';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { fromEvent, merge } from 'rxjs';
-import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, first, tap } from 'rxjs/operators';
 import {
   toWidgetActionDescriptor,
   WidgetActionCallbacks,
@@ -167,43 +167,16 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
 
   dropAction(event: CdkDragDrop<WidgetActionsDatasource>) {
     this.dragDisabled = true;
-    const droppedAction = event.item.data;
-    this.dataSource.getAllActions().subscribe(
-      (actions) => {
-        moveItemInArray(actions, event.previousIndex, event.currentIndex);
-
-        const isBackward = event.currentIndex > event.previousIndex;
-        let nearestNeighbourAction: WidgetActionDescriptorInfo = null;
-        for (let i: number = isBackward ? actions.length - 1 : 0;
-             isBackward ? i >= 0 : i < actions.length; isBackward ? --i : ++i) {
-          if (actions[i].id === droppedAction.id) {
-            break;
-          }
-          if (actions[i].actionSourceId === droppedAction.actionSourceId) {
-            nearestNeighbourAction = actions[i];
-          }
-        }
-
-        const targetActions = this.getOrCreateTargetActions(droppedAction.actionSourceId);
-        let oldIndex = -1;
-        let newIndex: number = nearestNeighbourAction ? -1 : (isBackward ? targetActions.length - 1 : 0);
-
-        for (let i: number = isBackward ? targetActions.length - 1 : 0;
-          isBackward ? i >= 0 : i < targetActions.length; isBackward ? --i : ++i) {
-          if (targetActions[i].id === droppedAction.id) {
-            oldIndex = i;
-          }
-          if (nearestNeighbourAction && targetActions[i].id === nearestNeighbourAction.id) {
-            newIndex = isBackward ? i - 1 : i + 1;
-          }
-          if (oldIndex !== -1 && newIndex !== -1) {
-            moveItemInArray(targetActions, oldIndex, newIndex);
-            this.onActionsUpdated();
-            return;
-          }
-        }
-      }
-    );
+    const droppedAction: WidgetActionDescriptorInfo = event.item.data;
+    this.dataSource.pageData$.pipe(
+      first()
+    ).subscribe((actions) => {
+      const action = actions.data;
+      const startActionSourceIndex = action.findIndex(element => element.actionSourceId === droppedAction.actionSourceId);
+      const targetActions = this.getOrCreateTargetActions(droppedAction.actionSourceId);
+      moveItemInArray(targetActions, event.previousIndex - startActionSourceIndex, event.currentIndex - startActionSourceIndex);
+      this.onActionsUpdated();
+    });
   }
 
   addAction($event: Event) {

From 2f16c1a1fe67a518fb46ff987a910c3689d7fb4e Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 3 Nov 2022 14:06:10 +0200
Subject: [PATCH 4/4] UI: Fixed calculate action index in other page

---
 .../widget/action/manage-widget-actions.component.ts         | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
index 5b746e95bc..ad9b2d12f2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
@@ -172,8 +172,11 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
       first()
     ).subscribe((actions) => {
       const action = actions.data;
-      const startActionSourceIndex = action.findIndex(element => element.actionSourceId === droppedAction.actionSourceId);
+      let startActionSourceIndex = action.findIndex(element => element.actionSourceId === droppedAction.actionSourceId);
       const targetActions = this.getOrCreateTargetActions(droppedAction.actionSourceId);
+      if (startActionSourceIndex === 0) {
+        startActionSourceIndex -= targetActions.findIndex(element => element.id === action[0].id);
+      }
       moveItemInArray(targetActions, event.previousIndex - startActionSourceIndex, event.currentIndex - startActionSourceIndex);
       this.onActionsUpdated();
     });