Merge pull request #16769 from opf/53809-update-pageheaders-subheader…

…s-in-the-rails-global-index-pages

[53809] Update PageHeaders & SubHeaders in the (rails) global index pages

app/components/add_button_component.html.erb

@@ -1,10 +1,9 @@
-<li class="<%= li_css_class %>">
-  <a href="<%= dynamic_path %>"
-     id="<%= id %>"
-     title="<%= title %>"
-     arial-label="<%= aria_label %>"
-     class="<%= link_css_class %>">
-    <%= icon %>
-    <%= label %>
-  </a>
-</li>
+<a href="<%= dynamic_path %>"
+   id="<%= id %>"
+   title="<%= title %>"
+   arial-label="<%= aria_label %>"
+   class="<%= link_css_class %>">
+  <%= icon %>
+  <%= label %>
+</a>
+

app/components/add_button_component.rb

@@ -44,10 +44,6 @@ def id
     raise "Implement the id for this component"
   end
 
-  def li_css_class
-    "toolbar-item"
-  end
-
   def title
     accessibility_label_text
   end

app/controllers/homescreen_controller.rb

@@ -61,4 +61,10 @@ def jump_to_module
       redirect_to_global_menu_item(params[:jump]) && return
     end
   end
+
+  def default_breadcrumb; end
+
+  def show_local_breadcrumb
+    false
+  end
 end

app/views/activities/index.html.erb

@@ -29,8 +29,18 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%= call_hook :activity_index_head %>
 
-<%= toolbar title: (@author.nil? ? t(:label_activity) : t(:label_user_activity, value: link_to_user(@author))).html_safe,
-            subtitle: t(:label_date_from_to, start: format_date(@date_to - @days), end: format_date(@date_to-1))
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { (@author.nil? ? t(:label_activity) : t(:label_user_activity, value: link_to_user(@author))).html_safe }
+    header.with_breadcrumbs([{ href: home_path, text: organization_name},
+                             *([href: project_overview_path(@project.id), text: @project.name] if @project),
+                             t(:label_activity)])
+  end
+%>
+<%=
+  render(Primer::OpenProject::SubHeader.new) do |subheader|
+    subheader.with_text {t(:label_date_from_to, start: format_date(@date_to - @days), end: format_date(@date_to-1))}
+  end
 %>
 
 <%= render(Activities::DaysComponent.new(events: @events, current_project: @project, activity_page: @activity_page))  %>

app/views/homescreen/index.html.erb

@@ -26,7 +26,13 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
-<% breadcrumb_paths(nil) %>
+<%=
+  render(Primer::OpenProject::PageHeader.new) do |header|
+    header.with_title { I18n.t("label_home") }
+    header.with_breadcrumbs([{ href: home_path, text: organization_name}, I18n.t(:label_home)])
+  end
+%>
+
 <h2 class="headline--application">
   <span><%= organization_icon %></span>
   <%= organization_name %>

app/views/news/index.html.erb

@@ -30,20 +30,29 @@ See COPYRIGHT and LICENSE files for more details.
   managable = User.current.allowed_in_project?(:manage_news, @project)
  %>
 
-<% html_title(t(:label_news_plural)) -%>
-<%= toolbar title: t(:label_news_plural) do %>
-  <% if managable %>
-    <li class="toolbar-item">
-      <%= link_to new_project_news_path(@project),
-          { class: 'button -primary',
-            id: 'new_news_link',
-            aria: {label: t(:label_news_new)},
-            title: t(:label_news_new)} do %>
-        <%= op_icon('button--icon icon-add') %>
-        <span class="button--text"><%= t(:label_news_singular) %></span>
-      <% end %>
-    </li>
-  <% end %>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { t(:label_news_plural) }
+    header.with_breadcrumbs([{ href: home_path, text: organization_name},
+                               *([href: project_overview_path(@project.id), text: @project.name] if @project),
+                               t(:label_news_plural)])
+  end
+%>
+<% if managable %>
+  <%=
+    render(Primer::OpenProject::SubHeader.new) do |subheader|
+      subheader.with_action_button(scheme: :primary,
+                                   aria: { label: t(:label_news_new)},
+                                   title: I18n.t(:label_work_package_status_new),
+                                   tag: :a,
+                                   id: 'new_news_link',
+                                   data: { "test-selector": "add-news-button"},
+                                   href: new_project_news_path(@project)) do |button|
+        button.with_leading_visual_icon(icon: :plus)
+        t(:label_news_singular)
+      end
+    end
+  %>
 <% end %>
 
 <% if @newss.any? %>

modules/boards/app/controllers/boards/boards_controller.rb

@@ -23,6 +23,12 @@ def show
       render layout: "angular/angular"
     end
 
+    def default_breadcrumb; end
+
+    def show_local_breadcrumb
+      false
+    end
+
     def new; end
 
     def create

modules/boards/app/views/boards/boards/index.html.erb

