Make flash notifications sticky

This commit also unifies layout structure
and remove no_container flag

app/assets/javascripts/flash.js

 import _ from 'underscore';
+import { spriteIcon } from './lib/utils/common_utils';
 
 const hideFlash = (flashEl, fadeTransition = true) => {
   if (fadeTransition) {
@@ -35,16 +36,11 @@ const createAction = config => `
   </a>
 `;
 
-const createFlashEl = (message, type, isFixedLayout = false) => `
-  <div
-    class="flash-${type}"
-  >
-    <div
-      class="flash-text ${
-        isFixedLayout ? 'container-fluid container-limited limit-container-width' : ''
-      }"
-    >
+const createFlashEl = (message, type) => `
+  <div class="flash-content flash-${type} rounded">
+    <div class="flash-text">
       ${_.escape(message)}
+      ${spriteIcon('close', 'close-icon')}
     </div>
   </div>
 `;
@@ -76,15 +72,10 @@ const createFlash = function createFlash(
   addBodyClass = false,
 ) {
   const flashContainer = parent.querySelector('.flash-container');
-  const navigation = parent.querySelector('.content');
 
   if (!flashContainer) return null;
 
-  const isFixedLayout = navigation
-    ? navigation.parentNode.classList.contains('container-limited')
-    : true;
-
-  flashContainer.innerHTML = createFlashEl(message, type, isFixedLayout);
+  flashContainer.innerHTML = createFlashEl(message, type);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
   removeFlashClickListener(flashEl, fadeTransition);

app/assets/javascripts/pages/profiles/two_factor_auths/index.js

@@ -5,9 +5,10 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 document.addEventListener('DOMContentLoaded', () => {
   const twoFactorNode = document.querySelector('.js-two-factor-auth');
   const skippable = parseBoolean(twoFactorNode.dataset.twoFactorSkippable);
+
   if (skippable) {
     const button = `<a class="btn btn-sm btn-warning float-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
-    const flashAlert = document.querySelector('.flash-alert .container-fluid');
+    const flashAlert = document.querySelector('.flash-alert');
     if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
   }
 

app/assets/stylesheets/framework/flash.scss

+$notification-box-shadow-color: rgba(0, 0, 0, 0.25);
+
 .flash-container {
   cursor: pointer;
   margin: 0;
@@ -6,12 +8,32 @@
   position: relative;
   z-index: 1;
 
+  &.sticky {
+    position: sticky;
+    position: -webkit-sticky;
+    top: $flash-container-top;
+    z-index: 200;
+
+    .flash-content {
+      box-shadow: 0 2px 4px 0 $notification-box-shadow-color;
+    }
+  }
+
+  .close-icon {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    right: $gl-padding;
+    top: $gl-padding;
+  }
+
   .flash-notice,
   .flash-alert,
   .flash-success,
   .flash-warning {
     border-radius: $border-radius-default;
     color: $white-light;
+    padding-right: $gl-padding * 2;
 
     .container-fluid,
     .container-fluid.container-limited {
@@ -97,3 +119,28 @@
     }
   }
 }
+
+.gl-browser-ie .flash-container {
+  position: fixed;
+  max-width: $limited-layout-width;
+  left: 50%;
+
+  .flash-alert {
+    position: relative;
+    left: -50%;
+  }
+}
+
+.with-system-header .flash-container {
+  top: $flash-container-top + $system-header-height;
+}
+
+.with-performance-bar {
+  .flash-container {
+    top: $flash-container-top + $performance-bar-height;
+  }
+
+  &.with-system-header .flash-container {
+    top: $flash-container-top + $performance-bar-height + $system-header-height;
+  }
+}

app/assets/stylesheets/framework/layout.scss

@@ -29,6 +29,15 @@ body {
   }
 }
 
+.container-fluid {
+  &.limit-container-width {
+    .flash-container.sticky {
+      max-width: $limited-layout-width;
+      margin: 0 auto;
+    }
+  }
+}
+
 .content-wrapper {
   margin-top: $header-height;
   padding-bottom: 100px;

app/assets/stylesheets/framework/variables.scss

@@ -377,6 +377,7 @@ $performance-bar-height: 35px;
 $system-header-height: 16px;
 $system-footer-height: $system-header-height;
 $flash-height: 52px;
+$flash-container-top: 48px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
 $home-panel-title-row-height: 64px;

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

-- @no_container = true
 - page_title "Background Jobs"
 
-%div{ class: container_class }
-  %h3.page-title Background Jobs
-  %p.light GitLab uses #{link_to "sidekiq", "http://sidekiq.org/"} library for async job processing
+%h3.page-title Background Jobs
+%p.light GitLab uses #{link_to "sidekiq", "http://sidekiq.org/"} library for async job processing
 
-  %hr
-  .card
+%hr
+.card
   %iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: 0" }

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

-- @no_container = true
 - breadcrumb_title "Dashboard"
 
-%div{ class: container_class }
-  = render_if_exists 'admin/licenses/breakdown', license: @license
+= render_if_exists 'admin/licenses/breakdown', license: @license
 
-  .admin-dashboard.prepend-top-default
+.admin-dashboard.prepend-top-default
   .row
     .col-sm-4
       .info-well.dark-well

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

-- @no_container = true
 - page_title _("Groups")
 
-%div{ class: container_class }
-  .top-area
+.top-area
   .prepend-top-default.append-bottom-default
     = form_tag admin_groups_path, method: :get, class: 'js-search-form' do |f|
       = hidden_field_tag :sort, @sort
@@ -14,7 +12,7 @@
         = render "shared/groups/dropdown", options_hash: admin_groups_sort_options_hash
         = link_to new_admin_group_path, class: "btn btn-success" do
           = _('New group')
-  %ul.content-list
+%ul.content-list
   = render @groups
 
-  = paginate @groups, theme: "gitlab"
+= paginate @groups, theme: "gitlab"

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

-- @no_container = true
 - page_title _('Health Check')
 - no_errors = @errors.blank?
 
-%div{ class: container_class }
-  %h3.page-title= page_title
-  .bs-callout.clearfix
+%h3.page-title= page_title
+.bs-callout.clearfix
   .float-left
     %p
   #{ s_('HealthCheck|Access token is') }
@@ -13,7 +11,7 @@
     = button_to _("Reset health check access token"), reset_health_check_token_admin_application_settings_path,
       method: :put, class: 'btn btn-default',
       data: { confirm: _('Are you sure you want to reset the health check token?') }
-  %p.light
+%p.light
   #{ _('Health information can be retrieved from the following endpoints. More information is available') }
   = link_to s_('More information is available|here'), help_page_path('user/admin_area/monitoring/health_check')
   %ul
@@ -24,8 +22,8 @@
     %li
       %code= metrics_url(token: Gitlab::CurrentSettings.health_check_access_token)
     = render_if_exists 'admin/health_check/health_check_url'
-  %hr
-  .card
+%hr
+.card
   .card-header
     Current Status:
     - if no_errors

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

 - breadcrumb_title "Jobs"
-- @no_container = true
 
-%div{ class: container_class }
-
-  .top-area.scrolling-tabs-container.inner-page-scroll-tabs
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
   - build_path_proc = ->(scope) { admin_jobs_path(scope: scope) }
   = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
 
@@ -15,8 +12,8 @@
         url: cancel_all_admin_jobs_path } }
         = s_('AdminArea|Stop all jobs')
 
