[69640] Workpackage hierarchy breadcrumbs not clickable starting with grand parents

frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb-parent.component.ts

@@ -109,8 +109,7 @@
     }
   }
 
-  public switchToFullscreenForWp(wp:WorkPackageResource):void {
-    const link = this.pathHelper.genericWorkPackagePath(wp.project?.identifier, wp.id!) + window.location.search;
-    Turbo.visit(link, { action: 'advance' });
+  public parentLink(parent:WorkPackageResource):string {
+    return this.pathHelper.genericWorkPackagePath(parent.project?.identifier, parent.id!) + window.location.search;
   }
 }

frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb-parent.html

@@ -2,10 +2,11 @@
   @if (parent) {
     <a
       [attr.title]="parent.name"
-      (click)="switchToFullscreenForWp(parent)"
-      class="op-wp-breadcrumb-parent nocut"
-      data-test-selector="op-wp-breadcrumb-parent">
-      <span [textContent]="parent.name"></span>
+      [href]="parentLink(parent)"
+      class="op-wp-breadcrumb-parent"
+      data-test-selector="op-wp-breadcrumb-parent"
+      data-turbo="false"
+      [textContent]="parent.name">
     </a>
   }
   @if (canModifyParent()) {

frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.component.ts

@@ -29,6 +29,7 @@
 import { Component, Input } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
+import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 
 @Component({
   templateUrl: './wp-breadcrumb.html',
@@ -44,8 +45,10 @@
     hierarchy: this.I18n.t('js.relations_hierarchy.hierarchy_headline'),
   };
 
-  constructor(private I18n:I18nService) {
-  }
+  constructor(
+    private I18n:I18nService,
+    private pathHelper:PathHelperService,
+  ) {}
 
   public inputActive = false;
 
@@ -57,6 +60,10 @@
     return (this.hierarchyCount === 1) ? this.text.parent : this.text.hierarchy;
   }
 
+  public ancestorPath(ancestor:WorkPackageResource):string {
+    return this.pathHelper.genericWorkPackagePath(this.workPackage.project?.identifier, ancestor.id!) + window.location.search;
+  }
+
   public updateActiveInput(val:boolean) {
     this.inputActive = val;
   }

frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.html

@@ -14,10 +14,10 @@
               class="op-wp-breadcrumb--ellipsed"
               [ngClass]="{ 'icon4 icon-small icon-arrow-right5': !first }">
               <a [attr.title]="ancestor.name"
-                [textContent]="ancestor.name"
-                uiSref="work-packages.show"
-                [uiParams]="{workPackageId: ancestor.id}"
-              class="nocut"></a>
+                 [textContent]="ancestor.name"
+                 data-test-selector="op-wp-breadcrumb--hierarchy-element"
+                 [href]="ancestorPath(ancestor)"
+                 data-turbo="false"></a>
             </li>
           }
         }

spec/features/work_package_show_spec.rb

@@ -33,9 +33,19 @@
 RSpec.describe "Work package show page", :selenium do
   let(:user) { create(:admin) }
   let(:project) { create(:project) }
+  let(:grand_parent) do
+    build(:work_package,
+          project:)
+  end
+  let(:parent) do
+    build(:work_package,
+          project:,
+          parent: grand_parent)
+  end
   let(:work_package) do
     build(:work_package,
           project:,
+          parent:,
           assigned_to: user,
           responsible: user)
   end
@@ -56,4 +66,24 @@
                               assignee: work_package.assigned_to.name,
                               responsible: work_package.responsible.name
   end
+
+  it "navigates the breadcrumb (#69640)", :js do
+    wp_page = Pages::FullWorkPackage.new(work_package)
+
+    wp_page.visit!
+
+    # Navigate to parent element
+    page.find_test_selector("op-wp-breadcrumb-parent", text: parent.subject).click
+    expect(page).to have_test_selector "op-wp-breadcrumb-parent", text: grand_parent.subject, wait: 10
+
+    expect(page).to have_current_path project_work_packages_path(project) + "/#{parent.id}/activity"
+
+    # Go back
+    page.go_back
+    expect(page).to have_test_selector "op-wp-breadcrumb-parent", text: parent.subject, wait: 10
+
+    # Navigate to Grandparent
+    page.find_test_selector("op-wp-breadcrumb--hierarchy-element", text: grand_parent.subject).click
+    expect(page).to have_current_path project_work_packages_path(project) + "/#{grand_parent.id}/activity", wait: 10
+  end
 end