@@ -29,9 +29,22 @@ See COPYRIGHT and LICENSE files for more details.
 
 <% html_title(t('boards.label_boards')) -%>
 
-<%= toolbar title: t('boards.label_boards') do %>
-  <%= render Boards::AddButtonComponent.new(current_project: @project) %>
-<% end %>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { t("boards.label_boards") }
+    header.with_breadcrumbs([{ href: home_path, text: organization_name},
+                             *([href: project_overview_path(@project.id), text: @project.name] if @project),
+                             t("boards.label_boards")])
+  end
+%>
+
+<%=
+  render Primer::OpenProject::SubHeader.new do |subheader|
+    subheader.with_action_component(data: { "test-selector": "add-board-button"}) do
+       render Boards::AddButtonComponent.new(current_project: @project)
+    end
+  end
+%>
 
 <% if @board_grids.empty? -%>
   <%= no_results_box %>

modules/boards/spec/features/board_enterprise_spec.rb

@@ -54,7 +54,7 @@
     end
 
     it "disabled all action boards" do
-      page.find(".toolbar-item a", text: "Board").click
+      page.find('[data-test-selector="add-board-button"]', text: "Board").click
 
       expect(page).to have_css("#{test_selector('op-tile-block')}:not(.-disabled)", text: "Basic")
       expect(page).to have_css("#{test_selector('op-tile-block')}.-disabled", count: 5)
@@ -83,7 +83,7 @@
     end
 
     it "enables all options" do
-      page.find(".toolbar-item a", text: "Board").click
+      page.find('[data-test-selector="add-board-button"]', text: "Board").click
 
       expect(page).to have_css("#{test_selector('op-tile-block')}:not(.-disabled)", count: 6)
     end

modules/boards/spec/features/support/board_index_page.rb

@@ -59,7 +59,7 @@ def expect_board(name, present: true)
 
     def create_board(action: "Basic", title: "#{action} Board", expect_empty: false, via_toolbar: true)
       if via_toolbar
-        within ".toolbar-items" do
+        within '[data-test-selector="add-board-button"]' do
           click_link "Board"
         end
       else

modules/boards/spec/features/support/board_list_page.rb

@@ -35,13 +35,13 @@ def visit!
     end
 
     def expect_create_button
-      within ".toolbar-items" do
+      within '[data-test-selector="add-board-button"]' do
         expect(page).to have_link "Board"
       end
     end
 
     def expect_no_create_button
-      within ".toolbar-items" do
+      within '[data-test-selector="add-board-button"]' do
         expect(page).to have_no_link "Board"
       end
     end

modules/boards/spec/features/support/board_new_page.rb

@@ -13,7 +13,7 @@ def visit!
     def navigate_by_create_button
       visit work_package_boards_path unless page.current_path == work_package_boards_path
 
-      within ".toolbar-items" do
+      within '[data-test-selector="add-board-button"]' do
         click_link "Board"
       end
     end

modules/calendar/app/components/calendar/add_button_component.html.erb

@@ -1,10 +1,8 @@
-<li class="<%= li_css_class %>">
-  <a href="<%= dynamic_path %>"
-     id="<%= id %>"
-     title="<%= title %>"
-     arial-label="<%= aria_label %>"
-     class="<%= link_css_class %>">
-    <%= icon %>
-    <%= label %>
-  </a>
-</li>
+<a href="<%= dynamic_path %>"
+   id="<%= id %>"
+   title="<%= title %>"
+   arial-label="<%= aria_label %>"
+   class="<%= link_css_class %>">
+  <%= icon %>
+  <%= label %>
+</a>

modules/calendar/app/views/calendar/calendars/index.html.erb

@@ -28,8 +28,22 @@ See COPYRIGHT and LICENSE files for more details.
 ++#%>
 
 <% html_title(t(:label_calendar_plural)) -%>
-<%= toolbar title: t(:label_calendar_plural) do %>
-  <%= render Calendar::AddButtonComponent.new(current_project: @project) %>
-<% end %>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { t(:label_calendar_plural) }
+    header.with_breadcrumbs([{ href: home_path, text: organization_name},
+                             *([href: project_overview_path(@project.id), text: @project.name] if @project),
+                             t(:label_calendar_plural)])
+  end
+%>
+
+<%=
+  render Primer::OpenProject::SubHeader.new do |subheader|
+    subheader.with_action_component(data: { "test-selector": "add-calendar-button"}) do
+      render Calendar::AddButtonComponent.new(current_project: @project)
+    end
+  end
+%>
+
 
 <%= render ::Calendar::TableComponent.new(rows: @views, current_project: @project, current_user: current_user) %>

modules/calendar/spec/features/calendars_spec.rb

@@ -80,7 +80,7 @@
     expect(page).to have_text "There is currently nothing to display."
 
     # Open a new calendar from there
-    find(".toolbar-item a", text: "Calendar").click
+    find('[data-test-selector="add-calendar-button"]', text: "Calendar").click
 
     loading_indicator_saveguard
 

modules/calendar/spec/support/pages/calendar.rb

