Skip to content

Drop contained alerts behavior

Paul Gascou-Vaillancourt requested to merge remove-alert-contained-prop into master

What does this MR do and why?

This drops alerts' contained behavior altogether. This behavior was already bypassed by removing the necessary CSS class in !79235 (merged). This cleans up the remaining code that's become ineffective since that change.

Additionally:

  • is_contained arguments have all been removed as those are now ineffective.
  • The contained prop that was used once has been removed to align with the HAML changes.

We have a GitLab UI MR to propagate those changes to the GlAlert component: gitlab-ui!2669 (merged).

Screenshots or screen recordings

The following screenshots have been captured with the Layout width setting set to Fluid in the user settings.

HAML alert

There is no visual change for HAML alerts as the behavior was already dropped in !79235 (merged). Here's an example alert that had the is_contained argument set to true:

LDAP account alert
Screen_Shot_2022-02-21_at_5.34.12_PM

This alert can be seen at /-/profile/account after applying the following patch:

diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 97056db6b74..2d367a8741f 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -1,7 +1,7 @@
 - page_title _('Account')
 - @content_class = "limit-container-width" unless fluid_layout
 
-- if current_user.ldap_user?
+- if true
   = render 'shared/global_alert',
     variant: :info,
     alert_class: 'gl-my-5',

Vue alert

There was only one Vue alert that used the the contained prop. It now uses the default layout:

Before After
before after

This alert can be seen by navigating to a project's General Settings > Merge request approvals at /:namespace/:project/edit#js-merge-request-approval-settings and forcing the error alert to show up by applying the following patch:

diff --git a/ee/app/assets/javascripts/approvals/components/approval_settings.vue b/ee/app/assets/javascripts/approvals/components/approval_settings.vue
index a9c043e7895..dc7b9ee3544 100644
--- a/ee/app/assets/javascripts/approvals/components/approval_settings.vue
+++ b/ee/app/assets/javascripts/approvals/components/approval_settings.vue
@@ -46,7 +46,7 @@ export default {
     ...mapState({
       isLoading: (state) => state.approvalSettings.isLoading,
       settings: (state) => state.approvalSettings.settings,
-      errorMessage: (state) => state.approvalSettings.errorMessage,
+      errorMessage: (state) => 'Mock error message',
       preventAuthorApproval: (state) => state.approvalSettings.settings.preventAuthorApproval,
       preventCommittersApproval: (state) =>
         state.approvalSettings.settings.preventCommittersApproval,

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Re gitlab-org/gitlab-services/design.gitlab.com#1230 (closed) gitlab-ui#1696 (closed).

Edited by Paul Gascou-Vaillancourt

Merge request reports