Merge pull request #13962 from opf/implementation/50499-add-navigatio…

…nal-elements

feat[#50499]: Add navigational elements (breadcrumb and back buttons)

app/helpers/breadcrumb_helper.rb

@@ -27,36 +27,23 @@
 #++
 
 module BreadcrumbHelper
-  def full_breadcrumb
-    breadcrumb_list(*breadcrumb_paths)
-  end
-
-  def breadcrumb(*args)
-    elements = args.flatten
-    elements.any? ? content_tag('p', (args.join(' » ') + ' » ').html_safe, class: 'op-breadcrumb') : nil
-  end
-
-  def breadcrumb_list(*args)
-    elements = args.flatten
-    breadcrumb_elements = [content_tag(:li,
-                                       elements.shift.to_s,
-                                       class: 'first-breadcrumb-element')]
+  def full_breadcrumbs
+    items = breadcrumb_paths.compact
+    render(Primer::Beta::Breadcrumbs.new(test_selector: "op-breadcrumb" )) do |breadcrumbs|
+      items.each_with_index do |item, index|
+        item = anchor_string_to_object(item) if item.is_a?(String) && item.start_with?("\u003c")
 
-    breadcrumb_elements += elements.map do |element|
-      if element
-        content_tag(:li,
-                    h(element.to_s),
-                    class: "icon4 icon-small icon-arrow-right5")
+        if item.is_a?(Hash)
+          breadcrumbs.with_item(href: item[:href], classes: index == 0 ? "first-breadcrumb-element" : nil) { item[:text] }
+        else
+          breadcrumbs.with_item(href: "#", classes: index == 0 ? "first-breadcrumb-element" : nil) { item }
+        end
       end
     end
-
-    content_tag(:ul, breadcrumb_elements.join.html_safe, class: 'op-breadcrumb', 'data-test-selector': 'op-breadcrumb')
   end
 
   def breadcrumb_paths(*args)
-    if args.nil?
-      nil
-    elsif args.empty?
+    if args.empty?
       @breadcrumb_paths ||= [default_breadcrumb]
     else
       @breadcrumb_paths ||= []
@@ -71,4 +58,16 @@ def show_breadcrumb
       false
     end
   end
+
+  private
+
+  # transform anchor tag strings to {href, text} objects
+  # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
+  def anchor_string_to_object(html_string)
+    # Parse the HTML
+    doc = Nokogiri::HTML.fragment(html_string)
+    # Extract href and text
+    anchor = doc.at("a")
+    { href: anchor["href"], text: anchor.text }
+  end
 end

app/views/layouts/base.html.erb

@@ -118,7 +118,9 @@ See COPYRIGHT and LICENSE files for more details.
       <% if show_decoration %>
         <div id="breadcrumb" class="<%= initial_classes %><%= show_breadcrumb ? ' -show' : '' %>">
           <%= you_are_here_info %>
-          <%= full_breadcrumb %>
+          <div id="full_breadcrumbs">
+            <%= full_breadcrumbs %>
+          </div>
           <%= call_hook :view_layouts_base_breadcrumb %>
         </div>
       <% end %>

frontend/src/global_styles/openproject/_primer-adjustments.sass

@@ -58,3 +58,11 @@ ul.tabnav-tabs
 // or if it wasn't triggered by the keyboard (:focus-visible).
 button:focus:not(:focus-visible):not(:hover) + tool-tip
   visibility: hidden
+
+/* Remove margin-left: 2rem from Breadcrumbs */
+#breadcrumb
+  ol
+    margin-left: 0
+  .breadcrumb-item.breadcrumb-item-selected
+    a
+      pointer-events: none

modules/storages/app/controllers/storages/admin/storages_controller.rb

@@ -214,7 +214,7 @@ def default_breadcrumb
   # See: default_breadcrum above
   # Defines whether to show breadcrumbs on the page or not.
   def show_local_breadcrumb
-    !OpenProject::FeatureDecisions.storage_primer_design_active?
+    true
   end
 
   private

modules/storages/app/views/storages/admin/storages/edit.html.erb

@@ -28,6 +28,7 @@ See COPYRIGHT and LICENSE files for more details.
 ++#%>
 
 <% html_title t(:label_administration), t("project_module_storages"), t('label_edit_x', x: @storage.name) %>
+<% local_assigns[:additional_breadcrumb] = @storage.name %>
 
 <% if OpenProject::FeatureDecisions.storage_primer_design_active? %>
   <%= render(Primer::OpenProject::PageHeader.new) do |header| %>
@@ -37,6 +38,12 @@ See COPYRIGHT and LICENSE files for more details.
       <% end %>
     <% end %>
 
+    <% header.with_back_button(href: admin_settings_storages_path, 'aria-label':  I18n.t("button_back")) %>
+
+    <% header.with_parent_link(href: admin_settings_storages_path, 'aria-label':  I18n.t("button_back")) do %>
+      <%= t(:project_module_storages) %>
+    <% end %>
+
     <% header.with_actions do %>
       <%=
         primer_form_with(
@@ -64,7 +71,6 @@ See COPYRIGHT and LICENSE files for more details.
 
   <%= render(::Storages::Admin::StorageViewComponent.new(@storage)) %>
 <% else %>
-  <% local_assigns[:additional_breadcrumb] = @storage.name %>
   <%= toolbar title: t('label_edit_x', x: @storage.name) %>
 
   <%= render(::Storages::Admin::ConfigurationChecksComponent.new(storage: @storage)) %>

modules/storages/app/views/storages/admin/storages/new.html.erb

@@ -8,6 +8,12 @@
       <%= t("storages.label_new_file_storage") %>
     <% end %>
 
+    <% header.with_back_button(href: admin_settings_storages_path, 'aria-label':  I18n.t("button_back")) %>
+
+    <% header.with_parent_link(href: admin_settings_storages_path, 'aria-label':  I18n.t("button_back")) do %>
+      <%= t(:project_module_storages) %>
+    <% end %>
+
     <% header.with_description do %>
       <%=
         t("storages.instructions.new_storage",

modules/storages/app/views/storages/admin/storages/update.turbo_stream.erb

@@ -1,6 +1,16 @@
 <%= turbo_stream.update dom_id(@storage, :edit_storage_header) do %>
   <%= @storage.name %>
 <% end %>
+<%= turbo_stream.update :full_breadcrumbs do %>
+  <%
+    breadcrumb_paths(
+      link_to(t(:label_administration), admin_index_path),
+      default_breadcrumb,
+      @storage.name
+    )
+  %>
+  <%= full_breadcrumbs %>
+<% end %>
 
 <%= turbo_stream.update :storage_general_info_section do %>
   <%= render(::Storages::Admin::GeneralInfoComponent.new(@storage)) %>

modules/storages/spec/features/admin_storages_spec.rb

@@ -729,7 +729,7 @@
     ######### End Edit Automatically managed project folders #########
 
     # List of storages
-    page.find("ul.op-breadcrumb li", text: "File storages").click
+    page.find("#{test_selector('op-breadcrumb')} ol li", text: "File storages").click
 
     # Delete on List page
     page.find('td.buttons .icon-delete').click
@@ -771,7 +771,7 @@
 
         expect(page).not_to have_css('.flash.flash-error')
 
-        within('.op-breadcrumb') do
+        within(test_selector('op-breadcrumb')) do
           click_link 'File storages'
         end