Merge branch 'new-nav-fix-contextual-breadcrumbs' into 'master'

Contextual breadcrumb title fixes

Closes #34030 and #34033

See merge request !12602

app/assets/javascripts/dispatcher.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, wrap-iife, no-shadow, consistent-return, one-var, one-var-declaration-per-line, camelcase, default-case, no-new, quotes, no-duplicate-case, no-case-declarations, no-fallthrough, max-len */
+/* global ProjectSelect */
 /* global ShortcutsNavigation */
 /* global IssuableIndex */
 /* global ShortcutsIssuable */
@@ -157,6 +158,9 @@ import PerformanceBar from './performance_bar';
           shortcut_handler = new ShortcutsIssuable();
           new ZenMode();
           break;
+        case 'dashboard:milestones:index':
+          new ProjectSelect();
+          break;
         case 'projects:milestones:show':
         case 'groups:milestones:show':
         case 'dashboard:milestones:show':
@@ -166,6 +170,7 @@ import PerformanceBar from './performance_bar';
         case 'groups:issues':
         case 'groups:merge_requests':
           new UsersSelect();
+          new ProjectSelect();
           break;
         case 'dashboard:todos:index':
           new Todos();
@@ -259,6 +264,7 @@ import PerformanceBar from './performance_bar';
           break;
         case 'dashboard:issues':
         case 'dashboard:merge_requests':
+          new ProjectSelect();
           new UsersSelect();
           break;
         case 'projects:commit:show':

app/assets/javascripts/group_name.js

@@ -5,6 +5,8 @@ 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');
@@ -12,6 +14,7 @@ export default class GroupName {
       this.isHidden = false;
       this.init();
     }
+  }
 
   init() {
     if (this.groups.length > 0) {

app/assets/javascripts/project_select.js

@@ -104,6 +104,14 @@ import Api from './api';
           dropdownCssClass: "ajax-project-dropdown"
         });
       });
+
+      $('.new-project-item-select-button').on('click', function() {
+        $('.project-item-select', this.parentNode).select2('open');
+      });
+
+      $('.project-item-select').on('click', function() {
+        window.location = `${$(this).val()}/${this.dataset.relativePath}`;
+      });
     }
 
     return ProjectSelect;

app/assets/stylesheets/new_nav.scss

