[59915] Update PageHeaders & SubHeaders in the (rails) project pages (Part 2) (#18600)

* add a new helper for breadcrumb in wiki page

* set page header in destroy page

* set page header in edit page

* set page header in history and rename and edit parent pages

* change toolbar items into page header items

* add new wiki action to sub header

* remove version edit page which is not in use any more

* add export as a menu item of the header

* fix rubocup errors

* fix failing tests

* replace page header in annotate page

* replace page header in diff page

* add page header in select menu page

* fix rubocup errors

* fix errors on rename test

* fix errors on selecting items from toolbar

* fix errors on tests for child pages

* set correct permission for configure menu item

* replace page header in summary page

* replace page header in summary details page

* edit docs of sub header

* add page header in wiki new page

* remove controller and a route for edit method

* undo changes for docs of sub header

* extract header in show page into a new component

* use helper method in header component

* add wiki module to the breadcrumb

* rename page header component for wiki page

* simplify how lock and lock implemented

* extract sub header

* remove wiki title from header of history page

* fix page header in new page

* use page.find_test_selector in test

* fix failing test for summary page

* fix failing test for wiki child pages

* change the summary test

* use test selector for page header title

* undo changes for activate user in admin

* use test selector in adding editing history test

* use test selector in attachment upload test

* use test selector in child pages tests

* use test selector in wiki menu items tests

* change test selector for breadcrumbs

* extract conditions to show edit button into a method

* extract conditions to show rollback action menu item into a method

* extract conditions to show create button into a method

* fix duplicated code in test

* move show_create to the controller instead of the component

* fix showing history breadcrumbs

* fix showing table of contents breadcrumbs

app/components/wiki_pages/show_page_header_component.html.erb

@@ -0,0 +1,196 @@
+<%#-- copyright
+OpenProject is an open source project management software.
+Copyright (C) the OpenProject GmbH
+
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License version 3.
+
+OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+Copyright (C) 2006-2013 Jean-Philippe Lang
+Copyright (C) 2010-2013 the ChiliProject Team
+
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License
+as published by the Free Software Foundation; either version 2
+of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program; if not, write to the Free Software
+Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+See COPYRIGHT and LICENSE files for more details.
+
+++#%>
+
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title(test_selector: "wiki-page-header-title") { h(@page.title) }
+    header.with_breadcrumbs(
+      helpers.breadcrumb_for_page(@project, @page),
+      data: { "test-selector": "wiki-page-header-breadcrumbs" }
+    )
+    if @editable
+      if show_edit?
+        header.with_action_button(
+          tag: :a,
+          mobile_icon: :pencil,
+          mobile_label: t(:button_edit),
+          size: :medium,
+          href: url_for(controller: "wiki", action: "edit", id: @page),
+          aria: { label: I18n.t(:button_edit) },
+          data: { "test-selector": "wiki-edit-action-button" },
+          title: I18n.t(:button_edit)
+        ) do |button|
+          button.with_leading_visual_icon(icon: :pencil)
+          t(:button_edit)
+        end
+      end
+      helpers.watcher_action_button(header, @page.object)
+      unless @page.current_version?
+        header.with_action_button(
+          tag: :a,
+          mobile_icon: :book,
+          mobile_label: t(:label_history),
+          size: :medium,
+          href: url_for(controller: "wiki", action: "history", id: @page),
+          aria: { label: t(:label_history) },
+          title: t(:label_history)
+        ) do |button|
+          button.with_leading_visual_icon(icon: "book")
+          t(:label_history)
+        end
+      end
+    end
+    header.with_action_menu(
+      menu_arguments: { anchor_align: :end },
+      button_arguments: {
+        icon: "kebab-horizontal",
+        "aria-label": t(:label_more),
+        data: { "test-selector": "wiki-more-dropdown-menu" }
+      }
+    ) do |menu|
+      if @editable
+        if User.current.allowed_in_project?(:protect_wiki_pages, @project)
+          menu.with_item(
+            label: lock_data[:label],
+            tag: :a,
+            size: :medium,
+            content_arguments: { data: { method: :post } },
+            href: url_for(controller: "wiki", action: "protect", id: @page, protected: lock_data[:protected])
+          ) do |item|
+            item.with_leading_visual_icon(icon: lock_data[:icon])
+          end
+        end
+        if @page.current_version?
+          if User.current.allowed_in_project?(:rename_wiki_pages, @project)
+            menu.with_item(
+              label: t(:button_rename),
+              tag: :a,
+              size: :medium,
+              data: { "test-selector": "wiki-rename-action-menu-item" },
+              href: url_for(controller: "wiki", action: "rename", id: @page)
+            ) do |item|
+              item.with_leading_visual_icon(icon: "arrow-switch")
+            end
+          end
+          if User.current.allowed_in_project?(:change_wiki_parent_page, @project)
+            menu.with_item(
+              label: t(:button_change_parent_page),
+              tag: :a,
+              size: :medium,
+              href: url_for(controller: "wiki", action: "edit_parent_page", id: @page)
+            ) do |item|
+              item.with_leading_visual_icon(icon: :link)
+            end
+          end
+        end
+
+        if User.current.allowed_in_project?(:delete_wiki_pages, @project)
+          menu.with_item(
+            label: t(:button_delete),
+            scheme: :danger,
+            tag: :a,
+            size: :medium,
+            content_arguments: { data: { confirm: t(:text_are_you_sure), method: :delete } },
+            href: url_for(controller: "wiki", action: "destroy", id: @page),
+            data: { "test-selector": "wiki-delete-action-menu-item" }
+          ) do |item|
+            item.with_leading_visual_icon(icon: :trash)
+          end
+        end
+        if show_rollback?
+          menu.with_item(
+            label: t(:button_rollback),
+            href: url_for(controller: "wiki", action: "edit", id: @page, version: @page.version)
+          ) do |item|
+            item.with_leading_visual_icon(icon: :x)
+          end
+        end
+        if User.current.allowed_in_project?(:view_wiki_edits, @project)
+          menu.with_item(
+            label: t(:label_history),
+            href: url_for(controller: "wiki", action: "history", id: @page),
+            data: { "test-selector": "wiki-history-action-menu-item" }
+          ) do |item|
+            item.with_leading_visual_icon(icon: :history)
+          end
+        end
+        if User.current.allowed_in_project?(:manage_wiki_menu, @project)
+          menu.with_item(
+            label: t(:button_manage_menu_entry),
+            href: url_for(controller: "/wiki_menu_items", action: "edit", project_id: @project.identifier, id: @page),
+            data: { "test-selector": "wiki-configure-menu-action-menu-item" }
+          ) do |item|
+            item.with_leading_visual_icon(icon: :gear)
+          end
+        end
+        menu.with_item(
+          tag: :a,
+          label: t(:button_print),
+          content_arguments: { data: {
+            controller: "print",
+            action: "print#triggerPrint"
+          } },
+          title: t("wiki.print_hint"),
+          href: ""
+        ) do |item|
+          item.with_leading_visual_icon(icon: "op-printer")
+        end
+        if User.current.allowed_in_project?(:export_wiki_pages, @project)
+          menu.with_item(
+            tag: :a,
+            label: t("js.label_export"),
+            size: :medium,
+            href: "",
+            title: t("js.label_export"),
+            classes: "modal-delivery-element--activation-link"
+          ) do |item|
+            item.with_leading_visual_icon(icon: :download)
+          end
+        end
+        menu.with_item(
+          tag: :a,
+          label: t(:label_table_of_contents),
+          title: t("wiki.print_hint"),
+          href: url_for({ controller: "/wiki", action: "index", project_id: @project.identifier, id: @page })
+        ) do |item|
+          item.with_leading_visual_icon(icon: "op-view-list")
+        end
+      end
+    end
+  end
+%>
+
+<section data-augmented-model-wrapper
+         data-modal-class-name="wiki-export---modal">
+  <%= link_to t("js.label_export"),
+              "",
+              title: t("js.label_export"),
+              style: "display: none;" %>
+  <%= render partial: "wiki/wiki_export_modal" %>
+</section>

app/components/wiki_pages/show_page_header_component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module WikiPages
+  class ShowPageHeaderComponent < ApplicationComponent
+    include OpPrimer::ComponentHelpers
+    include ApplicationHelper
+
+    def initialize(page:, project:, editable:)
+      super
+      @page = page
+      @project = project
+      @editable = editable
+    end
+
+    def lock_data
+      if @page.protected?
+        { label: t(:button_unlock), icon: :unlock, protected: 0 }
+      else
+        { label: t(:button_lock), icon: :lock, protected: 1 }
+      end
+    end
+
+    def show_edit?
+      User.current.allowed_in_project?(:edit_wiki_pages, @project) && @page.current_version?
+    end
+
+    def show_rollback?
+      User.current.allowed_in_project?(:edit_wiki_pages, @project) && !@page.current_version?
+    end
+  end
+end

app/components/wiki_pages/show_sub_header_component.html.erb

@@ -27,8 +27,18 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 
-<%= error_messages_for "version" %>
-
-<% if @project.enabled_modules.map(&:name).include?("backlogs") %>
-  <%= version_settings_fields @version, @project %>
-<% end %>
+<%=
+  render(Primer::OpenProject::SubHeader.new) do |subheader|
+    subheader.with_action_button(
+      scheme: :primary,
+      aria: { label: t("wiki.index.no_results_content_text") },
+      title: t("wiki.index.no_results_content_text"),
+      tag: :a,
+      test_selector: "wiki-new-child-button",
+      href: url_for({ controller: "/wiki", action: "new_child", project_id: @project.identifier, id: @page })
+    ) do |button|
+      button.with_leading_visual_icon(icon: :plus)
+      t(:create_wiki_page_button)
+    end
+  end
+%>

app/components/wiki_pages/show_sub_header_component.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 #-- copyright
 # OpenProject is an open source project management software.
 # Copyright (C) the OpenProject GmbH
@@ -26,16 +28,15 @@
 # See COPYRIGHT and LICENSE files for more details.
 #++
 
-class VersionSettingsController < RbApplicationController
-  def edit
-    @version = Version.find(params[:id])
-  end
+module WikiPages
+  class ShowSubHeaderComponent < ApplicationComponent
+    include OpPrimer::ComponentHelpers
+    include ApplicationHelper
 
-  private
-
-  def authorize
-    # Everyone with the right to edit versions has the right to edit version
-    # settings
-    super("versions", "edit")
+    def initialize(page:, project:)
+      super
+      @page = page
+      @project = project
+    end
   end
 end

app/controllers/wiki_controller.rb

@@ -98,6 +98,7 @@ class WikiController < ApplicationController
     end
 
     @editable = editable?
+    @show_create = show_create?
   end
 
   def new; end
@@ -339,6 +340,9 @@ class WikiController < ApplicationController
     :"no-menu-item-#{default_item.menu_identifier}"
   end
 
+  def show_create?
+    @editable && @page && User.current.allowed_in_project?(:edit_wiki_pages, @project)
+  end
   private
 
   def locked?
@@ -415,7 +419,7 @@ class WikiController < ApplicationController
   end
 
   def show_local_breadcrumb
-    @page&.ancestors&.any?
+    false
   end
 
   def redirect_to_show

app/helpers/wiki_helper.rb

@@ -40,22 +40,46 @@ module WikiHelper
                                               ids:)
   end
 