-  .row-content-block.second-block
+.row-content-block.second-block
   #{(@scope || 'all').capitalize} jobs
 
-  %ul.content-list.builds-content-list.admin-builds-table
+%ul.content-list.builds-content-list.admin-builds-table
   = render "projects/jobs/table", builds: @builds, admin: true

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

-- @no_container = true
 - page_title "Logs"
 
-%div{ class: container_class }
-  %ul.nav-links.log-tabs.nav.nav-tabs
+%ul.nav-links.log-tabs.nav.nav-tabs
   - @loggers.each do |klass|
     %li.nav-item
       = link_to klass.file_name, "##{klass.file_name_noext}", data: { toggle: 'tab' }, class: "#{active_when(klass == @loggers.first)} nav-link"
-  .row-content-block
+.row-content-block
   To prevent performance issues admin logs output the last 2000 lines
-  .tab-content
+.tab-content
   - @loggers.each do |klass|
     .tab-pane{ class: active_when(klass == @loggers.first), id: klass.file_name_noext }
       .file-holder#README

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

-- @no_container = true
 - page_title "Projects"
 - params[:visibility_level] ||= []
 
-
-%div{ class: container_class }
-  .top-area.scrolling-tabs-container.inner-page-scroll-tabs
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .prepend-top-default
     .search-holder
       = render 'shared/projects/search_form', autofocus: true, icon: true, admin_view: true
@@ -41,4 +38,4 @@
       = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC) do
         Public
 
-  = render 'projects'
+= render 'projects'

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

-- @no_container = true
 - page_title 'Requests Profiles'
 
-%div{ class: container_class }
-  %h3.page-title
+%h3.page-title
   = page_title
 
-  .bs-callout.clearfix
+.bs-callout.clearfix
   Pass the header
   %code X-Profile-Token: #{@profile_token}
   to profile the request
 
-  - if @profiles.present?
+- if @profiles.present?
   .prepend-top-default
     - @profiles.each do |path, profiles|
       .card.card-small
@@ -21,6 +19,6 @@
             %li
               = link_to profile.time.to_s(:long) + ' ' + profile.profile_mode.capitalize,
                 admin_requests_profile_path(profile)
-  - else
+- else
   %p
     No profiles found

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

 - breadcrumb_title _('Runners')
-- @no_container = true
 
-%div{ class: container_class }
-  .row
+.row
   .col-sm-6
     .bs-callout
       %p
@@ -42,7 +40,7 @@
                           type: 'shared',
                           reset_token_url: reset_registration_token_admin_application_settings_path }
 
-  .row
+.row
   .col-sm-9
     = form_tag admin_runners_path, id: 'runners-search', method: :get, class: 'filter-form js-filter-form' do
       .filtered-search-wrapper
@@ -119,7 +117,7 @@
   .col-sm-3.text-right-lg
     = _('Runners currently online: %{active_runners_count}') % { active_runners_count: @active_runners_count }
 
-  - if @runners.any?
+- if @runners.any?
   .runners-content.content-list
     .table-holder
       .gl-responsive-table-row.table-row-header{ role: 'row' }
@@ -137,5 +135,5 @@
       - @runners.each do |runner|
         = render 'admin/runners/runner', runner: runner
     = paginate @runners, theme: 'gitlab'
-  - else
+- else
   .nothing-here-block= _('No runners found')

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

-- @no_container = true
 - page_title "System Info"
 
-%div{ class: container_class }
-  .prepend-top-default
-  .row
+.prepend-top-default
+.row
   .col-sm-4
     .card.bg-light.light-well
       %h4 CPU

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

-- @no_container = true
 - page_title "Users"
 
-%div{ class: container_class }
-  .top-area.scrolling-tabs-container.inner-page-scroll-tabs
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left
     = icon('angle-left')
   .fade-right