@@ -330,7 +330,7 @@ header.navbar-gitlab-new {
     white-space: nowrap;
 
     > a {
-      &:last-of-type {
+      &:last-of-type:not(:first-child) {
         font-weight: 600;
       }
     }
@@ -384,6 +384,7 @@ header.navbar-gitlab-new {
       &::after {
         content: "/";
         margin: 0 2px 0 5px;
+        color: rgba($black, .65);
       }
     }
 
@@ -396,3 +397,13 @@ header.navbar-gitlab-new {
     color: $gl-text-color;
   }
 }
+
+.top-area {
+  .nav-controls-new-nav {
+    .dropdown {
+      @media (min-width: $screen-sm-min) {
+        margin-right: 0;
+      }
+    }
+  }
+}

app/helpers/breadcrumbs_helper.rb

+module BreadcrumbsHelper
+  def add_to_breadcrumbs(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
+
+  def breadcrumb_title(title)
+    return if defined?(@breadcrumb_title)
+
+    @breadcrumb_title = title
+  end
+end

app/helpers/page_layout_helper.rb

@@ -4,6 +4,10 @@ module PageLayoutHelper
 
     @page_title.push(*titles.compact) if titles.any?
 
+    if show_new_nav? && titles.any? && !defined?(@breadcrumb_title)
+      @breadcrumb_title = @page_title.last
+    end
+
     # Segments are seperated by middot
     @page_title.join(" \u00b7 ")
   end

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

 - page_title "Edit", @application.name, "Applications"
+
 %h3.page-title Edit application
 - @url = admin_application_path(@application)
 = render 'form', application: @application

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

+- breadcrumb_title "Applications"
 - page_title "New Application"
+
 %h3.page-title New application
 - @url = admin_applications_path
 = render 'form', application: @application

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/dashboard/_groups_head.html.haml

+- if show_new_nav? && current_user.can_create_group?
+  - content_for :breadcrumbs_extra do
+    = link_to "New group", new_group_path, class: "btn btn-new"
+
 .top-area
   %ul.nav-links
     = nav_link(page: dashboard_groups_path) do
@@ -6,9 +10,8 @@
     = nav_link(page: explore_groups_path) do
       = link_to explore_groups_path, title: 'Explore public groups' do
         Explore public groups
-  .nav-controls
+  .nav-controls{ class: ("nav-controls-new-nav" if show_new_nav?) }
     = render 'shared/groups/search_form'
     = render 'shared/groups/dropdown'
     - if current_user.can_create_group?
-      = link_to new_group_path, class: "btn btn-new" do
-        New group
+      = link_to "New group", new_group_path, class: "btn btn-new #{("visible-xs" if show_new_nav?)}"

app/views/dashboard/_projects_head.html.haml

 = content_for :flash_message do
   = render 'shared/project_limit'
+
+- if show_new_nav? && current_user.can_create_project?
+  - content_for :breadcrumbs_extra do
+    = link_to "New project", new_project_path, class: 'btn btn-new'
+
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
@@ -14,9 +19,8 @@
       = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do
         Explore projects
 
-  .nav-controls
+  .nav-controls{ class: ("nav-controls-new-nav" if show_new_nav?) }
     = render 'shared/projects/search_form'
     = render 'shared/projects/dropdown'
     - if current_user.can_create_project?
-      = link_to new_project_path, class: 'btn btn-new' do
-        New project
+      = link_to "New project", new_project_path, class: "btn btn-new #{("visible-xs" if show_new_nav?)}"

app/views/dashboard/_snippets_head.html.haml

+- if show_new_nav? && current_user
+  - content_for :breadcrumbs_extra do
+    = link_to "New snippet", new_snippet_path, class: "btn btn-new", title: "New snippet"
+
 .top-area
   %ul.nav-links
     = nav_link(page: dashboard_snippets_path, html_options: {class: 'home'}) do
@@ -8,6 +12,5 @@
         Explore Snippets
 
   - if current_user
-    .nav-controls.hidden-xs
-      = link_to new_snippet_path, class: "btn btn-new", title: "New snippet" do
-        New snippet
+    .nav-controls.hidden-xs{ class: ("hidden-sm hidden-md hidden-lg" if show_new_nav?) }
+      = link_to "New snippet", new_snippet_path, class: "btn btn-new", title: "New snippet"

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
   = auto_discovery_link_tag(:atom, params.merge(rss_url_options), title: "#{current_user.name} issues")
 
+- if show_new_nav?
+  - content_for :breadcrumbs_extra do
+    = link_to params.merge(rss_url_options), class: 'btn has-tooltip append-right-10', title: 'Subscribe' do
+      = icon('rss')
+    = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", with_feature_enabled: 'issues'
+
 .top-area
   = render 'shared/issuable/nav', type: :issues
-  .nav-controls
+  .nav-controls{ class: ("visible-xs" if show_new_nav?) }
     = link_to params.merge(rss_url_options), class: 'btn has-tooltip', title: 'Subscribe' do
       = icon('rss')
     = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", with_feature_enabled: 'issues'

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)
 
+- if show_new_nav?
+  - content_for :breadcrumbs_extra do
+    = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New merge request", with_feature_enabled: 'merge_requests'
+
 .top-area
   = render 'shared/issuable/nav', type: :merge_requests
-  .nav-controls
+  .nav-controls{ class: ("visible-xs" if show_new_nav?) }
     = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New merge request", with_feature_enabled: 'merge_requests'
 
 = render 'shared/issuable/filter', type: :merge_requests

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

@@ -2,10 +2,14 @@
 - page_title 'Milestones'
 - header_title 'Milestones', dashboard_milestones_path
 
+- if show_new_nav?
+  - content_for :breadcrumbs_extra do
+    = render 'shared/new_project_item_select', path: 'milestones/new', label: 'New milestone', include_groups: true
+
 .top-area
   = render 'shared/milestones_filter', counts: @milestone_states
 
-  .nav-controls
+  .nav-controls{ class: ("visible-xs" if show_new_nav?) }
     = render 'shared/new_project_item_select', path: 'milestones/new', label: 'New milestone', include_groups: true
 
 .milestones

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

 - @no_container = true
 - @hide_top_links = true
-- @breadcrumb_title = "Projects"
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, dashboard_projects_url(rss_url_options), title: "All activity")

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

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

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/explore/snippets/index.html.haml