-  def breadcrumb_for_page(page, action = nil)
-    related_pages = page.ancestors.reverse
+  def breadcrumb_for_page(project, page, action = nil)
+    breadcrumbs = []
+    breadcrumbs << project_breadcrumb(project)
+    breadcrumbs << wiki_module_breadcrumb(project, page)
+    breadcrumbs += ancestor_breadcrumbs(page)
+    breadcrumbs << wiki_page_breadcrumb(page) if action
+    breadcrumbs << h(page.breadcrumb_title) unless action
+    breadcrumbs << action if action
+    breadcrumbs
+  end
 
-    if action
-      related_pages += [page]
+  private
+
+  def project_breadcrumb(project)
+    { href: project_overview_path(project.id), text: project.name }
+  end
+
+  def wiki_module_breadcrumb(project, page)
+    {
+      href: url_for({ controller: "/wiki", action: "index", project_id: project.identifier, id: page }),
+      text: t("activerecord.models.wiki")
+    }
+  end
+
+  def wiki_page_breadcrumb(page)
+    {
+      href: project_wiki_path(page, page.project),
+      text: page.breadcrumb_title
+    }
+  end
+
+  def ancestor_breadcrumbs(page)
+    return [] unless page&.ancestors&.any?
+
+    page.ancestors.reverse.map do |parent|
+      {
+        href: project_wiki_path(parent, parent.project),
+        text: parent.breadcrumb_title
+      }
     end
