Change single-item breadcrumbs to page titles

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

18 files changed, 93 insertions, 26 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 4ffb3e9ab42..4041f2b4479 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -51,6 +51,7 @@
 @import 'framework/blank';
 @import 'framework/wells';
 @import 'framework/page_header';
+@import 'framework/page_title';
 @import 'framework/awards';
 @import 'framework/images';
 @import 'framework/broadcast_messages';
diff --git a/app/assets/stylesheets/framework/page_title.scss b/app/assets/stylesheets/framework/page_title.scss
new file mode 100644
index 00000000000..e8302953a63
--- /dev/null
+++ b/app/assets/stylesheets/framework/page_title.scss
@@ -0,0 +1,18 @@
+.page-title-holder {
+  @extend .d-flex;
+  @extend .align-items-center;
+
+  padding-top: $gl-padding-top;
+  border-bottom: 1px solid $border-color;
+
+  .page-title {
+    margin: $gl-padding 0;
+    font-size: 1.75em;
+    font-weight: $gl-font-weight-bold;
+    color: $gl-text-color;
+  }
+
+  .page-title-controls {
+    margin-left: auto;
+  }
+}
diff --git a/app/views/dashboard/_activity_head.html.haml b/app/views/dashboard/_activity_head.html.haml
index 7503548fa3d..ec1a3fef435 100644
--- a/app/views/dashboard/_activity_head.html.haml
+++ b/app/views/dashboard/_activity_head.html.haml
@@ -1,3 +1,6 @@
+.page-title-holder
+  %h1.page-title= _('Activity')
+
 .top-area
   %ul.nav-links.nav.nav-tabs
     %li{ class: active_when(params[:filter].nil?) }>
diff --git a/app/views/dashboard/_groups_head.html.haml b/app/views/dashboard/_groups_head.html.haml
index 727784141bb..8ab5dc37f34 100644
--- a/app/views/dashboard/_groups_head.html.haml
+++ b/app/views/dashboard/_groups_head.html.haml
@@ -1,3 +1,10 @@
+.page-title-holder
+  %h1.page-title= _('Groups')
+
+  - if current_user.can_create_group?
+    .page-title-controls
+      = link_to _("New group"), new_group_path, class: "btn btn-success"
+
 .top-area
   %ul.nav-links.mobile-separator.nav.nav-tabs
     = nav_link(page: dashboard_groups_path) do
@@ -9,5 +16,3 @@
   .nav-controls
     = render 'shared/groups/search_form'
     = render 'shared/groups/dropdown'
-    - if current_user.can_create_group?
-      = link_to _("New group"), new_group_path, class: "btn btn-success"
diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index 69a2e408073..1050945b15a 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -1,6 +1,13 @@
 = content_for :flash_message do
   = render 'shared/project_limit'
 
+.page-title-holder
+  %h1.page-title= _('Projects')
+
+  - if current_user.can_create_project?
+    .page-title-controls
+      = link_to "New project", new_project_path, class: "btn btn-success"
+
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
@@ -18,5 +25,3 @@
   .nav-controls
     = render 'shared/projects/search_form'
     = render 'shared/projects/dropdown'
-    - if current_user.can_create_project?
-      = link_to "New project", new_project_path, class: "btn btn-success"
diff --git a/app/views/dashboard/_snippets_head.html.haml b/app/views/dashboard/_snippets_head.html.haml
index 4f38339b87a..8d99f84755a 100644
--- a/app/views/dashboard/_snippets_head.html.haml
+++ b/app/views/dashboard/_snippets_head.html.haml
@@ -1,3 +1,10 @@
+.page-title-holder
+  %h1.page-title= _('Snippets')
+
+  - if current_user
+    .page-title-controls
+      = link_to "New snippet", new_snippet_path, class: "btn btn-success", title: "New snippet"
+
 .top-area
   %ul.nav-links.nav.nav-tabs
     = nav_link(page: dashboard_snippets_path, html_options: {class: 'home'}) do