+- @hide_top_links = true
 - page_title    "Snippets"
 - header_title  "Snippets", snippets_path
 

app/views/groups/issues.html.haml

 - page_title "Issues"
+- group_issues_exists = group_issues(@group).exists?
 = render "head_issues"
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, params.merge(rss_url_options), title: "#{@group.name} issues")
 
-- if group_issues(@group).exists?
+- if show_new_nav? && group_issues_exists
+  - content_for :breadcrumbs_extra do
+    = link_to params.merge(rss_url_options), class: 'btn btn-default append-right-10' do
+      = icon('rss')
+    = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue"
+
+- if group_issues_exists
   .top-area
     = render 'shared/issuable/nav', type: :issues
-    .nav-controls
+    .nav-controls{ class: ("visible-xs" if show_new_nav?) }
       = link_to params.merge(rss_url_options), class: 'btn' do
         = icon('rss')
         %span.icon-label

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

 - page_title 'Labels'
+- if show_new_nav? && can?(current_user, :admin_label, @group)
+  - content_for :breadcrumbs_extra do
+    = link_to "New label", new_group_label_path(@group), class: "btn btn-new"
+
 = render "groups/head_issues"
 
+
 .top-area.adjust
   .nav-text
     Labels can be applied to issues and merge requests. Group labels are available for any project within the group.
 
-  .nav-controls
+  .nav-controls{ class: ("visible-xs" if show_new_nav?) }
     - if can?(current_user, :admin_label, @group)
-      = link_to new_group_label_path(@group), class: "btn btn-new" do
-        New label
+      = link_to "New label", new_group_label_path(@group), class: "btn btn-new"
 
 .labels
   .other-labels

app/views/groups/labels/new.html.haml

+- breadcrumb_title "Labels"
 - page_title 'New Label'
 - header_title group_title(@group, 'Labels', group_labels_path(@group))
 

app/views/groups/merge_requests.html.haml

 - page_title "Merge Requests"
 
+- if show_new_nav? && current_user
+  - content_for :breadcrumbs_extra do
+    = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New merge request"
+
 - if @group_merge_requests.empty?
   = render 'shared/empty_states/merge_requests', project_select_button: true
 - else
   .top-area
     = render 'shared/issuable/nav', type: :merge_requests
     - if current_user
-      .nav-controls
+      .nav-controls{ class: ("visible-xs" if show_new_nav?) }
         = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New merge request"
 
   = render 'shared/issuable/filter', type: :merge_requests

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

 - page_title "Milestones"
+- if show_new_nav? && can?(current_user, :admin_milestones, @group)
+  - content_for :breadcrumbs_extra do
+    = link_to "New milestone", new_group_milestone_path(@group), class: "btn btn-new"
+
 = render "groups/head_issues"
 
 .top-area
   = render 'shared/milestones_filter', counts: @milestone_states
 
-  .nav-controls
+  .nav-controls{ class: ("visible-xs" if show_new_nav?) }
     - if can?(current_user, :admin_milestones, @group)