-
-    paths = related_pages.map { |parent| link_to h(parent.breadcrumb_title), project_wiki_path(parent, parent.project) }
-
-    paths += if action
-               [action]
-             else
-               [h(page.breadcrumb_title)]
-             end
-
-    breadcrumb_paths(*paths)
   end
 
   private

app/views/wiki/annotate.html.erb

@@ -28,22 +28,40 @@ See COPYRIGHT and LICENSE files for more details.
 ++#%>
 
 <% html_title t(:project_module_wiki), t(:label_history), t(:text_comment_wiki_page, page: @page.title) %>
-<% breadcrumb_paths(*(@page.ancestors.reverse.collect { |parent| link_to h(parent.breadcrumb_title), { id: parent, project_id: parent.project } } + [h(@page.breadcrumb_title)])) %>
 
-<%= toolbar title: h(@page.title) do %>
-  <li class="toolbar-item">
-    <%= link_to({ action: "edit", id: @page }, class: "button", accesskey: accesskey(:edit)) do %>
-      <%= op_icon("button--icon icon-edit") %>
-      <span class="button--text"><%= t(:button_edit) %></span>
-    <% end %>
-  </li>
-  <li class="toolbar-item">
-    <%= link_to({ action: "history", id: @page }, class: "button") do %>
-      <%= op_icon("button--icon icon-wiki") %>
-      <span class="button--text"><%= t(:label_history) %></span>
-    <% end %>
-  </li>
-<% end %>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { h(@page.title) }
+    header.with_breadcrumbs(
+      breadcrumb_for_page(@project, @page)
+    )
+    header.with_action_button(
+      tag: :a,
+      mobile_icon: :pencil,
+      mobile_label: t(:button_edit),
+      accesskey: accesskey(:edit),
+      size: :medium,
+      href: url_for(controller: "wiki", action: "edit", id: @page),
+      aria: { label: I18n.t(:button_edit) },
+      title: I18n.t(:button_edit)
+    ) do |button|
+      button.with_leading_visual_icon(icon: :pencil)
+      t(:button_edit)
+    end
+    header.with_action_button(
+      tag: :a,
+      mobile_icon: :book,
+      mobile_label: t(:label_history),
+      size: :medium,
+      href: url_for(controller: "wiki", action: "history", id: @page),
+      aria: { label: t(:label_history) },
+      title: t(:label_history)
+    ) do |button|
+      button.with_leading_visual_icon(icon: "book")
+      t(:label_history)
+    end
+  end
+%>
 
 <p>
   <%= Version.model_name.human %> <%= link_to h(@annotate.content.version), action: "show", id: @page, version: @annotate.content.version %>

app/views/wiki/destroy.html.erb

@@ -26,8 +26,15 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
-<%= toolbar title: @page.title %>
 <% html_title t(:button_delete), @page.title %>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { h(@page.title) }
+    header.with_breadcrumbs(
+      breadcrumb_for_page(@project, @page)
+    )
+  end
+%>
 <%= form_tag({}, method: :delete, class: "form") do %>
   <p><strong><%= t(:text_wiki_page_destroy_question, descendants: @descendants_count) %></strong></p>
 

app/views/wiki/diff.html.erb

