Merge pull request #16934 from opf/feature/53809-update-pageheaders-a…

…nd-subheaders-in-the-rails-global-index-pages

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

app/components/add_button_component.html.erb

@@ -1,9 +1,11 @@
-<a href="<%= dynamic_path %>"
-   id="<%= id %>"
-   title="<%= title %>"
-   arial-label="<%= aria_label %>"
-   class="<%= link_css_class %>">
-  <%= icon %>
-  <%= label %>
-</a>
-
+<%= render(Primer::ButtonComponent.new(scheme: :primary,
+                                       aria: { label: aria_label },
+                                       title:,
+                                       test_selector:,
+                                       tag: :a,
+                                       id:,
+                                       href: dynamic_path) ) do |button|
+  button.with_leading_visual_icon(icon: :plus)
+  label_text
+end
+%>

app/components/add_button_component.rb

@@ -48,12 +48,6 @@ def title
     accessibility_label_text
   end
 
-  def label
-    content_tag(:span,
-                label_text,
-                class: "button--text")
-  end
-
   def aria_label
     accessibility_label_text
   end
@@ -65,12 +59,4 @@ def accessibility_label_text
   def label_text
     raise "Specify the label text to be used for this component"
   end
-
-  def link_css_class
-    "button -primary"
-  end
-
-  def icon
-    helpers.op_icon("button--icon icon-add")
-  end
 end

app/components/notifications/index_page_header_component.rb

@@ -47,7 +47,7 @@ def breadcrumb_items
     end
 
     def parent_element
-      { href: home_path, text: I18n.t(:label_home) }
+      { href: home_path, text: helpers.organization_name }
     end
   end
 end

app/components/projects/index_page_header_component.rb

@@ -112,6 +112,7 @@ def currently_favored? = query.favored_by?(current_user)
 
   def breadcrumb_items
     [
+      { href: home_path, text: helpers.organization_name },
       { href: projects_path, text: t(:label_project_plural) },
       current_breadcrumb_element
     ]

app/views/activities/index.html.erb

@@ -33,8 +33,8 @@ See COPYRIGHT and LICENSE files for more details.
   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_description { t(:label_date_from_to, start: format_date(@date_to - @days), end: format_date(@date_to-1)) }
-    header.with_breadcrumbs([{ href: home_path, text: organization_name},
-                             *([href: project_overview_path(@project.id), text: @project.name] if @project),
+    header.with_breadcrumbs([*([ href: home_path, text: organization_name ] unless @project),
+                             *([ href: project_overview_path(@project.id), text: @project.name ] if @project),
                              t(:label_activity)])
   end
 %>

app/views/homescreen/index.html.erb

@@ -33,11 +33,6 @@ See COPYRIGHT and LICENSE files for more details.
   end
 %>
 
-<h2 class="headline--application">
-  <span><%= organization_icon %></span>
-  <%= organization_name %>
-</h2>
-
 <%= render partial: 'announcements/show' %>
 
 <% if @homescreen[:blocks].any? %>

app/views/news/index.html.erb

@@ -33,9 +33,9 @@ See COPYRIGHT and LICENSE files for more details.
 <%=
   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)])
+    header.with_breadcrumbs([*([ href: home_path, text: organization_name ] unless @project),
+                             *([ href: project_overview_path(@project.id), text: @project.name ] if @project),
+                             t(:label_news_plural)])
   end
 %>
 <% if managable %>

modules/boards/app/components/boards/add_button_component.rb

@@ -47,6 +47,10 @@ def id
       "add-board-button"
     end
 
+    def test_selector
+      "add-board-button"
+    end
+
     def accessibility_label_text
       I18n.t("boards.label_create_new_board")
     end

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

@@ -32,15 +32,15 @@ See COPYRIGHT and LICENSE files for more details.
 <%=
   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),
