Merge pull request #9095 from jeffibm/fix-control-action-styles

Fix styles for control action summary and form pages

app/controllers/miq_action_controller.rb

@@ -384,7 +384,7 @@ def validate_playbook_options(options)
   end
 
   def get_session_data
-    @action = MiqAction.find_by(:id => params[:miq_grid_checks])
+    @action = MiqAction.find_by(:id => params[:id] || params[:miq_grid_checks])
     @title = if @action.present?
                _("Editing Action \"%{name}\"") % {:name => @action.description}
              else

app/helpers/miq_action_helper.rb

@@ -1,4 +1,15 @@
 module MiqActionHelper
+  def control_action_summary(record, alert_guids, cats, action_policies)
+    safe_join([
+                miq_summary_action_info(record),
+                miq_summary_action_type(record, alert_guids, cats),
+                miq_summary_attribute_value_pair(record),
+                miq_summary_action_policies(action_policies)
+              ])
+  end
+
+  private
+
   def miq_summary_action_info(record)
     data = {:title => _("Basic Information"), :mode => "miq_action_info"}
     rows = []
@@ -25,17 +36,6 @@ def miq_summary_action_type(record, alert_guids, cats)
       rows.push({:cells => {:label => _('Starting Message'), :value => record_options[:ae_message]}})
       rows.push({:cells => {:label => _('Request'), :value => record_options[:ae_request]}})
 
-      value_pair = []
-      if record_options[:ae_hash].present?
-        record_options[:ae_hash].each do |k, v|
-          value_pair.push({:label => k})
-          value_pair.push({:label => v})
-        end
-      else
-        value_pair.push({:label => _('No Attribute/Value Pairs found')})
-      end
-      rows.push({:cells => {:label => _('Attribute/Value Pairs'), :value => value_pair}})
-
     when "email"
       data[:title] = _('E-mail Settings')
       rows.push({:cells => {:label => _('From E-mail Address'), :value => record_options[:from]}})
@@ -129,6 +129,21 @@ def miq_summary_action_type(record, alert_guids, cats)
     end
   end
 
+  def miq_summary_attribute_value_pair(record)
+    record_options = record.options
+    rows = []
+    if record_options[:ae_hash].present?
+      record_options[:ae_hash].each do |k, v|
+        rows.push({:cells => [{:value => k}, {:value => v}]})
+      end
+    end
+    miq_structured_list(
+      :title => _('Attribute/Value Pairs'),
+      :mode  => "control_action_attribute_value_pairs",
+      :rows  => rows
+    )
+  end
+
   def miq_summary_action_policies(action_policies)
     rows = []
     data = {:title => _("Assigned to Policies"), :mode => "miq_action"}

app/javascript/components/action-form/action-form.schema.js

@@ -171,6 +171,7 @@ function createSchema(recordId, promise, inheritTags, evaluateAlert, tags, ansib
       id: 'subform-7',
       name: 'subform-7',
       title: __('Attribute/Value Pairs'),
+      className: 'attribute_value_pair_wrapper',
       condition: {
         when: 'action_type',
         is: 'custom_automation',
@@ -190,6 +191,7 @@ function createSchema(recordId, promise, inheritTags, evaluateAlert, tags, ansib
           fields: [
             {
               component: componentTypes.TEXT_FIELD,
+              className: 'attribute_value_field_wrapper',
               name: 'attribute',
               id: 'attribute',
               label: 'attribute',
@@ -198,6 +200,7 @@ function createSchema(recordId, promise, inheritTags, evaluateAlert, tags, ansib
             },
             {
               component: componentTypes.TEXT_FIELD,
+              className: 'attribute_value_field_wrapper',
               name: 'value',
               id: 'value',
               label: 'value',

app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-object.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { StructuredListCell } from 'carbon-components-react';
 import MiqStructuredListConditionalTag from '../value-tags/miq-structured-list-conditional-tag';
 
-/** Usage eg: Automation / Embeded Automate / Generic Objects / item
+/** Usage eg: Automation / Embedded Automate / Generic Objects / item
   * Properties has no links & Relationships have links */
 const MiqStructuredListObject = ({ row, clickEvents, onClick }) => {
   const isContent = row.label || (row.value && row.value.input);

app/stylesheet/ddf_override.scss

@@ -466,3 +466,28 @@
   margin-top: 3rem;
   margin-left: 15rem;
 }
+
+
+.attribute_value_pair_wrapper fieldset {
+  .bx--form-item {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+
+    label {
+      margin-bottom: 0;
+    }
+  }
+
+  div > div {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    align-items: center;
+
+    .attribute_value_field_wrapper {
+      flex-grow: 1;
+    }
+  }
+}

app/stylesheet/miq-structured-list.scss

@@ -65,6 +65,9 @@
   }
 
   .content_value {
+    &.array_item:first-child {
+      width: 250px;
+    }
     .content {
       display: flex;
       flex-direction: row;

app/views/miq_action/show.html.haml

@@ -1,9 +1,5 @@
 #action-details-div
 
   = render :partial => "layouts/flash_msg"
-
-  = miq_summary_action_info(@record)
 
-  = miq_summary_action_type(@record, @alert_guids, @cats)
-
-  = miq_summary_action_policies(@action_policies)
+  = control_action_summary(@record, @alert_guids, @cats, @action_policies)