Update Service Reconfigure Form to React

app/javascript/components/order-service-form/index.jsx

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import MiqFormRenderer, { useFormApi } from '@@ddf';
 import { Button, Loading } from 'carbon-components-react';
 import { FormSpy } from '@data-driven-forms/react-form-renderer';
-import createSchema from './order-service-form.schema';
+import createSchema from '../service-dialog-builder/service-dialog-builder.schema';
 import { API } from '../../http_api';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
-import { buildFields, prepareSubmitData } from './helper';
-import OrderServiceRefreshButton from './order-service-refresh-button';
+import { buildFields, prepareSubmitData } from '../service-dialog-builder/helper';
+import ServiceDialogRefreshButton from '../service-dialog-builder/service-dialog-refresh-button';
 import mapper from '../../forms/mappers/componentMapper';
 import NotificationMessage from '../notification-message';
 
@@ -45,9 +45,7 @@ const OrderServiceForm = ({ initialData }) => {
   }, []);
 
   const onSubmit = (values) => {
-    let submitData = { action: 'order', ...values };
-
-    submitData = prepareSubmitData(values, setShowDateError);
+    let submitData = prepareSubmitData('order', values, setShowDateError);
 
     if (submitData !== false) {
       if (apiSubmitEndpoint.includes('/generic_objects/')) {
@@ -83,7 +81,7 @@ const OrderServiceForm = ({ initialData }) => {
 
   const componentMapper = {
     ...mapper,
-    'refresh-button': OrderServiceRefreshButton,
+    'refresh-button': ServiceDialogRefreshButton,
   };
 
   return (

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

@@ -9,7 +9,7 @@ const generateDynamicFields = (field) => {
 };
 
 /** Function to build a text box. */
-export const buildTextBox = (field, validate) => {
+export const buildTextBox = (field, validate, apiAction) => {
   let component = {};
   generateDynamicFields(field);
 
@@ -21,7 +21,7 @@ export const buildTextBox = (field, validate) => {
       label: field.label,
       hideField: !field.visible,
       isRequired: field.required,
-      isDisabled: field.read_only,
+      isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
       initialValue: field.default_value,
       description: field.description,
       validate,
@@ -34,7 +34,7 @@ export const buildTextBox = (field, validate) => {
       label: field.label,
       hideField: !field.visible,
       isRequired: field.required,
-      isDisabled: field.read_only,
+      isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
       initialValue: field.default_value,
       description: field.description,
       validate,
@@ -92,35 +92,35 @@ export const buildTextBox = (field, validate) => {
 };
 
 /** Function to build a text area */
-export const buildTextAreaBox = (field, validate) => ({
+export const buildTextAreaBox = (field, validate, apiAction) => ({
   component: componentTypes.TEXTAREA,
   id: field.id,
   name: field.name,
   label: field.label,
   hideField: !field.visible,
   isRequired: field.required,
-  isDisabled: field.read_only,
+  isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
   initialValue: field.default_value,
   description: field.description,
   validate,
 });
 
 /** Function to build a check box. */
-export const buildCheckBox = (field, validate) => ({
+export const buildCheckBox = (field, validate, apiAction) => ({
   component: componentTypes.CHECKBOX,
   id: field.id,
   name: field.name,
   label: field.label,
   hideField: !field.visible,
   isRequired: field.required,
-  isDisabled: field.read_only,
+  isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
   initialValue: field.default_value,
   description: field.description,
   validate,
 });
 
 /** Function to build a drop down select box. */
-export const buildDropDownList = (field, validate) => {
+export const buildDropDownList = (field, validate, apiAction) => {
   let options = [];
   let placeholder = __('<Choose>');
   let start;
@@ -165,7 +165,7 @@ export const buildDropDownList = (field, validate) => {
     labelText: field.label,
     hideField: !field.visible,
     isRequired: field.required,
-    isDisabled: field.read_only,
+    isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
     initialValue: field.default_value,
     description: field.description,
     validate,
@@ -181,7 +181,7 @@ export const buildDropDownList = (field, validate) => {
 };
 
 /** Function to build a tag control field. */
-export const buildTagControl = (field, validate) => {
+export const buildTagControl = (field, validate, apiAction) => {
   const options = [];
   field.values.forEach((value) => {
     if (!value.id) {
@@ -196,7 +196,7 @@ export const buildTagControl = (field, validate) => {
     label: field.label,
     hideField: !field.visible,
     isRequired: field.required,
-    isDisabled: field.read_only,
+    isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
     initialValue: field.default_value,
     description: field.description,
     validate,
@@ -205,27 +205,27 @@ export const buildTagControl = (field, validate) => {
 };
 
 /** Function to build a date control field */
-export const buildDateControl = (field, validate) => ({
+export const buildDateControl = (field, validate, apiAction) => ({
   component: componentTypes.DATE_PICKER,
   id: field.id,
   name: field.name,
   label: field.label,
   isRequired: field.required,
-  isDisabled: field.read_only,
+  isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
   initialValue: field.default_value,
   description: field.description,
   validate,
   variant: 'date-time',
 });
 
 /** Function to build a time control field */
-export const buildTimeControl = (field, validate, dateTime) => ([{
+export const buildTimeControl = (field, validate, dateTime, apiAction) => ([{
   component: componentTypes.DATE_PICKER,
   id: field.id,
   name: field.name,
   label: field.label,
   isRequired: field.required,
-  isDisabled: field.read_only,
+  isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
   initialValue: dateTime.toISOString(),
   description: field.description,
   validate,
@@ -236,15 +236,15 @@ export const buildTimeControl = (field, validate, dateTime) => ([{
   id: `${field.id}-time`,
   name: `${field.name}-time`,
   isRequired: field.required,
-  isDisabled: field.read_only,
+  isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
   initialValue: dateTime,
   validate,
   twelveHoursFormat: true,
   pattern: '(0?[1-9]|1[0-2]):[0-5][0-9]',
 }]);
 
 /** Function to build radio buttons fields */
-export const buildRadioButtons = (field, validate) => {
+export const buildRadioButtons = (field, validate, apiAction) => {
   const options = [];
   field.values.forEach((value) => {
     options.push({ value: value[0], label: value[1] });
@@ -255,7 +255,7 @@ export const buildRadioButtons = (field, validate) => {
     name: field.name,
     label: field.label,
     isRequired: field.required,
-    isDisabled: field.read_only,
+    isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
     initialValue: field.default_value,
     description: field.description,
     validate,
@@ -271,7 +271,8 @@ const fieldSpinner = (fieldName, show) => {
 
 /** Function to update the response and build the fileds again after field refresh. */
 const updateResponseFields = (response, fieldPosition, fieldName, result) => {
-  response.content[0].dialog_tabs.map((tab, tabIndex) => {
+  const responseContent = response.content ? response.content[0].dialog_tabs : response.reconfigure_dialog[0].dialog_tabs;
+  responseContent.map((tab, tabIndex) => {
     if (tabIndex === fieldPosition.tabIndex) {
       tab.dialog_groups.map((group, groupIndex) => {
         if (groupIndex === fieldPosition.groupIndex) {
@@ -280,9 +281,10 @@ const updateResponseFields = (response, fieldPosition, fieldName, result) => {
           field.data_type = data.data_type;
           field.options = data.options;
           field.read_only = data.read_only;
+          field.reconfigurable = data.reconfigurable;
           field.required = data.required;
           field.visible = data.visible;
-          field.values = [['001', 'one'], ['002', 'two']]; // data.values;
+          field.values = data.values;
           field.default_value = data.default_value;
           field.validator_rule = data.validator_rule;
           field.validator_type = data.validator_type;
@@ -300,7 +302,10 @@ const updateResponseFields = (response, fieldPosition, fieldName, result) => {
 */
 const refreshFields = (response, params, fieldName, initialData, resource, data, setData, fieldPosition) => {
   fieldSpinner(fieldName, true);
-  API.post(`/api/service_dialogs/${response.id}`, params).then(({ result }) => {
+
+  const dialogId = response.reconfigure_dialog ? response.reconfigure_dialog[0].id : response.id;
+
+  API.post(`/api/service_dialogs/${dialogId}`, params).then(({ result }) => {
     const responders = result[fieldName].dialog_field_responders;
     const newResponse = updateResponseFields(response, fieldPosition, fieldName, result);
     buildFields(newResponse, data, setData, initialData);
@@ -322,7 +327,7 @@ const onRefreshField = (response, field, initialData, data, setData, fieldPositi
     fields: [field.name],
     resource_action_id: initialData.resourceActionId,
     target_id: initialData.targetId,
-    target_type: initialData.targetType,
+    target_type: initialData.targetType ? initialData.targetType : 'service',
     real_target_type: initialData.realTargetType,
   };
   const params = {

app/javascript/components/order-service-form/helper.js → app/javascript/components/service-dialog-builder/helper.js

@@ -10,7 +10,7 @@ import {
   buildTimeControl,
   buildRadioButtons,
   buildRefreshButton,
-} from './fields.schema';
+} from './dialog-fields-builder';
 
 const dates = [];
 const showPastDates = [];
@@ -61,30 +61,30 @@ const formatTimeControl = (field) => {
   return newDate;
 };
 
-const buildComponent = (field, validate) => {
+const buildComponent = (field, validate, apiAction) => {
   switch (field.type) {
     case DIALOG_FIELDS.textBox:
-      return buildTextBox(field, validate);
+      return buildTextBox(field, validate, apiAction);
     case DIALOG_FIELDS.textArea:
-      return buildTextAreaBox(field, validate);
+      return buildTextAreaBox(field, validate, apiAction);
     case DIALOG_FIELDS.checkBox:
-      return buildCheckBox(field, validate);
+      return buildCheckBox(field, validate, apiAction);
     case DIALOG_FIELDS.dropDown:
-      return buildDropDownList(field, validate);
+      return buildDropDownList(field, validate, apiAction);
     case DIALOG_FIELDS.tag:
-      return buildTagControl(field, validate);
+      return buildTagControl(field, validate, apiAction);
     case DIALOG_FIELDS.date:
     {
       formatDateControl(field);
-      return buildDateControl(field, validate);
+      return buildDateControl(field, validate, apiAction);
     }
     case DIALOG_FIELDS.dateTime:
     {
       const dateTime = formatTimeControl(field);
-      return buildTimeControl(field, validate, dateTime);
+      return buildTimeControl(field, validate, dateTime, apiAction);
     }
     case DIALOG_FIELDS.radio:
-      return buildRadioButtons(field, validate);
+      return buildRadioButtons(field, validate, apiAction);
     default:
       return {};
   }
@@ -127,15 +127,18 @@ const buildValidator = (field) => {
 /** Function to build the form fields. */
 export const buildFields = (response, data, setData, initialData) => {
   const dialogTabs = [];
-  response.content[0].dialog_tabs.forEach((tab, tabIndex) => {
+  const responseContent = response.content ? response.content[0].dialog_tabs : response.reconfigure_dialog[0].dialog_tabs;
+  const { apiAction } = initialData;
+
+  responseContent.forEach((tab, tabIndex) => {
     const dialogSections = [];
     tab.dialog_groups.forEach((group, groupIndex) => {
       const dialogFields = [];
       group.dialog_fields.forEach((field) => {
         const validate = buildValidator(field);
         const fieldPosition = { tabIndex, groupIndex };
         const fieldData = [
-          buildComponent(field, validate),
+          buildComponent(field, validate, apiAction),
           buildRefreshButton(response, field, initialData, data, setData, fieldPosition),
         ];
         dialogFields.push(fieldData);
@@ -274,8 +277,8 @@ const handleCheckboxSubmit = (submitData) => {
 };
 
 /** Function to handle the form data on form submit. */
-export const prepareSubmitData = (values, setShowDateError) => {
-  let submitData = { action: 'order', ...values };
+export const prepareSubmitData = (submitAction, values, setShowDateError) => {
+  let submitData = { action: submitAction, ...values };
   stopSubmit = false;
   invalidDateFields = [];
 

app/javascript/components/order-service-form/order-service-refresh-button.jsx → app/javascript/components/service-dialog-builder/service-dialog-refresh-button.jsx

@@ -3,7 +3,7 @@ import { Button, Loading } from 'carbon-components-react';
 import { Renew16 } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
 
-const OrderServiceRefreshButton = ({ onRefresh, showRefreshButton, fieldName }) => (
+const ServiceDialogRefreshButton = ({ onRefresh, showRefreshButton, fieldName }) => (
   <>
     {showRefreshButton && (
       <Button
@@ -21,10 +21,10 @@ const OrderServiceRefreshButton = ({ onRefresh, showRefreshButton, fieldName })
     </div>
   </>
 );
-OrderServiceRefreshButton.propTypes = {
+ServiceDialogRefreshButton.propTypes = {
   onRefresh: PropTypes.func.isRequired,
   showRefreshButton: PropTypes.bool.isRequired,
   fieldName: PropTypes.string.isRequired,
 };
 
-export default OrderServiceRefreshButton;
+export default ServiceDialogRefreshButton;