Bump to primer_view_components 0.28.1 and update PageHeaders in Core

[bsatarnejad]

With version 0.26.0 of our primer_view_components, the definition of the Primer::OpenProject::PageHeader component has changed. So we have to update those places where it is already used.

Places to update:

• Members page
• Projects list page
• Admin Project Attributes pages
• Quarantined attachments page
• Virus scanning page
• Storages pages

https://community.openproject.org/work_packages/52746/activity

a related bugfix: https://community.openproject.org/projects/openproject/work_packages/53663/activity

[HDinger]

Hi @bsatarnejad

I now that this is still in a Draft state, but I had a look already as I had some time at hand.

[ulferts]

The look of it is nice. I in particular like the mobile behaviour.

There are a couple of remarks on the code that need to be addressed before merging. Of those, the one about the CSP is I guess the most troublesome. I don't think it originates in this PR but it is something we need to fix before the release.

[ulferts]

It would read easier if one could say something like:

header.with_action_link(**options) do |link|
  link.with_leading_visual_icon('op-save')
  t('button_save_as')
end  

or have the text and the icon be part of the with_action_link method. But that does not seem to be along the line of thinking of how Primer components are build.

What also strikes me as weird is that a link is used and not a button. This seems to violate the statement of primer: "Links navigate you to a new place or new content. Do not use links for triggering an action. Instead, use buttons, which are designed to activate a feature." (source)

[HDinger]

header.with_action_link(**options) do |link|
link.with_leading_visual_icon('op-save')
t('button_save_as')
end

The link component unfortunately does not support leading visual (although they mention it in the docs, it is not implemented).

The product team and I discussed the decision for the link for quite some time. Of course, the invisible button would be the best solution. However, Primer has this weird behavior of changing the font color of that buttons depending on the existance of an icon. The issue I raised for that in Primer was closed witht the comment that it "is working as expected" 🤷 Since GitHub and even Primer itself is very fuzzy when it comes to their usage of Buttons vs Links, we decided to go with the Link at this place.