@@ -40,7 +38,7 @@
     = render_if_exists 'admin/users/admin_email_users'
     = link_to s_('AdminUsers|New user'), new_admin_user_path, class: 'btn btn-success btn-search float-right'
 
-  .filtered-search-block.row-content-block.border-top-0
+.filtered-search-block.row-content-block.border-top-0
   = form_tag admin_users_path, method: :get do
     - if params[:filter].present?
       = hidden_field_tag "filter", h(params[:filter])
@@ -62,10 +60,10 @@
               = link_to admin_users_path(sort: value, filter: params[:filter], search_query: params[:search_query]) do
                 = title
 
-  - if @users.empty?
+- if @users.empty?
   .nothing-here-block.border-top-0
     = s_('AdminUsers|No users found')
-  - else
+- else
   .table-holder
     .thead-white.text-nowrap.gl-responsive-table-row.table-row-header{ role: 'row' }
       .table-section.section-40{ role: 'rowheader' }= _('Name')
@@ -74,6 +72,6 @@
 
     = render partial: 'admin/users/user', collection: @users
 
-  = paginate @users, theme: "gitlab"
+= paginate @users, theme: "gitlab"
 
 #delete-user-modal

app/views/dashboard/activity.html.haml

 - @hide_top_links = true
-- @no_container = true
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, dashboard_projects_url(rss_url_options), title: "All activity")
 
-
 = render_dashboard_gold_trial(current_user)
 
 - page_title    "Activity"
 - header_title  "Activity", activity_dashboard_path
 
-%div{ class: container_class }
-  = render "projects/last_push"
-  = render 'dashboard/activity_head'
+= render "projects/last_push"
+= render 'dashboard/activity_head'
 
-  %section.activities
+%section.activities
   = render 'activities'

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

-- @no_container = true
 - @hide_top_links = true
 
 = content_for :meta_tags do
@@ -9,11 +8,10 @@
 - page_title    "Projects"
 - header_title  "Projects", dashboard_projects_path
 
-%div{ class: container_class }
-  = render "projects/last_push"
-  - if show_projects?(@projects, params)
+= render "projects/last_push"
+- if show_projects?(@projects, params)
   = render 'dashboard/projects_head'
   = render 'nav' unless Feature.enabled?(:project_list_filter_bar)
   = render 'projects'
-  - else
+- else
   = render "zero_authorized_projects"

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
 
 = render_dashboard_gold_trial(current_user)
 
-%div{ class: container_class }
-  = render "projects/last_push"
-  = render 'dashboard/projects_head', project_tab_filter: :starred
+= render "projects/last_push"
+= render 'dashboard/projects_head', project_tab_filter: :starred
 
-  - if params[:filter_projects] || any_projects?(@projects)
+- if params[:filter_projects] || any_projects?(@projects)
   = render 'projects'
-  - else
+- else
   = render 'starred_empty_state'

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

-- @no_container = true
 - page_title 'Labels'
 - can_admin_label = can?(current_user, :admin_label, @group)
 - search = params[:search]
@@ -7,7 +6,6 @@
 
 - if labels_or_filters
   #promote-label-modal
-  %div{ class: container_class }
   = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
   .labels-container.prepend-top-5

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

-- @no_container = true
 - add_to_breadcrumbs _("Milestones"), group_milestones_path(@group)
 - breadcrumb_title _("New")
 - page_title _("Milestones"), @milestone.name, _("Milestones")
 
-%div{ class: container_class }
-  %h3.page-title
+%h3.page-title
   New Milestone
 
-  %hr
+%hr
 
-  = render "form"
+= render "form"

app/views/groups/show.html.haml

-- @no_container = true
 - breadcrumb_title _("Details")
 - @content_class = "limit-container-width" unless fluid_layout
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity")
 
-%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
+%div{ class: [("limit-container-width" unless fluid_layout)] }
   = render 'groups/home_panel'
 
   .groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }

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

 - breadcrumb_title _("Cohorts")
-- @no_container = true
 
-%div{ class: container_class }
-  - if @cohorts
+- if @cohorts
   = render 'cohorts_table'
-  - else
+- else
   .bs-callout.bs-callout-warning.clearfix
     %p
       - usage_ping_path = help_page_path('user/admin_area/settings/usage_statistics', anchor: 'usage-ping')

app/views/instance_statistics/conversational_development_index/index.html.haml

-- @no_container = true
 - page_title _('ConvDev Index')
 - usage_ping_enabled = Gitlab::CurrentSettings.usage_ping_enabled
 

app/views/layouts/_flash.html.haml

-- extra_flash_class = local_assigns.fetch(:extra_flash_class, nil)
-
-.flash-container.flash-container-page
+.flash-container.flash-container-page.sticky
   -# We currently only support `alert`, `notice`, `success`
   - flash.each do |key, value|
     -# Don't show a flash message if the message is nil
     - if value
-      %div{ class: "flash-#{key}" }
-        %div{ class: "#{(container_class unless fluid_layout)} #{(extra_flash_class unless @no_container)} #{@content_class}" }
+      %div{ class: "flash-content flash-#{key} rounded" }
         %span= value
+        = sprite_icon('close', size: 16, css_class: 'close-icon')

app/views/layouts/_page.html.haml

@@ -13,8 +13,8 @@
       = render "shared/ping_consent"
       - unless @hide_breadcrumbs
         = render "layouts/nav/breadcrumbs"
-      = render "layouts/flash", extra_flash_class: 'limit-container-width'
       .d-flex
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
       .content{ id: "content-body" }
+        = render "layouts/flash", extra_flash_class: 'limit-container-width'
         = yield

app/views/projects/activity.html.haml

