Add latest changes from gitlab-org/gitlab@master

6 files changed, 71 insertions, 69 deletions

diff --git a/app/views/profiles/chat_names/_chat_name.html.haml b/app/views/profiles/chat_names/_chat_name.html.haml
index afc3894c23b..0ac8ede3c62 100644
--- a/app/views/profiles/chat_names/_chat_name.html.haml
+++ b/app/views/profiles/chat_names/_chat_name.html.haml
@@ -10,4 +10,4 @@
       = _('Never')
 
   %td
-    = link_to _('Remove'), profile_chat_name_path(chat_name), method: :delete, class: 'gl-button btn btn-danger float-right', aria: { label: _('Remove') }, data: { confirm: _('Are you sure you want to remove this nickname?'), confirm_btn_variant: 'danger' }
+    = link_button_to _('Remove'), profile_chat_name_path(chat_name), method: :delete, class: 'float-right', aria: { label: _('Remove') }, data: { confirm: _('Are you sure you want to remove this nickname?'), confirm_btn_variant: 'danger' }, variant: :danger
diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index 41e061ebfee..881ac7f2a7d 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -59,6 +59,6 @@
             .gl-display-flex.gl-justify-content-end.gl-align-items-flex-end.gl-flex-grow-1.gl-flex-wrap-reverse.gl-gap-3
               - unless email.confirmed?
                 - confirm_title = "#{email.confirmation_sent_at ? _('Resend confirmation email') : _('Send confirmation email')}"
-                = link_to confirm_title, resend_confirmation_instructions_profile_email_path(email), method: :put, class: 'gl-button btn btn-sm btn-default'
+                = link_button_to confirm_title, resend_confirmation_instructions_profile_email_path(email), method: :put, size: :small
 
               = link_button_to nil, profile_email_path(email), data: { confirm: _('Are you sure?'), qa_selector: 'delete_email_link'}, method: :delete, variant: :danger, size: :small, icon: 'remove', 'aria-label': _('Remove')
diff --git a/app/views/profiles/notifications/_email_settings.html.haml b/app/views/profiles/notifications/_email_settings.html.haml
index cd7a7ced1d4..60f366f8878 100644
--- a/app/views/profiles/notifications/_email_settings.html.haml
+++ b/app/views/profiles/notifications/_email_settings.html.haml
@@ -1,7 +1,6 @@
 - form = local_assigns.fetch(:form)
-.form-group
-  .js-notification-email-listbox-input{ data: { label: _('Notification Email'), name: 'user[notification_email]', emails: @user.public_verified_emails.to_json, empty_value_text: _('Use primary email (%{email})') % { email: @user.email }, value: @user.notification_email, disabled: local_assigns.fetch(:email_change_disabled, nil) } }
-  .help-block
-    = local_assigns.fetch(:help_text, nil)
+.js-notification-email-listbox-input.gl-mb-3{ data: { label: _('Global notification email'), name: 'user[notification_email]', emails: @user.public_verified_emails.to_json, empty_value_text: _('Use primary email (%{email})') % { email: @user.email }, value: @user.notification_email, disabled: local_assigns.fetch(:email_change_disabled, nil) } }
+.help-block
+  = local_assigns.fetch(:help_text, nil)
 .form-group
   = form.gitlab_ui_checkbox_component :email_opted_in, _('Receive product marketing emails')
diff --git a/app/views/profiles/notifications/_group_settings.html.haml b/app/views/profiles/notifications/_group_settings.html.haml
index 0ba7f66c1d4..1878634e56c 100644
--- a/app/views/profiles/notifications/_group_settings.html.haml
+++ b/app/views/profiles/notifications/_group_settings.html.haml
@@ -1,17 +1,15 @@
 - emails_disabled = group.emails_disabled?
 
-.gl-responsive-table-row.notification-list-item
-  .table-section.section-40
-    %span.notification.gl-mr-2
+.notification-list-item.gl-md-display-flex.gl-justify-content-space-between.gl-align-items-center.gl-px-3.gl-py-4
+  .gl-mb-2.gl-md-mb-0
+    %span.gl-mr-2
       = notification_icon(notification_icon_level(setting, emails_disabled))
 
-    %span.str-truncated
+    %span
       = link_to group.name, group_path(group)
 
-  .table-section.section-30.text-right
+  .gl-display-flex.gl-gap-3.gl-flex-wrap
     - if setting
-      .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(setting).to_json, notification_level: setting.level, group_id: group.id, container_class: 'gl-mr-3', show_label: "true" } }
-
-  .table-section.section-30
+      .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(setting).to_json, notification_level: setting.level, group_id: group.id, show_label: "true" } }
     = form_for setting, url: profile_group_notifications_path(group), method: :put, html: { class: 'update-notifications gl-display-flex' } do |f|
       .js-notification-email-listbox-input{ data: {  name: 'notification_setting[notification_email]', emails: @user.public_verified_emails.to_json, empty_value_text: _('Global notification email') , value: setting.notification_email, placement: 'right' } }
diff --git a/app/views/profiles/notifications/_project_settings.html.haml b/app/views/profiles/notifications/_project_settings.html.haml
index e6953d1b32e..955449f0ba1 100644
--- a/app/views/profiles/notifications/_project_settings.html.haml
+++ b/app/views/profiles/notifications/_project_settings.html.haml
@@ -1,12 +1,13 @@
 - emails_disabled = project.emails_disabled?
 
