feat[#50499]: Add navigational elements (breadcrumb and back buttons)

[dominic-braeunlein]

Work package: https://community.openproject.org/wp/50499

This PR adds 'OpPrimer::BackButtonComponent' in app/components/op_primer
This button inherits from Primer::Beta::IconButton and needs only the href as parameter.

This PR also adds this BackButton and breadcrumbs in storage edit view.
The breadcrumbs are outside of the header because Primer::OpenProject::PageHeader doesn't have a slot for breadcumbs.

There is a left-margin problem that I need to clarify with @HDinger (see picture below). Or maybe @akabiru you know too where the margin-left: 2rem; for <ol> tags should be overridden.

I will clarify this before merging

[HDinger]

Hi @dominic-braeunlein

we have a file called primer-adjustements.sass where you can add the override for the ol tag inside the Breadcrumb. We already do something similar with lists inside the Box component.

With regards to the Breadcrumb and the BackButton being outside of the PageHeader: I am curious whether you discussed the option to add these elements directly to the PageHeader component itself, instead of writing them next to it? At first glance it would be worth the effort, as this is not the only page that will need this, and the custom backButton would then be obsolete as well. @akabiru how do you think about it?

[akabiru]

Great start @dominic-braeunlein 🙌🏾 A few remarks on general convention

🔴 For any UI interactions, we generally add feature tests. See https://github.com/opf/openproject/blob/dev/modules/storages/spec/features/admin_storages_spec.rb

---

fyi, I'm using @mereghost 's traffic light system for code review comments 😄

#13223 (review)
🟢 Just me being weird or minor suggestions
🟡 Points that warrant clarification discussion
🔴 (which I use sparingly) Major issues that need to be addressed before a merge

[dominic-braeunlein]

I redid that PR from scratch.

The BreadcrumbHelper.full_breadcrumb method is replaced with one that renders Primer::Beta::Breadcrumbs.
I renamed full_breadcrumb to full_breadcrumbs. The method is only used in app/views/layouts/base.html.erb as far as I can see.

@HDinger
The margin-left from OpenProject is overridden in _primer-adjustments.sass with following CSS. I am not sure if this selector is specific enough. What do you think?

nav
  > ol 
    margin-left: 0

@akabiru
FYI: I have the same update problem with the storage name in the Breadcrumb as in this WP-50738. I still have to work on that.
And I set show_local_breadcrumb in storages_controller.rb to true with this PR so they show again.

This PR should only be merged after opf/primer_view_components#45 is merged.

[HDinger]

@HDinger The margin-left from OpenProject is overridden in _primer-adjustments.sass with following CSS. I am not sure if this selector is specific enough. What do you think?

nav
  > ol 
    margin-left: 0

Hi @dominic-braeunlein

I think you could limit this a bit by using:

 #breadcrumb
   ol 
      margin-left: 0

Thus we could be sure, that the effects are really limited to the breadcrumb and not other nav tags where we might not want that. 🤷‍♀️

[akabiru]

Top work @dominic-braeunlein 👏🏾 🥇

---

Just a few non-blocking remarks 👍🏾

[HDinger]

Looks good to me 👍 🥳 Next to the things @akabiru menitoned you should probably rebase, as the primer bump has already been merged to dev.