Redraw the gantt chart after manual sort

frontend/src/app/components/wp-fast-table/handlers/state/drag-and-drop-transformer.ts

@@ -11,6 +11,7 @@ import {Observable, of} from "rxjs";
 import {WorkPackageNotificationService} from "core-components/wp-edit/wp-notification.service";
 import {RenderedRow} from "core-components/wp-fast-table/builders/primary-render-pass";
 import {WorkPackageTableSortByService} from "core-components/wp-fast-table/state/wp-table-sort-by.service";
+import {WorkPackageTableTimelineService} from "core-components/wp-fast-table/state/wp-table-timeline.service";
 
 export class DragAndDropTransformer {
 
@@ -21,6 +22,7 @@ export class DragAndDropTransformer {
   private readonly wpNotifications = this.injector.get(WorkPackageNotificationService);
   private readonly wpTableSortBy = this.injector.get(WorkPackageTableSortByService);
   private readonly pathHelper = this.injector.get(PathHelperService);
+  private readonly wpTableTimeline = this.injector.get(WorkPackageTableTimelineService);
 
   // We remember when we want to update the query with a given order
   private queryUpdates = new RequestSwitchmap(
@@ -47,7 +49,12 @@ export class DragAndDropTransformer {
     this.queryUpdates
       .observe(this.querySpace.stopAllSubscriptions.pipe(take(1)))
       .subscribe({
-        //next: () => this.table.redrawTableAndTimeline(),
+        next: () =>  {
+          if (this.wpTableTimeline.isVisible ) {
+            this.table.originalRows = this.currentRenderedOrder.map((e) => e.workPackageId!);
+            this.table.redrawTableAndTimeline();
+          }
+        },
         error: (error:any) => this.wpNotifications.handleRawError(error)
       });
 
@@ -121,7 +128,7 @@ export class DragAndDropTransformer {
           this.querySpace.rendered.putValue(mappedOrder);
 
           if (query.persisted) {
-            return this.reorderService.saveOrderInQuery(query, order);
+              return this.reorderService.saveOrderInQuery(query, order);
           } else {
             this.querySpace.query.doModify(query => {
                 query.orderedWorkPackages = order.map(id =>

spec/features/work_packages/sorting/manual_sorting_spec.rb

@@ -138,4 +138,22 @@ describe 'Manual sorting of WP table', type: :feature, js: true do
     wp_table.expect_work_package_order work_package_1, work_package_2, work_package_3, work_package_4
   end
 
+  context 'the gantt chart' do
+    let(:wp_timeline) { Pages::WorkPackagesTimeline.new(project) }
+    before do
+      wp_timeline
+    end
+
+    it 'reloads after drop' do
+      wp_timeline.toggle_timeline
+      wp_timeline.expect_timeline!
+      wp_timeline.expect_row_count(4)
+
+      wp_timeline.expect_work_package_order work_package_1, work_package_2, work_package_3, work_package_4
+
+      wp_table.drag_and_drop_work_package from: 1, to: 3
+      wp_table.expect_work_package_order work_package_1, work_package_3, work_package_2, work_package_4
+      wp_timeline.expect_work_package_order work_package_1, work_package_3, work_package_2, work_package_4
+    end
+  end
 end

spec/support/pages/work_packages/work_packages_timeline.rb

@@ -73,6 +73,16 @@ module Pages
       end
     end
 
+    def expect_work_package_order(*ids)
+      retry_block do
+        rows = page.all('.wp-table-timeline--body .wp--row')
+        expected = ids.map { |el| el.is_a?(WorkPackage) ? el.id.to_s : el.to_s }
+        found = rows.map { |el| el['data-work-package-id'] }
+
+        raise "Order is incorrect: #{found.inspect} != #{expected.inspect}" unless found == expected
+      end
+    end
+
     def expect_timeline!(open: true)
       if open
         expect(page).to have_selector('#work-packages-timeline-toggle-button.-active')