@@ -26,16 +26,27 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
-<% breadcrumb_paths(*(@page.ancestors.reverse.collect { |parent| link_to h(parent.breadcrumb_title), { id: parent, project_id: parent.project } } + [h(@page.breadcrumb_title)])) %>
-<%= toolbar title: h(@page.title) do %>
-  <li class="toolbar-item">
-    <%= link_to({ action: "history", id: @page }, class: "button") do %>
-      <%= op_icon("button--icon icon-wiki") %>
-      <span class="button--text"><%= t(:label_history) %></span>
-    <% end %>
-  </li>
-<% end %>
-
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { h(@page.title) }
+    header.with_breadcrumbs(
+      breadcrumb_for_page(@project, @page)
+    )
+    header.with_action_button(
+      tag: :a,
+      mobile_icon: :book,
+      mobile_label: t(:label_history),
+      size: :medium,
+      href: url_for(controller: "wiki", action: "history", id: @page),
+      aria: { label: t(:label_history) },
+      data: { "test-selector": "wiki-history-button" },
+      title: t(:label_history)
+    ) do |button|
+      button.with_leading_visual_icon(icon: "book")
+      t(:label_history)
+    end
+  end
+%>
 <p>
   <%= Version.model_name.human %> <%= link_to @diff.content_from.version, action: "show", id: @page, project_id: @page.project, version: @diff.content_from.version %>/<%= @page.version %>
   <em>(<%= @diff.content_from.user ? link_to_user(@diff.content_from.user) : t(:label_user_anonymous) %>, <%= format_time(@diff.content_from.created_at) %>)</em>

app/views/wiki/edit.html.erb

@@ -27,7 +27,14 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 <% html_title t(:label_edit), @page.title %>
-<% breadcrumb_paths(*(@page.ancestors.reverse.collect { |parent| link_to h(parent.breadcrumb_title), { id: parent, project_id: parent.project } } + [h(@page.breadcrumb_title)])) %>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { h(@page.title) }
+    header.with_breadcrumbs(
+      breadcrumb_for_page(@project, @page)
+    )
+  end
+%>
 <%= labelled_tabular_form_for @page,
                               as: :page,
                               url: { action: "update", id: @page.slug.presence || @old_title },

app/views/wiki/edit_parent_page.html.erb

@@ -27,10 +27,15 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 
-<%= toolbar title: "#{t(:button_change_parent_page)}: #{@page.title}" %>
-
 <% html_title t("activerecord.models.wiki"), t(:button_change_parent_page) %>
-<% breadcrumb_paths(*(@page.ancestors.reverse.collect { |parent| link_to h(parent.breadcrumb_title), { id: parent, project_id: parent.project } } + [h(@page.breadcrumb_title)])) %>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { h(@page.title) }
+    header.with_breadcrumbs(
+      breadcrumb_for_page(@project, @page)
+    )
+  end
+%>
 <%= error_messages_for "page" %>
 
 <%= labelled_tabular_form_for @page, url: { id: @page, action: "update_parent_page" } do |f| %>

app/views/wiki/history.html.erb

@@ -26,10 +26,16 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
-<%= toolbar title: @page.title %>
 <% html_title t("activerecord.models.wiki"), t(:label_history) %>
-<% breadcrumb_paths(*(@page.ancestors.reverse.collect { |parent| link_to h(parent.breadcrumb_title), { id: parent, project_id: parent.project } } + [h(@page.breadcrumb_title)])) %>
-<h3><%= t(:label_history) %></h3>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { t(:label_history) }
+    header.with_breadcrumbs(
+      breadcrumb_for_page(@project, @page, t(:label_history))
+    )
+  end
+%>
+
 <%= form_tag({ action: "diff" }, method: :get) do %>
   <div class="generic-table--container"
        data-application-target="dynamic"

app/views/wiki/index.html.erb

@@ -26,19 +26,22 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
-
-<% if @related_page %>
-  <% breadcrumb_for_page(@related_page, t(:label_table_of_contents)) %>
-<% else %>
-  <% breadcrumb_paths(t(:label_table_of_contents)) %>
-<% end %>
-
-<%= toolbar title: t(:label_wiki_toc) do %>
-  <%= content_tag(:li, watcher_link(@wiki, User.current), class: "toolbar-item") %>
-<% end %>
-
 <% html_title t(:label_wiki_toc) %>
 
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title(test_selector: "wiki-toc-page-header-title") { t(:label_wiki_toc) }
+    header.with_breadcrumbs(
+      [
+        { href: project_overview_path(@project.id), text: @project.name },
+        { href: url_for({ controller: "/wiki", action: "index", project_id: @project.identifier, id: @related_page }), text: t("activerecord.models.wiki") },
+        t(:label_wiki_toc)
+      ]
+    )
+    watcher_action_button(header, @wiki)
+  end
+%>
+
 <div class="wiki-content">
   <%= render_page_hierarchy(@pages_by_parent_id, nil, timestamp: true) %>
 </div>

app/views/wiki/new.html.erb

@@ -27,8 +27,18 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 
-<% html_title t("create_new_page") %>
+<% html_title t(:create_wiki_page) %>
 
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { t(:create_wiki_page) }
+    header.with_breadcrumbs(
+      [{ href: project_overview_path(@project.id), text: @project.name },
+       { href: url_for({ controller: "/wiki", action: "index", project_id: @project.identifier }), text: t("activerecord.models.wiki") },
+       t(:create_wiki_page)]
+    )
+  end
+%>
 <%= labelled_tabular_form_for @page,
                               as: :page,
                               url: create_project_wiki_index_path(project_id: @project),

app/views/wiki/rename.html.erb

@@ -27,9 +27,16 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 
-<%= toolbar title: "#{t(:button_rename)} #{@original_title}" %>
 <% html_title t(:permission_rename_wiki_pages) %>
 <% breadcrumb_paths(*(@page.ancestors.reverse.collect { |parent| link_to h(parent.breadcrumb_title), { id: parent, project_id: parent.project } } + [h(@page.breadcrumb_title)])) %>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { h(@page.title) }