-- @no_container = true
-
 - page_title _("Activity")
 
-%div{ class: container_class }
-  = render 'projects/last_push'
-
+= render 'projects/last_push'
 = render 'projects/activity'

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

-- @no_container = true
 - project_duration = age_map_duration(@blame_groups, @project)
 - page_title "Blame", @blob.path, @ref
 
-%div{ class: container_class }
-  #blob-content-holder.tree-holder
+#blob-content-holder.tree-holder
   = render "projects/blob/breadcrumb", blob: @blob, blame: true
 
   .file-holder

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
   = page_specific_javascript_tag('lib/ace.js')
 
-%div{ class: container_class }
-  - if @conflict
+- if @conflict
   .alert.alert-danger
     Someone edited the file the same time you did. Please check out
     = link_to "the file", project_blob_path(@project, tree_join(@branch_name, @file_path)), target: "_blank", rel: 'noopener noreferrer'
     and make sure your changes will not unintentionally remove theirs.
-  .editor-title-row
+.editor-title-row
   %h3.page-title.blob-edit-page-title
     Edit file
   = render 'template_selectors'
-  .file-editor
+.file-editor
   %ul.nav-links.no-bottom.js-edit-mode.nav.nav-tabs
     %li.active
       = link_to '#editor' do

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

 - breadcrumb_title "Repository"
-- @no_container = true
-
 - page_title @blob.path, @ref
-
 - signatures_path = namespace_project_signatures_path(namespace_id: @project.namespace.full_path, project_id: @project.path, id: @last_commit)
+
 .js-signature-container{ data: { 'signatures-path': signatures_path } }
 
-%div{ class: container_class }
-  = render 'projects/last_push'
+= render 'projects/last_push'
 
-  #tree-holder.tree-holder
+#tree-holder.tree-holder
   = render 'blob', blob: @blob
 
   - if can_modify_blob?(@blob)

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

-- @no_container = true
 - page_title _('Branches')
 - add_to_breadcrumbs(_('Repository'), project_tree_path(@project))
 
-%div{ class: container_class }
-  .top-area.adjust
+.top-area.adjust
   %ul.nav-links.issues-state-filters.nav.nav-tabs
     %li{ class: active_when(@mode == 'overview') }>
       = link_to s_('Branches|Overview'), project_branches_path(@project), title: s_('Branches|Show overview of the branches')
@@ -45,25 +43,25 @@
       = link_to new_project_branch_path(@project), class: 'btn btn-success' do
         = s_('Branches|New branch')
 
-  = render_if_exists 'projects/commits/mirror_status'
+= render_if_exists 'projects/commits/mirror_status'
 
-  .js-branch-list{ data: { diverging_counts_endpoint: diverging_commit_counts_namespace_project_branches_path(@project.namespace, @project, format: :json) } }
-  - if can?(current_user, :admin_project, @project)
+.js-branch-list{ data: { diverging_counts_endpoint: diverging_commit_counts_namespace_project_branches_path(@project.namespace, @project, format: :json) } }
+- if can?(current_user, :admin_project, @project)
   - project_settings_link = link_to s_('Branches|project settings'), project_protected_branches_path(@project)
   .row-content-block
     %h5
       = s_('Branches|Protected branches can be managed in %{project_settings_link}.').html_safe % { project_settings_link: project_settings_link }
 
-  - if @mode == 'overview' && (@active_branches.any? || @stale_branches.any?)
+- if @mode == 'overview' && (@active_branches.any? || @stale_branches.any?)
   = render "projects/branches/panel", branches: @active_branches, state: 'active', panel_title: s_('Branches|Active branches'), show_more_text: s_('Branches|Show more active branches'), project: @project, overview_max_branches: @overview_max_branches
   = render "projects/branches/panel", branches: @stale_branches, state: 'stale', panel_title: s_('Branches|Stale branches'), show_more_text: s_('Branches|Show more stale branches'), project: @project, overview_max_branches: @overview_max_branches
 
-  - elsif @branches.any?
+- elsif @branches.any?
   %ul.content-list.all-branches
     - @branches.each do |branch|
       = render "projects/branches/branch", branch: branch, merged: @merged_branch_names.include?(branch.name)
   = paginate @branches, theme: 'gitlab'
-  - else
+- else
   .nothing-here-block
     = s_('Branches|No branches to show')
 

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

+-# no_container is needed here because of full width side-by-side diff view
 - @no_container = true
 - add_to_breadcrumbs _('Commits'), project_commits_path(@project)
 - breadcrumb_title @commit.short_id

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

-- @no_container = true
 - breadcrumb_title _("Commits")
 
 - page_title _("Commits"), @ref
@@ -6,7 +5,6 @@
   = auto_discovery_link_tag(:atom, project_commits_path(@project, @ref, rss_url_options), title: "#{@project.name}:#{@ref} commits")
 
 .js-project-commits-show{ 'data-commits-limit' => @limit }
-  %div{ class: container_class }
   .tree-holder
     .nav-block
       .tree-ref-container

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

-- @no_container = true
 - breadcrumb_title "Compare Revisions"
 - page_title "Compare"
 
-%div{ class: container_class }
-  %h3.page-title
+%h3.page-title
   = _("Compare Git revisions")
-  .sub-header-block
+.sub-header-block
   - example_master = capture do
     %code.ref-name master
   - example_sha = capture do
@@ -14,5 +12,5 @@
   %br
   = (_("Changes are shown as if the <b>source</b> revision was being merged into the <b>target</b> revision.")).html_safe
 
-  .prepend-top-20
+.prepend-top-20
   = render "form"

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

