Bump to primer_view_components 0.28.1 and update PageHeaders in Core

Gemfile

@@ -383,4 +383,4 @@ end
 
 gem "openproject-octicons", "~>19.8.0"
 gem "openproject-octicons_helper", "~>19.8.0"
-gem "openproject-primer_view_components", "~>0.23.0"
+gem "openproject-primer_view_components", "~>0.25.0"

app/components/members/index_page_header_component.html.erb

@@ -1,39 +1,27 @@
 <%=
   render(Primer::OpenProject::PageHeader.new) do |header|
     header.with_title { t(:label_member_plural) }
+    header.with_breadcrumbs(breadcrumb_items)
 
-    header.with_actions do
-      flex_layout do |actions|
-        if User.current.allowed_in_project?(:manage_members, @project)
-          actions.with_column(mr: BUTTON_MARGIN_RIGHT) do
-            render(
-              Primer::Beta::Button.new(
-                scheme: :primary,
-                size: :medium,
-                aria: { label: I18n.t(:button_add_member) },
-                title: I18n.t(:button_add_member),
-                id: 'add-member-button',
-                data: add_button_data_attributes
-              )
-            ) do |button|
-              button.with_leading_visual_icon(icon: :plus)
-              t('activerecord.models.member')
-            end
-          end
-        end
+    header.with_action_icon_button(mobile_icon: "filter",
+                                   scheme: :default,
+                                   icon: 'filter',
+                                   label: I18n.t(:description_filter),
+                                   id: 'filter-member-button',
+                                   aria: { label: I18n.t(:description_filter) },
+                                   class: 'toggle-member-filter-link',
+                                   data: filter_button_data_attributes)
 
-        actions.with_column do
-          render(
-            Primer::Beta::IconButton.new(
-              icon: 'filter',
-              id: 'filter-member-button',
-              aria: { label: I18n.t(:description_filter) },
-              class: 'toggle-member-filter-link',
-              data: filter_button_data_attributes
-            )
-          )
-        end
-      end
+    header.with_action_button(scheme: :primary,
+                              mobile_icon: :plus,
+                              mobile_label: t('activerecord.models.member'),
+                              size: :medium,
+                              aria: { label: I18n.t(:button_add_member) },
+                              title: I18n.t(:button_add_member),
+                              id: 'add-member-button',
+                              data: add_button_data_attributes) do |button|
+      button.with_leading_visual_icon(icon: :plus)
+      t('activerecord.models.member')
     end
   end
 %>

app/components/members/index_page_header_component.rb

@@ -32,8 +32,6 @@ class Members::IndexPageHeaderComponent < ApplicationComponent
   include OpPrimer::ComponentHelpers
   include ApplicationHelper
 
-  BUTTON_MARGIN_RIGHT = 2
-
   def initialize(project: nil)
     super
     @project = project
@@ -57,4 +55,8 @@ def filter_button_data_attributes
       action: "members-form#toggleMemberFilter"
     }
   end
+
+  def breadcrumb_items
+    [{ href: project_overview_path(@project.id), text: @project.name }, t(:label_member_plural)]
+  end
 end

app/components/projects/index_page_header_component.html.erb

@@ -1,115 +1,108 @@
 <%= render(Primer::OpenProject::PageHeader.new) do |header| %>
   <% if show_state? %>
     <% header.with_title(data: { 'test-selector': 'project-query-name'}) { page_title } %>
+    <% header.with_breadcrumbs(breadcrumb_items)%>
 
-    <% header.with_actions do %>
-      <% if query_saveable? %>
-        <%= render(
-              Primer::Beta::Text.new(tag: :span,
-                                     mr: BUTTON_MARGIN_RIGHT,
-                                     color: :muted)) do
-            t('lists.can_be_saved_as')
-          end
-        %>
+    <% if query_saveable? %>
+      <% header.with_action_text(tag: :span,
+                                    mr: BUTTON_MARGIN_RIGHT,
+                                    color: :muted) { t('lists.can_be_saved_as') } %>
 