+    header.with_breadcrumbs(
+      breadcrumb_for_page(@project, @page)
+    )
+  end
+%>
 <%= error_messages_for "page" %>
 
 <%= labelled_tabular_form_for @page, url: { id: @page, action: "rename" }, as: :page do |f| %>

app/views/wiki/show.html.erb

@@ -26,6 +26,10 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
+<%= render(WikiPages::ShowPageHeaderComponent.new(page: @page, project: @project, editable: @editable)) %>
+<% if @show_create %>
+  <%= render(WikiPages::ShowSubHeaderComponent.new(page: @page, project: @project)) %>
+<% end %>
 
 <%= call_hook :wiki_navigation %>
 <% if @page.current_version? %>
@@ -39,103 +43,6 @@ See COPYRIGHT and LICENSE files for more details.
 <% @formatted_text = format_text @page, :text, attachments: @page.attachments %>
 <% description strip_tags(@formatted_text) %>
 
-<%= toolbar title: title, html: { class: "-with-dropdown" } do %>
-  <% if @editable %>
-    <% if @page && User.current.allowed_in_project?(:edit_wiki_pages, @project) %>
-      <li class="toolbar-item">
-          <%= link_to(
-                { controller: "/wiki", action: "new_child", project_id: @project.identifier, id: @page },
-                { class: "button -primary",
-                  aria: { label: t("wiki.index.no_results_content_text") },
-                  title: t("wiki.index.no_results_content_text") }
-              ) do %>
-            <%= op_icon("button--icon icon-add") %>
-            <span class="button--text"><%= t(:create_new_page) %></span>
-          <% end %>
-      </li>
-    <% end %>
-    <% if @page.current_version? %>
-      <li class="toolbar-item">
-        <%= link_to_if_authorized(
-              { action: "edit", id: @page },
-              { aria: { label: t(:button_edit) },
-                title: t(:button_edit),
-                class: "button" }
-            ) do %>
-          <%= op_icon("button--icon icon-edit") %>
-          <span class="button--text"><%= t(:button_edit) %></span>
-        <% end %>
-      </li>
-    <% end %>
-    <li class="toolbar-item hidden-for-tablet">
-      <%= watcher_link(@page.object, User.current) %>
-    </li>
-    <% unless @page.current_version? %>
-      <li class="toolbar-item  hidden-for-mobile">
-        <%= link_to(t(:label_history), { action: "history", id: @page }, class: "button icon-wiki") %>
-      </li>
-    <% end %>
-  <% end %>
-  <li class="toolbar-item drop-down">
-    <a href="#" aria-haspopup="true" title="<%= t(:label_more) %>" class="button">
-      <%= op_icon("button--icon icon-show-more hidden-for-desktop") %>
-      <span class="button--text"><%= t(:label_more) %></span>
-      <%= op_icon("button--dropdown-indicator") %>
-    </a>
-    <ul style="display:none;" class="menu-drop-down-container">
-      <% if @editable %>
-        <%= li_unless_nil(link_to_if_authorized(t(:button_lock), { action: "protect", id: @page, protected: 1 }, method: :post, class: "icon-context icon-locked")) if !@page.protected? %>
-        <%= li_unless_nil(link_to_if_authorized(t(:button_unlock), { action: "protect", id: @page, protected: 0 }, method: :post, class: "icon-context icon-unlocked")) if @page.protected? %>
-        <% if @page.current_version? %>
-          <%= li_unless_nil(
-                link_to_if_authorized(
-                  t(:button_rename),
-                  { action: "rename", id: @page },
-                  class: "icon-context icon-rename"
-                )
-              ) %>
-          <%= li_unless_nil(
-                link_to_if_authorized(
-                  t(:button_change_parent_page),
-                  { action: "edit_parent_page", id: @page },
-                  class: "icon-context icon-link"
-                )
-              ) %>
-        <% end %>
-        <%= li_unless_nil(link_to_if_authorized(t(:button_delete), { action: "destroy", id: @page }, method: :delete, data: { confirm: t(:text_are_you_sure) }, class: "icon-context icon-delete")) %>
-        <%= li_unless_nil(link_to_if_authorized(t(:button_rollback), { action: "edit", id: @page, version: @page.version }, class: "icon-context icon-cancel")) unless @page.current_version? %>
-      <% end %>
-      <%= li_unless_nil(link_to_if_authorized(t(:label_history), { action: "history", id: @page }, class: "icon-context icon-activity-history")) %>
-      <%= li_unless_nil(link_to_if_authorized(t(:button_manage_menu_entry), { controller: "/wiki_menu_items", action: "edit", project_id: @project.identifier, id: @page }, class: "icon-context icon-settings")) %>
-      <li>
-        <%= link_to t(:button_print),
-                    "",
-                    title: t("wiki.print_hint"),
-                    class: "icon-context icon-print",
-                    data: {
-                      controller: "print",
-                      action: "print#triggerPrint"
-                    } %>
-      </li>
-      <% if User.current.allowed_in_project?(:export_wiki_pages, @project) %>
-        <section data-augmented-model-wrapper
-                 data-modal-class-name="wiki-export---modal">
-          <li>
-            <%= link_to I18n.t("js.label_export"),
-                        "",
-                        title: I18n.t("js.label_export"),
-                        class: "modal-delivery-element--activation-link icon-context icon-export" %>
-          </li>
-          <%= render partial: "wiki/wiki_export_modal" %>
-        </section>
-      <% end %>
-      <%= li_unless_nil(link_to_if_authorized(t(:label_table_of_contents), { controller: "/wiki", action: "index", project_id: @project.identifier, id: @page }, class: "icon-context icon-view-list")) %>
-    </ul>
-  </li>
-<% end %>
-
-<% breadcrumb_paths(*(@page.ancestors.reverse.collect { |parent| link_to h(parent.breadcrumb_title), { id: parent, project_id: parent.project } } + [h(@page.breadcrumb_title)])) %>
-
 <% if params[:version] %>
   <hr>
   <div class="wiki-version--details">

