Added service dialog from orchestration template react component.

Author: Hyperkid123

app/controllers/catalog_controller.rb

@@ -620,10 +620,6 @@ def ot_copy
     replace_right_cell(:action => "ot_copy")
   end
 
-  def ot_form_field_changed
-    dialog_creation_form_field_changed("ot_edit__#{params[:id]}")
-  end
-
   def ot_remove_submit
     assert_privileges("orchestration_template_remove")
     elements = find_records_with_rbac(OrchestrationTemplate, checked_or_params)
@@ -651,49 +647,23 @@ def ot_add
     assert_privileges("orchestration_template_add")
     ot_type = x_node == "root" ? "ManageIQ::Providers::Amazon::CloudManager::OrchestrationTemplate" : node_name_to_template_name(x_node)
     @edit = {:new => {:type => ot_type}}
-    @edit[:new][:available_managers] = available_orchestration_managers_for_template_type(ot_type)
     @edit[:current] = @edit[:new].dup
     @edit[:key] = "ot_add__new"
     @right_cell_text = _("Adding a new Orchestration Template")
     @in_a_form = true
     replace_right_cell(:action => "ot_add")
   end
 
-  def ot_add_form_field_changed
-    return unless load_edit("ot_add__new", "replace_cell__explorer")
-    copy_params_if_set(@edit[:new], params, %i[name description type content manager_id])
-    @edit[:new][:draft] = params[:draft] == "true" if params[:draft]
-    @edit[:new][:available_managers] = available_orchestration_managers_for_template_type(params[:type])
-
-    render :update do |page|
-      page << javascript_prologue
-      page << javascript_hide("buttons_off")
-      page << javascript_show("buttons_on")
-      page << "miqSparkle(false);"
-      page.replace("form_div", :partial => "ot_add") if params[:type]
-    end
-  end
-
   def service_dialog_from_ot
     assert_privileges("service_dialog_from_ot")
     ot = OrchestrationTemplate.find(params[:id])
     @right_cell_text = _("Adding a new Service Dialog from Orchestration Template \"%{name}\"") % {:name => ot.name}
-    @edit = {:new    => {:dialog_name => ""},
-             :key    => "ot_edit__#{ot.id}",
-             :rec_id => ot.id}
+    # id for create service dialog from ot for react form
+    @edit = {:rec_id => ot.id}
     @in_a_form = true
     replace_right_cell(:action => "service_dialog_from_ot")
   end
 
-  def service_dialog_from_ot_submit
-    case params[:button]
-    when "cancel"
-      service_dialog_from_ot_submit_cancel
-    when "save"
-      service_dialog_from_ot_submit_save
-    end
-  end
-
   def ot_show
     assert_privileges("orchestration_templates_view")
     id = params.delete(:id)
@@ -952,32 +922,6 @@ def ot_edit_set_form_vars(right_cell_text)
     @in_a_form = true
   end
 
-  def service_dialog_from_ot_submit_cancel
-    add_flash(_("Creation of a new Service Dialog was cancelled by the user"))
-    @in_a_form = false
-    @sb[:action] = @edit = @record = nil
-    replace_right_cell
-  end
-
-  def service_dialog_from_ot_submit_save
-    assert_privileges("service_dialog_from_ot")
-    load_edit("ot_edit__#{params[:id]}", "replace_cell__explorer")
-    begin
-      ot = OrchestrationTemplate.find(params[:id])
-      Dialog::OrchestrationTemplateServiceDialog.new.create_dialog(@edit[:new][:dialog_name], ot)
-    rescue => bang
-      add_flash(_("Error when creating a Service Dialog from Orchestration Template: %{error_message}") %
-        {:error_message => bang.message}, :error)
-      javascript_flash
-    else
-      add_flash(_("Service Dialog \"%{name}\" was successfully created") %
-        {:name => @edit[:new][:dialog_name]}, :success)
-      @in_a_form = false
-      @edit = @record = nil
-      replace_right_cell
-    end
-  end
-
   def st_catalog_set_form_vars
     checked = find_checked_items
     checked[0] = params[:id] if checked.blank? && params[:id]
@@ -1916,13 +1860,6 @@ def replace_right_cell(options = {})
             ]
           )
         end
-      elsif %w[service_dialog_from_ot].include?(action)
-        presenter.hide(:toolbar).show(:paging_div, :form_buttons_div).remove_paging
-        locals = {:record_id  => @edit[:rec_id],
-                  :action_url => "#{action}_submit",
-                  :serialize  => true,
-                  :no_reset   => true}
-        presenter.update(:form_buttons_div, r[:partial => "layouts/x_edit_buttons", :locals => locals])
       else
         # Added so buttons can be turned off even tho div is not being displayed it still pops up Abandon changes box when trying to change a node on tree after saving a record
         presenter.hide(:buttons_on, :form_buttons_div).show(:toolbar).hide(:paging_div)
