Merge branch 'breadcrumbs-improvements' into 'master'

Improvements to breadcrumbs

Closes #35269 and #36460

See merge request !13582

app/assets/javascripts/breadcrumb.js

+export const addTooltipToEl = (el) => {
+  const textEl = el.querySelector('.js-breadcrumb-item-text');
+
+  if (textEl && textEl.scrollWidth > textEl.offsetWidth) {
+    el.setAttribute('title', el.textContent);
+    el.setAttribute('data-container', 'body');
+    el.classList.add('has-tooltip');
+  }
+};
+
+export default () => {
+  const breadcrumbs = document.querySelector('.js-breadcrumbs-list');
+
+  if (breadcrumbs) {
+    const topLevelLinks = [...breadcrumbs.children].filter(el => !el.classList.contains('dropdown'))
+      .map(el => el.querySelector('a'))
+      .filter(el => el);
+    const $expander = $('.js-breadcrumbs-collapsed-expander');
+
+    topLevelLinks.forEach(el => addTooltipToEl(el));
+
+    $expander.closest('.dropdown')
+      .on('show.bs.dropdown hide.bs.dropdown', (e) => {
+        $('.js-breadcrumbs-collapsed-expander', e.currentTarget).toggleClass('open')
+          .tooltip('hide');
+      });
+  }
+};

app/assets/javascripts/dispatcher.js

@@ -41,7 +41,6 @@ import Issue from './issue';
 import BindInOut from './behaviors/bind_in_out';
 import DeleteModal from './branches/branches_delete_modal';
 import Group from './group';
-import GroupName from './group_name';
 import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
 import setupProjectEdit from './project_edit';
@@ -554,9 +553,6 @@ import initChangesDropdown from './init_changes_dropdown';
         case 'root':
           new UserCallout();
           break;
-        case 'groups':
-          new GroupName();
-          break;
         case 'profiles':
           new NotificationsForm();
           new NotificationsDropdown();
@@ -564,7 +560,6 @@ import initChangesDropdown from './init_changes_dropdown';
         case 'projects':
           new Project();
           new ProjectAvatar();