-- @no_container = true
 - add_to_breadcrumbs _("Compare Revisions"), project_compare_index_path(@project)
 - page_title "#{params[:from]}...#{params[:to]}"
 
-%div{ class: container_class }
-  .sub-header-block.no-bottom-space
+.sub-header-block.no-bottom-space
   = render "form"
 
-  - if @commits.present?
+- if @commits.present?
   = render "projects/commits/commit_list"
   = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, diff_page_context: "is-compare"
-  - else
+- else
   .card.bg-light
     .center
       %h4

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

-- @no_container = true
 - page_title "Cycle Analytics"
 
-#cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
+#cycle-analytics{ "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
   - if @cycle_analytics_no_data
     %banner{ "v-if" => "!isOverviewDialogDismissed",
       "documentation-link": help_page_path('user/project/cycle_analytics'),

app/views/projects/empty.html.haml

 - @content_class = "limit-container-width" unless fluid_layout
-- @no_container = true
 - breadcrumb_title _("Details")
 
 = render partial: 'flash_messages', locals: { project: @project }
 
-%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
+%div{ class: [("limit-container-width" unless fluid_layout)] }
   = render "home_panel"
 
   %h4.prepend-top-0.append-bottom-8

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

-- @no_container = true
 - page_title _("Edit"), @environment.name, _("Environments")
 
-%div{ class: container_class }
-  %h3.page-title
+%h3.page-title
   = _('Edit environment')
-  %hr
-  = render 'form'
+%hr
+= render 'form'

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

-- @no_container = true
 - page_title _("Environments")
 
-#environments-folder-list-view{ data: { environments_data: environments_folder_list_view_data,
-  "css-class" => container_class } }
+#environments-folder-list-view{ data: { environments_data: environments_folder_list_view_data } }

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

-- @no_container = true
 - page_title _("Environments")
 
 #environments-list-view{ data: { environments_data: environments_list_data,
@@ -6,5 +5,4 @@
   "can-create-environment" => can?(current_user, :create_environment, @project).to_s,
   "new-environment-path" => new_project_environment_path(@project),
   "help-page-path" => help_page_path("ci/environments"),
-  "deploy-boards-help-path" => help_page_path("user/project/deploy_boards", anchor: "enabling-deploy-boards"),
-  "css-class" => container_class } }
+  "deploy-boards-help-path" => help_page_path("user/project/deploy_boards", anchor: "enabling-deploy-boards") } }

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

-- @no_container = true
 - page_title _("Metrics for environment"), @environment.name
 
-.prometheus-container{ class: container_class }
+.prometheus-container
   #prometheus-graphs{ data: metrics_data(@project, @environment) }

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

-- @no_container = true
 - breadcrumb_title _("Environments")
 - page_title _("New Environment")
 
-%div{ class: container_class }
-  %h3.page-title
+%h3.page-title
   = _("New environment")
-  %hr
-  = render 'form'
+%hr
+= render 'form'

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

-- @no_container = true
 - add_to_breadcrumbs _("Environments"), project_environments_path(@project)
 - breadcrumb_title @environment.name
 - page_title _("Environments")
@@ -6,8 +5,7 @@
 - content_for :page_specific_javascripts do
   = stylesheet_link_tag 'page_bundles/xterm'
 
-%div{ class: container_class }
-  - if can?(current_user, :stop_environment, @environment)
+- if can?(current_user, :stop_environment, @environment)
   #stop-environment-modal.modal.fade{ tabindex: -1 }
     .modal-dialog
       .modal-content
@@ -34,7 +32,7 @@
           = button_to stop_project_environment_path(@project, @environment), class: 'btn btn-danger has-tooltip', method: :post do
             = s_('Environments|Stop environment')
 
-  .top-area
+.top-area
   %h3.page-title= @environment.name
   .nav-controls.ml-auto.my-2
     = render 'projects/environments/terminal_button', environment: @environment
@@ -48,7 +46,7 @@
         = sprite_icon('stop')
         = s_('Environments|Stop')
 
-  .environments-container
+.environments-container
   - if @deployments.blank?
     .empty-state
       .text-content

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

-- @no_container = true
 - page_title _("Terminal for environment"), @environment.name
 
 - content_for :page_specific_javascripts do
   = stylesheet_link_tag "xterm.css"
 
-%div{ class: container_class }
-  .top-area
+.top-area
   .row
     .col-sm-6
       %h3.page-title

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

-- @no_container = true
 - page_title _("Contribution Charts")
 
-.repo-charts{ class: container_class }
+.repo-charts
   %h4.sub-header
     = _("Programming languages used in this repository")
 
@@ -20,7 +19,7 @@
     .col-md-8
       %canvas#languages-chart{ height: 400 }
 
-.repo-charts{ class: container_class }
+.repo-charts
   .sub-header-block.border-top
 
   .row.tree-ref-header

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

-- @no_container = true
 - page_title _('Contributors')
 
-.js-graphs-show{ class: container_class, 'data-project-graph-path': project_graph_path(@project, current_ref, format: :json) }
+.js-graphs-show{ 'data-project-graph-path': project_graph_path(@project, current_ref, format: :json) }
   .sub-header-block
     .tree-ref-holder.inline.vertical-align-middle
       = render 'shared/ref_switcher', destination: 'graphs'

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

 - page_title import_in_progress_title
-- @no_container = true
 - @content_class = "limit-container-width" unless fluid_layout
 
 .save-project-loader

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

-- @no_container = true
 - @can_bulk_update = can?(current_user, :admin_issue, @project)
 
 - page_title "Issues"
@@ -8,7 +7,6 @@
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} issues")
 
 - if project_issues(@project).exists?
