Merge pull request #9230 from liu-samuel/provision-summary-page

Convert provision dialog summary form to React

Author: GilbertCherrie

app/controllers/miq_ae_customization_controller.rb

@@ -7,6 +7,7 @@ class MiqAeCustomizationController < ApplicationController
   helper ApplicationHelper::ImportExportHelper
   include Mixins::GenericSessionMixin
   include Mixins::BreadcrumbsMixin
+  include MiqAeCustomizationHelper
 
   before_action :check_privileges
   before_action :get_session_data

app/helpers/miq_ae_customization_helper.rb

@@ -17,4 +17,35 @@ def dialog_id_action
       {:id => '', :action => 'new'}
     end
   end
+
+  def miq_ae_customization_summary(record)
+    summary = [
+      miq_ae_customization_basic_info(record),
+      miq_ae_customization_content(record),
+    ]
+    safe_join(summary)
+  end
+
+  def miq_ae_customization_basic_info(record)
+    rows = [
+      row_data(_('Name'), record.name),
+      row_data(_('Description'), record.description),
+    ]
+    miq_structured_list({
+                          :title => _('Basic Information'),
+                          :mode  => "miq_ae_customization_summary",
+                          :rows  => rows
+                        })
+  end
+
+  def miq_ae_customization_content(record)
+    rows = [
+      row_data('', {:input => 'code_mirror', :props => {:mode => 'yaml', :payload => YAML.dump(record.content)}})
+    ]
+    miq_structured_list({
+                          :title => _('Content'),
+                          :mode  => "method_built_in_data",
+                          :rows  => rows
+                        })
+  end
 end

app/views/miq_ae_customization/_old_dialogs_details.html.haml

@@ -9,32 +9,5 @@
     = react('MiqAeCustomization',
       :dialogRecord => @dialog,
       :dialogTypes  => dialog_types)
-  - else
-    = render :partial => "layouts/flash_msg"
-    %h3
-      = _('Basic Information')
-    .form-horizontal
-      .form-group
-        %label.col-md-2.control-label
-          = _('Name')
-        .col-md-8
-          %p.form-control-static
-            = h(@dialog.name)
-      .form-group
-        %label.col-md-2.control-label
-          = _('Description')
-        .col-md-8
-          %p.form-control-static
-            = h(@dialog.description)
-    %hr
-    %h3
-      = _('Content')
-    = text_area("script", "data",
-      :value    => h(@dialog.content.to_yaml),
-      :readonly => "readonly",
-      :style    => "display:none;")
-    = render(:partial => "layouts/my_code_mirror",
-      :locals => {:text_area_id => "script_data",
-        :mode                   => "yaml",
-        :line_numbers           => true,
-        :read_only              => true})
+- if @dialog && !@in_a_form
+  = miq_ae_customization_summary(@dialog)

cypress/e2e/ui/Automation/Embedded-Automate/customization.cy.js

@@ -18,8 +18,8 @@ describe('Automation > Embedded Automate > Customization', () => {
 
     it('Clicks on a sample dialog', () => {
       cy.get('[title="Sample Configuration Management Provisioning Dialog"]').click({force: true});
-      cy.get('[class="form-control-static"]').contains('miq_provision_configured_system_foreman_dialogs');
-      cy.get('[class="form-control-static"]').contains('Sample Configuration Management Provisioning Dialog');
+      cy.get('.miq_ae_customization_summary').contains('miq_provision_configured_system_foreman_dialogs');
+      cy.get('.miq_ae_customization_summary').contains('Sample Configuration Management Provisioning Dialog');
       cy.get('[class="CodeMirror-code"]').contains('---');
       cy.get('[class="CodeMirror-code"]').contains(':buttons:');
     });
@@ -33,12 +33,12 @@ describe('Automation > Embedded Automate > Customization', () => {
       cy.get('[name="dialog_type"]').select('Configured System Provision');
       cy.get('[class="CodeMirror-lines"]').type(':Buttons:');
       cy.get('[class="btnRight bx--btn bx--btn--primary"]').click({force: true});
-      cy.get('[class="col-md-12"]').contains('Test Description');
+      cy.get('.miq_ae_customization_summary').contains('Test Description');
 
       // check correct data is displaying
       cy.contains('Test Description').click({force: true});
-      cy.get('[class="form-control-static"]').contains('Test User');
-      cy.get('[class="form-control-static"]').contains('Test Description');
+      cy.get('.miq_ae_customization_summary').contains('Test User');
+      cy.get('.miq_ae_customization_summary').contains('Test Description');
       cy.get('[class="CodeMirror-code"]').contains('---');
       cy.get('[class="CodeMirror-code"]').contains(':Buttons:');
 
@@ -81,8 +81,8 @@ describe('Automation > Embedded Automate > Customization', () => {
       // check correct data is displaying
       // cy.get('[id="main_div"]').contains('Test Description');
       cy.contains('Test Description').click({force: true});
-      cy.get('[class="form-control-static"]').contains('Test User');
-      cy.get('[class="form-control-static"]').contains('Test Description');
+      cy.get('.miq_ae_customization_summary').contains('Test User');
+      cy.get('.miq_ae_customization_summary').contains('Test Description');
       cy.get('[class="CodeMirror-code"]').contains('---');
       cy.get('[class="CodeMirror-code"]').contains(':Buttons:');
 
@@ -101,16 +101,16 @@ describe('Automation > Embedded Automate > Customization', () => {
 
       // check correct data after editing
       cy.contains('Edited Test Description').click({force: true});
-      cy.get('[class="form-control-static"]').contains('Edited Test User');
-      cy.get('[class="form-control-static"]').contains('Edited Test Description');
+      cy.get('.miq_ae_customization_summary').contains('Edited Test User');
+      cy.get('.miq_ae_customization_summary').contains('Edited Test Description');
       cy.get('[class="CodeMirror-code"]').contains('---');
       cy.get('[class="CodeMirror-code"]').contains(':Buttons:');
       cy.get('[class="CodeMirror-code"]').contains(':submit:');
       cy.get('[class="CodeMirror-code"]').contains(':cancel:');
 
       // check correct data after copying
       cy.contains('Edited Test Description').click({force: true});
-      cy.get('[class="form-control-static"]').contains('Edited Test Description');
+      cy.get('.miq_ae_customization_summary').contains('Edited Test Description');
       cy.get('[class="CodeMirror-code"]').contains('---');
       cy.get('[class="CodeMirror-code"]').contains(':Buttons:');
       cy.get('[class="CodeMirror-code"]').contains(':submit:');
@@ -136,8 +136,8 @@ describe('Automation > Embedded Automate > Customization', () => {
 
       // check correct data is displaying
       cy.contains('Test Description').click({force: true});
-      cy.get('[class="form-control-static"]').contains('Test User');
-      cy.get('[class="form-control-static"]').contains('Test Description');
+      cy.get('.miq_ae_customization_summary').contains('Test User');
+      cy.get('.miq_ae_customization_summary').contains('Test Description');
       cy.get('[class="CodeMirror-code"]').contains('---');
       cy.get('[class="CodeMirror-code"]').contains(':Buttons:');