-          new GroupName();
           switch (path[1]) {
             case 'compare':
               new CompareAutocomplete();

app/assets/javascripts/group_name.js

-import _ from 'underscore';
-
-export default class GroupName {
-  constructor() {
-    this.titleContainer = document.querySelector('.js-title-container');
-    this.title = this.titleContainer.querySelector('.title');
-
-    if (this.title) {
-      this.titleWidth = this.title.offsetWidth;
-      this.groupTitle = this.titleContainer.querySelector('.group-title');
-      this.groups = this.titleContainer.querySelectorAll('.group-path');
-      this.toggle = null;
-      this.isHidden = false;
-      this.init();
-    }
-  }
-
-  init() {
-    if (this.groups.length > 0) {
-      this.groups[this.groups.length - 1].classList.remove('hidable');
-      this.toggleHandler();
-      window.addEventListener('resize', _.debounce(this.toggleHandler.bind(this), 100));
-    }
-    this.render();
-  }
-
-  toggleHandler() {
-    if (this.titleWidth > this.titleContainer.offsetWidth) {
-      if (!this.toggle) this.createToggle();
-      this.showToggle();
-    } else if (this.toggle) {
-      this.hideToggle();
-    }
-  }
-
-  createToggle() {
-    this.toggle = document.createElement('button');
-    this.toggle.setAttribute('type', 'button');
-    this.toggle.className = 'text-expander group-name-toggle';
-    this.toggle.setAttribute('aria-label', 'Toggle full path');
-    this.toggle.innerHTML = '<i class="fa fa-ellipsis-h" aria-hidden="true"></i>';
-    this.toggle.addEventListener('click', this.toggleGroups.bind(this));
-    this.title.insertBefore(this.toggle, this.groupTitle);
-    this.toggleGroups();
-  }
-
-  showToggle() {
-    this.title.classList.add('wrap');
-    this.toggle.classList.remove('hidden');
-    if (this.isHidden) this.groupTitle.classList.add('hidden');
-  }
-
-  hideToggle() {
-    this.title.classList.remove('wrap');
-    this.toggle.classList.add('hidden');
-    if (this.isHidden) this.groupTitle.classList.remove('hidden');
-  }
-
-  toggleGroups() {
-    this.isHidden = !this.isHidden;
-    this.groupTitle.classList.toggle('hidden');
-  }
-
-  render() {
-    this.title.classList.remove('initializing');
-  }
-}

app/assets/javascripts/main.js

@@ -144,6 +144,7 @@ import './smart_interval';
 import './star';
 import './subscription';
 import './subscription_select';
+import initBreadcrumbs from './breadcrumb';
 
 import './dispatcher';
 
@@ -181,6 +182,8 @@ $(function () {
   var bootstrapBreakpoint = bp.getBreakpointSize();
   var fitSidebarForSize;
 
+  initBreadcrumbs();
+
   // Set the default path for all cookies to GitLab's root directory
   Cookies.defaults.path = gon.relative_url_root || '/';
 

app/assets/stylesheets/framework/dropdowns.scss

@@ -829,6 +829,7 @@
   }
 }
 
+@include new-style-dropdown('.breadcrumbs-list .dropdown ');
 @include new-style-dropdown('.js-namespace-select + ');
 
 header.navbar-gitlab-new .header-content .dropdown-menu.projects-dropdown-menu {

app/assets/stylesheets/new_nav.scss

 @import "framework/variables";
 @import 'framework/tw_bootstrap_variables';
 @import "bootstrap/variables";
+@import "framework/mixins";
 
 .content-wrapper.page-with-new-nav {
   margin-top: $new-navbar-height;
@@ -422,109 +423,38 @@ header.navbar-gitlab-new {
 
 .breadcrumbs {
   display: flex;
-  min-height: 61px;
+  min-height: 48px;
   color: $gl-text-color;
-  border-bottom: 1px solid $border-color;
-
-  .dropdown-toggle-caret {
-    position: relative;
-    top: -1px;
-    padding: 0 5px;
-    color: $gl-text-color-secondary;
-    font-size: 10px;
-    line-height: 1;
-    background: none;
-    border: 0;
-
-    &:focus {
-      outline: 0;
-    }
-  }
-
-  // TODO: fallback to global style
-  .dropdown-menu {
-    .divider {
-      margin: 6px 0;
-    }
-
-    li {
-      padding: 0 1px;
-
-      a {
-        border-radius: 0;
-        padding: 8px 16px;
-
-        &.is-focused,
-        &:hover,
-        &:active,
-        &:focus {
-          background-color: $gray-darker;
-        }
-      }
-    }
-  }
 }
 
 .breadcrumbs-container {
+  display: -webkit-flex;
   display: flex;
   width: 100%;
   position: relative;
+  padding-top: $gl-padding;
+  padding-bottom: $gl-padding;
   align-items: center;
-
-  .dropdown-menu-projects {
-    margin-top: -$gl-padding;
-    margin-left: $gl-padding;
-  }
+  border-bottom: 1px solid $border-color;
 }
 
 .breadcrumbs-links {
+  -webkit-flex: 1;
   flex: 1;
   min-width: 0;
   align-self: center;
-  color: $gl-text-color-quaternary;
-
-  a {
-    color: $gl-text-color-secondary;
-
-    &:not(:first-child),
-    &.group-path {
-      margin-left: 4px;
-    }
-
-    &:not(:last-of-type),
-    &.group-path {
-      margin-right: 3px;
-    }
-  }
-
-  .title {
-    display: inline-block;
-
-    > a {
-      &:last-of-type:not(:first-child) {
-        font-weight: $gl-font-weight-bold;
-      }
-    }
-  }
+  color: $gl-text-color-secondary;
 
   .avatar-tile {
-    margin-right: 5px;
+    margin-right: 4px;
     border: 1px solid $border-color;
     border-radius: 50%;
     vertical-align: sub;
-
-    &.identicon {
-      float: left;
-      width: 16px;
-      height: 16px;
-      margin-top: 2px;
-      font-size: 10px;
-    }
   }
 
   .text-expander {
-    margin-left: 4px;
-    margin-right: 4px;
+    margin-left: 0;
+    margin-right: 2px;
 
     > i {
       position: relative;
@@ -533,37 +463,52 @@ header.navbar-gitlab-new {
   }
 }
 
-.breadcrumbs-extra {
+.breadcrumbs-list {
+  display: -webkit-flex;
   display: flex;
-  flex: 0 0 auto;
-  margin-left: auto;
-}
+  flex-wrap: wrap;
+  margin-bottom: 0;
+  line-height: 16px;
 
-.breadcrumbs-sub-title {
-  margin: 2px 0;
-  font-size: 16px;
-  font-weight: $gl-font-weight-normal;
-  line-height: 1;
-
-  ul {
-    margin: 0;
-  }
-
-  li {
-    display: inline-block;
+  > li {
+    display: flex;
+    align-items: center;
+    position: relative;
 
     &:not(:last-child) {
-      &::after {
-        content: "/";
-        margin: 0 2px 0 5px;
-        color: rgba($black, .65);
-      }
+      margin-right: 20px;
     }
 
-    &:last-child a {
-      font-weight: $gl-font-weight-bold;
+    > a {
+      font-size: 12px;
+      color: currentColor;
     }
   }
+}
+
+.breadcrumb-item-text {
+  @include str-truncated(128px);
+}
+
+.breadcrumbs-list-angle {
+  position: absolute;
+  right: -12px;
+  top: 50%;
+  color: $gl-text-color-tertiary;
+  transform: translateY(-50%);
+}
+
+.breadcrumbs-extra {
+  display: flex;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+.breadcrumbs-sub-title {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
 
   a {
     color: $gl-text-color;

app/assets/stylesheets/new_sidebar.scss

@@ -45,7 +45,6 @@ $new-sidebar-collapsed-width: 50px;
   margin-right: 2px;
 
   a {
-    border-bottom: 1px solid $border-color;
     font-weight: $gl-font-weight-bold;
     display: flex;
     align-items: center;

app/assets/stylesheets/pages/commits.scss

@@ -141,17 +141,17 @@
   display: inline-block;
   background: $white-light;
   color: $gl-text-color-secondary;
-  padding: 0 5px;
+  padding: 0 4px;
   cursor: pointer;
   border: 1px solid $border-gray-dark;
   border-radius: $border-radius-default;
   margin-left: 5px;
-  font-size: $gl-font-size;
+  font-size: 12px;
   line-height: $gl-font-size;
   outline: none;
 
   &.open {
-    background: $gray-light;
+    background-color: darken($gray-light, 10%);
     box-shadow: inset 0 0 2px rgba($black, 0.2);
   }
 

app/helpers/breadcrumbs_helper.rb

@@ -22,4 +22,16 @@ module BreadcrumbsHelper
 
     @breadcrumb_title = title
   end
+
+  def breadcrumb_list_item(link)
+    content_tag "li" do
+      link + icon("angle-right", class: "breadcrumbs-list-angle")
+    end
+  end
+
+  def add_to_breadcrumb_dropdown(link, location: :before)
+    @breadcrumb_dropdown_links ||= {}
+    @breadcrumb_dropdown_links[location] ||= []
+    @breadcrumb_dropdown_links[location] << link
+  end
 end

app/helpers/groups_helper.rb

@@ -15,18 +15,20 @@ module GroupsHelper
     @has_group_title = true
     full_title = ''
 
-    group.ancestors.reverse.each do |parent|
-      full_title += group_title_link(parent, hidable: true)
-
-      full_title += '<span class="hidable"> / </span>'.html_safe
+    group.ancestors.reverse.each_with_index do |parent, index|
+      if index > 0
+        add_to_breadcrumb_dropdown(group_title_link(parent, hidable: false, show_avatar: true), location: :before)
+      else
+        full_title += breadcrumb_list_item group_title_link(parent, hidable: false)
+      end
     end
 
-    full_title += group_title_link(group)
-    full_title += ' &middot; '.html_safe + link_to(simple_sanitize(name), url, class: 'group-path') if name
+    full_title += render "layouts/nav/breadcrumbs/collapsed_dropdown", location: :before, title: _("Show parent subgroups")
 
-    content_tag :span, class: 'group-title' do
-      full_title.html_safe
-    end
+    full_title += breadcrumb_list_item group_title_link(group)
+    full_title += ' &middot; '.html_safe + link_to(simple_sanitize(name), url, class: 'group-path breadcrumb-item-text js-breadcrumb-item-text') if name
+
+    full_title.html_safe
   end
 
   def projects_lfs_status(group)
@@ -65,11 +67,11 @@ module GroupsHelper
 
   private
 
-  def group_title_link(group, hidable: false)
-    link_to(group_path(group), class: "group-path #{'hidable' if hidable}") do
+  def group_title_link(group, hidable: false, show_avatar: false)
+    link_to(group_path(group), class: "group-path breadcrumb-item-text js-breadcrumb-item-text #{'hidable' if hidable}") do
       output =
-        if !Rails.env.test?
-          image_tag(group_icon(group), class: "avatar-tile", width: 16, height: 16)
+        if (group.try(:avatar_url) || show_avatar) && !Rails.env.test?
+          image_tag(group_icon(group), class: "avatar-tile", width: 15, height: 15)
         else
           ""
         end

app/helpers/issuables_helper.rb

@@ -126,12 +126,8 @@ module IssuablesHelper
   end
 
   def issuable_meta(issuable, project, text)
-    output = content_tag(:strong, class: "identifier") do
-      concat("#{text} ")
-      concat(to_url_reference(issuable))
-    end
-
-    output << " opened #{time_ago_with_tooltip(issuable.created_at)} by ".html_safe
+    output = ""
+    output << "Opened #{time_ago_with_tooltip(issuable.created_at)} by ".html_safe
     output << content_tag(:strong) do
       author_output = link_to_member(project, issuable.author, size: 24, mobile_classes: "hidden-xs", tooltip: true)
       author_output << link_to_member(project, issuable.author, size: 24, by_username: true, avatar: false, mobile_classes: "hidden-sm hidden-md hidden-lg")
@@ -141,7 +137,7 @@ module IssuablesHelper
     output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "hidden-xs hidden-sm")
     output << content_tag(:span, (issuable.task_status_short if issuable.tasks?), id: "task_status_short", class: "hidden-md hidden-lg")
 
-    output
+    output.html_safe
   end
 
   def issuable_todo(issuable)

app/helpers/page_layout_helper.rb

@@ -80,7 +80,9 @@ module PageLayoutHelper
       @header_title     = title
       @header_title_url = title_url
     else
-      @header_title_url ? link_to(@header_title, @header_title_url) : @header_title
+      return @header_title unless @header_title_url
+
+      breadcrumb_list_item(link_to(@header_title, @header_title_url))
     end
   end
 

app/helpers/projects_helper.rb

@@ -54,25 +54,28 @@ module ProjectsHelper
   def project_title(project)
     namespace_link =
       if project.group
-        group_title(project.group)
+        group_title(project.group, nil, nil)
       else
         owner = project.namespace.owner
         link_to(simple_sanitize(owner.name), user_path(owner))
       end
 
-    project_link = link_to project_path(project), { class: "project-item-select-holder" } do
+    project_link = link_to project_path(project) do
       output =
-        if !Rails.env.test?
-          project_icon(project, alt: project.name, class: 'avatar-tile', width: 16, height: 16)
+        if project.avatar_url && !Rails.env.test?
+          project_icon(project, alt: project.name, class: 'avatar-tile', width: 15, height: 15)
         else
           ""
         end
 
-      output << simple_sanitize(project.name)
+      output << content_tag("span", simple_sanitize(project.name), class: "breadcrumb-item-text js-breadcrumb-item-text")
       output.html_safe
     end
 
-    "#{namespace_link} / #{project_link}".html_safe
+    namespace_link = breadcrumb_list_item(namespace_link) unless project.group
+    project_link = breadcrumb_list_item project_link
+
+    "#{namespace_link} #{project_link}".html_safe
   end
 
   def remove_project_message(project)

app/helpers/wiki_helper.rb

@@ -10,4 +10,15 @@ module WikiHelper
       .map { |dir_or_page| WikiPage.unhyphenize(dir_or_page).capitalize }
       .join(' / ')
   end
+
+  def wiki_breadcrumb_dropdown_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, project_wiki_path(@project, current_slug)), location: :after
+      end
+  end
 end

app/views/admin/applications/edit.html.haml

+- add_to_breadcrumbs "Applications", admin_applications_path
+- breadcrumb_title @application.name
 - page_title "Edit", @application.name, "Applications"
 
 %h3.page-title Edit application

app/views/admin/cohorts/index.html.haml

+- breadcrumb_title "Cohorts"
 - @no_container = true
 = render "admin/dashboard/head"
 

app/views/admin/dashboard/index.html.haml

 - @no_container = true
+- breadcrumb_title "Dashboard"
 = render "admin/dashboard/head"
 
 %div{ class: container_class }

app/views/admin/groups/show.html.haml

+- add_to_breadcrumbs "Groups", admin_groups_path
+- breadcrumb_title @group.name
 - page_title @group.name, "Groups"
 %h3.page-title
   Group: #{@group.full_name}

app/views/admin/hooks/edit.html.haml

+- add_to_breadcrumbs "System Hooks", admin_hooks_path
 - page_title 'Edit System Hook'
 %h3.page-title
   Edit System Hook

app/views/admin/jobs/index.html.haml

+- breadcrumb_title "Jobs"
 - @no_container = true
 = render "admin/dashboard/head"