-  %div{ class: (container_class) }
   .top-area
     = render 'shared/issuable/nav', type: :issues
     = render "projects/issues/nav_btns"

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

-- @no_container = true
 - page_title "Jobs"
 
-%div{ class: container_class }
-  .top-area
+.top-area
   - build_path_proc = ->(scope) { project_jobs_path(@project, scope: scope) }
   = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
 
@@ -14,5 +12,5 @@
       = link_to project_ci_lint_path(@project), class: 'btn btn-default' do
         %span CI lint
 
-  .content-list.builds-content-list
+.content-list.builds-content-list
   = render "table", builds: @builds, project: @project

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

-- @no_container = true
 - add_to_breadcrumbs _("Jobs"), project_jobs_path(@project)
 - breadcrumb_title "##{@build.id}"
 - page_title "#{@build.name} (##{@build.id})", _("Jobs")
@@ -6,8 +5,7 @@
 - content_for :page_specific_javascripts do
   = stylesheet_link_tag 'page_bundles/xterm'
 
-%div{ class: container_class }
-  #js-job-vue-app{ data: { endpoint: project_job_path(@project, @build, format: :json), project_path: @project.full_path,
+#js-job-vue-app{ data: { endpoint: project_job_path(@project, @build, format: :json), project_path: @project.full_path,
   deployment_help_url: help_page_path('user/project/clusters/index.html', anchor: 'troubleshooting-failed-deployment-jobs'),
   runner_help_url: help_page_path('ci/runners/README.html', anchor: 'setting-maximum-job-timeout-for-a-runner'),
   runner_settings_url: project_runners_path(@build.project, anchor: 'js-runners-settings'),

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

-- @no_container = true
 - add_to_breadcrumbs 'Jobs', project_jobs_path(@project)
 - add_to_breadcrumbs "##{@build.id}", project_job_path(@project, @build)
 - breadcrumb_title 'Terminal'
@@ -7,5 +6,5 @@
 - content_for :page_specific_javascripts do
   = stylesheet_link_tag "xterm.css"
 
-.terminal-container{ class: container_class }
+.terminal-container
   #terminal{ data: { project_path: terminal_project_job_path(@project, @build, format: :ws) } }

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

-- @no_container = true
 - add_to_breadcrumbs "Labels", project_labels_path(@project)
 - breadcrumb_title "Edit"
 - page_title "Edit", @label.name, "Labels"
 
-%div{ class: container_class }
-  %h3.page-title
+%h3.page-title
   Edit Label
-  %hr
-  = render 'shared/labels/form', url: project_label_path(@project, @label), back_path: project_labels_path(@project)
+%hr
+= render 'shared/labels/form', url: project_label_path(@project, @label), back_path: project_labels_path(@project)

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

-- @no_container = true
 - page_title "Labels"
 - can_admin_label = can?(current_user, :admin_label, @project)
 - search = params[:search]
@@ -7,7 +6,6 @@
 
 - if labels_or_filters
   #promote-label-modal
-  %div{ class: container_class }
   = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
   .labels-container.prepend-top-10

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

-- @no_container = true
 - add_to_breadcrumbs "Labels", project_labels_path(@project)
 - breadcrumb_title "New"
 - page_title "New Label"
 
-%div{ class: container_class }
-  %h3.page-title
+%h3.page-title
   New Label
-  %hr
-  = render 'shared/labels/form', url: project_labels_path(@project), back_path: project_labels_path(@project)
+%hr
+= render 'shared/labels/form', url: project_labels_path(@project), back_path: project_labels_path(@project)

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

-- @no_container = true
 - @can_bulk_update = can?(current_user, :admin_merge_request, @project)
 - merge_project = merge_request_source_project_for_project(@project)
 - new_merge_request_path = project_new_merge_request_path(merge_project) if merge_project
@@ -6,11 +5,9 @@
 - page_title "Merge Requests"
 - new_merge_request_email = @project.new_issuable_address(current_user, 'merge_request')
 
-%div{ class: container_class }
-  = render 'projects/last_push'
+= render 'projects/last_push'
 
 - if @project.merge_requests.exists?
-  %div{ class: container_class }
   .top-area
     = render 'shared/issuable/nav', type: :merge_requests
     .nav-controls

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

-- @no_container = true
 - breadcrumb_title _('Edit')
 - add_to_breadcrumbs _('Milestones'), project_milestones_path(@project)
 - page_title _('Edit'), @milestone.title, _('Milestones')
 
-
-%div{ class: container_class }
-
-  %h3.page-title
+%h3.page-title
   = _('Edit Milestone')
 
-  %hr
+%hr
 
-  = render 'form'
+= render 'form'

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

-- @no_container = true
 - page_title _('Milestones')
 
-%div{ class: container_class }
-  .top-area
+.top-area
   = render 'shared/milestones_filter', counts: milestone_counts(@project.milestones)
 
   .nav-controls
@@ -12,7 +10,7 @@
       = link_to new_project_milestone_path(@project), class: 'btn btn-success qa-new-project-milestone', title: _('New milestone') do
         = _('New milestone')
 
-  .milestones
+.milestones
   #delete-milestone-modal
   #promote-milestone-modal
 

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

-- @no_container = true
 - add_to_breadcrumbs _('Milestones'), project_milestones_path(@project)
 - breadcrumb_title _('New')
 - page_title _('New Milestone')
 
-%div{ class: container_class }
-  %h3.page-title
+%h3.page-title
   = _('New Milestone')
 
-  %hr
+%hr
 
-  = render 'form'
+= render 'form'

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

