Convert order service form

app/controllers/catalog_controller.rb

@@ -739,6 +739,7 @@ def svc_catalog_provision
         ra, st, svc_catalog_provision_finish_submit_endpoint
       )
       @in_a_form = true
+      @dialog_locals = options[:dialog_locals]
       replace_right_cell(:action => "dialog_provision", :dialog_locals => options[:dialog_locals])
     else
       # if catalog item has no dialog and provision button was pressed from list view

app/helpers/catalog_helper.rb

@@ -2,6 +2,7 @@ module CatalogHelper
   include_concern 'TextualSummary'
   include RequestInfoHelper
   include Mixins::AutomationMixin
+  include OrderServiceHelper
 
   def miq_catalog_resource(resources)
     headers = ["", _("Name"), _("Description"), _("Action Order"), _("Provision Order"), _("Action Start"), _("Action Stop"), _("Delay (mins) Start"), _("Delay (mins) Stop")]

app/helpers/order_service_helper.rb

@@ -0,0 +1,17 @@
+module OrderServiceHelper
+  def order_service_data(dialog)
+    {
+
+      :apiSubmitEndpoint    => dialog[:api_submit_endpoint],
+      :apiAction            => dialog[:api_action],
+      :cancelEndPoint       => dialog[:cancel_endpoint],
+      :dialogId             => dialog[:dialog_id],
+      :finishSubmitEndpoint => dialog[:finish_submit_endpoint],
+      :openUrl              => dialog[:open_url],
+      :resourceActionId     => dialog[:resource_action_id],
+      :realTargetType       => dialog[:real_target_type],
+      :targetId             => dialog[:target_id],
+      :targetType           => dialog[:target_type],
+    }
+  end
+end

app/javascript/components/order-service-form/fields.schema.js