@@ -1932,7 +1869,7 @@ def replace_right_cell(options = {})
     end
 
     # hide form buttons and toolbar for react forms actions
-    if %w[ot_add ot_edit ot_copy].include?(action)
+    if %w[ot_add ot_edit ot_copy service_dialog_from_ot].include?(action)
       presenter.hide(:toolbar, :paging_div, :form_buttons_div)
     else
       presenter.set_visibility(h_tb.present? || c_tb.present? || v_tb.present?, :toolbar)

app/javascript/components/orchestration-template/service-dialog-from-ot.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'patternfly-react';
+
+import MiqFormRenderer from '../../forms/data-driven-form';
+import miqRedirectBack from '../../helpers/miq-redirect-back';
+import { API } from '../../http_api';
+import serviceDialogFromOtSchema from './service-dialog-from-ot.schema';
+
+const ServiceDialogFromOt = ({ otId }) => {
+  const onSubmit = values => API.post('/api/service_dialogs', {
+    action: 'orchestration_template_service_dialog',
+    resource: {
+      ...values,
+      ot_id: otId,
+    },
+  }).then(() => miqRedirectBack(
+    sprintf(__('Service Dialog "%s" was successfully created'), values.label),
+    'success', '/catalog/explorer',
+  ));
+
+  return (
+    <Grid fluid>
+      <MiqFormRenderer
+        schema={serviceDialogFromOtSchema}
+        onSubmit={onSubmit}
+        onCancel={() => miqRedirectBack('Creation of a new Service Dialog was cancelled by the user', 'success', '/catalog/explorer')}
+        buttonsLabels={{ submitLabel: __('Save') }}
+      />
+    </Grid>
+  );
+};
+
+ServiceDialogFromOt.propTypes = {
+  otId: PropTypes.number.isRequired,
+};
+
+export default ServiceDialogFromOt;

app/javascript/components/orchestration-template/service-dialog-from-ot.schema.js

@@ -0,0 +1,29 @@
+import { componentTypes } from '@data-driven-forms/react-form-renderer';
+import { API } from '../../http_api';
+import debouncePromise from '../../helpers/promise-debounce';
+
+const asyncValidator = label => API.get(`/api/service_dialogs?filter[]=label=${label}`)
+  .then(({ subcount }) => {
+    if (!label) {
+      return __('Required');
+    }
+    if (subcount !== 0) {
+      return __('Name has already been taken');
+    }
+    return undefined;
+  });
+
+const asyncValidatorDebounced = debouncePromise(asyncValidator);
+
+const serviceDialogFromOtSchema = ({
+  fields: [{
+    component: componentTypes.TEXT_FIELD,
+    name: 'label',
+    label: __('Service Dialog Name'),
+    isRequired: true,
+    validateOnMount: true,
+    validate: [asyncValidatorDebounced],
+  }],
+});
+
+export default serviceDialogFromOtSchema;

app/javascript/packs/component-definitions-common.js

@@ -16,6 +16,7 @@ import ImportDatastoreViaGit from '../components/automate-import-export-form/imp
 import MiqAboutModal from '../components/miq-about-modal';
 import OrcherstrationTemplateForm from '../components/orchestration-template/orcherstration-template-form';
 import RemoveCatalogItemModal from '../components/remove-catalog-item-modal';
+import ServiceDialogFromOtForm from '../components/orchestration-template/service-dialog-from-ot';
 import ServiceForm from '../components/service-form';
 import SetServiceOwnershipForm from '../components/set-service-ownership-form';
 import TableListViewWrapper from '../react/table_list_view_wrapper';
@@ -44,6 +45,7 @@ ManageIQ.component.addReact('ImportDatastoreViaGit', ImportDatastoreViaGit);
 ManageIQ.component.addReact('MiqAboutModal', MiqAboutModal);
 ManageIQ.component.addReact('OrcherstrationTemplateForm', OrcherstrationTemplateForm);
 ManageIQ.component.addReact('RemoveCatalogItemModal', RemoveCatalogItemModal);
+ManageIQ.component.addReact('ServiceDialogFromOtForm', ServiceDialogFromOtForm);
 ManageIQ.component.addReact('ServiceForm', ServiceForm);
 ManageIQ.component.addReact('SetServiceOwnershipForm', SetServiceOwnershipForm);
 ManageIQ.component.addReact('TableListView', TableListView);