-        <%= render(
-              Primer::Beta::Button.new(scheme: :invisible,
-                                       size: :medium,
-                                       mr: BUTTON_MARGIN_RIGHT,
-                                       tag: :a,
-                                       href: new_projects_query_path,
-                                       data: {
-                                         controller: "params-from-query",
-                                         'application-target': "dynamic",
-                                         'params-from-query-allowed-value': '["filters", "columns"]'
-                                       },
-                                       classes: 'Button--invisibleOP')) do |button|
-          button.with_leading_visual_icon(icon: :'op-save')
-
-          t('button_save_as')
-        end %>
+      <% header.with_action_button(mobile_icon: "op-save", mobile_label: t('button_save_as'),
+                                   scheme: :invisible,
+                                   size: :medium,
+                                   mr: BUTTON_MARGIN_RIGHT,
+                                   tag: :a,
+                                   href: new_projects_query_path,
+                                   data: {
+                                     controller: "params-from-query",
+                                     'application-target': "dynamic",
+                                     'params-from-query-allowed-value': '["filters", "columns"]'
+                                   },
+                                   classes: 'Button--invisibleOP') do |button|%>
+        <% button.with_leading_visual_icon(icon: "op-save") %>
+        t('button_save_as')
       <% end %>
 
-      <%= render(Primer::Alpha::ActionMenu.new) do |menu|
-        menu.with_show_button(icon: 'op-kebab-vertical', 'aria-label': t(:label_more), data: { 'test-selector': 'project-more-dropdown-menu' })
-
-        if gantt_portfolio_project_ids.any?
-          menu.with_item(
-            tag: :a,
-            label: t('projects.index.open_as_gantt'),
-            href: gantt_portfolio_query_link,
-            id: 'projects-index-open-as-gantt',
-            content_arguments: { target: '_blank' }
-          ) do |item|
-            item.with_leading_visual_icon(icon: 'op-view-timeline')
-          end
-        end
+    <% end %>
 
+    <%= header.with_action_menu(menu_arguments: { anchor_align: :end }, button_arguments: { icon: "op-kebab-vertical", "aria-label": t(:label_more), data: { 'test-selector': 'project-more-dropdown-menu' } })  do |menu, button|
+      if gantt_portfolio_project_ids.any?
         menu.with_item(
           tag: :a,
-          label: t(:label_overall_activity),
-          href: activities_path
+          label: t('projects.index.open_as_gantt'),
+          href: gantt_portfolio_query_link,
+          id: 'projects-index-open-as-gantt',
+          content_arguments: { target: '_blank' }
         ) do |item|
-          item.with_leading_visual_icon(icon: 'tasklist')
+          item.with_leading_visual_icon(icon: 'op-view-timeline')
         end
+      end
 
-        if query_saveable?
-          menu.with_item(
-            label: t('button_save_as'),
-            href: new_projects_query_path,
-            content_arguments: {
-            data: {
-              controller: "params-from-query",
-              'application-target': "dynamic",
-              'params-from-query-allowed-value': '["filters", "columns"]'
-            }
-          }
-          ) do |item|
-            item.with_leading_visual_icon(icon: :'op-save')
-          end
-        end
+      menu.with_item(
+        tag: :a,
+        label: t(:label_overall_activity),
+        href: activities_path
+      ) do |item|
+        item.with_leading_visual_icon(icon: 'tasklist')
+      end
 
+      if query_saveable?
         menu.with_item(
-          label: t('js.label_export'),
-          content_arguments: { 'data-show-dialog-id': Projects::ExportListModalComponent::MODAL_ID }
+          label: t('button_save_as'),
+          href: new_projects_query_path,
+          content_arguments: {
+          data: {
+            controller: "params-from-query",
+            'application-target': "dynamic",
+            'params-from-query-allowed-value': '["filters", "columns"]'
+          }
+        }
         ) do |item|
-          item.with_leading_visual_icon(icon: 'sign-out')
+          item.with_leading_visual_icon(icon: :'op-save')
         end
+      end
 
