[64112] Create an angular breadcrumb as placeholder for the toggle button #19229

bsatarnejad · 2025-06-18T10:25:35Z

Ticket

https://community.openproject.org/wp/64112

What are you trying to accomplish?

Create a breadcrumbs component for angular pages.

Screenshots

What approach did you choose and why?

Create the component and add it to partition query space component, and pass the items to it from other components that are using its template like boards, calendars, ...

Merge checklist

Added/updated tests
Added/updated documentation in Lookbook (patterns, previews, etc)
Tested major browsers (Chrome, Firefox, Edge, ...)

frontend/src/app/shared/components/breadcrumbs/op-breadcrumbs.component.ts

…dcrumbs

HDinger

Looks good overall 👍 I have some code remarks and three styling related issues:

On some pages it looks like on mobile, there is too much space between the breadcrumb and the headline

compared to the rails page

The section headers of the sidebar are not reflected in the active breadcrumb element:

compared to rails:

The mobile BCF view is broken

HDinger · 2025-06-20T11:33:49Z

frontend/src/app/features/work-packages/routing/wp-view-page/wp-view-page.component.ts

+    if (this.isGantt) {
+      items[1] = {
+        href: this.pathHelperService.projectGanttChartsPath(this.currentProject.identifier as string),
+        text: this.I18n.t('js.work_packages.gantt_charts_label'),
+      };


This is very hacky. Please assign the value conditionally instead overwriting it based on the index in the array.

Suggested change

if (this.isGantt) {

items[1] = {

href: this.pathHelperService.projectGanttChartsPath(this.currentProject.identifier as string),

text: this.I18n.t('js.work_packages.gantt_charts_label'),

};

const items = [

{

href: this.pathHelperService.projectPath(this.currentProject.identifier as string),

text: this.currentProject.name,

},

this.breadcrumbModuleEntry();

this.selectedTitle ?? '',

];

...

breadcrumbModuleEntry():{href: string, text:string} {

if (this.isGantt) {

return ...

} else {

return ...

}

HDinger · 2025-06-20T11:35:35Z

frontend/src/app/shared/components/breadcrumbs/op-breadcrumbs.component.html

@@ -0,0 +1,40 @@
+<div class="op-breadcrumbs">
+  <!-- Desktop Version -->
+  <nav aria-label="breadcrumb" class="desktop">


The aria label needs to be internationalised

HDinger · 2025-06-20T11:38:54Z

frontend/src/app/shared/components/breadcrumbs/op-breadcrumbs.component.html

+    <ol class="breadcrumb">
+      <li
+        class="breadcrumb-item"


breadcrumb-item is the same class as the Primer breadcrumb component is using while breadcrumb seems to be new. I'd be very careful with re-using classes partially. At the top, you even have another namespace op-breadcrumbs. Please do not mix things here and keep it under one op-... namespace.

HDinger · 2025-06-20T11:39:52Z

frontend/src/app/shared/components/breadcrumbs/op-breadcrumbs.component.sass

+    .desktop
+      display: none
+    .mobile
+      display: block


We already have classes for this behavior hidden-for-mobile and hidden-for-desktop

HDinger · 2025-06-20T11:42:08Z

frontend/src/app/shared/components/breadcrumbs/op-breadcrumbs.component.ts

+  selector: 'op-breadcrumbs',
+  styleUrls: ['./op-breadcrumbs.component.sass'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,


Why did you remove the viewEncapsulation?

HDinger · 2025-06-20T11:51:59Z

modules/team_planner/config/locales/js-en.yml

@@ -3,6 +3,7 @@ en:
  js:
    team_planner:
      add_existing: 'Add existing'
+      team_planners_label: 'Team planners'


Suggested change

team_planners_label: 'Team planners'

label_team_planner_plural: 'Team planners'

HDinger · 2025-06-20T11:52:07Z

modules/team_planner/spec/features/team_planner_spec.rb

@@ -151,6 +151,9 @@

      team_planner.title

+      expect(team_planner).to have_test_selector("breadcrumb-item", text: "Team planners")
+      expect(team_planner).to have_css('.breadcrumb-item.active[aria-current="page"]', text: "Unnamed team planner")


HDinger · 2025-06-20T11:52:12Z

spec/features/work_packages/pagination_spec.rb

@@ -52,6 +52,9 @@
    it do
      expect(page).to have_content("All open")

+      expect(page).to have_test_selector("breadcrumb-item", text: "Work packages")
+      expect(page).to have_css('.breadcrumb-item.active[aria-current="page"]', text: "All open")


HDinger · 2025-06-20T11:54:47Z

frontend/src/app/shared/components/breadcrumbs/op-breadcrumbs.component.html

+        </ng-container>
+
+        <ng-container *ngIf="last">
+          <span>{{ isLink(item) ? item.text : item }}</span>


The last item should be bold.

Primer breadcrumb:

Angular:

HDinger · 2025-06-20T11:57:27Z

frontend/src/app/shared/components/breadcrumbs/op-breadcrumbs.component.html

+      >
+        <ng-container *ngIf="!last">
+          <ng-container *ngIf="isLink(item); else plainText">
+            <a [href]="item.href">{{ item.text }}</a>


In the rails variant we set target attributes on the link. Although, this is mostly relevant for Turbo, I'd like to set them here as well for consistency

github-advanced-security bot found potential problems Jun 18, 2025

View reviewed changes

frontend/src/app/shared/components/breadcrumbs/op-breadcrumbs.component.ts Fixed Show fixed Hide fixed

bsatarnejad added 9 commits June 20, 2025 09:26

create a breadcrumbs angular component

2141ef8

change the styles of breadcrumbs component so it look like other brea…

12d10f8

…dcrumbs

add breadcrumbs component to the partition query space component

82a0f49

add breadcrumbs to boards

513f5d8

add breadcrumbs to team planners and calendar

4ead6b8

add breadcrumbs to ifc viewer and wps and gantt pages

3cb72d1

add feature specs for modules that have breadcrumbs component

c354959

add mobile view for breadcrumbs component

349aef8

fix mobile styles in bcf module

738c3a4

bsatarnejad force-pushed the 64112-create-an-angular-breadcrumb-as-placeholder-for-the-toggle-button branch from 2f8bcfd to 738c3a4 Compare June 20, 2025 07:27

bsatarnejad self-assigned this Jun 20, 2025

bsatarnejad added the needs review label Jun 20, 2025

HDinger requested changes Jun 20, 2025

View reviewed changes

HDinger added feature and removed needs review labels Jun 20, 2025

HDinger added this to the 16.2.x milestone Jun 20, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[64112] Create an angular breadcrumb as placeholder for the toggle button #19229

[64112] Create an angular breadcrumb as placeholder for the toggle button #19229

bsatarnejad commented Jun 18, 2025

Uh oh!

Uh oh!

HDinger left a comment

Uh oh!

HDinger Jun 20, 2025

Uh oh!

HDinger Jun 20, 2025

Uh oh!

HDinger Jun 20, 2025

Uh oh!

HDinger Jun 20, 2025

Uh oh!

HDinger Jun 20, 2025

Uh oh!

HDinger Jun 20, 2025

Uh oh!

HDinger Jun 20, 2025

Uh oh!

HDinger Jun 20, 2025

Uh oh!

HDinger Jun 20, 2025

Uh oh!

HDinger Jun 20, 2025

Uh oh!

Uh oh!

-    if (this.isGantt) {
-      items[1] = {
-        href: this.pathHelperService.projectGanttChartsPath(this.currentProject.identifier as string),
-        text: this.I18n.t('js.work_packages.gantt_charts_label'),
-      };
+    const items = [
+      {
+        href: this.pathHelperService.projectPath(this.currentProject.identifier as string),
+        text: this.currentProject.name,
+      },
+      this.breadcrumbModuleEntry();
+      this.selectedTitle ?? '',
+    ];
+    ...
+    breadcrumbModuleEntry():{href: string, text:string} {
+      if (this.isGantt) {
+       return ...
+      } else {
+      return ...
+    }

	team_planners_label: 'Team planners'
	label_team_planner_plural: 'Team planners'

[64112] Create an angular breadcrumb as placeholder for the toggle button #19229

Are you sure you want to change the base?

[64112] Create an angular breadcrumb as placeholder for the toggle button #19229

Conversation

bsatarnejad commented Jun 18, 2025

Ticket

What are you trying to accomplish?

Screenshots

What approach did you choose and why?

Merge checklist

Uh oh!

Uh oh!

HDinger left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!