Merge pull request #3739 from 3scale/THREESCALE-10691_account_overvie…

…w_cards

🦋 Account overview layout (Cards)

app/assets/stylesheets/provider/_tables.scss

@@ -48,14 +48,6 @@ table:not(.pf-c-table) button.action {
   display: inline-block;
 }
 
-table.list {
-  td,
-  th {
-    border-bottom: $border-width solid $border-color;
-    font-weight: $font-weight-normal;
-  }
-}
-
 .u-fiveEqualColumns {
   td,
   th {
@@ -71,6 +63,11 @@ table.list {
 }
 
 table.list {
+  td,
+  th {
+    border-bottom: $border-width solid $border-color;
+    font-weight: $font-weight-normal;
+  }
 
   .feature {
     td,
@@ -85,16 +82,6 @@ table.list {
     }
   }
 
-  td,
-  th {
-    width: 40%;
-
-    &:last-child {
-      width: 60%;
-    }
-  }
-
-
   .action:last-child,
   input[type='submit']:last-child {
     clear: both;
@@ -103,6 +90,22 @@ table.list {
     line-height: $line-height-base;
     margin: 0 line-height-times(-1/2) 0 0;
   }
+
+  border-collapse: collapse;
+  border-color: transparent;
+  margin-bottom: 0;
+  margin-top: 0;
+  width: 100%;
+
+  th {
+    border-bottom: $border-width solid $border-color;
+    padding-right: line-height-times(1/2);
+    text-align: left;
+  }
+
+  &.list-checkmarks tr th {
+    word-break: break-word;
+  }
 }
 
 table.mini {
@@ -119,14 +122,6 @@ table.mini, table#configs {
 
 // --- components/tables.css ---
 
-table.list {
-  border-collapse: collapse;
-  border-color: transparent;
-  margin-bottom: 0;
-  margin-top: 0;
-  width: 100%;
-}
-
 td.right {
   text-align: right;
 }
@@ -152,12 +147,6 @@ table.horizontal th {
   border-bottom: $border-width solid $border-color;
 }
 
-table.list th {
-  border-bottom: $border-width solid $border-color;
-  padding-right: line-height-times(1/2);
-  text-align: left;
-}
-
 table.inverted th {
   font-weight: $font-weight-normal;
 }
@@ -202,10 +191,6 @@ td.thhead h3 {
   text-align: right;
 }
 
-table.list.list-checkmarks tr th {
-  word-break: break-word;
-}
-
 // Overrides
 table#mapping_rules .actions a.action.add {
   margin: line-height-times(-1/4) line-height-times(1 / 2);

app/lib/fields/patternfly_form_builder.rb

@@ -16,4 +16,8 @@ def output_html(field, options = {})
   def commit_button(title, opts = {})
     tag.button(title, type: :submit, class: 'pf-c-button pf-m-primary', **opts)
   end
+
+  def collection_select(*opts)
+    super(*opts.first(4), {}, { class: 'pf-c-form-control' })
+  end
 end

app/views/buyers/accounts/_account_details.html.slim

@@ -0,0 +1,67 @@
+- account = local_assigns[:account]
+table.list
+  tr
+    th = account.field_label("org_name")
+    td
+      = account.field_value("org_name")
+      - if can? :impersonate, account
+        => link_to 'Impersonate',
+                  admin_buyers_account_impersonation_path(account),
+                  class: 'action bolt', method: 'post', target: '_blank'
+      => link_to 'Send message',
+                new_provider_admin_messages_outbox_path(to: account),
+                class: 'action message fancybox'
+  - if current_account.master? && account.provider?
+    tr
+      th Public domain
+      td = link_to account.external_domain, public_domain(account), target: "_blank"
+    tr
+      th Admin domain
+      td = link_to account.external_admin_domain,
+                  provider_admin_dashboard_url(host: account.external_admin_domain),
+                  target: "_blank"
+  - if account.admins.present?
+    tr
+      th Administrator
+      td
+        => account.admin_user_display_name
+        - admin_user_email = account.admin_user.email
+        - if admin_user_email.present?
+          | (#{mail_to admin_user_email})
+  tr
+    th Signed up on
+    td = account.created_at.to_s(:long)
+  = fields_definitions_rows account,
+                            %w{org_name org_legaladdress org_legaladdress_cont city state_region}
+  - unless account.org_legaladdress.blank? \
+          && account.org_legaladdress_cont.blank? \
+          && account.city.blank? && account.state_region.blank? \
+          && account.country.try(:name).blank?
+    tr
+      th Address
+      td = account_address(account)
+  tr
+    th Status
+    td
+      => account_states_info(account)
+      - if account.pending?
+        => fancy_button_to 'Approve',
+                          approve_admin_buyers_account_path(account),
+                          method: :post,
+                          class: 'approve action'
+        => fancy_button_to 'Reject',
+                          reject_admin_buyers_account_path(account),
+                          method: :post,
+                          class: 'reject action'
+      - unless account.suspended_or_scheduled_for_deletion?
+        = action_link_to 'Suspend',
+                          suspend_admin_buyers_account_path(account),
+                          method: :post,
+                          data: { confirm: 'Are you sure?', disable_with: 'suspending…' },
+                          class: 'action suspend'
+      - if can?(:resume, account) && account.can_resume?
+        = action_link_to 'Resume',
+                        resume_admin_buyers_account_path(account),
+                        method: :post,
+                        data: { confirm: 'Are you sure?', disable_with: 'resuming…' },
+                        class: 'action resume'

app/views/buyers/accounts/_account_plan.html.erb

@@ -1,4 +1,4 @@
-<div class="dashboard_card round" id="plan-widget-with-actions" >
+<div id="plan-widget-with-actions">
   <h3>
     <%= plan_header plan %>
   </h3>

app/views/buyers/accounts/_change_plan.html.slim

@@ -0,0 +1,14 @@
+- account = local_assigns[:account]
+- plans = local_assigns[:plans]
+
+= form_for account.bought_account_contract, builder: Fields::PatternflyFormBuilder,
+                                            url: admin_buyers_account_contract_path(account),
+                                            html: { method: :put, class: "pf-c-form" } do |form|
+  div class="pf-c-form__group"
+    div class="pf-c-form__group-label"
+      label class="pf-c-form__label" for="cinstance_plan_id"
+        span class="pf-c-form__label-text" Change Plan
+    = form.collection_select :plan_id, plans, :id, :name
+
+  = form.actions do
+    = form.commit_button 'Change', data: { confirm: plan_confirm_message(account.bought_account_plan) }

app/views/buyers/accounts/_monthly_charging.html.erb

@@ -1,4 +1,3 @@
-<h3>Billing Status</h3>
 <table class='list' id='finance-status'>
 
   <tr>

app/views/buyers/accounts/show.html.slim

@@ -8,107 +8,55 @@
         ' Account: #{@account.org_name}
         - if can? :update, @account
           = link_to 'Edit', edit_admin_buyers_account_path(@account), class: 'action edit'
-#twoCol.equal-width
-  .left
-    .dashboard_card.round aria-label="Account details"
-      table.list
-        tr
-          th = @account.field_label("org_name")
-          td
-            = @account.field_value("org_name")
-            - if can? :impersonate, @account
-              => link_to 'Impersonate',
-                         admin_buyers_account_impersonation_path(@account),
-                         class: 'action bolt', method: 'post', target: '_blank'
-            => link_to 'Send message',
-                       new_provider_admin_messages_outbox_path(to: @account),
-                       class: 'action message fancybox'
-        - if current_account.master? && @account.provider?
-          tr
-            th Public domain
-            td = link_to @account.external_domain, public_domain(@account), target: "_blank"
-          tr
-            th Admin domain
-            td = link_to @account.external_admin_domain,
-                         provider_admin_dashboard_url(host: @account.external_admin_domain),
-                         target: "_blank"
-        - if @account.admins.present?
-          tr
-            th Administrator
-            td
-              => @account.admin_user_display_name
-              - admin_user_email = @account.admin_user.email
-              - if admin_user_email.present?
-                | (#{mail_to admin_user_email})
-        tr
-          th Signed up on
-          td = @account.created_at.to_s(:long)
-        = fields_definitions_rows @account,
-                                  %w{org_name org_legaladdress org_legaladdress_cont city state_region}
-        - unless @account.org_legaladdress.blank? \
-                 && @account.org_legaladdress_cont.blank? \
-                 && @account.city.blank? && @account.state_region.blank? \
-                 && @account.country.try(:name).blank?
-          tr
-            th Address
-            td = account_address(@account)
-        tr
-          th Status
-          td
-            => account_states_info(@account)
-            - if @account.pending?
-              => fancy_button_to 'Approve',
-                                 approve_admin_buyers_account_path(@account),
-                                 method: :post,
-                                 class: 'approve action'
-              => fancy_button_to 'Reject',
-                                 reject_admin_buyers_account_path(@account),
-                                 method: :post,
-                                 class: 'reject action'
-            - unless @account.suspended_or_scheduled_for_deletion?
-              = action_link_to 'Suspend',
-                                suspend_admin_buyers_account_path(@account),
-                                method: :post,
-                                data: { confirm: 'Are you sure?', disable_with: 'suspending…' },
-                                class: 'action suspend'
-            - if can?(:resume, @account) && @account.can_resume?
-              = action_link_to 'Resume',
-                               resume_admin_buyers_account_path(@account),
-                               method: :post,
-                               data: { confirm: 'Are you sure?', disable_with: 'resuming…' },
-                               class: 'action resume'
-    - if can?(:update, :provider_plans) && can?(:update, @account.bought_cinstance.service)
-      = render 'master/providers/plans/widget', provider: @account
-    - if can?(:manage, :finance)
-      .dashboard_card.round
-        = render 'monthly_charging', account: @account
 
-  .right_narrow
-    - if account_plans_management_visible?
-      = render partial: 'account_plan',
-               locals: { \
-                 plan: @account.bought_account_plan,
-                 contract:  @account.bought_account_contract \
-               }
+div class="pf-l-grid pf-m-gutter pf-m-all-6-col"
+  / Left column
+  div class="pf-l-grid__item"
+    div class="pf-l-flex pf-m-column pf-m-flex-1"
+      div class="pf-l-flex__item"
+        div class="pf-c-card" aria-label="Account details"
+          div class="pf-c-card__body"
+            = render partial: 'account_details', locals: { account: @account }
 
-      - if can?(:manage, :plans) \
-           && @account.provider_account.account_plans.stock.published.size > 1
-        .dashboard_card.round
-          h3
-            label for="cinstance_plan_id" Change Plan
+      - if can?(:update, :provider_plans) && can?(:update, @account.bought_cinstance.service)
+        div class="pf-l-flex__item"
+          = render 'master/providers/plans/widget', provider: @account
 
-          = form_for @account.bought_account_contract,
-                    url: admin_buyers_account_contract_path(@account),
-                    html: { method: :put, class: "formtastic" } do |form|
-            = form.collection_select :plan_id,
-                                     @available_account_plans,
-                                     :id,
-                                     :name
-            fieldset.actions
-              ol
-                li.commit
-                  = form.submit 'Change',
-                                data: { confirm: plan_confirm_message(@account.bought_account_plan) },
-                                class: "pf-c-button pf-m-primary"
+      - if can?(:manage, :finance)
+        div class="pf-l-flex__item"
+          div class="pf-c-card"
+            div class="pf-c-card__title" Billing Status
+            div class="pf-c-card__body"
+              = render 'monthly_charging', account: @account
+  / Right column
+  div class="pf-l-grid__item"
+    div class="pf-l-flex pf-m-column pf-m-flex-1"
+      - if account_plans_management_visible?
+        div class="pf-l-flex__item"
+          div class="pf-c-card"
+            div class="pf-c-card__body"
+              = render partial: 'account_plan', locals: { plan: @account.bought_account_plan,
+                                                          contract:  @account.bought_account_contract }
 
-    = render 'buyers/applications/widget', account: @account
+        - if can?(:manage, :plans) && @account.provider_account.account_plans.stock.published.size > 1
+          div class="pf-l-flex__item"
+            div class="pf-c-card"
+              div class="pf-c-card__body"
+                = render partial: 'change_plan', locals: { account: @account,
+                                                           plans: @available_account_plans }
+
+      - cinstances = @account.bought_cinstances
+      - cinstance = cinstances.first! if cinstances.count == 1
+      - if cinstance && can?(:read, cinstance)
+        div class="pf-l-flex__item"
+          div class="pf-c-card"
+            div class="pf-c-card__title" Application
+            div class="pf-c-card__body"
+              = render partial: 'buyers/applications/widget', locals: { cinstance: cinstance }
+
+/ HACK: This is old style from dashboard_card. Remove it once table.list is replaced with Patternfly
+css:
+  table.list tr:last-child th,
+  table.list tr:last-child td {
+    border-bottom: none;
+  }