-      = link_to new_group_milestone_path(@group), class: "btn btn-new" do
-        New milestone
+      = link_to "New milestone", new_group_milestone_path(@group), class: "btn btn-new"
 
 .milestones
   %ul.content-list

app/views/groups/milestones/new.html.haml

+- breadcrumb_title "Milestones"
 - page_title "Milestones"
 - header_title group_title(@group, "Milestones", group_milestones_path(@group))
 

app/views/groups/new.html.haml

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

app/views/groups/show.html.haml

 - @no_container = true
+- breadcrumb_title "Group"
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity")

app/views/layouts/_page.html.haml

@@ -15,6 +15,7 @@
       - if show_new_nav?
         - if content_for?(:new_global_flash)
           = yield :new_global_flash
+        - unless @hide_breadcrumbs
           = render "layouts/nav/breadcrumbs"
       = render "layouts/flash"
       = yield :flash_message

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 +8,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/layouts/nav/_new_admin_sidebar.html.haml

@@ -13,7 +13,7 @@
         = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
           = link_to admin_root_path, title: 'Overview' do
             %span
-              Overview
+              Dashboard
         = nav_link(controller: [:admin, :projects]) do
           = link_to admin_projects_path, title: 'Projects' do
             %span

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

@@ -3,7 +3,7 @@
     = link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do
       Projects
 
-  = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
+  = nav_link(controller: ['dashboard/groups', 'explore/groups']) do
     = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups', title: 'Groups' do
       Groups
 

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
+- if show_new_nav?
+  - add_to_breadcrumbs("Account", profile_account_path)
+- else
+  - header_title "Two-Factor Authentication", profile_two_factor_auth_path
 - @content_class = "limit-container-width" unless fluid_layout
+
 = render 'profiles/head'
 
 - if inject_u2f_api?

app/views/projects/activity.html.haml

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

app/views/projects/blob/edit.html.haml

+- breadcrumb_title "Repository"
 - @no_container = true
 - page_title "Edit", @blob.path, @ref
 - content_for :page_specific_javascripts do

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

+- breadcrumb_title "Repository"
 - page_title "New File", @path.presence, @ref
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')

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

+- breadcrumb_title "Repository"
 - @no_container = true
 
 - page_title @blob.path, @ref

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

@@ -3,8 +3,7 @@
 - page_title "Boards"
 
 - if show_new_nav?