+    header.with_breadcrumbs([*([ href: home_path, text: organization_name ] unless @project),
+                             *([ 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
+    subheader.with_action_component do
        render Boards::AddButtonComponent.new(current_project: @project)
     end
   end

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

@@ -59,11 +59,9 @@ def expect_board(name, present: true)
 
     def create_board(action: "Basic", title: "#{action} Board", expect_empty: false, via_toolbar: true)
       if via_toolbar
-        within '[data-test-selector="add-board-button"]' do
-          click_link "Board"
-        end
+        page.find_test_selector("add-board-button").click
       else
-        find('[data-test-selector="boards--create-button"]').click
+        page.find_test_selector("boards--create-button").click
       end
 
       new_board_page = NewBoard.new

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

@@ -35,15 +35,11 @@ def visit!
     end
 
     def expect_create_button
-      within '[data-test-selector="add-board-button"]' do
-        expect(page).to have_link "Board"
-      end
+      expect(page).to have_test_selector "add-board-button"
     end
 
     def expect_no_create_button
-      within '[data-test-selector="add-board-button"]' do
-        expect(page).to have_no_link "Board"
-      end
+      expect(page).not_to have_test_selector "add-board-button"
     end
 
     def expect_delete_buttons(*boards)

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

@@ -13,9 +13,7 @@ def visit!
     def navigate_by_create_button
       visit work_package_boards_path unless page.current_path == work_package_boards_path
 
-      within '[data-test-selector="add-board-button"]' do
-        click_link "Board"
-      end
+      page.find_test_selector("add-board-button").click
     end
 
     def set_title(title)

modules/calendar/app/components/calendar/add_button_component.rb

@@ -51,6 +51,10 @@ def id
       "add-calendar-button"
     end
 
+    def test_selector
+      "add-calendar-button"
+    end
+
     def accessibility_label_text
       I18n.t("js.calendar.create_new")
     end

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

@@ -31,15 +31,15 @@ See COPYRIGHT and LICENSE files for more details.
 <%=
   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),
+    header.with_breadcrumbs([*([ href: home_path, text: organization_name ] unless @project),
+                             *([ 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
+    subheader.with_action_component do
       render Calendar::AddButtonComponent.new(current_project: @project)
     end
   end

modules/calendar/spec/features/calendar_sharing_spec.rb

@@ -140,7 +140,7 @@
       it "shows disabled sharing menu item" do
         visit project_calendars_path(project)
 
-        click_link "Create new calendar"
+        page.find_test_selector("add-calendar-button").click
 
         # wait for settings button to become visible
         expect(page).to have_css("#work-packages-settings-button")

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

@@ -140,29 +140,27 @@ def click_on_submit
     end
 
     def click_on_create_button
-      within '[data-test-selector="add-calendar-button"]' do
-        click_link "Calendar"
-      end
+      page.find_test_selector("add-calendar-button").click
     end
 
     def click_on_cancel_button
       click_on "Cancel"
     end
 
     def expect_create_button
-      expect(page).to have_css ".button", text: "Calendar"
+      expect(page).to have_test_selector "add-calendar-button"
     end
 
     def expect_no_create_button
-      expect(page).to have_no_css ".button", text: "Calendar"
+      expect(page).not_to have_test_selector "add-calendar-button"
     end
 
     def expect_delete_button(query)
-      expect(page).to have_css "[data-test-selector='calendar-remove-#{query.id}']"
+      expect(page).to have_test_selector "calendar-remove-#{query.id}"
     end
 
     def expect_no_delete_button(query)
-      expect(page).to have_no_css "[data-test-selector='calendar-remove-#{query.id}']"
+      expect(page).not_to have_test_selector "calendar-remove-#{query.id}"
     end
 
     def expect_no_views_visible

modules/meeting/app/components/meetings/header_component.rb

@@ -66,7 +66,7 @@ def parent_element
       if @project.present?
         { href: project_overview_path(@project.id), text: @project.name }
       else
-        { href: home_path, text: I18n.t(:label_home) }
+        { href: home_path, text: helpers.organization_name }
       end
     end
   end

modules/meeting/app/components/meetings/index_page_header_component.rb

@@ -50,7 +50,7 @@ def parent_element
       if @project.present?
         { href: project_overview_path(@project.id), text: @project.name }
       else
-        { href: home_path, text: I18n.t(:label_home) }
+        { href: home_path, text: helpers.organization_name }
       end
     end
   end

modules/meeting/app/views/meetings/new.html.erb

@@ -42,7 +42,7 @@ See COPYRIGHT and LICENSE files for more details.
     header.with_title { page_title }
     header.with_breadcrumbs([@project.present? ?
                                { href: project_overview_path(@project.id), text: @project.name } :
-                               { href: home_path, text: I18n.t(:label_home) },
+                               { href: home_path, text: organization_name },
                              { href: @project.present? ? project_meetings_path(@project.id) : meetings_path,
                                text: I18n.t(:label_meeting_plural) },
                              breadcrumb_element.html_safe])

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

@@ -38,27 +38,27 @@ See COPYRIGHT and LICENSE files for more details.
 <%=
   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|
+    header.with_breadcrumbs([*([ href: home_path, text: organization_name ] unless @project),
+                             *([ href: project_overview_path(@project.id), text: @project.name ] if @project),
+                             { href: url_for({ controller: "cost_reports" , action: :index, project_id: @project }), text: I18n.t(:cost_reports_title)},
+                             (@query.persisted? ? "#{@query.name}" : t(:label_new_report))])
+
+    if User.current.allowed_in_any_work_package?(:export_work_packages, in_project: @project)
+      header.with_action_button(scheme: :default,
+                                aria: { label: t(:export_to_excel)},
+                                title: t(:export_to_excel),
+                                mobile_icon: "op-file-xls-descriptions",
+                                mobile_label: 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
+      call_hook(:view_cost_report_toolbar)
     end
-  %>
-  <%= call_hook(:view_cost_report_toolbar) %>
-<% end %>
+  end
+%>
 
 <%= render_widget Widget::Settings, @query, :cost_types => @cost_types, :selected_type_id => @unit_id %>
 

modules/team_planner/app/components/team_planner/add_button_component.rb

@@ -47,6 +47,10 @@ def id
       "add-team-planner-button"
     end
 
+    def test_selector
+      "add-team-planner-button"
+    end
+
     def accessibility_label_text
       I18n.t("team_planner.label_create_new_team_planner")
     end

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

@@ -3,15 +3,14 @@
 <%=
   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 },
+    header.with_breadcrumbs([{ 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
+    subheader.with_action_component do
       render ::TeamPlanner::AddButtonComponent.new(current_project: @project)
     end
   end

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

@@ -9,7 +9,7 @@
 
 <%=
   render Primer::OpenProject::SubHeader.new do |subheader|
-    subheader.with_action_component(data: { "test-selector": "add-team-planner-button"}) do
+    subheader.with_action_component do
       render ::TeamPlanner::AddButtonComponent.new
     end
   end

modules/team_planner/spec/features/team_planner_spec.rb

@@ -43,7 +43,7 @@
     end
 
     expect(page).to have_content "There is currently nothing to display."
-    click_on "Create", match: :first
+    page.find_test_selector("add-team-planner-button").click
 
     team_planner.expect_title