Separates banners from alerts
What does this MR do and why?
Aims to separate banners from alerts. From a hierarchy perspective banners should always appear on top of the page. For alerts we currently have full width and container restricted alerts. These can appear together (like for example in onboarding new users). To simplify and make the overall experience more congruent this MR cleans up order of banners & alerts and shows all alerts in the page container (depending on the user setting).
- Introduces a new wrapper to host banners independently of alerts
- Unifies appearance of banners
- Moves flash messages into alerts wrapper
- Moves top bar out of alerts wrapper (bugfix)
Changelog: changed
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Before | After |
---|---|
![]() |
![]() |
![]() |
![]() |
How to set up and validate locally
- Enable test patch to enable various banners & alerts (see below)
- Visit a page like project or a settings page
Test patch
diff --git a/app/views/shared/_outdated_browser.html.haml b/app/views/shared/_outdated_browser.html.haml
index e62e3bb4a6c6..229589e543b0 100644
--- a/app/views/shared/_outdated_browser.html.haml
+++ b/app/views/shared/_outdated_browser.html.haml
@@ -1,4 +1,4 @@
-- if outdated_browser?
+- if not outdated_browser?
= render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do |c|
- c.with_body do
= s_('OutdatedBrowser|GitLab may not work properly, because you are using an outdated web browser.')
diff --git a/app/views/shared/_token_expiration_banner.html.haml b/app/views/shared/_token_expiration_banner.html.haml
index e68fe613c22b..0af2478b1bf6 100644
--- a/app/views/shared/_token_expiration_banner.html.haml
+++ b/app/views/shared/_token_expiration_banner.html.haml
@@ -1,8 +1,8 @@
- id = 'token_expiration'
- cookie_key = 'hide_token_expiration_banner'
-- return unless show_token_expiration_banner?
-- return unless cookies[cookie_key].blank?
+-# - return unless show_token_expiration_banner?
+-# - return unless cookies[cookie_key].blank?
- link = link_to('', help_page_path('security/tokens/token_troubleshooting'), target: '_blank', rel: 'noopener noreferrer')
- message = safe_format(s_('AccessTokens|GitLab now enforces expiry dates on tokens that originally had no set expiration date. Those tokens were given an expiration date of one year later. Please review your personal access tokens, project access tokens, and group access tokens to ensure you are aware of upcoming expirations. Administrators of GitLab can find more information on how to identify and mitigate interruption in our %{link_start}documentation%{link_end}.'), tag_pair(link, :link_start, :link_end))
diff --git a/app/views/shared/projects/_inactive_project_deletion_alert.html.haml b/app/views/shared/projects/_inactive_project_deletion_alert.html.haml
index 8ac5c8b8defd..3cfb2e6ee9b9 100644
--- a/app/views/shared/projects/_inactive_project_deletion_alert.html.haml
+++ b/app/views/shared/projects/_inactive_project_deletion_alert.html.haml
@@ -1,7 +1,7 @@
-- if show_inactive_project_deletion_banner?(@project)
+- if not show_inactive_project_deletion_banner?(@project)
- link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('administration/inactive_project_deletion') }
- link_end = '</a>'.html_safe
- - deletion_date = inactive_project_deletion_date(@project)
+ - deletion_date = ''
- title = _('Due to inactivity, this project is scheduled to be deleted on %{deletion_date}. %{link_start}Why is this scheduled?%{link_end}').html_safe % { deletion_date: deletion_date, link_start: link_start, link_end: link_end }
= render Pajamas::AlertComponent.new(title: title, variant: :warning, dismissible: false)
diff --git a/ee/app/views/shared/_namespace_user_cap_reached_alert.html.haml b/ee/app/views/shared/_namespace_user_cap_reached_alert.html.haml
index 70bc6d639638..490ad900c7b8 100644
--- a/ee/app/views/shared/_namespace_user_cap_reached_alert.html.haml
+++ b/ee/app/views/shared/_namespace_user_cap_reached_alert.html.haml
@@ -1,7 +1,7 @@
- return unless current_user
- namespace = @project&.namespace || @group
- return unless namespace.present?
-- return unless display_namespace_user_cap_reached_alert?(namespace)
+-# - return unless display_namespace_user_cap_reached_alert?(namespace)
- root_namespace = namespace.root_ancestor
- pending_users_link = pending_members_group_usage_quotas_path(root_namespace)
diff --git a/ee/app/views/shared/_new_user_signups_cap_reached_alert.html.haml b/ee/app/views/shared/_new_user_signups_cap_reached_alert.html.haml
index b58bcf1b8fa4..8d9d75fbd1f5 100644
--- a/ee/app/views/shared/_new_user_signups_cap_reached_alert.html.haml
+++ b/ee/app/views/shared/_new_user_signups_cap_reached_alert.html.haml
@@ -1,4 +1,4 @@
-- return unless show_new_user_signups_cap_reached?
+-# - return unless show_new_user_signups_cap_reached?
- user_cap_help_url = help_page_path('administration/settings/sign_up_restrictions')
- help_link_start = '<a class="gl-link" href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: user_cap_help_url }
Related to #469616 (closed)
Merge request reports
Activity
changed milestone to %17.4
assigned to @seggenberger
added devopsfoundations label
added sectioncore platform label and removed sectiondev label
added pipelinetier-1 label
- A deleted user
added backend label
2 Warnings This MR changes code in ee/
, but its Changelog commit is missing theEE: true
trailer. Consider adding it to your Changelog commits.This merge request contains lines with testid selectors. Please ensure e2e:test-on-omnibus
job is run.testid
selectorsThe following changed lines in this MR contain
testid
selectors:ee/app/views/layouts/header/_licensed_user_count_threshold.html.haml
- close_button_options: { type: 'button', data: { testid: 'gitlab-ee-license-banner-dismiss' } }) do |c| + close_button_options: { type: 'button', data: { testid: 'gitlab-ee-license-banner-dismiss' } }) do |c|
ee/app/views/layouts/header/_seat_count_alert.html.haml
- close_button_options: { data: { testid: 'approaching-seat-count-threshold-alert-dismiss' }}) do |c| + close_button_options: { data: { testid: 'approaching-seat-count-threshold-alert-dismiss' }}) do |c|
ee/app/views/shared/_namespace_user_cap_reached_alert.html.haml
- testid: 'namespace_user_cap_alert_dismiss' }}) do |c| + testid: 'namespace_user_cap_alert_dismiss' }}) do |c|
If the
e2e:test-on-omnibus
job in theqa
stage has run automatically, please ensure the tests are passing. If the job has not run, please start themanual:e2e-test-pipeline-generate
job in theprepare
stage and ensure the tests infollow-up:e2e:test-on-omnibus-ee
pipeline are passing.For the list of known failures please refer to the latest pipeline triage issue.
If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.
Reviewer roulette
Category Reviewer Maintainer backend @zmartins
(UTC+2, same timezone as author)
@DylanGriffith
(UTC+10, 8 hours ahead of author)
frontend @agulina
(UTC+2, same timezone as author)
@psjakubowska
(UTC+2, same timezone as author)
test for spec/features/*
@zmartins
(UTC+2, same timezone as author)
Maintainer review is optional for test for spec/features/*
UX @paintedbicycle-gitlab
(UTC+0, 2 hours behind author)
Maintainer review is optional for UX Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.
If needed, you can retry the
danger-review
job that generated this comment.Generated by
Danger- Resolved by Payton Burdette
- Resolved by Payton Burdette
requested review from @jeldergl
- Resolved by Jeremy Elder
Hey @jeldergl
Like we discussed, here is my proposal to unify appearance of banners and alerts as well as ensure banners always stay on top
mentioned in merge request gitlab-ui!4496 (merged)
- Resolved by Payton Burdette
Bundle size analysis [beta]
This compares changes in bundle size for entry points between the commits c797d65b and edc0dbfd
Special assetsEntrypoint / Name Size before Size after Diff Diff in percent average 4.33 MB 4.33 MB - 0.0 % mainChunk 3.27 MB 3.27 MB - 0.0 %
Note: We do not have exact data for c797d65b. So we have used data from: e5042b0e.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.Please look at the full report for more details
Read more about how this report works.
Generated by
Danger- Resolved by Payton Burdette
added pipeline:mr-approved label
added pipelinetier-2 label and removed pipelinetier-1 label
Before you set this MR to auto-merge
This merge request will progress on pipeline tiers until it reaches the last tier: pipelinetier-3. We will trigger a new pipeline for each transition to a higher tier.
Before you set this MR to auto-merge, please check the following:
- You are the last maintainer of this merge request
- The latest pipeline for this merge request is pipelinetier-3 (You can find which tier it is in the pipeline name)
- This pipeline is recent enough (created in the last 8 hours)
If all the criteria above apply, please set auto-merge for this merge request.
See pipeline tiers and merging a merge request for more details.
removed review request for @jeldergl
E2E Test Result Summary
allure-report-publisher
generated test report!e2e-test-on-gdk:
test report for edc0dbfdexpand test summary
+------------------------------------------------------------------+ | suites summary | +-------------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +-------------+--------+--------+---------+-------+-------+--------+ | Monitor | 8 | 0 | 0 | 0 | 8 | ✅ | | Create | 128 | 0 | 16 | 0 | 144 | ✅ | | Govern | 71 | 0 | 0 | 0 | 71 | ✅ | | Verify | 44 | 0 | 2 | 0 | 46 | ✅ | | Plan | 73 | 0 | 0 | 0 | 73 | ✅ | | Data Stores | 31 | 0 | 1 | 0 | 32 | ✅ | | Manage | 1 | 0 | 1 | 0 | 2 | ✅ | | Secure | 3 | 0 | 0 | 0 | 3 | ✅ | | Package | 20 | 0 | 12 | 0 | 32 | ✅ | | Fulfillment | 2 | 0 | 0 | 0 | 2 | ✅ | | Release | 5 | 0 | 0 | 0 | 5 | ✅ | | Analytics | 2 | 0 | 0 | 0 | 2 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+ | Total | 388 | 0 | 32 | 0 | 420 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+
- Resolved by Payton Burdette
requested review from @kkloss
added 522 commits
-
bee0483c...606bc3db - 521 commits from branch
master
- 280854fb - Seperates banners from alerts
-
bee0483c...606bc3db - 521 commits from branch
requested review from @kkloss
requested review from @pburdette
added pipelinetier-3 pipeline:run-e2e-omnibus-once labels and removed pipelinetier-2 label
- Resolved by Kamil Trzciński
@ayufan can you maintain this one please?
removed review request for @kkloss
removed review request for @pburdette
requested review from @ayufan
removed review request for @ayufan
added 1078 commits
-
4ffa7a51...3ab8f03f - 1077 commits from branch
master
- edc0dbfd - Seperates banners from alerts
-
4ffa7a51...3ab8f03f - 1077 commits from branch
reset approvals from @ayufan, @pburdette, and @kkloss by pushing to the branch
requested review from @ayufan and @pburdette
added this merge request to the merge train at position 4
mentioned in commit c566b21a
added workflowstaging-canary label
added workflowcanary label and removed workflowstaging-canary label
added workflowstaging label and removed workflowcanary label
added workflowproduction label and removed workflowstaging label
added workflowpost-deploy-db-production label and removed workflowproduction label
mentioned in merge request !165461 (merged)
added releasedcandidate label
mentioned in merge request kubitus-project/kubitus-installer!3354 (merged)
- Resolved by Justin Ho Tuan Duong
mentioned in issue #497088 (closed)
mentioned in merge request !167898 (merged)
added releasedpublished label and removed releasedcandidate label