Merge pull request #4168 from 3scale/THREESCALE-9908_usage_rules

♻️🦋 refactor, improve, PF4 and make equal both usage rules pages

Author: josemigallas

app/assets/stylesheets/provider/_forms.scss

@@ -5,7 +5,7 @@ input[type='text']:not(.pf-c-form-control, .pf-c-text-input-group__text-input),
 input[type='search']:not(.pf-c-form-control),
 input[type='number'],
 textarea,
-select,
+select:not(.pf-c-form-control),
 form.button-to button:not(.pf-c-button),
 form.formtastic:not(.pf-c-form) button:not(.pf-c-button, .btn-add, .btn-danger,
   .pf-c-data-list__item-draggable-button, .pf-c-dropdown__toggle-button, .pf-c-dropdown__menu-item),
@@ -208,10 +208,6 @@ form.formtastic:not(.pf-c-form) ol > li {
   max-width: line-height-times(32);
   position: relative;
 
-  &.full-width {
-    max-width: 100%;
-  }
-
   &.hidden {
     margin: 0;
   }
@@ -376,7 +372,7 @@ form.formtastic:not(.pf-c-form) fieldset.inputs label.disabled {
   color: $disabled-color;
 }
 
-select:disabled,
+select:disabled:not(.pf-c-form-control),
 form.formtastic:not(.pf-c-form) fieldset.inputs input:disabled,
 form.formtastic:not(.pf-c-form) fieldset.inputs input[readonly="readonly"] {
   outline: none !important;
@@ -594,7 +590,7 @@ form.formtastic#new_metric {
 
 // HACK: first pf-c-section in a form don't have margin-top. However, formtastic adds hidden fields
 // before and therefore the section is not a first element and margin-top is maintained.
-.pf-c-form.formtastic > input[type="hidden"] + .pf-c-form__section {
+.pf-c-form > input[type="hidden"] + .pf-c-form__section {
   margin-top: 0;
 }
 

app/assets/stylesheets/provider/_theme.scss

@@ -57,7 +57,6 @@
 @import 'provider/admin/apiconfig/services/promote_form';
 @import 'provider/admin/apiconfig/services/promote_button';
 @import 'provider/admin/apiconfig/services/configuration_version';
-@import 'provider/sites/usage_rules';
 @import 'provider/colorbox';
 @import 'provider/pagination';
 @import 'provider/print';

app/assets/stylesheets/provider/sites/usage_rules.scss

@@ -3,11 +3,17 @@
 class PatternflyCheckboxInput < Formtastic::Inputs::BooleanInput
   delegate :tag, to: :template
 
+  def self.block_compatible?
+    true
+  end
+
   def to_html
     tag.div(class: 'pf-c-form__group') do
       tag.div(class: 'pf-c-form__group-control') do
         tag.div(class: 'pf-c-check') do
-          hidden_field_html + input + label + description
+          content = hidden_field_html + input + label + description
+          content += template.capture(&options[:block]) if options[:block]
+          content
         end
       end
     end

app/inputs/patternfly_checkbox_input.rb

@@ -21,7 +21,7 @@ document.addEventListener('DOMContentLoaded', () => {
     .forEach(form => {
       form.addEventListener('change', () => {
         if (form.dataset.remote) {
-          void window.Rails.handleRemote(jQuery1(form))
+          void window.Rails.handleRemote.call(form, jQuery1(form))
         } else {
           form.submit()
         }

app/javascript/packs/provider.ts

@@ -1 +1,17 @@
 @import '~@patternfly/patternfly/components/Table/table.css';
+@import '~@patternfly/patternfly/utilities/Spacing/spacing.css';
+
+.use-service-plans,
+.use-account-plans {
+  grid-column: 2;
+  display: none;
+}
+
+#settings_account_plans_ui_visible:checked ~ .use-account-plans,
+#settings_service_plans_ui_visible:checked ~ .use-service-plans {
+  display: block;
+}
+
+.pf-c-form + .pf-c-form {
+  margin-top: var(--pf-global--spacer--xl) !important;
+}

app/javascript/packs/usage_rules.scss

@@ -48,4 +48,19 @@ def inputs(*args, &block)
       title + template.capture { yield block } # FIXME: Is this making the first render super slow?
     end
   end
+
+  def input(method, options = {}, &block)
+    if block_given?
+      input_class = namespaced_input_class(options[:as])
+
+      supports_blocks = input_class.respond_to?(:block_compatible?) &&
+                        input_class.block_compatible?
+
+      raise ArgumentError, "Input type :#{input_type} does not support blocks" unless supports_blocks
+
+      options[:block] = block
+    end
+
+    super(method, options)
+  end
 end

app/lib/fields/patternfly_form_builder.rb

@@ -20,12 +20,7 @@
 module Logic
   module PlanChanges
 
-    PERMISSIONS = [[ "Request a plan change", :request ],
-                   [ "Change the plan directly", :direct ],
-                   [ "Only request a plan change", :credit_card],
-                   [ "Request Credit Card entry for paid plans", :request_credit_card],
-                   [ "Don't allow plan changes", :none ]]
-
+    PERMISSIONS = %i[request direct credit_card request_credit_card none].freeze
 
     module Contract
       # Returns true, if +Buyer+ is able to ask for some kind of

app/lib/logic/plan_changes.rb

@@ -1,23 +1,87 @@
-- # TODO: When APIAP is default, adjust the old settings cukes to usage rules
+- content_for :title, 'Usage Rules'
 - content_for :page_header_title, 'Usage Rules'
 
-/ TODO: is this ever used? If so, replace with a DefaultPlanSelect (React) and forget about autosubmit
-- if (can? :manage, :service_plans) && !current_account.settings.service_plans_ui_visible?
-  = form_tag polymorphic_path([:masterize, :admin, @service, ServicePlan]), :method => :post, :class => 'service autosubmit formtastic', :remote => true do
-    fieldset.inputs
-      legend Default Service Plan
-      ol
-        li.string.optional
-          label for="default_plan"  Default plan
-          - service_plans_exists = @service.service_plans.exists?
-          = select_tag :id, options_from_collection_for_select(@service.service_plans.not_custom, "id", "name", lambda { |p| p.master? }),
-            :include_blank => true, :id => "default_plan", disabled: !service_plans_exists
-          - if service_plans_exists
-            p.inline-hints= @service.service_plans.first.class.human_attribute_name 'default_plan_hint'
-          - else
-            p.inline-hints Please create a service plan first.
-
-= semantic_form_for @service, :url => admin_service_path(@service) do |form|
-  = render :partial => 'api/services/forms/usage_rules', :locals => { :form => form }
-  = form.actions do
-    = form.commit_button 'Update Product'
+- content_for :javascripts do
+  = stylesheet_packs_chunks_tag 'pf_form', 'usage_rules'
+
+div class="pf-c-card"
+  div class="pf-c-card__body"
+    / TODO: THREESCALE-12093: remove autosubmit
+    - if (can? :manage, :service_plans) && !current_account.settings.service_plans_ui_visible? || true
+      = form_tag polymorphic_path([:masterize, :admin, @service, ServicePlan]), method: :post,
+                                                                                class: 'autosubmit pf-c-form pf-m-limit-width',
+                                                                                remote: true
+        section class="pf-c-form__section" role="group" aria-labelledby="settings-section-users"
+          div class="pf-c-form__section-title" id="settings-section-users" aria-hidden="true" Default service plan
+          div class="pf-c-form__group"
+            div class="pf-c-form__group-control"
+              - service_plans_exists = @service.service_plans.exists?
+              = select_tag :id, options_from_collection_for_select(@service.service_plans.not_custom, "id", "name", lambda { |p| p.master? }),
+                                prompt: '',
+                                class: "pf-c-form-control #{'pf-m-warning' unless service_plans_exists}",
+                                id: 'default_plan',
+                                disabled: !service_plans_exists
+              - if service_plans_exists
+                p class="pf-c-form__helper-text"
+                  = @service.service_plans.first.class.human_attribute_name('default_plan_hint')
+              - else
+                p class="pf-c-form__helper-text pf-m-warning"
+                  | Please create a service plan first
+
+    = semantic_form_for @service, url: admin_service_path(@service),
+                                  builder: Fields::PatternflyFormBuilder,
+                                  html: { class: "pf-c-form pf-m-limit-width" } do |form|
+      - multiple_applications = current_account.multiple_applications_allowed? && false
+      = form.inputs multiple_applications ? 'Application Requirements' : 'Signup & Use' do
+        / very old TODO: remove intentions_required and make it an extra_field? Or how about just remove it?
+        - unless multiple_applications
+          = form.input :intentions_required, as: :patternfly_checkbox
+
+        = form.input :buyers_manage_apps, as: :patternfly_checkbox
+
+        - if @service.backend_version.v2?
+          = form.input :buyers_manage_keys, as: :patternfly_checkbox
+          = form.input :mandatory_app_key, as: :patternfly_checkbox
+
+        - if @service.oauth?
+          = form.input :buyer_key_regenerate_enabled, as: :patternfly_checkbox
+
+        = form.input :referrer_filters_required, as: :patternfly_checkbox
+        = form.input :custom_keys_enabled, as: :patternfly_checkbox
+
+      = form.inputs "Application Plans" do
+        = form.input :buyer_can_select_plan, as: :patternfly_checkbox
+
+      = form.inputs "Application Plan Changing" do
+        p = t('sites.usage_rules.edit.plans_info')
+        div class="pf-c-form__group" role="radiogroup" aria-labelledby="change-plan-radio-group"
+          div class="pf-c-form__group-label" id="change-plan-radio-group"
+            label class="pf-c-form__label"
+              span class="pf-c-form__label-text"
+                = t('sites.usage_rules.edit.plans_label')
+          = render 'shared/plan_change_settings', setting: :buyer_plan_change_permission,
+                                                  current: @service.buyer_plan_change_permission.to_sym
+
+      = form.inputs 'Alerts' do
+        div class="pf-c-content"
+          p
+            ' Here you can set at which utilization levels you want to trigger alerts, whom you want to send these alerts to (admins and/or developers) and by which means (web and/or email).
+            em In order for an application to trigger usage alerts, usage limit(s) need to be set up in the Application Plan to which the application is subscribed.
+
+        table class="pf-c-table pf-m-grid-lg" role="grid"
+          thead
+            tr role="row"
+              th
+              - alert_limits.each do |level|
+                th role="columnheader" scope="col"
+                  = level
+                  | %
+
+          tbody
+            = row_for_alert_levels 'Show Web Alerts to Admins of this Account', :web_provider
+            = row_for_alert_levels 'Send Email Alerts to Admins of this Account', :email_provider
+            = row_for_alert_levels 'Show Web Alerts to Admins of the Developer Account', :web_buyer
+            = row_for_alert_levels 'Send Email Alerts to Admins of the Developer Account', :email_buyer
+
+      = form.actions do
+        = form.commit_button 'Update product'