@@ -140,7 +140,7 @@ def click_on_submit
     end
 
     def click_on_create_button
-      within ".toolbar-items" do
+      within '[data-test-selector="add-calendar-button"]' do
         click_link "Calendar"
       end
     end

modules/reporting/app/views/cost_reports/index.html.erb

@@ -35,28 +35,30 @@ See COPYRIGHT and LICENSE files for more details.
 
 <% html_title (@query.persisted? ? "#{t(:label_cost_report)}: #{@query.name}" : t(:label_new_report)) %>
 
-<div class="toolbar-container">
-  <div class="toolbar">
-    <div class="title-container">
-      <h2 id="ur_caption">
-        <%= render_widget Widget::Controls::QueryName, @query, :can_rename => allowed_in_report?(:rename, @query, current_user) %>
-      </h2>
-    </div>
-    <ul class="toolbar-items">
-      <% if User.current.allowed_in_any_work_package?(:export_work_packages, in_project: @project) %>
-        <li class="toolbar-item">
-          <%= link_to(t(:export_to_excel),
-                      { controller: "cost_reports" ,
-                        action: :index,
-                        format: 'xls',
-                        project_id: @project },
-                      class: "button icon-export-xls-descr") %>
-        </li>
-      <% end %>
-      <%= call_hook(:view_cost_report_toolbar) %>
-    </ul>
-  </div>
-</div>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { render_widget Widget::Controls::QueryName, @query, :can_rename => allowed_in_report?(:rename, @query, current_user) }
+    header.with_breadcrumbs([{ href: home_path, text: organization_name},
+                             *([href: project_overview_path(@project.id), text: @project.name] if @project),
+                             t(:label_news_plural)])
+  end
+%>
+<% if User.current.allowed_in_any_work_package?(:export_work_packages, in_project: @project) %>
+  <%=
+    render(Primer::OpenProject::SubHeader.new) do |subheader|
+      subheader.with_action_button(scheme: :default,
+                                   aria: { label: t(:export_to_excel)},
+                                   title: t(:export_to_excel),
+                                   tag: :a,
+                                   href: url_for({ controller: "cost_reports" , action: :index, format: 'xls', project_id: @project })
+                                   ) do |button|
+        button.with_leading_visual_icon(icon: "op-file-xls-descriptions")
+        t(:export_to_excel)
+      end
+    end
+  %>
+  <%= call_hook(:view_cost_report_toolbar) %>
+<% end %>
 
 <%= render_widget Widget::Settings, @query, :cost_types => @cost_types, :selected_type_id => @unit_id %>
 

modules/reporting/spec/features/me_value_spec.rb

@@ -39,7 +39,7 @@
       check "query_is_public"
       find_by_id("query-icon-save-button").click
       # wait until the save is complete
-      expect(page).to have_css("h2", text: "Query ME value")
+      expect(page).to have_css(".PageHeader-title", text: "Query ME value")
 
       expect(page).to have_css(".report", text: "10.00")
 

modules/team_planner/app/views/team_planner/team_planner/index.html.erb

@@ -1,7 +1,20 @@
 <% html_title(t('team_planner.label_team_planner_plural')) -%>
 
-<%= toolbar title: t(:'team_planner.label_team_planner_plural') do %>
-  <%= render ::TeamPlanner::AddButtonComponent.new(current_project: @project) %>
-<% end %>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { t('team_planner.label_team_planner_plural') }
+    header.with_breadcrumbs([{ href: home_path, text: organization_name},
+                             { href: project_overview_path(@project.id), text: @project.name },
+                             t('team_planner.label_team_planner_plural')])
+  end
+%>
+
+<%=
+  render Primer::OpenProject::SubHeader.new do |subheader|
+    subheader.with_action_component(data: { "test-selector": "add-team-planner-button"}) do
+      render ::TeamPlanner::AddButtonComponent.new(current_project: @project)
+    end
+  end
+%>
 
 <%= render ::TeamPlanner::TableComponent.new(rows: @views, current_user: current_user) %>

modules/team_planner/app/views/team_planner/team_planner/overview.html.erb

@@ -1,7 +1,18 @@
 <% html_title(t('team_planner.label_team_planner_plural')) -%>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { t('team_planner.label_team_planner_plural') }
+    header.with_breadcrumbs([{ href: home_path, text: organization_name},
+                             t('team_planner.label_team_planner_plural')])
+  end
+%>
 
-<%= toolbar title: t(:'team_planner.label_team_planner_plural') do %>
-  <%= render ::TeamPlanner::AddButtonComponent.new %>
-<% end %>
+<%=
+  render Primer::OpenProject::SubHeader.new do |subheader|
+    subheader.with_action_component(data: { "test-selector": "add-team-planner-button"}) do
+      render ::TeamPlanner::AddButtonComponent.new
+    end
+  end
+%>
 
 <%= render ::TeamPlanner::Overview::TableComponent.new(rows: @views, current_user: current_user) %>