Conversion of Service Dialogs Form from Angular to React

app/javascript/components/automate-entry-points/styles.css

@@ -74,6 +74,10 @@
   margin-bottom: 1rem;
 }
 
+.bx--modal-container {
+  overflow-x: scroll;
+}
+
 .bx--btn--primary {
   margin-right: 10px;
 }

app/javascript/components/common/inline-flash-message/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { InlineNotification } from 'carbon-components-react';
+
+/**
+ * Inline flash message for showing notifications.
+ *
+ * @param {Object} message - The notification details to display (kind, title, subtitle).
+ *   If `null` or `undefined`, no notification is shown.
+ * @param {Function} setMessage - Callback for handling close button clicks.
+ * @param {boolean} showCloseButton - Whether to display the close button.
+ */
+const InlineFlashMessage = ({ message, setMessage, showCloseButton }) => {
+  if (!message) return null;
+
+  return (
+    <InlineNotification
+      kind={message.kind || 'info'} // "success" | "error" | "info" | "warning"
+      title={message.title || ''}
+      subtitle={message.subtitle || ''}
+      lowContrast
+      hideCloseButton={!showCloseButton}
+      onCloseButtonClick={setMessage}
+    />
+  );
+};
+
+InlineFlashMessage.propTypes = {
+  message: PropTypes.shape({
+    kind: PropTypes.oneOf(['success', 'error', 'info', 'warning']),
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+  }),
+  setMessage: PropTypes.func,
+  showCloseButton: PropTypes.bool,
+};
+
+InlineFlashMessage.defaultProps = {
+  message: null,
+  setMessage: () => {},
+  showCloseButton: true,
+};
+
+export default InlineFlashMessage;

app/javascript/components/date-time-picker/index.jsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import {
+  DatePicker,
+  DatePickerInput,
+  TimePicker,
+  TimePickerSelect,
+  SelectItem,
+  FormLabel,
+} from 'carbon-components-react';
+import { getCurrentDate, getCurrentTimeAndPeriod } from '../service-dialog-form/helper';
+
+const CustomDateTimePicker = (field) => {
+  const { initialData, onChange } = field;
+
+  const [date, setDate] = useState(initialData.date || getCurrentDate);
+  const [time, setTime] = useState(() => initialData.time || getCurrentTimeAndPeriod().time);
+  const [isValid, setIsValid] = useState(true);
+  const [period, setPeriod] = useState(() => initialData.period || getCurrentTimeAndPeriod().period);
+
+  const combinedDateTime = () => {
+    const dateTime = `${date} ${time} ${period}`;
+    return dateTime;
+  };
+
+  const handleDateChange = (newDate) => {
+    if (newDate.length > 0) {
+      const formattedDate = new Intl.DateTimeFormat('en-US', {
+        month: '2-digit',
+        day: '2-digit',
+        year: 'numeric',
+      }).format(newDate[0]);
+      setDate(formattedDate);
+      onChange({ value: combinedDateTime(), initialData });
+    }
+  };
+
+  // Function to validate the time input
+  const validateTime = (value) => {
+    const timeRegex = /^(0[1-9]|1[0-2]):[0-5][0-9]$/; // Matches 12-hour format hh:mm
+    setIsValid(timeRegex.test(value));
+  };
+
+  const handleTimeChange = (event) => {
+    const newTime = event.target.value;
+    setTime(newTime);
+    validateTime(newTime);
+    if (isValid) onChange({ value: combinedDateTime(), initialData });
+  };
+
+  const handlePeriodChange = (event) => {
+    setPeriod(event.target.value);
+    onChange({ value: combinedDateTime(), initialData });
+  };
+
+  return (
+    <div>
+      <FormLabel>{field.label}</FormLabel>
+      <DatePicker
+        datePickerType="single"
+        onChange={handleDateChange}
+      >
+        <DatePickerInput
+          id="date-picker-single"
+          placeholder="mm/dd/yyyy"
+          labelText={__('Select Date')}
+          value={date}
+          hideLabel
+          onChange={handleDateChange}
+        />
+        <TimePicker
+          id="time-picker"
+          placeholder="hh:mm"
+          labelText={__('Select Time')}
+          invalid={!isValid}
+          invalidText="Enter a valid 12-hour time (e.g., 01:30)"
+          hideLabel
+          value={time}
+          onChange={handleTimeChange}
+        >
+          <TimePickerSelect
+            id="time-picker-select-1"
+            labelText={__('Select Period')}
+            defaultValue={period}
+            onChange={handlePeriodChange}
+          >
+            <SelectItem value="AM" text="AM" />
+            <SelectItem value="PM" text="PM" />
+          </TimePickerSelect>
+        </TimePicker>
+      </DatePicker>
+    </div>
+  );
+};
+
+export default CustomDateTimePicker;