app/views/wiki_menu_items/edit.html.erb

@@ -27,10 +27,15 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { h(@page.title) }
+    header.with_breadcrumbs(
+      breadcrumb_for_page(@project, @page)
+    )
+  end
+%>
 <%= error_messages_for "wiki_menu_item" %>
-
-<% breadcrumb_paths(*@page.ancestors.reverse.collect { |parent| link_to h(parent.title), { id: parent.title, project_id: parent.project } }.push(@page_title)) %>
-<%= toolbar title: t(:wiki_menu_item_for, title: @page_title) %>
 <%= form_for @wiki_menu_item, html: { id: "wiki_menu_item_form", class: "menu-item-form", method: :put }, url: wiki_menu_item_path(@project, @page) do |form| %>
 <p class="item-name">
   <%= form.label :title, t(:label_menu_item_name), { id: "item-name" } %>

app/views/wiki_menu_items/select_main_menu_item.html.erb

@@ -26,8 +26,14 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
-<%= toolbar title: t(:label_select_main_menu_item) %>
-
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { h(@page.title) }
+    header.with_breadcrumbs(
+      breadcrumb_for_page(@project, @page, t(:label_select_main_menu_item))
+    )
+  end
+%>
 <p><%= t :wiki_menu_item_new_main_item_explanation %></p>
 
 <%= labelled_tabular_form_with model: false, scope: :wiki_page, url: { action: "replace_main_menu_item" } do |f| %>

app/views/work_packages/reports/report.html.erb

@@ -27,7 +27,17 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 <% html_title t(:label_summary) %>
-<%= toolbar title: t(:label_summary) %>
+
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title(test_selector: "summary-page-header-title") { t(:label_summary) }
+    header.with_breadcrumbs(
+      [{ href: project_overview_path(@project.id), text: @project.name },
+       { href: project_work_packages_path(@project), text: t(:label_work_package_plural) },
+       t(:label_summary)]
+    )
+  end
+%>
 <% @reports.each do |report| %>
   <%= render partial: "report_category", locals: { report: report } %>
 <% end %>

app/views/work_packages/reports/report_details.html.erb

@@ -28,7 +28,18 @@ See COPYRIGHT and LICENSE files for more details.
 ++#%>
 
 <% html_title t(:label_summary) %>
-<%= toolbar title: t(:label_summary) %>
+
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { t(:label_summary) }
+    header.with_breadcrumbs(
+      [{ href: project_overview_path(@project.id), text: @project.name },
+       { href: project_work_packages_path(@project), text: t(:label_work_package_plural) },
+       t(:label_summary)]
+    )
+  end
+%>
+
 <div class="form--fieldset">
   <div class="form--fieldset-legend"><%= @report.report_type %></div>
 

config/locales/en.yml

@@ -1891,7 +1891,8 @@ en:
       failed: 'Could not copy project "%{source_project_name}" to project "%{target_project_name}".'
       succeeded: 'Copied project "%{source_project_name}" to "%{target_project_name}".'
 
-  create_new_page: "Wiki page"
+  create_wiki_page: "Create new wiki page"
+  create_wiki_page_button: "Wiki page"
 
   date:
     abbr_day_names: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

modules/backlogs/app/views/version_settings/edit.html.erb

@@ -1,36 +0,0 @@
-<%#-- copyright
-OpenProject is an open source project management software.
-Copyright (C) the OpenProject GmbH
-
-This program is free software; you can redistribute it and/or
-modify it under the terms of the GNU General Public License version 3.
-
-OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
-Copyright (C) 2006-2013 Jean-Philippe Lang
-Copyright (C) 2010-2013 the ChiliProject Team
-
-This program is free software; you can redistribute it and/or
-modify it under the terms of the GNU General Public License
-as published by the Free Software Foundation; either version 2
-of the License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program; if not, write to the Free Software
-Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-
-See COPYRIGHT and LICENSE files for more details.
-
-++#%>
-
-<%= toolbar title: t(:label_version) %>
-<% html_title t(:label_version) %>
-
-<%= labelled_tabular_form_with model: @version, url: project_version_path(@project, @version), html: { method: :put } do |f| %>
-  <%= render partial: "form", locals: { f: } %>
-  <%= styled_button_tag t(:button_save), class: "-primary -with-icon icon-checkmark" %>
-<% end %>

modules/backlogs/config/routes.rb

@@ -61,8 +61,6 @@ Rails.application.routes.draw do
     end
   end
 
-  get "projects/:project_id/versions/:id/edit" => "version_settings#edit"
-
   scope "admin" do
     resource :backlogs,
              only: %i[show update],

spec/controllers/wiki_controller_spec.rb

@@ -1072,7 +1072,7 @@ RSpec.describe WikiController do
           get "index", params: { id: @wiki_menu_item.name, project_id: project.id }
 
           expect(response).to be_successful
-          assert_select "#content h2", text: "Table of Contents"
+          assert_select '[data-test-selector="wiki-toc-page-header-title"]', text: "Table of Contents"
           assert_select "#main-menu a.#{@wiki_menu_item.menu_identifier}-menu-item.selected"
         end
       end
