Bump to primer_view_components 0.28.1 and update PageHeaders in Core

Gemfile

@@ -381,6 +381,6 @@ gemfiles.each do |file|
   send(:eval_gemfile, file) if File.readable?(file)
 end
 
-gem "openproject-octicons", "~>19.8.0"
-gem "openproject-octicons_helper", "~>19.8.0"
-gem "openproject-primer_view_components", "~>0.23.0"
+gem "openproject-octicons", "~>19.9.0"
+gem "openproject-octicons_helper", "~>19.9.0"
+gem "openproject-primer_view_components", "~>0.27.0"

Gemfile.lock

@@ -773,15 +773,15 @@ GEM
       validate_email
       validate_url
       webfinger (~> 2.0)
-    openproject-octicons (19.8.0)
-    openproject-octicons_helper (19.8.0)
+    openproject-octicons (19.9.0)
+    openproject-octicons_helper (19.9.0)
       actionview
-      openproject-octicons (= 19.8.0)
+      openproject-octicons (= 19.9.0)
       railties
-    openproject-primer_view_components (0.23.0)
+    openproject-primer_view_components (0.27.0)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
-      openproject-octicons (>= 19.8.0)
+      openproject-octicons (>= 19.9.0)
       view_component (>= 3.1, < 4.0)
     openproject-token (4.0.0)
       activemodel
@@ -1270,10 +1270,10 @@ DEPENDENCIES
   openproject-job_status!
   openproject-ldap_groups!
   openproject-meeting!
-  openproject-octicons (~> 19.8.0)
-  openproject-octicons_helper (~> 19.8.0)
+  openproject-octicons (~> 19.9.0)
+  openproject-octicons_helper (~> 19.9.0)
   openproject-openid_connect!
-  openproject-primer_view_components (~> 0.23.0)
+  openproject-primer_view_components (~> 0.27.0)
   openproject-recaptcha!
   openproject-reporting!
   openproject-storages!

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_title { page_title }
+    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

@@ -31,8 +31,7 @@
 class Members::IndexPageHeaderComponent < ApplicationComponent
   include OpPrimer::ComponentHelpers
   include ApplicationHelper
-
-  BUTTON_MARGIN_RIGHT = 2
+  include Menus::MembersHelper
 
   def initialize(project: nil)
     super
@@ -57,4 +56,55 @@ def filter_button_data_attributes
       action: "members-form#toggleMemberFilter"
     }
   end
+
+  def breadcrumb_items
+    [{ href: project_overview_path(@project.id), text: @project.name },
+     { href: project_members_path(@project), text: t(:label_member_plural) },
+     current_breadcrumb_element]
+  end
+
+  def page_title
+    # Rework this, when the Members page actually works with queries
+    @query ||= current_query
+    query_name = @query[:query_name]
+
+    if @query && query_name
+      query_name
+    else
+      t(:label_member_plural)
+    end
+  end
+
+  def current_breadcrumb_element
+    # Rework this, when the Members page actually works with queries
+    @query ||= current_query
+    query_name = @query[:query_name]
+    menu_header = @query[:menu_header]
+
+    if @query && query_name
+      if menu_header.present?
+        I18n.t("menus.breadcrumb.nested_element", section_header: menu_header, title: query_name).html_safe
+      else
+        query_name
+      end
+    else
+      t(:label_member_plural)
+    end
+  end
+
+  def current_query
+    query_name = nil
+    menu_header = nil
+
+    first_level_menu_items.find do |section|
+      section.children.find do |menu_query|
+        if !!menu_query.selected
+          query_name = menu_query.title
+          menu_header = section.header
+        end
+      end
+    end
+
+    { query_name:, menu_header: }
+  end
 end

app/components/projects/index_page_header_component.html.erb

@@ -1,115 +1,112 @@
 <%= 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 { 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_link(mobile_icon: nil, # Do not show on mobile as it is already part of the menu
+                                 mobile_label: nil,
+                                 href: new_projects_query_path,
+                                 data: {
+                                   controller: "params-from-query",
+                                   'application-target': "dynamic",
+                                   'params-from-query-allowed-value': '["filters", "columns"]'
+                                 }) do %>
+        <% render(Primer::Beta::Octicon.new(icon: "op-save",
+                                            align_self: :center,
+                                            "aria-label": I18n.t("button_save_as"),
+                                            mr: 1)
+            ) + content_tag(:span, t("button_save_as")) %>
       <% end %>
+    <% 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
-
+    <%= 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(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_breadcrumbs(breadcrumb_items)%>
   <% end %>
 <% end %>