improvements to breadcrumb titles, links & nesting

app/assets/javascripts/group_name.js

@@ -5,12 +5,15 @@ export default class GroupName {
   constructor() {
     this.titleContainer = document.querySelector('.js-title-container');
     this.title = this.titleContainer.querySelector('.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();
+
+    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() {

app/helpers/breadcrumbs_helper.rb

+module BreadcrumbsHelper
+  def breadcrumbs_extra_links(text, link)
+    @breadcrumbs_extra_links ||= []
+    @breadcrumbs_extra_links.push({
+      text: text,
+      link: link
+    })
+  end
+
+  def breadcrumb_title_link
+    return @breadcrumb_link if @breadcrumb_link
+
+    if controller.available_action?(:index)
+      url_for(action: "index")
+    else
+      request.path
+    end
+  end
+end

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

+- @breadcrumb_title = "Appearance"
 - page_title "Appearance"
 
 %h3.page-title

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

+- @breadcrumb_title = "Settings"
 - page_title "Settings"
 
 %h3.page-title Settings

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

+- @breadcrumb_title = "Messages"
 - page_title "Broadcast Messages"
 
 = render 'form'

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

+- @breadcrumb_title = "Messages"
 - page_title "Broadcast Messages"
 
 %h3.page-title

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

+- @breadcrumb_title = "System Hooks"
 - page_title 'System Hooks'
 %h3.page-title
   System hooks

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

+- @breadcrumb_title = "Services Templates"
 - page_title "Service Templates"
 %h3.page-title Service templates
 %p.light Service template allows you to set default values for project services

app/views/dashboard/activity.html.haml

+- @breadcrumb_title = "Activity"
 - @hide_top_links = true
 - @no_container = true
 

app/views/dashboard/issues.html.haml

+- @hide_top_links = true
 - page_title "Issues"
 - header_title  "Issues", issues_dashboard_path(assignee_id: current_user.id)
 = content_for :meta_tags do

app/views/dashboard/merge_requests.html.haml

+- @hide_top_links = true
 - page_title "Merge Requests"
 - header_title  "Merge Requests", merge_requests_dashboard_path(assignee_id: current_user.id)
 

app/views/dashboard/projects/starred.html.haml

+- @hide_top_links = true
 - @no_container = true
 
 - page_title "Starred Projects"

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

+- @hide_top_links = true
 - page_title "Todos"
 - header_title "Todos", dashboard_todos_path
 

app/views/explore/groups/index.html.haml

+- @hide_top_links = true
 - page_title    "Groups"
 - header_title  "Groups", dashboard_groups_path
 

app/views/explore/projects/index.html.haml

+- @hide_top_links = true
 - page_title    "Projects"
 - header_title  "Projects", dashboard_projects_path
 

app/views/explore/projects/starred.html.haml

+- @hide_top_links = true
 - page_title    "Projects"
 - header_title  "Projects", dashboard_projects_path
 

app/views/explore/projects/trending.html.haml

+- @hide_top_links = true
 - page_title    "Projects"
 - header_title  "Projects", dashboard_projects_path
 

app/views/groups/edit.html.haml

+- @breadcrumb_title = "Settings"
 = render "groups/settings_head"
 .panel.panel-default.prepend-top-default
   .panel-heading

app/views/groups/group_members/index.html.haml

+- @breadcrumb_title = "Members"
 - page_title "Members"
 
 .project-members-page.prepend-top-default

app/views/groups/issues.html.haml

+- @breadcrumb_title = "Issues"
 - page_title "Issues"
 - group_issues_exists = group_issues(@group).exists?
 = render "head_issues"

app/views/groups/merge_requests.html.haml

+- @breadcrumb_title = "Merge Requests"
 - page_title "Merge Requests"
 
 - if show_new_nav? && current_user

app/views/groups/new.html.haml

+- @hide_top_links = true
 - page_title    'New Group'
 - header_title  "Groups", dashboard_groups_path
 

app/views/layouts/_page.html.haml

@@ -14,7 +14,7 @@
       = render "layouts/broadcast"
       = render "layouts/flash"
       = yield :flash_message
-    - if show_new_nav?
+    - if show_new_nav? && !@hide_breadcrumbs
       = render "layouts/nav/breadcrumbs"
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
       .content{ id: "content-body" }

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

 - breadcrumb_title = @breadcrumb_title || controller.controller_name.humanize
+- breadcrumb_link = breadcrumb_title_link
 - hide_top_links = @hide_top_links || false
 
 %nav.breadcrumbs{ role: "navigation" }
@@ -8,12 +9,16 @@
         .title
           = link_to "GitLab", root_path
           \/
+          - if content_for?(:header_title_before)
+            = yield :header_title_before
+            \/
           = header_title
       %h2.breadcrumbs-sub-title
         %ul.list-unstyled
-          - if content_for?(:sub_title_before)
-            = yield :sub_title_before
-          %li= link_to breadcrumb_title, request.path
+          - if @breadcrumbs_extra_links
+            - @breadcrumbs_extra_links.each do |extra|
+              %li= link_to extra[:text], extra[:link]
+          %li= link_to breadcrumb_title, breadcrumb_link
     - if content_for?(:breadcrumbs_extra)
       .breadcrumbs-extra.hidden-xs= yield :breadcrumbs_extra
     = yield :header_content

app/views/profiles/audit_log.html.haml

+- @breadcrumb_title = "Authentication log"
 - page_title "Authentication log"
 - @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'

app/views/profiles/show.html.haml

+- @breadcrumb_title = "Profile"
 - @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'
 

app/views/profiles/two_factor_auths/show.html.haml

 - page_title 'Two-Factor Authentication', 'Account'
 - header_title "Two-Factor Authentication", profile_two_factor_auth_path
+- @breadcrumb_title = "Two-Factor Authentication"
 - @content_class = "limit-container-width" unless fluid_layout
+
+- if show_new_nav?
+  - content_for :header_title_before do
+    = link_to "User Settings", profile_path
+
 = render 'profiles/head'
 
 - if inject_u2f_api?

app/views/projects/activity.html.haml

 - @no_container = true
 - @breadcrumb_title = "Activity"
 
+- if show_new_nav?
+  - breadcrumbs_extra_links("Project", project_path(@project))
+
 - page_title "Activity"
 = render "projects/head"
 

app/views/projects/boards/_show.html.haml

 - @no_container = true
 - @content_class = "issue-boards-content"
+- @breadcrumb_title = "Board"
 - page_title "Boards"
 
 - if show_new_nav?
-  - content_for :sub_title_before do
-    %li= link_to "Issues", namespace_project_issues_path(@project.namespace, @project)
+  - breadcrumbs_extra_links("Issues", namespace_project_issues_path(@project.namespace, @project))
 
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag 'common_vue'

app/views/projects/branches/index.html.haml

@@ -2,6 +2,9 @@
 - page_title "Branches"
 = render "projects/commits/head"
 
+- if show_new_nav?
+  - breadcrumbs_extra_links("Repository", project_files_path(@project))
+
 %div{ class: container_class }
   .top-area.adjust
     .nav-text

app/views/projects/commits/show.html.haml

@@ -4,6 +4,9 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, namespace_project_commits_url(@project.namespace, @project, @ref, rss_url_options), title: "#{@project.name}:#{@ref} commits")
 
+- if show_new_nav?
+  - breadcrumbs_extra_links("Repository", project_files_path(@project))
+
 = content_for :sub_nav do
   = render "head"
 

app/views/projects/compare/index.html.haml

 - @no_container = true
 - page_title "Compare"
+- if show_new_nav?
+  - breadcrumbs_extra_links("Repository", project_files_path(@project))
 = render "projects/commits/head"
 
 %div{ class: container_class }

app/views/projects/compare/show.html.haml

 - @no_container = true
 - page_title "#{params[:from]}...#{params[:to]}"
+- if show_new_nav?
+  - breadcrumbs_extra_links("Repository", project_files_path(@project))
 = render "projects/commits/head"
 
 %div{ class: container_class }

app/views/projects/cycle_analytics/show.html.haml

 - @no_container = true
 - page_title "Cycle Analytics"
+- if show_new_nav?
+  - breadcrumbs_extra_links("Project", project_path(@project))
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('cycle_analytics')

app/views/projects/edit.html.haml

 - @content_class = "limit-container-width" unless fluid_layout
+- @breadcrumb_title = "Settings"
 
 = render "projects/settings/head"
 .project-edit-container

app/views/projects/graphs/charts.html.haml

 - @no_container = true
 - @breadcrumb_title = "Charts"
 - page_title "Charts"
+- if show_new_nav?
+  - breadcrumbs_extra_links("Repository", project_files_path(@project))
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_d3')
   = page_specific_javascript_bundle_tag('graphs')

app/views/projects/graphs/show.html.haml

@@ -4,6 +4,10 @@
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_d3')
   = page_specific_javascript_bundle_tag('graphs')
+
+- if show_new_nav?
+  - breadcrumbs_extra_links("Repository", project_files_path(@project))
+
 = render 'projects/commits/head'
 
 %div{ class: container_class }

app/views/projects/merge_requests/creations/new.html.haml

+- @breadcrumb_title = "Merge Requests"
 - page_title "New Merge Request"
 
 - if @merge_request.can_be_created && !params[:change_branches]

app/views/projects/network/show.html.haml

@@ -2,6 +2,8 @@
 - page_title "Graph", @ref
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('network')
+- if show_new_nav?
+  - breadcrumbs_extra_links("Repository", project_files_path(@project))
 = render "projects/commits/head"
 = render "head"
 %div{ class: container_class }

app/views/projects/new.html.haml

+- @hide_top_links = true
 - page_title    'New Project'
 - header_title  "Projects", dashboard_projects_path
 - visibility_level = params.dig(:project, :visibility_level) || default_project_visibility

app/views/projects/pipeline_schedules/index.html.haml

+- @breadcrumb_title = "Schedules"
+
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag 'common_vue'
   = webpack_bundle_tag 'schedules_index'
@@ -9,6 +11,8 @@
   - content_for :breadcrumbs_extra do
     = link_to _('New schedule'), new_namespace_project_pipeline_schedule_path(@project.namespace, @project), class: 'btn btn-create'
 
+  - breadcrumbs_extra_links("Pipelines", project_pipelines_path(@project))
+
 = render "projects/pipelines/head"
 
 %div{ class: container_class }

app/views/projects/pipeline_schedules/new.html.haml

+- @breadcrumb_title = "Schedules"
+- @breadcrumb_link = namespace_project_pipeline_schedules_path(@project.namespace, @project)
 - page_title _("New Pipeline Schedule")
 
+- if show_new_nav?
+  - breadcrumbs_extra_links("Pipelines", project_pipelines_path(@project))
+
 %h3.page-title
   = _("Schedule a new pipeline")
 %hr

app/views/projects/pipelines/charts.html.haml

 - @no_container = true
+- @breadcrumb_title = "Charts"
 - page_title "Charts", "Pipelines"
+- if show_new_nav?
+  - breadcrumbs_extra_links("Pipelines", project_pipelines_path(@project))
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_d3')
   = page_specific_javascript_bundle_tag('graphs')

app/views/projects/settings/ci_cd/show.html.haml

 - @content_class = "limit-container-width" unless fluid_layout
+- @breadcrumb_title = "Pipelines"
 - page_title "Pipelines"
+
+- if show_new_nav?
+  - breadcrumbs_extra_links("Settings", edit_project_path(@project))
+
 = render "projects/settings/head"
 
 = render 'projects/runners/index'

app/views/projects/tags/index.html.haml

@@ -3,6 +3,9 @@
 - page_title "Tags"
 = render "projects/commits/head"
 
+- if show_new_nav?
+  - breadcrumbs_extra_links("Repository", project_files_path(@project))
+
 .flex-list{ class: container_class }
   .top-area.adjust
     .nav-text.row-main-content

app/views/projects/wikis/show.html.haml

 - @content_class = "limit-container-width limit-container-width-sm" unless fluid_layout
+- @breadcrumb_title = "Wiki"
 - page_title @page.title.capitalize, "Wiki"
 
 .wiki-page-header.has-sidebar-toggle

app/views/search/show.html.haml

+- @hide_top_links = true
 - page_title @search_term
 
 .prepend-top-default

app/views/users/show.html.haml

+- @hide_top_links = true
+- @hide_breadcrumbs = true
 - page_title       @user.name
 - page_description @user.bio
 - content_for :page_specific_javascripts do