Change single-item breadcrumbs to page titles

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

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';

app/assets/stylesheets/framework/layout.scss

@@ -161,3 +161,8 @@ body {
     }
   }
 }
+// We need this to keep consistent behavior between pages with breadcrumbs without.
+// Because .breadcrumbs has display:flex and we have content with top margin relying on it.
+.offset-content {
+  display: flex;
+}

app/assets/stylesheets/framework/page_title.scss

+.page-title-holder {
+  padding-top: $gl-padding-top;
+  display: flex;
+  border-bottom: 1px solid $border-color;
+  align-items: center;
+
+  .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;
+  }
+}

app/views/dashboard/_activity_head.html.haml

+.page-title-holder
+  %h1.page-title= _('Activity')
+
 .top-area
   %ul.nav-links.nav.nav-tabs
     %li{ class: active_when(params[:filter].nil?) }>

app/views/dashboard/_groups_head.html.haml

+.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"

app/views/dashboard/_projects_head.html.haml

 = 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"

app/views/dashboard/_snippets_head.html.haml

+.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"

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

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

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?

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

app/views/groups/new.html.haml

-- @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

app/views/layouts/_page.html.haml

@@ -9,7 +9,9 @@
       = render 'layouts/header/read_only_banner'
       = yield :flash_message
       = render "shared/ping_consent"
-      - unless @hide_breadcrumbs
+      - if @hide_breadcrumbs
+        .offset-content
+      - else
         = render "layouts/nav/breadcrumbs"
       = render "layouts/flash"
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }

app/views/layouts/dashboard.html.haml

 - page_title    _("Dashboard")
 - header_title  _("Dashboard"), root_path unless header_title
 - sidebar       "dashboard"
+- @hide_breadcrumbs = true
 = render template: "layouts/application"

app/views/layouts/explore.html.haml

 - page_title _("Explore")
+- @hide_breadcrumbs = true
+
 - unless current_user
   - header_title _("Explore GitLab"), explore_root_path

app/views/projects/new.html.haml

-- @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

app/views/snippets/new.html.haml

 - @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)

changelogs/unreleased/51955-change-single-item-breadcrumbs-to-page-titles.yml

+---
+title: Change single-item breadcrumbs to page titles
+merge_request: 22155
+author:
+type: changed

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