Merge pull request #7079 from opf/refactor/wp-view-base

[29578] Refactor wp-set in common work-packges-view-base

[ci skip]

frontend/src/app/components/wp-table/embedded/wp-embedded-base.component.ts

@@ -11,8 +11,9 @@ import {QueryDmService} from 'core-app/modules/hal/dm-services/query-dm.service'
 import {UrlParamsHelperService} from 'core-components/wp-query/url-params-helper';
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 import {IsolatedQuerySpace} from "core-app/modules/work_packages/query-space/isolated-query-space";
+import {WorkPackagesViewBase} from "core-app/modules/work_packages/routing/wp-view-base/work-packages-view.base";
 
-export abstract class WorkPackageEmbeddedBaseComponent implements OnInit, AfterViewInit, OnDestroy {
+export abstract class WorkPackageEmbeddedBaseComponent extends WorkPackagesViewBase implements AfterViewInit {
   @Input('configuration') protected providedConfiguration:WorkPackageTableConfigurationObject;
   @Input() public uniqueEmbeddedTableName:string = `embedded-table-${Date.now()}`;
   @Input() public initialLoadingIndicator:boolean = true;
@@ -32,10 +33,9 @@ export abstract class WorkPackageEmbeddedBaseComponent implements OnInit, AfterV
   readonly wpStatesInitialization:WorkPackageStatesInitializationService = this.injector.get(WorkPackageStatesInitializationService);
   readonly currentProject:CurrentProjectService = this.injector.get(CurrentProjectService);
 
-  protected constructor(protected injector:Injector) {
-  }
-
   ngOnInit() {
+    super.ngOnInit();
+
     this.configuration = new WorkPackageTableConfiguration(this.providedConfiguration);
     // Set embedded status in configuration
     this.configuration.isEmbedded = true;
@@ -45,16 +45,10 @@ export abstract class WorkPackageEmbeddedBaseComponent implements OnInit, AfterV
   ngAfterViewInit():void {
     // Load initially
     this.refresh(this.initialLoadingIndicator);
-
-    // Reload results on refresh requests
-    this.querySpace.refreshRequired
-      .values$()
-      .pipe(untilComponentDestroyed(this))
-      .subscribe(() => this.refresh(false));
   }
 
   ngOnDestroy():void {
-    // noting to do
+    super.ngOnInit();
   }
 
   ngOnChanges(changes:SimpleChanges) {
@@ -86,8 +80,8 @@ export abstract class WorkPackageEmbeddedBaseComponent implements OnInit, AfterV
     this.renderTable = this.configuration.tableVisible;
   }
 
-  public refresh(visible:boolean = true):Promise<any> {
+  public refresh(visible:boolean = true, firstPage:boolean = false):Promise<any> {
-    return this.loadQuery(visible);
+    return this.loadQuery(visible, firstPage);
   }
 
   public get isInitialized() {
@@ -102,7 +96,7 @@ export abstract class WorkPackageEmbeddedBaseComponent implements OnInit, AfterV
     }
   }
 
-  protected abstract loadQuery(visible:boolean):Promise<any>;
+  protected abstract loadQuery(visible:boolean, firstPage:boolean):Promise<any>;
 
   protected get queryProjectScope() {
     if (!this.configuration.projectContext) {

frontend/src/app/components/wp-table/embedded/wp-embedded-table.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, EventEmitter, Injector, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {WorkPackageTableTimelineService} from 'core-components/wp-fast-table/state/wp-table-timeline.service';
 import {WorkPackageTablePaginationService} from 'core-components/wp-fast-table/state/wp-table-pagination.service';
 import {withLatestFrom} from 'rxjs/operators';
@@ -14,7 +14,6 @@ import {WorkPackageEmbeddedBaseComponent} from "core-components/wp-table/embedde
 import {WorkPackageTableFilters} from "core-components/wp-fast-table/wp-table-filters";
 import {QueryFormResource} from "core-app/modules/hal/resources/query-form-resource";
 import {QueryFormDmService} from "core-app/modules/hal/dm-services/query-form-dm.service";
-import {FormResource} from "core-app/modules/hal/resources/form-resource";
 
 @Component({
   selector: 'wp-embedded-table',
@@ -39,10 +38,6 @@ export class WorkPackageEmbeddedTableComponent extends WorkPackageEmbeddedBaseCo
   // Cache the form promise
   private formPromise:Promise<QueryFormResource>|undefined;
 
-  constructor(readonly injector:Injector) {
-    super(injector);
-  }
-
   ngAfterViewInit():void {
     super.ngAfterViewInit();
 
@@ -50,16 +45,6 @@ export class WorkPackageEmbeddedTableComponent extends WorkPackageEmbeddedBaseCo
     if (this.tableActions) {
       this.tableActionsService.setActions(...this.tableActions);
     }
-
-    // Reload results on changes to pagination
-    this.querySpace.ready.fireOnStateChange(this.wpTablePagination.state,
-      'Query loaded').values$().pipe(
-      untilComponentDestroyed(this),
-      withLatestFrom(this.querySpace.query.values$())
-    ).subscribe(([pagination, query]) => {
-      this.loadingIndicator = this.QueryDm.loadResults(query, this.wpTablePagination.paginationObject)
-        .then((results) => this.initializeStates(query, results));
-    });
   }
 
   public openConfigurationModal(onUpdated:() => void) {
@@ -113,7 +98,7 @@ export class WorkPackageEmbeddedTableComponent extends WorkPackageEmbeddedBaseCo
       .catch(() => this.formPromise = undefined);
   }
 
-  protected loadQuery(visible:boolean = true):Promise<QueryResource> {
+  protected loadQuery(visible:boolean = true, firstPage:boolean = false):Promise<QueryResource> {
     if (this.loadedQuery) {
       const query = this.loadedQuery;
       this.loadedQuery = undefined;
@@ -131,6 +116,11 @@ export class WorkPackageEmbeddedTableComponent extends WorkPackageEmbeddedBaseCo
       this.queryProps.pageSize = this.configuration.forcePerPageOption;
     }
 
+    // Set first page
+    if (firstPage) {
+      this.queryProps.page = 1;
+    }
+
     this.error = null;
     const promise = this.QueryDm
       .find(

frontend/src/app/modules/calendar/wp-calendar-entry/wp-calendar-entry.component.html

@@ -1,4 +1,5 @@
-<div class="work-packages-list-view--container">
+<div class="work-packages-list-view--container loading-indicator--location"
+     data-indicator-name="calendar-entry">
     <div class="toolbar-container -editable">
         <div class="toolbar">
             <div class="title-container">
@@ -7,8 +8,7 @@
                 </h2>
             </div>
 
-            <ul class="toolbar-items hide-when-print"
+            <ul class="toolbar-items hide-when-print">
-                *ngIf="tableInformationLoaded">
                 <li class="toolbar-item hidden-for-mobile">
                     <wp-filter-button>
                     </wp-filter-button>

frontend/src/app/modules/calendar/wp-calendar-entry/wp-calendar-entry.component.ts

@@ -26,16 +26,26 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
-import {WorkPackagesSetComponent} from "core-app/modules/work_packages/routing/wp-set/wp-set.component";
+import {WorkPackagesViewBase} from "core-app/modules/work_packages/routing/wp-view-base/work-packages-view.base";
+import {WorkPackagesCalendarController} from "core-app/modules/calendar/wp-calendar/wp-calendar.component";
 
 @Component({
   templateUrl: './wp-calendar-entry.component.html'
 })
 
-export class WorkPackagesCalendarEntryComponent extends WorkPackagesSetComponent {
+export class WorkPackagesCalendarEntryComponent extends WorkPackagesViewBase {
-  // overrides super
+  @ViewChild(WorkPackagesCalendarController) calendarElement:WorkPackagesCalendarController;
-  protected initialQueryLoading() {
+
-    // nothing
+  /** Project identifier of the list */
+  projectIdentifier = this.$state.params['projectPath'] || null;
+
+  protected set loadingIndicator(promise:Promise<unknown>) {
+    this.loadingIndicatorService.indicator('calendar-entry').promise = promise;
+  }
+
+  public refresh(visibly:boolean, firstPage:boolean):Promise<unknown> {
+    return this.loadingIndicator =
+      this.wpListService.loadCurrentQueryFromParams(this.projectIdentifier);
   }
 }

frontend/src/app/modules/grids/widgets/wp-widget/wp-widget.component.ts

@@ -15,7 +15,7 @@ export class WidgetWpListComponent extends AbstractWidgetComponent implements On
   public configuration:Partial<WorkPackageTableConfiguration> = {
     actionsColumnEnabled: false,
     columnMenuEnabled: false,
-    hierarchyToggleEnabled: false,
+    hierarchyToggleEnabled: true,
     contextMenuEnabled: false
   };
 

frontend/src/app/modules/work_packages/routing/wp-full-view/wp-full-view.component.ts

@@ -28,7 +28,6 @@
 
 import {UserResource} from 'core-app/modules/hal/resources/user-resource';
 import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';
-import {WorkPackageViewController} from '../wp-view-base/wp-view-base.controller';
 import {WorkPackageTableFocusService} from 'core-components/wp-fast-table/state/wp-table-focus.service';
 import {StateService} from '@uirouter/core';
 import {TypeResource} from 'core-app/modules/hal/resources/type-resource';
@@ -37,6 +36,7 @@ import {WorkPackageTableSelection} from 'core-components/wp-fast-table/state/wp-
 import {States} from 'core-components/states.service';
 import {KeepTabService} from 'core-components/wp-single-view-tabs/keep-tab/keep-tab.service';
 import {FirstRouteService} from "core-app/modules/router/first-route-service";
+import {WorkPackageSingleViewBase} from "core-app/modules/work_packages/routing/wp-view-base/work-package-single-view.base";
 
 @Component({
   templateUrl: './wp-full-view.html',
@@ -44,7 +44,7 @@ import {FirstRouteService} from "core-app/modules/router/first-route-service";
   // Required class to support inner scrolling on page
   host: { 'class': 'work-packages-page--ui-view' }
 })
-export class WorkPackagesFullViewComponent extends WorkPackageViewController {
+export class WorkPackagesFullViewComponent extends WorkPackageSingleViewBase {
 
   // Watcher properties
   public isWatched:boolean;

frontend/src/app/modules/work_packages/routing/wp-list/wp-list.component.ts

@@ -30,13 +30,14 @@ import {Component, OnDestroy} from "@angular/core";
 import {untilComponentDestroyed} from 'ng2-rx-componentdestroyed';
 import {QueryResource} from 'core-app/modules/hal/resources/query-resource';
 import {OpTitleService} from "core-components/html/op-title.service";
-import {WorkPackagesSetComponent} from "core-app/modules/work_packages/routing/wp-set/wp-set.component";
+import {WorkPackagesViewBase} from "core-app/modules/work_packages/routing/wp-view-base/work-packages-view.base";
+import {take} from "rxjs/operators";
 
 @Component({
   selector: 'wp-list',
   templateUrl: './wp.list.component.html'
 })
-export class WorkPackagesListComponent extends WorkPackagesSetComponent implements OnDestroy {
+export class WorkPackagesListComponent extends WorkPackagesViewBase implements OnDestroy {
   text = {
     'jump_to_pagination': this.I18n.t('js.work_packages.jump_marks.pagination'),
     'text_jump_to_pagination': this.I18n.t('js.work_packages.jump_marks.label_pagination'),
@@ -52,13 +53,32 @@ export class WorkPackagesListComponent extends WorkPackagesSetComponent implemen
 
   /** Whether we're saving the query */
   querySaving:boolean;
+
+  /** Listener callbacks */
   unRegisterTitleListener:Function;
+  removeTransitionSubscription:Function;
+
+  /** Determine when query is initially loaded */
+  tableInformationLoaded = false;
+
+  /** Project identifier of the list */
+  projectIdentifier = this.$state.params['projectPath'] || null;
 
   private readonly titleService:OpTitleService = this.injector.get(OpTitleService);
 
   ngOnInit() {
     super.ngOnInit();
 
+    // Load query initially
+    this.wpTableRefresh.clear('Impending query loading.');
+    this.loadCurrentQuery();
+
+    // Load query on URL transitions
+    this.updateQueryOnParamsChanges();
+
+    // Mark tableInformationLoaded when initially loading done
+    this.setupInformationLoadedListener();
+
     // Update title on entering this state
     this.unRegisterTitleListener = this.$transitions.onSuccess({to: 'work-packages.list'}, () => {
       if (this.selectedTitle) {
@@ -78,6 +98,7 @@ export class WorkPackagesListComponent extends WorkPackagesSetComponent implemen
   ngOnDestroy():void {
     super.ngOnDestroy();
     this.unRegisterTitleListener();
+    this.removeTransitionSubscription();
   }
 
   public setAnchorToNextElement() {
@@ -119,10 +140,60 @@ export class WorkPackagesListComponent extends WorkPackagesSetComponent implemen
     }
   }
 
-  protected loadCurrentQuery() {
+  public refresh(visibly:boolean = false, firstPage:boolean = false):Promise<unknown> {
-    return super.loadCurrentQuery()
+    let promise:Promise<unknown>;
-                .then(() => {
+
-                  return this.querySpace.rendered.valuesPromise();
+    if (firstPage) {
-                });
+      promise = this.wpListService.loadCurrentResultsListFirstPage();
+    } else {
+      promise = this.wpListService.reloadCurrentResultsList();
+    }
+
+    if (visibly) {
+      this.loadingIndicator = promise;
+    }
+
+    return promise;
+  }
+
+  protected updateQueryOnParamsChanges() {
+    // Listen for param changes
+    this.removeTransitionSubscription = this.$transitions.onSuccess({}, (transition):any => {
+      let options = transition.options();
+
+      // Avoid performing any changes when we're going to reload
+      if (options.reload || (options.custom && options.custom.notify === false)) {
+        return true;
+      }
+
+      const params = transition.params('to');
+      let newChecksum = this.wpListService.getCurrentQueryProps(params);
+      let newId = params.query_id && parseInt(params.query_id);
+
+      this.wpListChecksumService
+        .executeIfOutdated(newId,
+          newChecksum,
+          () => this.loadCurrentQuery());
+    });
+  }
+
+  protected setupInformationLoadedListener() {
+    this.querySpace.tableRendering.onQueryUpdated
+      .values$()
+      .pipe(
+        take(1)
+      )
+      .subscribe(() => this.tableInformationLoaded = true);
+  }
+
+  protected set loadingIndicator(promise:Promise<unknown>) {
+    this.loadingIndicatorService.table.promise = promise;
+  }
+
+  protected loadCurrentQuery():Promise<unknown> {
+    return this.loadingIndicator =
+      this.wpListService
+        .loadCurrentQueryFromParams(this.projectIdentifier)
+        .then(() => this.querySpace.rendered.valuesPromise());
   }
 }

frontend/src/app/modules/work_packages/routing/wp-split-view/wp-split-view.component.ts

@@ -31,17 +31,17 @@ import {StateService} from '@uirouter/core';
 import {WorkPackageTableFocusService} from 'core-components/wp-fast-table/state/wp-table-focus.service';
 import {componentDestroyed} from 'ng2-rx-componentdestroyed';
 import {takeUntil} from 'rxjs/operators';
-import {WorkPackageViewController} from '../wp-view-base/wp-view-base.controller';
 import {States} from "core-components/states.service";
 import {FirstRouteService} from "core-app/modules/router/first-route-service";
 import {KeepTabService} from "core-components/wp-single-view-tabs/keep-tab/keep-tab.service";
 import {WorkPackageTableSelection} from "core-components/wp-fast-table/state/wp-table-selection.service";
+import {WorkPackageSingleViewBase} from "core-app/modules/work_packages/routing/wp-view-base/work-package-single-view.base";
 
 @Component({
   templateUrl: './wp-split-view.html',
   selector: 'wp-split-view-entry',
 })
-export class WorkPackageSplitViewComponent extends WorkPackageViewController {
+export class WorkPackageSplitViewComponent extends WorkPackageSingleViewBase {
 
   constructor(public injector:Injector,
               public states:States,

frontend/src/app/modules/work_packages/routing/wp-view-base/work-package-single-view.base.ts

@@ -45,7 +45,7 @@ import {
   IWorkPackageEditingServiceToken
 } from "core-components/wp-edit-form/work-package-editing.service.interface";
 
-export class WorkPackageViewController implements OnDestroy {
+export class WorkPackageSingleViewBase implements OnDestroy {
 
   public wpCacheService:WorkPackageCacheService = this.injector.get(WorkPackageCacheService);
   public states:States = this.injector.get(States);

frontend/src/app/modules/work_packages/routing/wp-view-base/work-packages-view.base.ts

@@ -53,65 +53,45 @@ import {WorkPackageQueryStateService} from "core-components/wp-fast-table/state/
 import {debugLog} from "core-app/helpers/debug_output";
 import {WorkPackageFiltersService} from "core-components/filters/wp-filters/wp-filters.service";
 
-export class WorkPackagesSetComponent implements OnInit, OnDestroy {
+export abstract class WorkPackagesViewBase implements OnInit, OnDestroy {
-
+
-  projectIdentifier = this.$state.params['projectPath'] || null;
+  readonly $state:StateService = this.injector.get(StateService);
-
+  readonly states:States = this.injector.get(States);
-  tableInformationLoaded = false;
+  readonly querySpace:IsolatedQuerySpace = this.injector.get(IsolatedQuerySpace);
-
+  readonly authorisationService:AuthorisationService = this.injector.get(AuthorisationService);
-  private removeTransitionSubscription:Function;
+  readonly wpTableRefresh:WorkPackageTableRefreshService = this.injector.get(WorkPackageTableRefreshService);
-
+  readonly wpTableColumns:WorkPackageTableColumnsService = this.injector.get(WorkPackageTableColumnsService);
-  constructor(readonly injector:Injector,
+  readonly wpTableHighlighting:WorkPackageTableHighlightingService = this.injector.get(WorkPackageTableHighlightingService);
-              readonly states:States,
+  readonly wpTableSortBy:WorkPackageTableSortByService = this.injector.get(WorkPackageTableSortByService);
-              readonly querySpace:IsolatedQuerySpace,
+  readonly wpTableGroupBy:WorkPackageTableGroupByService = this.injector.get(WorkPackageTableGroupByService);
-              readonly authorisationService:AuthorisationService,
+  readonly wpTableFilters:WorkPackageTableFiltersService = this.injector.get(WorkPackageTableFiltersService);
-              readonly wpTableRefresh:WorkPackageTableRefreshService,
+  readonly wpTableSum:WorkPackageTableSumService = this.injector.get(WorkPackageTableSumService);
-              readonly wpTableColumns:WorkPackageTableColumnsService,
+  readonly wpTableTimeline:WorkPackageTableTimelineService = this.injector.get(WorkPackageTableTimelineService);
-              readonly wpTableHighlighting:WorkPackageTableHighlightingService,
+  readonly wpTableHierarchies:WorkPackageTableHierarchiesService = this.injector.get(WorkPackageTableHierarchiesService);
-              readonly wpTableSortBy:WorkPackageTableSortByService,
+  readonly wpTablePagination:WorkPackageTablePaginationService = this.injector.get(WorkPackageTablePaginationService);
-              readonly wpTableGroupBy:WorkPackageTableGroupByService,
+  readonly wpListService:WorkPackagesListService = this.injector.get(WorkPackagesListService);
-              readonly wpTableFilters:WorkPackageTableFiltersService,
+  readonly wpListChecksumService:WorkPackagesListChecksumService = this.injector.get(WorkPackagesListChecksumService);
-              readonly wpTableSum:WorkPackageTableSumService,
+  readonly loadingIndicatorService:LoadingIndicatorService = this.injector.get(LoadingIndicatorService);
-              readonly wpTableTimeline:WorkPackageTableTimelineService,
+  readonly $transitions:TransitionService = this.injector.get(TransitionService);
-              readonly wpTableHierarchies:WorkPackageTableHierarchiesService,
+  readonly I18n:I18nService = this.injector.get(I18nService);
-              readonly wpTablePagination:WorkPackageTablePaginationService,
+  readonly wpStaticQueries:WorkPackageStaticQueriesService = this.injector.get(WorkPackageStaticQueriesService);
-              readonly wpListService:WorkPackagesListService,
+
-              readonly wpFilters:WorkPackageFiltersService,
+  constructor(protected injector:Injector) {
-              readonly wpListChecksumService:WorkPackagesListChecksumService,
-              readonly loadingIndicator:LoadingIndicatorService,
-              readonly $transitions:TransitionService,
-              readonly $state:StateService,
-              readonly I18n:I18nService,
-              readonly wpStaticQueries:WorkPackageStaticQueriesService) {
-
   }
 
   ngOnInit() {
     // Listen to changes on the query state objects
     this.setupQueryObservers();
 
-    this.initialQueryLoading();
-
     // Listen for refresh changes
     this.setupRefreshObserver();
-
-    this.updateQueryOnParamsChanges();
   }
 
   ngOnDestroy():void {
-    if (this.removeTransitionSubscription) {
-      this.removeTransitionSubscription();
-    }
     this.wpTableRefresh.clear('Table controller scope destroyed.');
   }
 
   private setupQueryObservers() {
-    this.querySpace.tableRendering.onQueryUpdated.values$()
-      .pipe(
-        take(1)
-      )
-      .subscribe(() => this.tableInformationLoaded = true);
-
     this.querySpace.ready.fireOnStateChange(this.wpTablePagination.state,
       'Query loaded').values$().pipe(
       untilComponentDestroyed(this),
@@ -119,7 +99,7 @@ export class WorkPackagesSetComponent implements OnInit, OnDestroy {
     ).subscribe(([pagination, query]) => {
       if (this.wpListChecksumService.isQueryOutdated(query, pagination)) {
         this.wpListChecksumService.update(query, pagination);
-        this.updateResultsVisibly();
+        this.refresh(true, false);
       }
     });
 
@@ -133,13 +113,23 @@ export class WorkPackagesSetComponent implements OnInit, OnDestroy {
     this.setupChangeObserver(this.wpTableHighlighting);
   }
 
-  setupChangeObserver(service:WorkPackageQueryStateService, firstPage:boolean = false) {
+  /**
+   * Listen to changes in the given service and reload the query / results if
+   * the service requests that.
+   *
+   * @param service Work package query state service to listento
+   * @param firstPage If the service requests a change, load the first page
+   */
+  protected setupChangeObserver(service:WorkPackageQueryStateService, firstPage:boolean = false) {
     const queryState = this.querySpace.query;
 
-    this.querySpace.ready.fireOnStateChange(service.state, 'Query loaded').values$().pipe(
+    this.querySpace.ready
-      untilComponentDestroyed(this),
+      .fireOnStateChange(service.state, 'Query loaded')
-      filter(() => queryState.hasValue() && service.hasChanged(queryState.value!))
+      .values$()
-    ).subscribe(() => {
+      .pipe(
+        untilComponentDestroyed(this),
+        filter(() => queryState.hasValue() && service.hasChanged(queryState.value!))
+      ).subscribe(() => {
       const newQuery = queryState.value!;
       const triggerUpdate = service.applyToQuery(newQuery);
       this.querySpace.query.putValue(newQuery);
@@ -158,68 +148,30 @@ export class WorkPackagesSetComponent implements OnInit, OnDestroy {
    * Setup the listener for members of the table to request a refresh of the entire table
    * through the refresh service.
    */
-  setupRefreshObserver() {
+  protected setupRefreshObserver() {
-    this.wpTableRefresh.state.values$('Refresh listener in wp-list.controller').pipe(
+    this.wpTableRefresh.state.values$('Refresh listener in wp-set.component').pipe(
       untilComponentDestroyed(this),
       auditTime(20)
     ).subscribe(([refreshVisibly, firstPage]) => {
-      if (refreshVisibly) {
+      debugLog('Refreshing work package results.');
-        debugLog('Refreshing work package results visibly.');
+      this.refresh(refreshVisibly, firstPage);
-        this.updateResultsVisibly(firstPage);
-      } else {
-        debugLog('Refreshing work package results in the background.');
-        this.updateResults();
-      }
     });
   }
 
-  updateResults():Promise<WorkPackageCollectionResource> {
-    return this.wpListService.reloadCurrentResultsList();
-  }
-
-  updateResultsVisibly(firstPage:boolean = false) {
-    if (firstPage) {
-      this.loadingIndicator.table.promise = this.updateToFirstResultsPage();
-    } else {
-      this.loadingIndicator.table.promise = this.updateResults();
-    }
-  }
-
-  updateToFirstResultsPage():Promise<WorkPackageCollectionResource> {
-    return this.wpListService.loadCurrentResultsListFirstPage();
-  }
 
-  private updateQueryOnParamsChanges() {
+  /**
-    // Listen for param changes
+   * Refresh the set of results,
-    this.removeTransitionSubscription = this.$transitions.onSuccess({}, (transition):any => {
+   * showing the loading indicator if visibly is set.
-      let options = transition.options();
+   *
-
+   * @param visibly Set true when desiring the loading indicator
-      // Avoid performing any changes when we're going to reload
+   * @param firstPage Reload the page to first page.
-      if (options.reload || (options.custom && options.custom.notify === false)) {
+   */
-        return true;
+  public abstract refresh(visibly:boolean, firstPage:boolean):Promise<unknown>;
-      }
-
-      const params = transition.params('to');
-      let newChecksum = this.wpListService.getCurrentQueryProps(params);
-      let newId = params.query_id && parseInt(params.query_id);
-
-      this.wpListChecksumService
-        .executeIfOutdated(newId,
-          newChecksum,
-          () => this.loadCurrentQuery());
-    });
-  }
-
-  protected initialQueryLoading() {
-    this.wpTableRefresh.clear('Impending query loading.');
-    this.loadCurrentQuery();
-  }
-
-  protected loadCurrentQuery():Promise<any> {
-    let loadingPromise = this.wpListService.loadCurrentQueryFromParams(this.projectIdentifier);
 
-    this.loadingIndicator.table.promise = loadingPromise;
 
-    return loadingPromise;
+  /**
-  }
+   * Set the loading indicator for this set instance
+   * @param promise
+   */
+  protected abstract set loadingIndicator(promise:Promise<unknown>);
 }

modules/grids/spec/features/my/my_page_assigned_to_me_spec.rb

@@ -36,6 +36,7 @@ describe 'Assigned to me embedded query on my page', type: :feature, js: true do
   let!(:assigned_work_package) do
     FactoryBot.create :work_package,
                       project: project,
+                      subject: 'Assigned to me',
                       type: type,
                       author: user,
                       assigned_to: user
@@ -43,6 +44,7 @@ describe 'Assigned to me embedded query on my page', type: :feature, js: true do
   let!(:assigned_to_other_work_package) do
     FactoryBot.create :work_package,
                       project: project,
+                      subject: 'Not assigend to me',
                       type: type,
                       author: user,
                       assigned_to: other_user
@@ -61,16 +63,61 @@ describe 'Assigned to me embedded query on my page', type: :feature, js: true do
   let(:my_page) do
     Pages::My::Page.new
   end
+  let(:assigned_area) { Components::Grids::GridArea.new('.grid--area', text: 'Work packages assigned to me') }
+  let(:embedded_table) { Pages::EmbeddedWorkPackagesTable.new(assigned_area.area) }
+  let(:hierarchies) { ::Components::WorkPackages::Hierarchies.new }
 
   before do
     login_as user
+  end
 
-    my_page.visit!
+  context 'with parent work package' do
+    let!(:assigned_work_package_child) do
+      FactoryBot.create :work_package,
+                        subject: 'Child',
+                        parent: assigned_work_package,
+                        project: project,
+                        type: type,
+                        author: user,
+                        assigned_to: user
+    end
+
+    it 'can toggle hierarchy mode in embedded tables (Regression test #29578)' do
+      my_page.visit!
+
+      # exists as default
+      assigned_area.expect_to_exist
+
+      page.within(assigned_area.area) do
+        # expect hierarchy in child
+        hierarchies.expect_mode_enabled
+
+        hierarchies.expect_hierarchy_at assigned_work_package
+        hierarchies.expect_leaf_at assigned_work_package_child
+
+        # toggle parent
+        hierarchies.toggle_row assigned_work_package
+        hierarchies.expect_hierarchy_at assigned_work_package, collapsed: true
+
+        # disable
+        hierarchies.disable_via_header
+        hierarchies.expect_no_hierarchies
+
+        # re-enable
+        hierarchies.enable_via_header
+
+        hierarchies.expect_mode_enabled
+        # Re-enabling resets collapsed state for now
+        hierarchies.expect_hierarchy_at assigned_work_package, collapsed: false
+        hierarchies.expect_leaf_at assigned_work_package_child
+      end
+    end
   end
 
   it 'can create a new ticket with correct me values (Regression test #28488)' do
+    my_page.visit!
+
     # exists as default
-    assigned_area = Components::Grids::GridArea.new('.grid--area', text: 'Work packages assigned to me')
     assigned_area.expect_to_exist
 
     expect(assigned_area.area)
@@ -79,7 +126,6 @@ describe 'Assigned to me embedded query on my page', type: :feature, js: true do
     expect(assigned_area.area)
       .to have_no_selector('.subject', text: assigned_to_other_work_package.subject)
 
-    embedded_table = Pages::EmbeddedWorkPackagesTable.new(assigned_area.area)
     embedded_table.click_inline_create
 
     subject_field = embedded_table.edit_field(nil, :subject)

spec/support/components/work_packages/hierarchies.rb

@@ -44,6 +44,10 @@ module Components
         page.find('.wp-table--table-header .icon-no-hierarchy').click
       end
 
+      def disable_via_header
+        page.find('.wp-table--table-header .icon-hierarchy').click
+      end
+
       def disable_hierarchy
         ::Components::WorkPackages::TableConfigurationModal.do_and_save do |modal|
           modal.open_and_set_display_mode :default