+      menu.with_item(
+        label: t('js.label_export'),
+        content_arguments: { 'data-show-dialog-id': Projects::ExportListModalComponent::MODAL_ID }
+      ) do |item|
+        item.with_leading_visual_icon(icon: 'sign-out')
+      end
+
+      menu.with_item(
+        label: t(:'queries.configure_view.heading'),
+        content_arguments: { 'data-show-dialog-id': Projects::ConfigureViewModalComponent::MODAL_ID }
+      ) do |item|
+        item.with_leading_visual_icon(icon: :gear)
+      end
+
+      if query.persisted?
         menu.with_item(
-          label: t(:'queries.configure_view.heading'),
-          content_arguments: { 'data-show-dialog-id': Projects::ConfigureViewModalComponent::MODAL_ID }
+          label: t(:button_delete),
+          scheme: :danger,
+          content_arguments: { 'data-show-dialog-id': Projects::DeleteListModalComponent::MODAL_ID }
         ) do |item|
-          item.with_leading_visual_icon(icon: :gear)
-        end
-
-        if query.persisted?
-          menu.with_item(
-            label: t(:button_delete),
-            scheme: :danger,
-            content_arguments: { 'data-show-dialog-id': Projects::DeleteListModalComponent::MODAL_ID }
-          ) do |item|
-            item.with_leading_visual_icon(icon: 'trash')
-          end
+          item.with_leading_visual_icon(icon: 'trash')
         end
       end
-      %>
-    <% end %>
+    end
+    %>
 
   <% else %>
-      <% header.with_title(mt: 2, mb: 2, data: { 'test-selector': 'project-query-name'}) do
-        primer_form_with(model: query,
-                         url: projects_queries_path,
-                         scope: 'query',
-                         data: {
-                           controller: "params-from-query",
-                           'application-target': "dynamic",
-                           'params-from-query-allowed-value': '["filters", "columns"]'
-                         },
-                         id: 'project-save-form') do |f|
-          render(Queries::Projects::Create.new(f))
-        end
-      end %>
+    <% header.with_title(mt: 2, mb: 2, data: { 'test-selector': 'project-query-name'}) do
+      primer_form_with(model: query,
+                       url: projects_queries_path,
+                       scope: 'query',
+                       data: {
+                         controller: "params-from-query",
+                         'application-target': "dynamic",
+                         'params-from-query-allowed-value': '["filters", "columns"]'
+                       },
+                       id: 'project-save-form') do |f|
+        render(Queries::Projects::Create.new(f))
+      end
+    end %>
   <% end %>
 <% end %>
 

app/components/projects/index_page_header_component.rb

@@ -69,12 +69,15 @@ def gantt_portfolio_project_ids
   def page_title
     query.name || t(:label_project_plural)
   end
-
   def query_saveable?
     current_user.logged? && query.name.blank?
   end
 
   def show_state?
     state == :show
   end
+
+  def breadcrumb_items
+    [{ href: projects_path, text: t("en.types.edit.projects") }, page_title]
+  end
 end

app/components/settings/project_custom_fields/edit_form_header_component.html.erb

@@ -29,10 +29,7 @@ See COPYRIGHT and LICENSE files for more details.
 <%=
   render(Primer::OpenProject::PageHeader.new) do |header|
     header.with_title(variant: :medium) { @custom_field.name }
-    header.with_description { t('settings.project_attributes.edit.description') }
-    header.with_parent_link(href: admin_settings_project_custom_fields_path, 'aria-label':  I18n.t("button_back")) do
-      t('settings.project_attributes.heading')
-    end
-    header.with_back_button(href: admin_settings_project_custom_fields_path, 'aria-label': t('button_back'))
+    header.with_description { t("settings.project_attributes.edit.description") }
+    header.with_breadcrumbs(breadcrumbs_items)
   end
-%>
+%>

app/components/settings/project_custom_fields/edit_form_header_component.rb

@@ -34,6 +34,11 @@ def initialize(custom_field:)
 
         @custom_field = custom_field
       end