app/javascript/spec/orchestration-template/service-dialog-from-ot.spec.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import fetchMock from 'fetch-mock';
+
+import '../helpers/addFlash';
+import '../helpers/miqFlashLater';
+import '../helpers/miqSparkle';
+import '../helpers/sprintf';
+
+import ServiceDialogFromOt from '../../components/orchestration-template/service-dialog-from-ot';
+
+describe('<ServiceDialogFromOt />', () => {
+  let initialProps;
+
+  beforeEach(() => {
+    initialProps = {
+      otId: 123,
+    };
+  });
+
+  afterEach(() => {
+    fetchMock.reset();
+  });
+
+  it('should submit data correctly', (done) => {
+    fetchMock.postOnce('/api/service_dialogs', {});
+    fetchMock.getOnce('/api/service_dialogs?filter[]=label=undefined', { subcount: 0 });
+    fetchMock.getOnce('/api/service_dialogs?filter[]=label=Foo', { subcount: 0 });
+
+    const wrapper = mount(<ServiceDialogFromOt {...initialProps} />);
+    // need to use timeout because of debounced request
+    setTimeout(() => {
+      // should check if label is unique
+      expect(fetchMock.calls()).toHaveLength(1);
+      // form is invalid so should not call submit;
+      wrapper.find('button').first().simulate('click');
+      wrapper.find('input').simulate('change', { target: { value: 'Foo' } });
+      setTimeout(() => {
+        wrapper.find('button').first().simulate('click');
+        expect(JSON.parse(fetchMock.lastCall()[1].body)).toEqual({
+          action: 'orchestration_template_service_dialog',
+          resource: { label: 'Foo', ot_id: 123 },
+        });
+        done();
+      }, 500);
+    }, 500);
+  });
+
+  it('should fail async label validation', (done) => {
+    fetchMock.getOnce('/api/service_dialogs?filter[]=label=undefined', { subcount: 1 });
+    fetchMock.getOnce('/api/service_dialogs?filter[]=label=Bla', { subcount: 1 });
+
+    const wrapper = mount(<ServiceDialogFromOt {...initialProps} />);
+
+    setTimeout(() => {
+      wrapper.find('input').simulate('change', { target: { value: 'Bla' } });
+      setTimeout(() => {
+        wrapper.update();
+        expect(wrapper.find('button').first().props().disabled).toEqual(true);
+        done();
+      }, 500);
+    }, 500);
+  });
+});

app/views/catalog/_service_dialog_from_ot.html.haml

@@ -1,17 +1,4 @@
 #form_div
   #basic_info_div
     = render :partial => "layouts/flash_msg"
-    - url = url_for_only_path(:action => "ot_form_field_changed", :id => @edit[:rec_id])
-    .form-horizontal
-      .form-group
-        %label.col-md-2.control-label
-          = _('Service Dialog Name')
-        .col-md-8
-          = text_field_tag("dialog_name",
-                           "",
-                           :autocomplete => 'off',
-                           :diabled => false,
-                           :class => "form-control",
-                           :maxlength => 255,
-                           "data-miq_observe" => {:interval => '.5',
-                                                  :url      => url}.to_json)
+    = react('ServiceDialogFromOtForm', { :otId => @edit[:rec_id] })

config/routes.rb

@@ -311,7 +311,6 @@
         orchestration_template_copy
         orchestration_template_edit
         ot_add_form_field_changed
-        ot_form_field_changed
         ot_tags_edit
         ownership_form_fields
         ownership_update

spec/controllers/catalog_controller_spec.rb

@@ -419,34 +419,6 @@
       end
     end
 
-    describe "#service_dialog_create_from_ot" do
-      before do
-        @ot = FactoryBot.create(:orchestration_template_amazon_in_json)
-        @dialog_label = "New Dialog 01"
-        session[:edit] = {
-          :new    => {:dialog_name => @dialog_label},
-          :key    => "ot_edit__#{@ot.id}",
-          :rec_id => @ot.id
-        }
-        controller.instance_variable_set(:@sb, :trees => {:ot_tree => {:open_nodes => []}}, :active_tree => :ot_tree)
-        controller.instance_variable_set(:@_response, ActionDispatch::TestResponse.new)
-      end
-
-      after(:each) do
-        expect(controller.send(:flash_errors?)).not_to be_truthy
-        expect(assigns(:edit)).to be_nil
-        expect(response.status).to eq(200)
-      end
-
-      it "Service Dialog is created from an Orchestration Template" do
-        controller.params = {:button => "save", :id => @ot.id}
-        allow(controller).to receive(:replace_right_cell)
-        controller.send(:service_dialog_from_ot_submit)
-        expect(assigns(:flash_array).first[:message]).to include("was successfully created")
-        expect(Dialog.where(:label => @dialog_label).first).not_to be_nil
-      end
-    end
-
     describe "#ot_rendering" do
       render_views
       before do

spec/routing/catalog_routing_spec.rb

@@ -40,13 +40,11 @@
     orchestration_template_add
     orchestration_template_copy
     orchestration_template_edit
-    ot_form_field_changed
     ot_tags_edit
     prov_field_changed
     reload
     resolve
     resource_delete
-    service_dialog_from_ot_submit
     servicetemplate_edit
     sort_ds_grid
     sort_host_grid