@@ -0,0 +1,249 @@
+import { componentTypes } from '@@ddf';
+import { REFERENCE_TYPES } from './order-service-constants';
+// eslint-disable-next-line import/no-cycle
+
+/** Function to build a text box. */
+export const buildTextBox = (field, validate, updateFormReference) => {
+  let component = {};
+
+  if (field.options.protected) {
+    component = {
+      component: 'password-field',
+      id: field.id,
+      name: field.name,
+      label: field.label,
+      hideField: !field.visible,
+      isRequired: field.required,
+      isDisabled: field.read_only,
+      initialValue: field.default_value,
+      description: field.description,
+      validate,
+    };
+  } else {
+    component = {
+      component: componentTypes.TEXT_FIELD,
+      id: field.id,
+      name: field.name,
+      label: field.label,
+      hideField: !field.visible,
+      isRequired: field.required,
+      isDisabled: field.read_only,
+      initialValue: field.default_value,
+      description: field.description,
+      validate,
+      resolveProps: (props, { input }) => {
+        updateFormReference({ type: REFERENCE_TYPES.dialogFields, payload: { fieldName: input.name, value: input.value } });
+      },
+    };
+  }
+  return component;
+};
+
+/** Function to build a text area */
+export const buildTextAreaBox = (field, validate, updateFormReference) => ({
+  component: componentTypes.TEXTAREA,
+  id: field.id,
+  name: field.name,
+  label: field.label,
+  hideField: !field.visible,
+  isRequired: field.required,
+  isDisabled: field.read_only,
+  initialValue: field.default_value,
+  description: field.description,
+  validate,
+  resolveProps: (props, { input }) => {
+    updateFormReference({ type: REFERENCE_TYPES.dialogFields, payload: { fieldName: input.name, value: input.value } });
+  },
+});
+
+/** Function to build a check box. */
+export const buildCheckBox = (field, validate, updateFormReference) => ({
+  component: componentTypes.CHECKBOX,
+  id: field.id,
+  name: field.name,
+  label: field.label,
+  hideField: !field.visible,
+  isRequired: field.required,
+  isDisabled: field.read_only,
+  initialValue: field.default_value,
+  description: field.description,
+  validate,
+  resolveProps: (props, { input }) => {
+    updateFormReference({ type: REFERENCE_TYPES.dialogFields, payload: { fieldName: input.name, value: input.value } });
+  },
+});
+
+/** Function to build a tag control field. */
+export const buildTagControl = (field, validate, updateFormReference) => {
+  const options = [];
+  field.values.forEach((value) => {
+    if (!value.id) {
+      value.id = '-1';
+    }
+    options.push({ value: value.id, label: value.description });
+  });
+  return {
+    component: componentTypes.SELECT,
+    id: field.id,
+    name: field.name,
+    label: field.label,
+    hideField: !field.visible,
+    isRequired: field.required,
+    isDisabled: field.read_only,
+    initialValue: field.default_value,
+    description: field.description,
+    validate,
+    options,
+    resolveProps: (props, { input }) => {
+      updateFormReference({ type: REFERENCE_TYPES.dialogFields, payload: { fieldName: input.name, value: input.value } });
+    },
+  };
+};
+
+/** Function to build a date control field */
+export const buildDateControl = (field, validate, updateFormReference) => ({
+  component: componentTypes.DATE_PICKER,
+  id: field.id,
+  name: field.name,
+  label: field.label,
+  isRequired: field.required,
+  isDisabled: field.read_only,
+  initialValue: field.default_value,
+  description: field.description,
+  validate,
+  variant: 'date-time',
+  resolveProps: (props, { input }) => {
+    updateFormReference({ type: REFERENCE_TYPES.dialogFields, payload: { fieldName: input.name, value: input.value } });
+  },
+});
+
+/** Function to build a time control field */
+export const buildTimeControl = (field, validate, updateFormReference, dateTime) => ([{
+  component: componentTypes.DATE_PICKER,
+  id: field.id,
+  name: field.name,
+  label: field.label,
+  isRequired: field.required,
+  isDisabled: field.read_only,
+  initialValue: dateTime.toISOString(),
+  description: field.description,
+  validate,
+  variant: 'date-time',
+  resolveProps: (props, { input }) => {
+    updateFormReference({ type: REFERENCE_TYPES.dialogFields, payload: { fieldName: input.name, value: input.value } });
+  },
+},
+{
+  component: componentTypes.TIME_PICKER,
+  id: `${field.id}-time`,
+  name: `${field.name}-time`,
+  isRequired: field.required,
+  isDisabled: field.read_only,
+  initialValue: dateTime,
+  validate,
+  twelveHoursFormat: true,
+  pattern: '(0?[1-9]|1[0-2]):[0-5][0-9]',
+  resolveProps: (props, { input }) => {
+    updateFormReference({ type: REFERENCE_TYPES.dialogFields, payload: { fieldName: input.name, value: input.value } });
+  },
+}]);
+
+/** Function to build radio buttons fields */
+export const buildRadioButtons = (field, validate, updateFormReference) => {
+  const options = [];
+  field.values.forEach((value) => {
+    options.push({ value: value[0], label: value[1] });
+  });
+  return {
+    component: componentTypes.RADIO,
+    id: field.id,
+    name: field.name,
+    label: field.label,
+    isRequired: field.required,
+    isDisabled: field.read_only,
+    initialValue: field.default_value,
+    description: field.description,
+    validate,
+    options,
+    resolveProps: (props, { input }) => {
+      updateFormReference({ type: REFERENCE_TYPES.dialogFields, payload: { fieldName: input.name, value: input.value } });
+    },
+  };
+};
+
+/** Function to build a refresh button near to drop down. */
+export const buildRefreshButton = (field, tabIndex, { updateFormReference }) => ({
+  component: 'refresh-button',
+  name: `refresh_${field.name}`,
+  data: {
+    showRefreshButton: !!(field.dynamic && field.show_refresh_button),
+    fieldName: field.name,
+    tabIndex,
+    disabled: false,
+    updateRefreshInProgress: (status) => updateFormReference({ type: REFERENCE_TYPES.refreshInProgress, payload: status }),
+  },
+});
+
+const buildOptions = (field) => {
+  let options = [];
+  let placeholder = __('<Choose>');
+  let start;
+
+  field.values.forEach((value) => {
+    if (value[0] === null) {
+      value[0] = null;
+      // eslint-disable-next-line prefer-destructuring
+      placeholder = value[1];
+    }
+    options.push({ value: value[0] !== null ? String(value[0]) : null, label: value[1] });
+  });
+  if (options[0].value === null) {
+    start = options.shift();
+  }
+  options = options.sort((option1, option2) => {
+    if (field.options.sort_by === 'description') {
+      if (field.options.sort_order === 'ascending') {
+        return option1.label.localeCompare(option2.label);
+      }
+      return option2.label.localeCompare(option1.label);
+    }
+    if (field.options.sort_order === 'ascending') {
+      return option1.value.localeCompare(option2.value);
+    }
+    return option2.value.localeCompare(option1.value);
+  });
+  if (start) {
+    options.unshift(start);
+  }
+  return { options, placeholder };
+};
+
+/** Function to build a drop down select box. */
+export const buildDropDownList = (field, validate, fieldOnChange, _responseFrom) => {
+  const { options, placeholder } = buildOptions(field);
+
+  let isMulti = false;
+  if (field.options && field.options.force_multi_value) {
+    isMulti = true;
+  }
+  return {
+    component: componentTypes.SELECT,
+    id: field.id,
+    name: field.name,
+    labelText: field.label,
+    hideField: !field.visible,
+    isRequired: field.required,
+    isDisabled: field.read_only,
+    initialValue: field.default_value,
+    description: field.description,
+    validate,
+    options,
+    placeholder,
+    isSearchable: true,
+    simpleValue: true,
+    isMulti,
+    onChange: (value) => {
+      fieldOnChange(value, field);
+    },
+  };
+};