-  - content_for :sub_title_before do
-    %li= link_to "Issues", project_issues_path(@project)
+  - add_to_breadcrumbs("Issues", project_issues_path(@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?
+  - add_to_breadcrumbs("Repository", project_tree_path(@project))
+
 %div{ class: container_class }
   .top-area.adjust
     .nav-text

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

 - @no_container = true
+- breadcrumb_title _("Commits")
 
 - page_title _("Commits"), @ref
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_commits_url(@project, @ref, rss_url_options), title: "#{@project.name}:#{@ref} commits")
 
+- if show_new_nav?
+  - add_to_breadcrumbs("Repository", project_tree_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?
+  - add_to_breadcrumbs("Repository", project_tree_path(@project))
 = render "projects/commits/head"
 
 %div{ class: container_class }

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

 - @no_container = true
+- breadcrumb_title "Compare"
 - page_title "#{params[:from]}...#{params[:to]}"
+- if show_new_nav?
+  - add_to_breadcrumbs("Repository", project_tree_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?
+  - add_to_breadcrumbs("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/environments/index.html.haml

@@ -2,6 +2,9 @@
 - page_title "Environments"
 = render "projects/pipelines/head"
 
+- if show_new_nav?
+  - add_to_breadcrumbs("Pipelines", project_pipelines_path(@project))
+
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag("environments")

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

 - @no_container = true
+- breadcrumb_title "Environments"
 - page_title 'New Environment'
 = render "projects/pipelines/head"
 

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

 - @no_container = true
 - page_title "Charts"
+- if show_new_nav?
+  - add_to_breadcrumbs("Repository", project_tree_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

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

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

+- breadcrumb_title "Issues"
 - page_title "New Issue"
 
 %h3.page-title

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

@@ -2,6 +2,9 @@
 - page_title "Jobs"
 = render "projects/pipelines/head"
 
+- if show_new_nav?
+  - add_to_breadcrumbs("Pipelines", project_pipelines_path(@project))
+
 %div{ class: container_class }
   .top-area
     - build_path_proc = ->(scope) { project_jobs_path(@project, scope: scope) }

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

 - @no_container = true
 - page_title "Labels"
 - hide_class = ''
+
+- if show_new_nav? && can?(current_user, :admin_label, @project)
+  - content_for :breadcrumbs_extra do
+    = link_to "New label", new_namespace_project_label_path(@project.namespace, @project), class: "btn btn-new"
+
 = render "shared/mr_head"
 
 - if @labels.exists? || @prioritized_labels.exists?
@@ -9,7 +14,7 @@
       .nav-text
         Labels can be applied to issues and merge requests. Star a label to make it a priority label. Order the prioritized labels to change their relative priority, by dragging.
 
-      .nav-controls
+      .nav-controls{ class: ("visible-xs" if show_new_nav?) }
         - if can?(current_user, :admin_label, @project)
           = link_to new_project_label_path(@project), class: "btn btn-new" do
             New label

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

 - @no_container = true
+- breadcrumb_title "Labels"
 - page_title "New Label"
 = render "shared/mr_head"
 

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/milestones/index.html.haml

 - @no_container = true
 - page_title 'Milestones'
+
+- if show_new_nav?
+  - content_for :breadcrumbs_extra do
+    = link_to "New milestone", new_namespace_project_milestone_path(@project.namespace, @project), class: 'btn btn-new', title: 'New milestone'
+
 = render "shared/mr_head"
 
 %div{ class: container_class }

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

 - @no_container = true
+- breadcrumb_title "Milestones"
 - page_title "New Milestone"
 = render "shared/mr_head"
 

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

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

app/views/projects/new.html.haml

+- @breadcrumb_link = dashboard_projects_path
+- breadcrumb_title "Projects"
+- @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'
 
 - @no_container = true
 - page_title _("Pipeline Schedules")
+
+- if show_new_nav? && can?(current_user, :create_pipeline_schedule, @project)
+  - content_for :breadcrumbs_extra do
+    = link_to _('New schedule'), new_namespace_project_pipeline_schedule_path(@project.namespace, @project), class: 'btn btn-create'
+
+  - add_to_breadcrumbs("Pipelines", project_pipelines_path(@project))
+
 = render "projects/pipelines/head"
 
 %div{ class: container_class }
@@ -13,7 +22,7 @@
     = render "tabs", schedule_path_proc: schedule_path_proc, all_schedules: @all_schedules, scope: @scope
 
     - if can?(current_user, :create_pipeline_schedule, @project)
-      .nav-controls
+      .nav-controls{ class: ("visible-xs" if show_new_nav?) }
         = link_to new_project_pipeline_schedule_path(@project), class: 'btn btn-create' do
           %span= _('New schedule')
 

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?
+  - add_to_breadcrumbs("Pipelines", project_pipelines_path(@project))
+
 %h3.page-title
   = _("Schedule a new pipeline")
 %hr

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

 - @no_container = true
 - page_title _("Charts"), _("Pipelines")
+- if show_new_nav?
+  - add_to_breadcrumbs("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/pipelines/new.html.haml

+- breadcrumb_title "Pipelines"
 - page_title "New Pipeline"
 
 %h3.page-title

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

 - page_title "Members"
 
+- if show_new_nav?
+  - add_to_breadcrumbs("Settings", edit_project_path(@project))
+
 .row.prepend-top-default
   .col-lg-12
     %h4

app/views/projects/services/edit.html.haml

+- breadcrumb_title "Integrations"
 - page_title @service.title, "Services"
+
+- if show_new_nav?
+  - add_to_breadcrumbs("Settings", edit_project_path(@project))
+
 = render "projects/settings/head"
 = render 'form'

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

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

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

 - @content_class = "limit-container-width" unless fluid_layout
 - page_title 'Integrations'
+- if show_new_nav?
+  - add_to_breadcrumbs("Settings", edit_project_path(@project))
 = render "projects/settings/head"
 = render 'projects/hooks/index'
 = render 'projects/services/index'

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

 - page_title "Repository"
 - @content_class = "limit-container-width" unless fluid_layout
+
+- if show_new_nav?
+  - add_to_breadcrumbs("Settings", edit_project_path(@project))
+
 = render "projects/settings/head"
 
 - content_for :page_specific_javascripts do

app/views/projects/show.html.haml

 - @no_container = true
+- breadcrumb_title "Project"
 - @content_class = "limit-container-width" unless fluid_layout
 - flash_message_container = show_new_nav? ? :new_global_flash : :flash_message
 

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

 - page_title "Snippets"
 
+- if show_new_nav? && can?(current_user, :create_project_snippet, @project)
+  - content_for :breadcrumbs_extra do
+    = link_to "New snippet", new_namespace_project_snippet_path(@project.namespace, @project), class: "btn btn-new", title: "New snippet"
+
 - if current_user
   .top-area
     - include_private = @project.team.member?(current_user) || current_user.admin?
     = render partial: 'snippets/snippets_scope_menu', locals: { subject: @project, include_private: include_private }
 
-    .nav-controls.hidden-xs
+    .nav-controls{ class: ("visible-xs" if show_new_nav?) }
       - if can?(current_user, :create_project_snippet, @project)
-        = link_to new_project_snippet_path(@project), class: "btn btn-new", title: "New snippet" do
-          New snippet
-
-- if can?(current_user, :create_project_snippet, @project)
-  .visible-xs
-     
-    = link_to new_project_snippet_path(@project), class: "btn btn-new btn-block", title: "New snippet" do
-      New snippet
+        = link_to "New snippet", new_project_snippet_path(@project), class: "btn btn-new", title: "New snippet"
 
 = render 'snippets/snippets'

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

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

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

 - @no_container = true
+- breadcrumb_title _("Repository")
 - @content_class = "limit-container-width" unless fluid_layout
 
 - page_title @path.presence || _("Files"), @ref

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
+- breadcrumb_title "Search"
 - page_title @search_term
 
 .prepend-top-default

app/views/shared/_new_project_item_select.html.haml

 - if @projects.any?
   .project-item-select-holder
     = project_select_tag :project_path, class: "project-item-select", data: { include_groups: local_assigns[:include_groups], order_by: 'last_activity_at' }, with_feature_enabled: local_assigns[:with_feature_enabled]
-    %a.btn.btn-new.new-project-item-select-button
+    %a.btn.btn-new.new-project-item-select-button{ data: { relative_path: local_assigns[:path] } }
       = local_assigns[:label]
       = icon('caret-down')
-
-  :javascript
-    $('.new-project-item-select-button').on('click', function() {
-      $('.project-item-select').select2('open');
-    });
-
-    var relativePath = '#{local_assigns[:path]}';
-
-    $('.project-item-select').on('click', function() {
-      window.location = $(this).val() + '/' + relativePath;
-    });
-
-    new ProjectSelect()

app/views/snippets/new.html.haml

+- @hide_top_links = true
+- breadcrumb_title "Snippets"
 - page_title "New Snippet"
 %h3.page-title
   New Snippet

app/views/snippets/show.html.haml

+- @hide_top_links = true
 - @content_class = "limit-container-width limited-inner-width-container" unless fluid_layout
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", "Snippets"
 

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