@@ -6,7 +13,3 @@
     = nav_link(page: explore_snippets_path) do
       = link_to explore_snippets_path, title: 'Explore snippets', data: {placement: 'right'} do
         Explore snippets
-
-  - if current_user
-    .nav-controls.d-none.d-sm-block
-      = link_to "New snippet", new_snippet_path, class: "btn btn-success", title: "New snippet"
diff --git a/app/views/dashboard/issues.html.haml b/app/views/dashboard/issues.html.haml
index 86a21e24ac9..832ba877558 100644
--- a/app/views/dashboard/issues.html.haml
+++ b/app/views/dashboard/issues.html.haml
@@ -4,11 +4,17 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{current_user.name} issues")
 
+.page-title-holder
+  %h1.page-title= _('Issues')
+
+  - if current_user
+    .page-title-controls
+      = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", with_feature_enabled: 'issues', type: :issues
+
 .top-area
   = render 'shared/issuable/nav', type: :issues, display_count: !@no_filters_set
   .nav-controls
     = render 'shared/issuable/feed_buttons'
-    = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", with_feature_enabled: 'issues', type: :issues
 
 = render 'shared/issuable/filter', type: :issues
 
diff --git a/app/views/dashboard/merge_requests.html.haml b/app/views/dashboard/merge_requests.html.haml
index 61aae31be60..fba8d1cf667 100644
--- a/app/views/dashboard/merge_requests.html.haml
+++ b/app/views/dashboard/merge_requests.html.haml
@@ -2,10 +2,15 @@
 - page_title _("Merge Requests")
 - @breadcrumb_link = merge_requests_dashboard_path(assignee_id: current_user.id)
 
+.page-title-holder
+  %h1.page-title= _('Merge Requests')
+
+  - if current_user
+    .page-title-controls
+      = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New merge request", with_feature_enabled: 'merge_requests', type: :merge_requests
+
 .top-area
   = render 'shared/issuable/nav', type: :merge_requests, display_count: !@no_filters_set
-  .nav-controls
-    = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New merge request", with_feature_enabled: 'merge_requests', type: :merge_requests
 
 = render 'shared/issuable/filter', type: :merge_requests
 
diff --git a/app/views/dashboard/milestones/index.html.haml b/app/views/dashboard/milestones/index.html.haml
index f66e2b40d76..ae0e38bf0ee 100644
--- a/app/views/dashboard/milestones/index.html.haml
+++ b/app/views/dashboard/milestones/index.html.haml
@@ -2,12 +2,18 @@
 - page_title 'Milestones'
 - header_title 'Milestones', dashboard_milestones_path
 
+.page-title-holder
+  %h1.page-title= _('Milestones')
+
+  - if current_user
+    .page-title-controls
+      = render 'shared/new_project_item_select',
+        path: 'milestones/new', label: 'New milestone',
+        include_groups: true, type: :milestones
+
 .top-area
   = render 'shared/milestones_filter', counts: @milestone_states
 
-  .nav-controls
-    = render 'shared/new_project_item_select', path: 'milestones/new', label: 'New milestone', include_groups: true, type: :milestones
-
 .milestones
   %ul.content-list
     - if @milestones.blank?
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 8b3974d97f8..d2593179f17 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -2,6 +2,9 @@
 - page_title "Todos"
 - header_title "Todos", dashboard_todos_path
 
+.page-title-holder
+  %h1.page-title= _('Todos')
+
 - if current_user.todos.any?
   .top-area
     %ul.nav-links.mobile-separator.nav.nav-tabs
diff --git a/app/views/groups/new.html.haml b/app/views/groups/new.html.haml
index 86c5f6a7aa3..684b51b8552 100644
--- a/app/views/groups/new.html.haml
+++ b/app/views/groups/new.html.haml
@@ -1,5 +1,4 @@
-- @breadcrumb_link = dashboard_groups_path
-- breadcrumb_title "Groups"
+- @hide_breadcrumbs = true
 - @hide_top_links = true
 - page_title    'New Group'
 - header_title  "Groups", dashboard_groups_path
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index a41d30da450..1420b0a4973 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -12,6 +12,7 @@
       - unless @hide_breadcrumbs
         = render "layouts/nav/breadcrumbs"
       = render "layouts/flash"
