Merge branch 'mle/338012-click-breadcrumb' into 'master'

Make breadcrumb toggle inline

See merge request gitlab-org/gitlab!72754

app/assets/javascripts/breadcrumb.js

 import $ from 'jquery';
-import { hide } from '~/tooltips';
 
 export const addTooltipToEl = (el) => {
   const textEl = el.querySelector('.js-breadcrumb-item-text');
@@ -19,16 +18,23 @@ export default () => {
       .filter((el) => !el.classList.contains('dropdown'))
       .map((el) => el.querySelector('a'))
       .filter((el) => el);
-    const $expander = $('.js-breadcrumbs-collapsed-expander');
+    const $expanderBtn = $('.js-breadcrumbs-collapsed-expander');
 
     topLevelLinks.forEach((el) => addTooltipToEl(el));
 
-    $expander.closest('.dropdown').on('show.bs.dropdown hide.bs.dropdown', (e) => {
-      const $el = $('.js-breadcrumbs-collapsed-expander', e.currentTarget);
+    $expanderBtn.on('click', () => {
+      const detailItems = $('.breadcrumbs-detail-item');
+      const hiddenClass = 'gl-display-none!';
 
-      $el.toggleClass('open');
+      $.each(detailItems, (_key, item) => {
+        $(item).toggleClass(hiddenClass);
+      });
+
+      // remove the ellipsis
+      $('li.expander').remove();
 
-      hide($el);
+      // set focus on first breadcrumb item
+      $('.breadcrumb-item-text').first().focus();
     });
   }
 };

app/helpers/breadcrumbs_helper.rb

@@ -27,10 +27,10 @@ module BreadcrumbsHelper
     end
   end
 
-  def add_to_breadcrumb_dropdown(link, location: :before)
-    @breadcrumb_dropdown_links ||= {}
-    @breadcrumb_dropdown_links[location] ||= []
-    @breadcrumb_dropdown_links[location] << link
+  def add_to_breadcrumb_collapsed_links(link, location: :before)
+    @breadcrumb_collapsed_links ||= {}
+    @breadcrumb_collapsed_links[location] ||= []
+    @breadcrumb_collapsed_links[location] << link
   end
 
   def push_to_schema_breadcrumb(text, link)

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_collapsed_links(group_title_link(parent), 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/helpers/wiki_helper.rb

@@ -9,7 +9,7 @@ module WikiHelper
     if page.persisted?
       titles << page.human_title
       breadcrumb_title(page.human_title)
-      wiki_breadcrumb_dropdown_links(page.slug)
+      wiki_breadcrumb_collapsed_links(page.slug)
     end
 
     titles << action if action
@@ -39,14 +39,14 @@ module WikiHelper
       .join(' / ')
   end
 
-  def wiki_breadcrumb_dropdown_links(page_slug)
+  def wiki_breadcrumb_collapsed_links(page_slug)
     page_slug_split = page_slug.split('/')
     page_slug_split.pop(1)
     current_slug = ""
     page_slug_split
       .map do |dir_or_page|
         current_slug = "#{current_slug}#{dir_or_page}/"
-        add_to_breadcrumb_dropdown link_to(WikiPage.unhyphenize(dir_or_page).capitalize, wiki_page_path(@wiki, current_slug)), location: :after
+        add_to_breadcrumb_collapsed_links link_to(WikiPage.unhyphenize(dir_or_page).capitalize, wiki_page_path(@wiki, current_slug)), location: :after
       end
   end
 

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_dropdown.html.haml → app/views/layouts/nav/breadcrumbs/_collapsed_inline_list.html.haml

 - dropdown_location = local_assigns.fetch(:location, nil)
-- button_tooltip = local_assigns.fetch(:title, _("Show parent pages"))
-- if defined?(@breadcrumb_dropdown_links) && @breadcrumb_dropdown_links.key?(dropdown_location)
-  %li.dropdown
-    %button.text-expander.has-tooltip.js-breadcrumbs-collapsed-expander{ type: "button", data: { toggle: "dropdown", container: "body" }, "aria-label": button_tooltip, title: button_tooltip }
+- button_tooltip = local_assigns.fetch(:title, _("Show all breadcrumbs"))
+- if defined?(@breadcrumb_collapsed_links) && @breadcrumb_collapsed_links.key?(dropdown_location)
+  %li.expander
+    %button.text-expander.has-tooltip.js-breadcrumbs-collapsed-expander{ 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")
-    .dropdown-menu
-      %ul
-        - @breadcrumb_dropdown_links[dropdown_location].each_with_index do |link, index|
-          %li{ style: "text-indent: #{[index * 16, 60].min}px;" }= link
+  - @breadcrumb_collapsed_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

@@ -31614,6 +31614,9 @@ msgstr ""
 msgid "Show all activity"
 msgstr ""
 
+msgid "Show all breadcrumbs"
+msgstr ""
+
 msgid "Show all issues."
 msgstr ""
 
@@ -31668,12 +31671,6 @@ msgstr ""
 msgid "Show one file at a time"
 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
 

spec/helpers/wiki_helper_spec.rb

@@ -8,7 +8,7 @@ RSpec.describe WikiHelper do
 
     it 'sets the title for the show action' do
       expect(helper).to receive(:breadcrumb_title).with(page.human_title)
-      expect(helper).to receive(:wiki_breadcrumb_dropdown_links).with(page.slug)
+      expect(helper).to receive(:wiki_breadcrumb_collapsed_links).with(page.slug)
       expect(helper).to receive(:page_title).with(page.human_title, 'Wiki')
       expect(helper).to receive(:add_to_breadcrumbs).with('Wiki', helper.wiki_path(page.wiki))
 
@@ -17,7 +17,7 @@ RSpec.describe WikiHelper do
 
     it 'sets the title for a custom action' do
       expect(helper).to receive(:breadcrumb_title).with(page.human_title)
-      expect(helper).to receive(:wiki_breadcrumb_dropdown_links).with(page.slug)
+      expect(helper).to receive(:wiki_breadcrumb_collapsed_links).with(page.slug)
       expect(helper).to receive(:page_title).with('Edit', page.human_title, 'Wiki')
       expect(helper).to receive(:add_to_breadcrumbs).with('Wiki', helper.wiki_path(page.wiki))
 
@@ -27,7 +27,7 @@ RSpec.describe WikiHelper do
     it 'sets the title for an unsaved page' do
       expect(page).to receive(:persisted?).and_return(false)
       expect(helper).not_to receive(:breadcrumb_title)
-      expect(helper).not_to receive(:wiki_breadcrumb_dropdown_links)
+      expect(helper).not_to receive(:wiki_breadcrumb_collapsed_links)
       expect(helper).to receive(:page_title).with('Wiki')
       expect(helper).to receive(:add_to_breadcrumbs).with('Wiki', helper.wiki_path(page.wiki))