Merge pull request #3913 from 3scale/THREESCALE-11419_notification_prefs

🦋 Update Notification Preferences page

app/controllers/provider/admin/user/notification_preferences_controller.rb

@@ -1,19 +1,19 @@
+# frozen_string_literal: true
+
 class Provider::Admin::User::NotificationPreferencesController < Provider::Admin::User::BaseController
   activate_menu :account, :personal, :notification_preferences
   respond_to :html
 
-  before_action :initialize_preferences_form, only: [:show, :update]
+  before_action :initialize_preferences_form, only: %i[show update]
 
   def show
-    respond_with(@preferences_form)
+    respond_with(@preferences)
   end
 
   def update
-    if @preferences_form.update(notification_preferences_params)
-      flash[:success] = 'Preferences updated'
-    end
+    flash[:success] = t('.success') if @preferences.update(notification_preferences_params)
 
-    respond_with(@preferences_form, location: url_for(action: :show))
+    respond_with(@preferences, location: url_for(action: :show))
   end
 
   protected
@@ -25,7 +25,6 @@ def notification_preferences_params
   private
 
   def initialize_preferences_form
-    @preferences_form = NotificationPreferencesForm.new(
-      current_user, current_user.notification_preferences)
+    @preferences = NotificationPreferencesForm.new(current_user, current_user.notification_preferences)
   end
 end

app/inputs/patternfly_check_boxes_input.rb

@@ -5,11 +5,13 @@ class PatternflyCheckBoxesInput < Formtastic::Inputs::CheckBoxesInput
 
   def to_html
     tag.div(class: 'pf-c-form__group') do
-      label + control
+      label_html + control
     end
   end
 
-  def label
+  def label_html
+    return ''.html_safe if options[:label] == false
+
     tag.div(class: 'pf-c-form__group-label') do
       tag.label(class: 'pf-c-form__label', for: input_html_options[:id]) do
         tag.span(label_text, class: 'pf-c-form__label-text')
@@ -25,8 +27,8 @@ def control
   end
 
   def choice_html(choice)
-    tag.div(class: 'pf-c-check') do
-      checkbox_input(choice) + choice_label(choice)
+    tag.div(class: 'pf-c-check pf-c-check__check_boxes-custom_spacing') do
+      checkbox_input(choice) + choice_label(choice) + choice_description(choice)
     end
   end
 
@@ -43,14 +45,21 @@ def checkbox_input(choice)
   end
 
   def choice_label(choice)
-    label_text = choice[0]
-    tag.label(label_text, class: 'pf-c-check__label',
-                          for: choice_input_dom_id(choice))
+    choice_label_text = choice[0]
+    tag.label(choice_label_text, class: 'pf-c-check__label',
+                                 for: choice_input_dom_id(choice))
   end
 
   def helper_text_invalid
     return if errors.empty?
 
     template.render partial: 'shared/pf_error_helper_text', locals: { error: errors.first }
   end
+
+  def choice_description(choice)
+    return unless (member_hint = options[:member_hint])
+
+    description_text = member_hint.call(choice.is_a?(Array) ? choice.last : choice)
+    tag.span(description_text, class: 'pf-c-check__description')
+  end
 end

app/javascript/packs/pf_form.scss

@@ -2,3 +2,9 @@
 @import '~@patternfly/patternfly/components/Check/check.css';
 @import '~@patternfly/patternfly/components/Form/form.css';
 @import '~@patternfly/patternfly/components/FormControl/form-control.css';
+
+.pf-c-form__group-control {
+  .pf-c-check + .pf-c-check__check_boxes-custom_spacing {
+    margin-top: var(--pf-c-check__body--MarginTop);
+  }
+}

app/lib/fields/patternfly_form_builder.rb

@@ -25,4 +25,13 @@ def delete_button(title, href, opts = {})
   def collection_select(*opts)
     super(*opts.first(4), {}, { class: 'pf-c-form-control' })
   end
+
+  def inputs(*args, &block)
+    tag.section(class: 'pf-c-form__section', role: 'group') do
+      tag.div(args.first, class: 'pf-c-form__section-title') +
+        tag.div do # TODO: remove this div, ideally concat title + block
+          yield block
+        end
+    end
+  end
 end

app/views/provider/admin/user/notification_preferences/show.html.slim

@@ -1,12 +1,30 @@
-- content_for :page_header_title, 'Notification Preferences'
-- content_for :page_header_body do
-  ' Events originate from interactions with the 3scale interface & the 3scale API. They can be
-  ' triggered by developers, you, your team & 3scale. You will only receive API-related
-  ' notifications for those APIs that you have access to.
-
-- if @preferences_form.categories.blank?
-  p= t('.no_notification_preferences_html', account_name: current_user.account.name,
-                                            username: current_user.account.first_admin.username,
-                                            email: current_user.account.first_admin.email)
+- content_for :page_header_title, t('.header_title')
+- content_for :page_header_body, t('.header_body')
+
+- categories = @preferences.categories
+
+- if categories.blank?
+  - admin = current_user.account.first_admin
+  = render partial: 'shared/empty_state', locals: { title: t('.empty_state.title'),
+                                                    body: t('.empty_state.body_html', account: current_user.account.name, username: admin.username, email: admin.email),
+                                                    icon: :lock }
 - else
-  = render 'form', preferences_form: @preferences_form
+  - content_for :javascripts do
+    = stylesheet_packs_chunks_tag 'pf_form'
+
+  div class="pf-c-card"
+    div class="pf-c-card__body"
+      = semantic_form_for @preferences.model, url: provider_admin_user_notification_preferences_path,
+                                              builder: Fields::PatternflyFormBuilder,
+                                              method: :patch,
+                                              html: { class: 'pf-c-form pf-m-limit-width' } do |f|
+
+        - categories.each do |category|
+          = f.inputs t(category.title_key, scope: :notification_category_titles) do
+            = f.input :enabled_notifications, as: :patternfly_check_boxes,
+                                              label: false,
+                                              collection: category.notifications.map { |value| [t(value, scope: :notification_preference_titles), value] },
+                                              member_hint: ->(value) { t(value, scope: :notification_preference_hints) }
+
+        = f.actions do
+          = f.commit_button t('.submit_button_label')

config/locales/en.yml

@@ -513,11 +513,19 @@ en:
             submit_button_label: Create Access Token
         notification_preferences:
           show:
-            no_notification_preferences_html: |
-              You don't have access to any notifications on the %{account_name} account.
-              Please contact <a href="mailto:%{email}">%{username}</a> to request access.
-          form:
-            submit_button_label: 'Update Notification Preferences'
+            header_title: Notification Preferences
+            header_body:
+              Events originate from interactions with the 3scale interface & the 3scale API. They
+              can be triggered by developers, you, your team & 3scale. You will only receive
+              API-related notifications for those APIs that you have access to.
+            empty_state:
+              title: Access denied
+              body_html:
+                You don't have access to any notifications on the %{account} account.
+                Please contact <a href="mailto:%{email}">%{username}</a> to request access.
+            submit_button_label: Update Notification Preferences
+          update:
+            success: Notification preferences successfully updated.
         personal_details:
           edit:
             form: