From 96725f8f0ce5e80102ecc372a96fca73535b7237 Mon Sep 17 00:00:00 2001
From: Eric Schubert <e.schubert@openproject.com>
Date: Wed, 13 Apr 2022 17:06:41 +0200
Subject: [PATCH] [#41714] added url fragments to wp tabs navigation

---
 .../app/core/routing/openproject.routes.ts    | 22 +++++++++++++------
 .../components/wp-tabs/wp-tabs.component.ts   |  4 ++--
 .../scrollable-tabs.component.html            |  1 +
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/core/routing/openproject.routes.ts b/frontend/src/app/core/routing/openproject.routes.ts
index bc8d3608ce..5f0f571141 100644
--- a/frontend/src/app/core/routing/openproject.routes.ts
+++ b/frontend/src/app/core/routing/openproject.routes.ts
@@ -156,7 +156,7 @@ export const OPENPROJECT_ROUTES:Ng2StateDeclaration[] = [
  * @param className
  * @param action
  */
-export function bodyClass(className:string[]|string|null|undefined, action:'add'|'remove' = 'add') {
+export function bodyClass(className:string[]|string|null|undefined, action:'add'|'remove' = 'add'):void {
   if (className) {
     if (Array.isArray(className)) {
       className.forEach((cssClass:string) => {
@@ -168,7 +168,7 @@ export function bodyClass(className:string[]|string|null|undefined, action:'add'
   }
 }
 
-export function updateMenuItem(menuItemClass:string|undefined, action:'add'|'remove' = 'add') {
+export function updateMenuItem(menuItemClass:string|undefined, action:'add'|'remove' = 'add'):void {
   if (!menuItemClass) {
     return;
   }
@@ -191,7 +191,8 @@ export function updateMenuItem(menuItemClass:string|undefined, action:'add'|'rem
   menuItem.setAttribute('title', menuItemTitle);
 }
 
-export function uiRouterConfiguration(uiRouter:UIRouter, injector:Injector, module:StatesModule) {
+// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+export function uiRouterConfiguration(uiRouter:UIRouter, injector:Injector, module:StatesModule):void {
   // Allow optional trailing slashes
   uiRouter.urlService.config.strictMode(false);
 
@@ -205,7 +206,7 @@ export function uiRouterConfiguration(uiRouter:UIRouter, injector:Injector, modu
       raw: true,
       dynamic: true,
       is: (val:unknown) => typeof (val) === 'string',
-      equals: (a:any, b:any) => _.isEqual(a, b),
+      equals: (a, b) => _.isEqual(a, b),
     },
   );
 
@@ -223,7 +224,7 @@ export function uiRouterConfiguration(uiRouter:UIRouter, injector:Injector, modu
   );
 }
 
-export function initializeUiRouterListeners(injector:Injector) {
+export function initializeUiRouterListeners(injector:Injector):void {
   const $transitions:TransitionService = injector.get(TransitionService);
   const stateService = injector.get(StateService);
   const toastService:ToastService = injector.get(ToastService);
@@ -260,8 +261,15 @@ export function initializeUiRouterListeners(injector:Injector) {
       updateMenuItem(_.get(state, 'data.menuItem'), 'add');
     }
 
-    // Reset scroll position, mostly relevant for mobile
-    window.scrollTo(0, 0);
+    // Scroll to position, mostly relevant for mobile
+    const params = transition.params('to');
+    if (params['#']) {
+      // scroll to url fragment if available
+      document.getElementById(params['#'])?.scrollIntoView();
+    } else {
+      // scroll to top otherwise
+      window.scrollTo(0, 0);
+    }
   });
 
   $transitions.onExit({}, (transition:Transition, state:StateDeclaration) => {
diff --git a/frontend/src/app/features/work-packages/components/wp-tabs/components/wp-tabs/wp-tabs.component.ts b/frontend/src/app/features/work-packages/components/wp-tabs/components/wp-tabs/wp-tabs.component.ts
index cc3e50b49c..a83c09cee1 100644
--- a/frontend/src/app/features/work-packages/components/wp-tabs/components/wp-tabs/wp-tabs.component.ts
+++ b/frontend/src/app/features/work-packages/components/wp-tabs/components/wp-tabs/wp-tabs.component.ts
@@ -55,7 +55,7 @@ export class WpTabsComponent implements OnInit {
       .map((tab) => ({
         ...tab,
         route: `${this.uiSrefBase}.tabs`,
-        routeParams: { workPackageId: this.workPackage.id, tabIdentifier: tab.id },
+        routeParams: { workPackageId: this.workPackage.id, tabIdentifier: tab.id, '#': tab.id },
       }));
   }
 
@@ -64,7 +64,7 @@ export class WpTabsComponent implements OnInit {
   }
 
   public close():void {
-    this.$state.go(
+    void this.$state.go(
       this.uiRouterGlobals.current.data.baseRoute,
       this.uiRouterGlobals.params,
     );
diff --git a/frontend/src/app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component.html b/frontend/src/app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component.html
index 65710d0f15..9e404cf169 100644
--- a/frontend/src/app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component.html
+++ b/frontend/src/app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component.html
@@ -10,6 +10,7 @@
     >
       <li
         *ngFor="let tab of tabs; trackBy:trackById"
+        [id]="tab.id"
         class="op-tab-row--tab"
         (dragenter)="startDebouncedTabActivation(tab)"
         (dragleave)="cancelDebouncedTabActivation()"