+      .d-flex
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
       .content{ id: "content-body" }
         = yield
diff --git a/app/views/layouts/dashboard.html.haml b/app/views/layouts/dashboard.html.haml
index 489ef245a4d..c10be282952 100644
--- a/app/views/layouts/dashboard.html.haml
+++ b/app/views/layouts/dashboard.html.haml
@@ -1,5 +1,6 @@
 - page_title    _("Dashboard")
 - header_title  _("Dashboard"), root_path unless header_title
 - sidebar       "dashboard"
+- @hide_breadcrumbs = true
 
 = render template: "layouts/application"
diff --git a/app/views/layouts/explore.html.haml b/app/views/layouts/explore.html.haml
index 80bda34a3f5..24751ab4e06 100644
--- a/app/views/layouts/explore.html.haml
+++ b/app/views/layouts/explore.html.haml
@@ -1,4 +1,6 @@
 - page_title _("Explore")
+- @hide_breadcrumbs = true
+
 - unless current_user
   - header_title _("Explore GitLab"), explore_root_path
 
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index d99b809c387..eede8704564 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -1,5 +1,4 @@
-- @breadcrumb_link = dashboard_projects_path
-- breadcrumb_title "Projects"
+- @hide_breadcrumbs = true
 - @hide_top_links = true
 - page_title    'New Project'
 - header_title  "Projects", dashboard_projects_path
diff --git a/app/views/snippets/new.html.haml b/app/views/snippets/new.html.haml
index c8a5e199674..6bc748d346e 100644
--- a/app/views/snippets/new.html.haml
+++ b/app/views/snippets/new.html.haml
@@ -1,8 +1,9 @@
 - @hide_top_links = true
-- add_to_breadcrumbs "Snippets", dashboard_snippets_path
-- breadcrumb_title "New"
+- @hide_breadcrumbs = true
 - page_title "New Snippet"
-%h3.page-title
-  New Snippet
-%hr
-= render "shared/snippets/form", url: snippets_path(@snippet)
+
+.page-title-holder
+  %h1.page-title= _('New Snippet')
+
+.prepend-top-default
+  = render "shared/snippets/form", url: snippets_path(@snippet)
diff --git a/changelogs/unreleased/51955-change-single-item-breadcrumbs-to-page-titles.yml b/changelogs/unreleased/51955-change-single-item-breadcrumbs-to-page-titles.yml
new file mode 100644
index 00000000000..63fa84d2d51
--- /dev/null
+++ b/changelogs/unreleased/51955-change-single-item-breadcrumbs-to-page-titles.yml
@@ -0,0 +1,5 @@
+---
+title: Change single-item breadcrumbs to page titles
+merge_request: 22155
+author:
+type: changed
diff --git a/spec/features/dashboard/shortcuts_spec.rb b/spec/features/dashboard/shortcuts_spec.rb
index e5c5ab9c039..31a1dcf826d 100644
--- a/spec/features/dashboard/shortcuts_spec.rb
+++ b/spec/features/dashboard/shortcuts_spec.rb
@@ -2,8 +2,12 @@ require 'spec_helper'
 
 describe 'Dashboard shortcuts', :js do
   context 'logged in' do
+    let(:user) { create(:user) }
+    let(:project) { create(:project) }
+
     before do
-      sign_in(create(:user))
+      project.add_developer(user)
+      sign_in(user)
       visit root_dashboard_path
     end
 
@@ -50,6 +54,6 @@ describe 'Dashboard shortcuts', :js do
   end
 
   def check_page_title(title)
-    expect(find('.breadcrumbs-sub-title')).to have_content(title)
+    expect(find('.page-title')).to have_content(title)
   end
 end