@@ -1230,9 +1230,7 @@ RSpec.describe WikiController do
               get "show", params: { project_id: project.id }
 
               expect(response).to be_successful
-
-              assert_select ".toolbar-items a[href='#{new_child_project_wiki_path(project_id: project, id: 'wiki')}']",
-                            "Wiki page"
+              assert_select '[data-test-selector="wiki-new-child-button"]', "Wiki page"
             end
           end
 

spec/features/menu_items/wiki_menu_item_spec.rb

@@ -92,8 +92,8 @@ RSpec.describe "Wiki menu items",
     visit project_wiki_path(project, wiki_page)
 
     # creating the menu item with the pages name for the menu item
-    click_link_or_button "More"
-    click_link_or_button "Configure menu item"
+    page.find_test_selector("wiki-more-dropdown-menu").click
+    page.find_test_selector("wiki-configure-menu-action-menu-item").click
 
     choose "Show as menu item in project navigation"
 
@@ -108,15 +108,14 @@ RSpec.describe "Wiki menu items",
       .to have_css(".main-item-wrapper", text: wiki_page.title)
 
     # clicking the menu item leads to the page
-    click_link_or_button wiki_page.title
-
+    find(".wiki-menu--main-item", text: wiki_page.title).click
     expect(page)
       .to have_current_path(project_wiki_path(project, wiki_page))
 
     # modifying the menu item to a different name and to be a subpage
 
-    click_link_or_button "More"
-    click_link_or_button "Configure menu item"
+    page.find_test_selector("wiki-more-dropdown-menu").click
+    page.find_test_selector("wiki-configure-menu-action-menu-item").click
     wait_for_network_idle
 
     fill_in "Name of menu item", with: "Custom page name"
@@ -134,7 +133,7 @@ RSpec.describe "Wiki menu items",
     expect(page)
       .to have_css(".wiki-menu--sub-item", text: "Custom page name")
 
-    click_link_or_button "Custom page name"
+    find(".wiki-menu--sub-item", text: "Custom page name").click
     wait_for_network_idle
 
     expect(page)
@@ -149,9 +148,9 @@ RSpec.describe "Wiki menu items",
     # deleting the page will remove the menu item
     visit project_wiki_path(project, wiki_page)
 
-    click_link_or_button "More"
+    page.find_test_selector("wiki-more-dropdown-menu").click
     accept_alert do
-      click_link_or_button "Delete"
+      page.find_test_selector("wiki-delete-action-menu-item").click
     end
 
     within "#menu-sidebar" do
@@ -163,8 +162,8 @@ RSpec.describe "Wiki menu items",
     MenuItems::WikiMenuItem.where(navigatable_id: project.wiki.id, name: "wiki").delete_all
     visit project_wiki_path(project, other_wiki_page)
 
-    click_link_or_button "More"
-    click_link_or_button "Configure menu item"
+    page.find_test_selector("wiki-more-dropdown-menu").click
+    page.find_test_selector("wiki-configure-menu-action-menu-item").click
 
     choose "Do not show this wikipage in project navigation"
 

spec/features/wiki/adding_editing_history_spec.rb