-- @no_container = true
 - add_to_breadcrumbs _('Milestones'), project_milestones_path(@project)
 - breadcrumb_title @milestone.title
 - page_title       @milestone.title, _('Milestones')
 - page_description @milestone.description
 
-%div{ class: container_class }
-  .detail-page-header.milestone-page-header
+.detail-page-header.milestone-page-header
   .status-box{ class: status_box_class(@milestone) }
     - if @milestone.closed?
       = _('Closed')
@@ -48,7 +46,7 @@
     %a.btn.btn-default.btn-grouped.float-right.d-block.d-sm-none.js-sidebar-toggle{ href: '#' }
       = icon('angle-double-left')
 
-  .detail-page-description.milestone-detail
+.detail-page-description.milestone-detail
   %h2.title.qa-milestone-title
     = markdown_field(@milestone, :title)
 
@@ -57,14 +55,14 @@
       .description.md
         = markdown_field(@milestone, :description)
 
-  = render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
+= render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
 
-  - if can?(current_user, :read_issue, @project) && @milestone.total_issues_count(current_user).zero?
+- if can?(current_user, :read_issue, @project) && @milestone.total_issues_count(current_user).zero?
   .alert.alert-success.prepend-top-default
     %span= _('Assign some issues to this milestone.')
-  - elsif @milestone.complete?(current_user) && @milestone.active?
+- elsif @milestone.complete?(current_user) && @milestone.active?
   .alert.alert-success.prepend-top-default
     %span= _('All issues for this milestone are closed. You may close this milestone now.')
 
-  = render 'shared/milestones/tabs', milestone: @milestone
-  = render 'shared/milestones/sidebar', milestone: @milestone, project: @project, affix_offset: 153
+= render 'shared/milestones/tabs', milestone: @milestone
+= render 'shared/milestones/sidebar', milestone: @milestone, project: @project, affix_offset: 153

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

-- @no_container = true
-
-%div{ class: container_class }
-  .row-content-block.second-block.content-component-block
+.row-content-block.second-block.content-component-block
   .tree-ref-holder
     = render partial: 'shared/ref_switcher', locals: {destination: 'graph'}
 

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

 - breadcrumb_title _("Schedules")
 
-- @no_container = true
 - page_title _("Pipeline Schedules")
 
-%div{ class: container_class }
-  #pipeline-schedules-callout{ data: { docs_url: help_page_path('user/project/pipelines/schedules') } }
-  .top-area
+#pipeline-schedules-callout{ data: { docs_url: help_page_path('user/project/pipelines/schedules') } }
+.top-area
   - schedule_path_proc = ->(scope) { pipeline_schedules_path(@project, scope: scope) }
   = render "tabs", schedule_path_proc: schedule_path_proc, all_schedules: @all_schedules, scope: @scope
 
@@ -14,9 +12,9 @@
       = link_to new_project_pipeline_schedule_path(@project), class: 'btn btn-success' do
         %span= _('New schedule')
 
-  - if @schedules.present?
+- if @schedules.present?
   %ul.content-list
     = render partial: "table"
-  - else
+- else
   .card.bg-light
     .nothing-here-block= _("No schedules")

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

-- @no_container = true
 - page_title _('CI / CD Charts')
 
-%div{ class: container_class }
-
-  #charts.ci-charts
+#charts.ci-charts
   = render 'projects/pipelines/charts/overall'
-
   %hr
   = render 'projects/pipelines/charts/pipelines'

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

-- @no_container = true
 - page_title _('Pipelines')
 
 = render_if_exists "shared/shared_runners_minutes_limit_flash_message"
 
-%div{ 'class' => container_class }
-  #pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
+#pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
   "help-page-path" => help_page_path('ci/quick_start/README'),
   "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
   "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),

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

-- @no_container = true
 - add_to_breadcrumbs _('Pipelines'), project_pipelines_path(@project)
 - breadcrumb_title "##{@pipeline.id}"
 - page_title _('Pipeline')
 
-.js-pipeline-container{ class: container_class, data: { controller_action: "#{controller.action_name}" } }
+.js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
   #js-pipeline-header-vue.pipeline-header-container
 
   - if @pipeline.commit.present?

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

-- @no_container = true
 - page_title _('Releases')
 
-%div{ class: container_class }
-  #js-releases-page{ data: { project_id: @project.id, illustration_path: image_path('illustrations/releases.svg'), documentation_path: help_page_path('user/project/releases/index') } }
+#js-releases-page{ data: { project_id: @project.id, illustration_path: image_path('illustrations/releases.svg'), documentation_path: help_page_path('user/project/releases/index') } }

app/views/projects/serverless/functions/index.html.haml

-- @no_container = true
 - @content_class = "limit-container-width" unless fluid_layout
 - breadcrumb_title 'Serverless'
 - page_title 'Serverless'
@@ -10,7 +9,7 @@
   clusters_path: clusters_path,
   help_path: help_page_path('user/project/clusters/serverless/index') } }
 
-%div{ class: [container_class, ('limit-container-width' unless fluid_layout)] }
+%div{ class: [('limit-container-width' unless fluid_layout)] }
   .js-serverless-functions-notice
     .flash-container
 

app/views/projects/serverless/functions/show.html.haml

-- @no_container = true
 - @content_class = "limit-container-width" unless fluid_layout
 - clusters_path = project_clusters_path(@project)
 - help_path = help_page_path('user/project/clusters/serverless/index')
@@ -12,7 +11,7 @@
   clusters_path: clusters_path,
   help_path: help_path } }
 
-%div{ class: [container_class, ('limit-container-width' unless fluid_layout)] }
+%div{ class: [('limit-container-width' unless fluid_layout)] }
   .serverless-function-details#js-serverless-function-details
 
   .js-serverless-function-notice

