Update breadcrumb toggle to inline

Add the ability to toggle
the visibility of the parent
subgroups for breadcrumbs.

Changelog: changed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/72754

app/assets/javascripts/breadcrumb.js

@@ -20,6 +20,7 @@ export default () => {
       .map((el) => el.querySelector('a'))
       .filter((el) => el);
     const $expander = $('.js-breadcrumbs-collapsed-expander');
+    const $expanderInline = $('.js-breadcrumbs-collapsed-expander.inline-list');
 
     topLevelLinks.forEach((el) => addTooltipToEl(el));
 
@@ -30,5 +31,20 @@ export default () => {
 
       hide($el);
     });
+
+    $expanderInline.on('click', () => {
+      const detailItems = $('.breadcrumbs-detail-item');
+      const hiddenClass = 'gl-display-none!';
+
+      $.each(detailItems, (_key, item) => {
+        $(item).toggleClass(hiddenClass);
+      });
+
+      // remove the ellipsis
+      $('li.expander').remove();
+
+      // set focus on first breadcrumb item
+      $('.breadcrumb-item-text').first().focus();
+    });
   }
 };

app/helpers/groups_helper.rb

@@ -39,7 +39,7 @@ module GroupsHelper
 
     sorted_ancestors(group).with_route.reverse_each.with_index do |parent, index|
       if index > 0
-        add_to_breadcrumb_dropdown(group_title_link(parent, hidable: false, show_avatar: true, for_dropdown: true), location: :before)
+        add_to_breadcrumb_dropdown(group_title_link(parent, hidable: false, show_avatar: false, for_dropdown: false), location: :before)
       else
         full_title << breadcrumb_list_item(group_title_link(parent, hidable: false))
       end
@@ -47,7 +47,7 @@ module GroupsHelper
       push_to_schema_breadcrumb(simple_sanitize(parent.name), group_path(parent))
     end
 
-    full_title << render("layouts/nav/breadcrumbs/collapsed_dropdown", location: :before, title: _("Show parent subgroups"))
+    full_title << render("layouts/nav/breadcrumbs/collapsed_inline_list", location: :before, title: _("Show all breadcrumbs"))
 
     full_title << breadcrumb_list_item(group_title_link(group))
     push_to_schema_breadcrumb(simple_sanitize(group.name), group_path(group))

app/views/layouts/nav/_breadcrumbs.html.haml

@@ -16,7 +16,7 @@
         - if @breadcrumbs_extra_links
           - @breadcrumbs_extra_links.each do |extra|
             = breadcrumb_list_item link_to(extra[:text], extra[:link])
-        = render "layouts/nav/breadcrumbs/collapsed_dropdown", location: :after
+        = render "layouts/nav/breadcrumbs/collapsed_inline_list", location: :after
         - unless @skip_current_level_breadcrumb
           %li
             %h2.breadcrumbs-sub-title{ data: { qa_selector: 'breadcrumb_sub_title_content' } }

app/views/layouts/nav/breadcrumbs/_collapsed_inline_list.html.haml

+- dropdown_location = local_assigns.fetch(:location, nil)
+- button_tooltip = local_assigns.fetch(:title, _("Show all breadcrumbs"))
+- if defined?(@breadcrumb_dropdown_links) && @breadcrumb_dropdown_links.key?(dropdown_location)
+  %li.expander
+    %button.text-expander.has-tooltip.js-breadcrumbs-collapsed-expander.inline-list{ type: "button", data: { container: "body" }, "aria-label": button_tooltip, title: button_tooltip }
+      = sprite_icon("ellipsis_h", size: 12)
+    = sprite_icon("angle-right", size: 8, css_class: "breadcrumbs-list-angle")
+  - @breadcrumb_dropdown_links[dropdown_location].each_with_index do |link, index|
+    %li{ :class => "gl-display-none! breadcrumbs-detail-item" }
+      = link
+      = sprite_icon("angle-right", size: 8, css_class: "breadcrumbs-list-angle")

locale/gitlab.pot

@@ -31593,6 +31593,9 @@ msgstr ""
 msgid "Show all activity"
 msgstr ""
 
+msgid "Show all breadcrumbs"
+msgstr ""
+
 msgid "Show all issues."
 msgstr ""
 
@@ -31650,9 +31653,6 @@ msgstr ""
 msgid "Show parent pages"
 msgstr ""
 
-msgid "Show parent subgroups"
-msgstr ""
-
 msgid "Show the Closed list"
 msgstr ""
 

spec/helpers/groups_helper_spec.rb

@@ -92,7 +92,7 @@ RSpec.describe GroupsHelper do
       shared_examples 'correct ancestor order' do
         it 'outputs the groups in the correct order' do
           expect(subject)
-            .to match(%r{<li style="text-indent: 16px;"><a.*>#{deep_nested_group.name}.*</li>.*<a.*>#{very_deep_nested_group.name}</a>}m)
+            .to match(%r{<li><a.*>#{deep_nested_group.name}.*</li>.*<a.*>#{very_deep_nested_group.name}</a>}m)
         end
       end