@@ -83,13 +83,10 @@ RSpec.describe "wiki pages", :js, :selenium, with_settings: { journal_aggregatio
     click_button "Save"
 
     expect_and_dismiss_flash(message: "Successful creation.")
-    expect(page).to have_css(".title-container", text: "New page")
+    expect(page).to have_test_selector("wiki-page-header-title", text: "New page")
     expect(page).to have_css(".wiki-content", text: content_first_version)
 
-    within ".toolbar-items" do
-      SeleniumHubWaiter.wait
-      click_on "Edit"
-    end
+    page.find_test_selector("wiki-edit-action-button").click
 
     find(".ck-content").set(content_second_version)
 
@@ -97,11 +94,8 @@ RSpec.describe "wiki pages", :js, :selenium, with_settings: { journal_aggregatio
     click_button "Save"
     expect(page).to have_css(".wiki-content", text: content_second_version)
 
-    within ".toolbar-items" do
-      SeleniumHubWaiter.wait
-      click_on "More"
-      click_on "History"
-    end
+    page.find_test_selector("wiki-more-dropdown-menu").click
+    page.find_test_selector("wiki-history-action-menu-item").click
 
     SeleniumHubWaiter.wait
     click_on "View differences"
@@ -111,9 +105,8 @@ RSpec.describe "wiki pages", :js, :selenium, with_settings: { journal_aggregatio
       expect(page).to have_css("del.diffmod", text: "first")
     end
 
-    SeleniumHubWaiter.wait
     # Go back to history
-    find(".button", text: "History").click
+    page.find_test_selector("wiki-history-button").click
 
     # Click on first version
     # to determine text (Regression test #31531)
@@ -133,10 +126,7 @@ RSpec.describe "wiki pages", :js, :selenium, with_settings: { journal_aggregatio
 
     visit project_wiki_path(project, "new page")
 
-    within ".toolbar-items" do
-      SeleniumHubWaiter.wait
-      click_on "Edit"
-    end
+    page.find_test_selector("wiki-edit-action-button").click
 
     find(".ck-content").set(content_third_version)
 
@@ -145,11 +135,8 @@ RSpec.describe "wiki pages", :js, :selenium, with_settings: { journal_aggregatio
     SeleniumHubWaiter.wait
     click_button "Save"
 
-    within ".toolbar-items" do
-      SeleniumHubWaiter.wait
-      click_on "More"
-      click_on "History"
-    end
+    page.find_test_selector("wiki-more-dropdown-menu").click
+    page.find_test_selector("wiki-history-action-menu-item").click
 
     expect(page).to have_css("tr.wiki-page-version:last-of-type .author", text: other_user.name)
     expect(page).to have_css("tr.wiki-page-version:last-of-type .comments", text: other_user_comment)

spec/features/wiki/attachment_upload_spec.rb

@@ -61,9 +61,7 @@ RSpec.describe "Upload attachment to wiki page", :js, :selenium do
     expect(page).to have_content("Image uploaded the first time")
     attachments_list.expect_attached("image.png")
 
-    within ".toolbar-items" do
-      click_on "Edit"
-    end
+    page.find_test_selector("wiki-edit-action-button").click
 
     # Replace the image with a named attachment URL (Regression #28381)
     editor.wait_until_loaded
@@ -118,10 +116,7 @@ RSpec.describe "Upload attachment to wiki page", :js, :selenium do
 
     # required sleep otherwise clicking on the Edit button doesn't do anything
     SeleniumHubWaiter.wait
-
-    within ".toolbar-items" do
-      click_on "Edit"
-    end
+    page.find_test_selector("wiki-edit-action-button").click
 
     # adding an image
     editor.attachments_list.drag_enter

spec/features/wiki/child_pages_spec.rb

@@ -62,8 +62,9 @@ RSpec.describe "wiki child pages", :js, :selenium do
     click_button "Save"
 
     # hierarchy displayed in the breadcrumb
-    expect(page).to have_css("#breadcrumb #{test_selector('op-breadcrumb')}",
-                             text: parent_page.title.to_s)
+    within('[data-test-selector="wiki-page-header-breadcrumbs"]') do
+      expect(page).to have_text(parent_page.title.to_s)
+    end
 
     # hierarchy displayed in the sidebar
     expect(page).to have_css(".pages-hierarchy",

spec/features/wiki/rename_spec.rb

@@ -46,9 +46,8 @@ RSpec.describe "Wiki page", :js do
   it "allows renaming" do
     visit project_wiki_path(project, wiki_page)
 
-    SeleniumHubWaiter.wait
-    click_link "More"
-    click_link "Rename"
+    page.find_test_selector("wiki-more-dropdown-menu").click
+    page.find_test_selector("wiki-rename-action-menu-item").click
 
     SeleniumHubWaiter.wait
     fill_in "Title", with: rename_name
@@ -67,7 +66,9 @@ RSpec.describe "Wiki page", :js do
     end
 
     # But the application uses the new name preferably
-    click_link rename_name
+    within(".menu-wiki-pages-tree") do
+      click_link rename_name
+    end
 
     expect(page)
       .to have_current_path(project_wiki_path(project, "rename-name"))

spec/features/wiki/wiki_page_navigation_spec.rb

@@ -53,7 +53,7 @@ RSpec.describe "Wiki page navigation spec", :js do
 
     expect(page).to have_css("div.wiki-content")
 
-    expect(page).to have_css(".title-container h2", text: "Wiki Page No. 55")
+    expect(page).to have_test_selector("wiki-page-header-title", text: "Wiki Page No. 55")
 
     # Expect scrolled to menu node
     expect_element_in_view page.find(".tree-menu--item.-selected", text: "Wiki Page No. 55")

spec/features/wiki/wiki_unicode_spec.rb

@@ -90,7 +90,7 @@ RSpec.describe "Wiki unicode title spec", :js do
     find(".ck-content").base.send_keys(wiki_body)
     click_button "Save"
 
-    expect(page).to have_css(".title-container h2", text: "Wiki")
+    expect(page).to have_test_selector("wiki-page-header-title", text: "Wiki")
     expect(page).to have_css("a.wiki-page", count: 5)
   end
 
@@ -105,7 +105,7 @@ RSpec.describe "Wiki unicode title spec", :js do
       expect(target_link[:href]).to match("/wiki/#{expected_slugs[i]}")
       target_link.click
 
-      expect(page).to have_css(".title-container h2", text: title)
+      expect(page).to have_test_selector("wiki-page-header-title", text: title)
     end
   end
 end

spec/features/work_packages/table/queries/summary_spec.rb

@@ -45,7 +45,7 @@ RSpec.describe "Work package query summary item", :js do
 
   it "allows users to visit the summary page" do
     find(".op-submenu--item-action", text: "Summary", wait: 10).click
-    expect(page).to have_css("h2", text: "Summary")
+    expect(page).to have_test_selector("summary-page-header-title", text: "Summary")
     expect(page).to have_css("td", text: work_package.type.name)
   end
 end

spec/features/wysiwyg/macros/child_pages_spec.rb

@@ -120,8 +120,7 @@ RSpec.describe "Wysiwyg child pages spec", :js do
           expect(page).to have_no_css(".pages-hierarchy", text: "Parent page")
           expect(page).to have_css("h1", text: "My page")
 
-          SeleniumHubWaiter.wait
-          find(".toolbar .icon-edit").click
+          page.find_test_selector("wiki-edit-action-button").click
         end
 
         editor.in_editor do |_container, _editable|
@@ -153,8 +152,7 @@ RSpec.describe "Wysiwyg child pages spec", :js do
           expect(page).to have_css(".pages-hierarchy", text: "Parent page")
           expect(page).to have_css("h1", text: "My page")
 
-          SeleniumHubWaiter.wait
-          find(".toolbar .icon-edit").click
+          page.find_test_selector("wiki-edit-action-button").click
         end
       end
     end