-%li.notification-list-item
-  %span.notification.gl-mr-2
-    = notification_icon(notification_icon_level(setting, emails_disabled))
+.notification-list-item.gl-md-display-flex.gl-justify-content-space-between.gl-align-items-center.gl-px-3.gl-py-4
+  .gl-mb-2.gl-md-mb-0
+    %span.gl-mr-2
+      = notification_icon(notification_icon_level(setting, emails_disabled))
 
-  %span.str-truncated
-    = link_to_project(project)
+    %span
+      = link_to_project(project)
 
-  .float-right
+  .gl-display-flex.gl-gap-3.gl-flex-wrap
     - if setting
       .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(setting).to_json, notification_level: setting.level, project_id: project.id, container_class: 'gl-mr-3', show_label: "true" } }
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index baca20cdbec..2c7ef2b7e0e 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -2,55 +2,59 @@
 - page_title _('Notifications')
 - @force_desktop_expanded_sidebar = true
 
-%div
-  - if @user.errors.any?
-    = render Pajamas::AlertComponent.new(variant: :danger) do |c|
-      - c.with_body do
-        %ul
-          - @user.errors.full_messages.each do |msg|
-            %li= msg
-
-  = hidden_field_tag :notification_type, 'global'
-  .row.gl-mt-3.js-search-settings-section
-    .col-lg-4
-      %h4.gl-mt-0
+- if @user.errors.any?
+  = render Pajamas::AlertComponent.new(variant: :danger) do |c|
+    - c.with_body do
+      %ul
+        - @user.errors.full_messages.each do |msg|
+          %li= msg
+
+= hidden_field_tag :notification_type, 'global'
+.settings-section.js-search-settings-section
+  .settings-sticky-header
+    .settings-sticky-header-inner
+      %h4.gl-my-0
         = page_title
-      %p
-        = _('You can specify notification level per group or per project.')
-      %p
-        = _('By default, all projects and groups will use the global notifications setting.')
-    .col-lg-8
-      %h5.gl-mt-0
-        = _('Global notification settings')
-
-      = gitlab_ui_form_for @user, url: profile_notifications_path, method: :put, html: { class: 'update-notifications gl-mt-3' } do |f|
-        = render_if_exists 'profiles/notifications/email_settings', form: f
-
-      = label_tag :global_notification_level, _('Global notification level'), class: "label-bold"
-      %br
-      .clearfix
-      .form-group.float-left.global-notification-setting
-        - if @global_notification_setting
-          .js-vue-notification-dropdown{ data: { dropdown_items: notification_dropdown_items(@global_notification_setting).to_json, notification_level: @global_notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), show_label: 'true' } }
-
-      .clearfix
-
-      = gitlab_ui_form_for @user, url: profile_notifications_path, method: :put do |f|
-        .form-group
-          = f.gitlab_ui_checkbox_component :notified_of_own_activity, _('Receive notifications about your own activity')
-
-      %hr
-      %h5
-        = _('Groups (%{count})') % { count: @user_groups.total_count }
-      %div
-        - @group_notifications.each do |setting|
-          = render 'group_settings', setting: setting, group: setting.source
-        = paginate @user_groups, theme: 'gitlab'
-      %h5
-        = _('Projects (%{count})') % { count: @project_notifications.size }
-      %p.account-well
-        = _('To specify the notification level per project of a group you belong to, you need to visit project page and change notification level there.')
-      .gl-mb-3
-        %ul.bordered-list
+  %p.gl-text-secondary
+    = _('You can specify notification level per group or per project.')
+
+  .gl-mt-0
+    = gitlab_ui_form_for @user, url: profile_notifications_path, method: :put, html: { class: 'update-notifications gl-mt-3' } do |f|
+      = render_if_exists 'profiles/notifications/email_settings', form: f
+
+    = label_tag :global_notification_level, _('Global notification level'), class: "label-bold gl-mb-0"
+    .gl-text-secondary.gl-mb-3
+      = _('By default, all projects and groups use the global notifications setting.')
+
+    .form-group.global-notification-setting.gl-mb-3
+      - if @global_notification_setting
+        .js-vue-notification-dropdown{ data: { dropdown_items: notification_dropdown_items(@global_notification_setting).to_json, notification_level: @global_notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), show_label: 'true' } }
+
+    = gitlab_ui_form_for @user, url: profile_notifications_path, method: :put do |f|
+      .form-group
+        = f.gitlab_ui_checkbox_component :notified_of_own_activity, _('Receive notifications about your own activity')
+
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header'}, body_options: { class: 'gl-new-card-body' }) do |c|
+      - c.with_header do
+        %h3.gl-new-card-title
+          = _('Groups (%{count})') % { count: @user_groups.total_count }
+      - c.with_body do
+        - if @user_groups.total_count > 0
+          - @group_notifications.each do |setting|
+            = render 'group_settings', setting: setting, group: setting.source
+          = paginate @user_groups, theme: 'gitlab'
+        - else
+          .gl-new-card-empty.gl-px-3.gl-py-4= _("You do not belong to any groups yet.")
+
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header gl-display-block'}, body_options: { class: 'gl-new-card-body' }) do |c|
+      - c.with_header do
+        %h3.gl-new-card-title
+          = _('Projects (%{count})') % { count: @project_notifications.size }
+        .gl-new-card-description
+          = _('To specify the notification level per project of a group you belong to, visit the project page and change the notification level there.')
+      - c.with_body do
+        - if @project_notifications.size > 0
           - @project_notifications.each do |setting|
             = render 'project_settings', setting: setting, project: setting.source
+        - else
+          .gl-new-card-empty.gl-px-3.gl-py-4= _("You do not belong to any projects yet.")