app/javascript/components/embedded-automate-entry-point/index.jsx

@@ -38,9 +38,14 @@ const EmbeddedAutomateEntryPoint = (props) => {
   useEffect(() => {
     if (selectedValue && selectedValue.name && selectedValue.name.text) {
       selectedValue.name.text = textValue;
+      input.onChange(selectedValue);
+    } else if (!selectedValue || Object.keys(selectedValue).length === 0) {
+      // When selectedValue is empty or undefined, pass null to trigger validation
+      input.onChange(null);
+    } else {
+      input.onChange(selectedValue);
     }
-    input.onChange(selectedValue);
-  }, [textValue]);
+  }, [textValue, selectedValue]);
 
   return (
     <div>
@@ -56,7 +61,7 @@ const EmbeddedAutomateEntryPoint = (props) => {
       />
       <div className="entry-point-wrapper">
         <div className="entry-point-text-input">
-          <TextInput id={id} type="text" labelText={__(label)} onChange={(value) => setTextValue(value.target.value)} value={textValue} />
+          <TextInput id={id} type="text" labelText={__(label)} onChange={(value) => setTextValue(value.target.value)} value={textValue} readOnly />
         </div>
         <div className="entry-point-buttons">
           <div className="entry-point-open">
@@ -75,6 +80,8 @@ const EmbeddedAutomateEntryPoint = (props) => {
               onClick={() => {
                 setSelectedValue({});
                 setTextValue('');
+                // Ensure the input change is triggered to update form state
+                input.onChange(null);
               }}
             />
           </div>

app/javascript/components/embedded-workflow-entry-point/index.jsx

@@ -26,9 +26,14 @@ const EmbeddedWorkflowEntryPoint = (props) => {
   useEffect(() => {
     if (selectedValue && selectedValue.name && selectedValue.name.text) {
       selectedValue.name.text = textValue;
+      input.onChange(selectedValue);
+    } else if (!selectedValue || Object.keys(selectedValue).length === 0) {
+      // When selectedValue is empty or undefined, pass null to trigger validation
+      input.onChange(null);
+    } else {
+      input.onChange(selectedValue);
     }
-    input.onChange(selectedValue);
-  }, [textValue]);
+  }, [textValue, selectedValue]);
 
   return (
     <div>
@@ -43,7 +48,7 @@ const EmbeddedWorkflowEntryPoint = (props) => {
       ) : undefined}
       <div className="entry-point-wrapper">
         <div className="entry-point-text-input">
-          <TextInput id={id} type="text" labelText={__(label)} onChange={(value) => setTextValue(value.target.value)} value={textValue} />
+          <TextInput id={id} type="text" labelText={__(label)} onChange={(value) => setTextValue(value.target.value)} value={textValue} readOnly />
         </div>
         <div className="entry-point-buttons">
           <div className="entry-point-open">
@@ -61,6 +66,8 @@ const EmbeddedWorkflowEntryPoint = (props) => {
               hasIconOnly
               onClick={() => {
                 setSelectedValue({});
+                // Ensure the input change is triggered to update form state
+                input.onChange(null);
               }}
             />
           </div>

app/javascript/components/service-dialog-form/data.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import {
+  CheckboxChecked32, RadioButtonChecked32, Time32, StringText32, TextSmallCaps32, CaretDown32, Tag32, Calendar32,
+} from '@carbon/icons-react';
+import { formattedCatalogPayload } from './helper';
+
+export const dragItems = {
+  COMPONENT: 'component',
+  SECTION: 'section',
+  FIELD: 'field',
+  TAB: 'tab',
+};
+
+/** Data needed to render the dynamic components on the left hand side of the form. */
+export const dynamicComponents = [
+  { id: 1, title: 'Text Box', icon: <StringText32 /> },
+  { id: 2, title: 'Text Area', icon: <TextSmallCaps32 /> },
+  { id: 3, title: 'Check Box', icon: <CheckboxChecked32 /> },
+  { id: 4, title: 'Dropdown', icon: <CaretDown32 /> },
+  { id: 5, title: 'Radio Button', icon: <RadioButtonChecked32 /> },
+  { id: 6, title: 'Datepicker', icon: <Calendar32 /> },
+  { id: 7, title: 'Timepicker', icon: <Time32 /> },
+  { id: 8, title: 'Tag Control', icon: <Tag32 /> },
+];
+
+/** Function which returens the default data for a section under a tab. */
+export const defaultSectionContents = (tabId, sectionId) => ({
+  tabId,
+  sectionId,
+  title: 'New Section',
+  fields: [],
+  order: 0,
+});
+
+/** Function which returns the default data for a tab with default section. */
+export const defaultTabContents = (tabId) => ({
+  tabId,
+  name: tabId === 0 ? __('New Tab') : __(`New Tab ${tabId}`),
+  sections: [defaultSectionContents(tabId, 0)],
+});
+
+/** Function to create a dummy tab for creating new tabs. */
+export const createNewTab = () => ({
+  tabId: 'new',
+  name: 'Create Tab',
+  sections: [],
+});
+
+export const tagControlCategories = async() => {
+  try {
+    const { resources } = await API.get('/api/categories?expand=resources&attributes=id,name,description,single_value,children');
+
+    return resources;
+  } catch (error) {
+    console.error('Error fetching categories:', error);
+    return [];
+  }
+};
+
+// data has formfields and list (as of now); no dialog related general info - this is needed
+export const saveServiceDialog = (data, onSuccess) => {
+  const payload = formattedCatalogPayload(data);
+
+  API.post('/api/service_dialogs', payload, {
+    skipErrors: [400],
+  }).then(() => {
+    // Redirect to the service dialogs explorer page after successful save
+    if (typeof onSuccess === 'function') {
+      onSuccess();
+    } else {
+      window.location.href = '/miq_ae_customization/explorer';
+    }
+  }).catch((error) => {
+    console.error('Error saving dialog:', error);
+  });
+};

app/javascript/components/service-dialog-form/dynamic-component-chooser.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { dragItems } from './data';
+
+/** Component to render the components list vertically on left side.
+ * Components can be used to drag and drop into the tab Contents */
+const DynamicComponentChooser = ({ list, onDragStartComponent }) => (
+  <div className="components-list-wrapper">
+    {
+      list.map((item, index) => (
+        <div
+          title={`Drag and Drop a ${item.title.toLowerCase()} to any section`}
+          id={item.id}
+          className="component-item-wrapper"
+          draggable="true"
+          onDragStart={(event) => onDragStartComponent(event, dragItems.COMPONENT)}
+          key={index.toString()}
+        >
+          <div className="component-item">
+            {item.icon}
+            {item.title}
+          </div>
+        </div>
+      ))
+    }
+  </div>
+);
+
+DynamicComponentChooser.propTypes = {
+  list: PropTypes.arrayOf(PropTypes.any).isRequired,
+  onDragStartComponent: PropTypes.func.isRequired,
+};
+
+export default DynamicComponentChooser;