app/views/projects/show.html.haml

-- @no_container = true
 - breadcrumb_title _("Details")
 - @content_class = "limit-container-width" unless fluid_layout
 
@@ -11,7 +10,7 @@
   - signatures_path = project_signatures_path(@project, @project.default_branch)
   .js-signature-container{ data: { 'signatures-path': signatures_path } }
 
-%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
+%div{ class: [("limit-container-width" unless fluid_layout)] }
   = render "projects/last_push"
 
   = render "home_panel"

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

-- @no_container = true
 - @sort ||= sort_value_recently_updated
 - page_title s_('TagsPage|Tags')
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_tags_url(@project, rss_url_options), title: "#{@project.name} tags")
 
-.flex-list{ class: container_class }
+.flex-list
   .top-area.adjust
     .nav-text.row-main-content
       = s_('TagsPage|Tags give the ability to mark specific points in history as being important')

app/views/projects/tags/releases/edit.html.haml

-- @no_container = true
 - add_to_breadcrumbs "Tags", project_tags_path(@project)
 - breadcrumb_title @tag.name
 - page_title "Edit", @tag.name, "Tags"
 
-%div{ class: container_class }
-  .sub-header-block.no-bottom-space
+.sub-header-block.no-bottom-space
   .oneline
     .title
       Release notes for tag
       %strong= @tag.name
 
-
-  = form_for(@release, method: :put, url: project_tag_release_path(@project, @tag.name),
+= form_for(@release, method: :put, url: project_tag_release_path(@project, @tag.name),
             html: { class: 'common-note-form release-form js-quick-submit' }) do |f|
   = render layout: 'projects/md_preview', locals: { url: preview_markdown_path(@project), referenced_users: true } do
     = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here…"

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

-- @no_container = true
 - add_to_breadcrumbs s_('TagsPage|Tags'), project_tags_path(@project)
 - breadcrumb_title @tag.name
 - page_title @tag.name, s_('TagsPage|Tags')
 
-%div{ class: container_class }
-  .top-area.multi-line.flex-wrap
+.top-area.multi-line.flex-wrap
   .nav-text
     .title
       %span.item-title.ref-name
@@ -37,7 +35,7 @@
     %pre.wrap
       = strip_gpg_signature(@tag.message)
 
-  .append-bottom-default.prepend-top-default
+.append-bottom-default.prepend-top-default
   - if @release.description.present?
     .description.md
       = markdown_field(@release, :description)

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

-- @no_container = true
 - breadcrumb_title _("Repository")
 - @content_class = "limit-container-width" unless fluid_layout
 - signatures_path = namespace_project_signatures_path(namespace_id: @project.namespace.full_path, project_id: @project.path, id: @last_commit)
@@ -9,6 +8,5 @@
 
 .js-signature-container{ data: { 'signatures-path': signatures_path } }
 
-%div{ class: [(container_class), ("limit-container-width" unless fluid_layout)] }
-  = render 'projects/last_push'
-  = render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_tree_path(@project, @id)
+= render 'projects/last_push'
+= render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_tree_path(@project, @id)

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

-- @no_container = true
 - add_to_breadcrumbs "Wiki", project_wiki_path(@project, :home)
 - breadcrumb_title s_("Wiki|Pages")
 - page_title s_("Wiki|Pages"), _("Wiki")
 - sort_title = wiki_sort_title(params[:sort])
 
-%div{ class: container_class }
-  .wiki-page-header.top-area.flex-column.flex-lg-row
+.wiki-page-header.top-area.flex-column.flex-lg-row
 
   .nav-text.flex-fill
     %h2.wiki-page-title
@@ -28,7 +26,7 @@
               = sortable_item(s_("Wiki|Created date"), project_wikis_pages_path(@project, sort: ProjectWiki::CREATED_AT_ORDER), sort_title)
         = wiki_sort_controls(@project, params[:sort], params[:direction])
 
-  %ul.wiki-pages-list.content-list
+%ul.wiki-pages-list.content-list
   = render @wiki_entries, context: 'pages'
 
-  = paginate @wiki_pages, theme: 'gitlab'
+= paginate @wiki_pages, theme: 'gitlab'

app/views/users/show.html.haml

 - @hide_top_links = true
 - @hide_breadcrumbs = true
+- @no_container = true
 - page_title       @user.name
 - page_description @user.bio
 - header_title     @user.name, user_path(@user)
-- @no_container = true
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")

changelogs/unreleased/36765-flash-notification.yml

+---
+title: Make flash notifications sticky
+merge_request: 30141
+author:
+type: changed

spec/javascripts/flash_spec.js

@@ -25,14 +25,6 @@ describe('Flash', () => {
         '<script>alert("a");</script>',
       );
     });
-
-    it('adds container classes when inside content wrapper', () => {
-      el.innerHTML = createFlashEl('testing', 'alert', true);
-
-      expect(el.querySelector('.flash-text').classList.contains('container-fluid')).toBeTruthy();
-
-      expect(el.querySelector('.flash-text').classList.contains('container-limited')).toBeTruthy();
-    });
   });
 
   describe('hideFlash', () => {
@@ -171,9 +163,7 @@ describe('Flash', () => {
       it('adds container classes when inside content-wrapper', () => {
         flash('test');
 
-        expect(document.querySelector('.flash-text').className).toBe(
-          'flash-text container-fluid container-limited limit-container-width',
-        );
+        expect(document.querySelector('.flash-text').className).toBe('flash-text');
       });
 
       it('does not add container when outside of content-wrapper', () => {