+
+      def breadcrumbs_items
+        [{ href: admin_settings_project_custom_fields_path, text: t("label_administration") },
+         t("settings.project_attributes.heading")]
+      end
     end
   end
 end

app/components/settings/project_custom_fields/header_component.html.erb

@@ -4,30 +4,29 @@
     render Primer::OpenProject::PageHeader.new do |header|
       header.with_title(variant: :default) { t('settings.project_attributes.heading') }
       header.with_description { t('settings.project_attributes.heading_description') }
-      header.with_actions do
-        flex_layout(justify_content: :space_between, align_items: :center) do |action_buttons_container|
-          action_buttons_container.with_column(mr: 2) do
-            render(Primer::Beta::Button.new(
-              tag: :a,
-              href: new_admin_settings_project_custom_field_path(type: "ProjectCustomField"),
-              scheme: :primary,
-              data: { turbo: "false", qa_selector: "new-project-custom-field-button" }
-            )) do |button|
-              button.with_leading_visual_icon(icon: :plus)
-              t('settings.project_attributes.label_new_attribute')
-            end
+      header.with_breadcrumbs(breadcrumbs_items)
+      flex_layout(justify_content: :space_between, align_items: :center) do |action_buttons_container|
+        action_buttons_container.with_column(mr: 2) do
+          header.with_action_button(tag: :a,
+                                    href: new_admin_settings_project_custom_field_path(type: "ProjectCustomField"),
+                                    scheme: :primary,
+                                    data: { turbo: "false", qa_selector: "new-project-custom-field-button" },
+                                    mobile_icon: 'plus',
+                                    mobile_label: t('settings.project_attributes.label_new_attribute')) do |button|
+            button.with_leading_visual_icon(icon: :plus)
+            t('settings.project_attributes.label_new_attribute')
           end
-          action_buttons_container.with_column do
-            render(Primer::Alpha::Dialog.new(
-              id: "project-custom-field-section-dialog", title: t('settings.project_attributes.label_new_section'),
-              size: :medium_portrait
-            )) do |dialog|
-              dialog.with_show_button('aria-label': t('settings.project_attributes.label_new_section'), scheme: :default) do |button|
-                button.with_leading_visual_icon(icon: :plus)
-                t('settings.project_attributes.label_new_section')
-              end
-              render(Settings::ProjectCustomFieldSections::DialogBodyFormComponent.new())
+        end
+        action_buttons_container.with_column do
+          render(Primer::Alpha::Dialog.new(
+            id: "project-custom-field-section-dialog", title: t('settings.project_attributes.label_new_section'),
+            size: :medium_portrait
+          )) do |dialog|
+            dialog.with_show_button('aria-label': t('settings.project_attributes.label_new_section'), scheme: :default) do |button|
+              button.with_leading_visual_icon(icon: :plus)
+              t('settings.project_attributes.label_new_section')
             end
+            render(Settings::ProjectCustomFieldSections::DialogBodyFormComponent.new())
           end
         end
       end

app/components/settings/project_custom_fields/header_component.rb

@@ -32,6 +32,10 @@ class HeaderComponent < ApplicationComponent
       include ApplicationHelper
       include OpPrimer::ComponentHelpers
       include OpTurbo::Streamable
+      def breadcrumbs_items
+        [{ href: admin_index_path, text: t("label_administration") },
+         t("settings.project_attributes.heading")]
+      end
     end
   end
 end

app/components/settings/project_custom_fields/new_form_header_component.html.erb

@@ -31,9 +31,6 @@ See COPYRIGHT and LICENSE files for more details.
   render(Primer::OpenProject::PageHeader.new) do |header|
     header.with_title(variant: :medium) { t('settings.project_attributes.new.heading') }
     header.with_description { t('settings.project_attributes.new.description') }
-    header.with_parent_link(href: admin_settings_project_custom_fields_path, 'aria-label':  I18n.t("button_back")) do
-      t('settings.project_attributes.heading')
-    end
-    header.with_back_button(href: admin_settings_project_custom_fields_path, 'aria-label': t('button_back'))
+    header.with_breadcrumbs(breadcrumb_items)
   end
 %>