fix dialog summary pages

ManageIQ · Jul 15, 2024 · 72a9200 · 72a9200
1 parent 2009602
commit 72a9200
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 46 deletions.
diff --git a/app/javascript/components/service/DialogFields.jsx b/app/javascript/components/service/DialogFields.jsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { DIALOG_FIELD_TYPES } from './constants';
+import { DIALOG_FIELD_TYPES, ServiceType } from './constants';
 import CheckboxField from './dialogFieldItems/CheckboxField';
 import DateField from './dialogFieldItems/DateField';
 import DateTimeField from './dialogFieldItems/DateTimeField';
@@ -59,11 +59,18 @@ const renderFieldItem = (field, data) => {
 /** Component to render the Fields in the Service/DialogTabs/DialogGroups component */
 const DialogFields = ({ dialogFields }) => {
   const { data } = useContext(ServiceContext);
+  const visible = (field) => {
+    if (data.serviceType === ServiceType.dialog) {
+      return true;
+    }
+    return field.visible;
+  };
+
   return (
     <>
       {
         dialogFields.map((field) => (
-          field.visible ? renderFieldItem(field, data) : <span key={field.id.toString()} />
+          visible(field) ? renderFieldItem(field, data) : <span key={field.id.toString()} />
         ))
       }
     </>

diff --git a/app/javascript/components/service/DialogGroups.jsx b/app/javascript/components/service/DialogGroups.jsx
@@ -1,24 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { TooltipIcon } from 'carbon-components-react';
 import DialogFields from './DialogFields';
 
 /** Component to render the Groups in the Service/DialogTabs component */
-const DialogGroups = ({ dialogGroups }) => (
-  <>
-    {
-      dialogGroups.map((item) => (
-        <div className="section" key={item.id.toString()}>
-          <div className="section-label">
-            {item.label}
-          </div>
-          <div className="section-fields">
-            <DialogFields dialogFields={item.dialog_fields} />
+const DialogGroups = ({ dialogGroups }) => {
+  const itemLabel = ({ label, description }) => (description
+    ? <TooltipIcon direction="right" tooltipText={description}>{label}</TooltipIcon>
+    : label);
+
+  return (
+    <>
+      {
+        dialogGroups.map((item) => (
+          <div className="section" key={item.id.toString()}>
+            <div className="section-label">
+              {itemLabel(item)}
+            </div>
+            <div className="section-fields">
+              <DialogFields dialogFields={item.dialog_fields} />
+            </div>
           </div>
-        </div>
-      ))
-    }
-  </>
-);
+        ))
+      }
+    </>
+  );
+};
 
 DialogGroups.propTypes = {
   dialogGroups: PropTypes.arrayOf(PropTypes.any).isRequired,

diff --git a/app/javascript/components/service/DialogTabs.jsx b/app/javascript/components/service/DialogTabs.jsx
@@ -9,24 +9,24 @@ const DialogTabs = () => {
   const { data } = useContext(ServiceContext);
   const dialogTabs = extractDialogTabs(data.apiResponse);
 
-  const tabLabel = (label, tabIndex) => {
+  const tabLabel = (tab, tabIndex) => {
     const { fieldsToRefresh, groupFieldsByTab } = data;
     const refreshInProgress = fieldsToRefresh.some((field) => groupFieldsByTab[tabIndex].includes(field));
     return refreshInProgress
       ? (
         <div className="tab-label">
-          {label}
+          {tab.label}
           <Loading active small withOverlay={false} className="loading" />
         </div>
       )
-      : label;
+      : tab.label;
   };
 
   return (
     <Tabs className="miq_custom_tabs">
       {
         dialogTabs.map((tab, tabIndex) => (
-          <Tab key={tab.id.toString()} label={tabLabel(tab.label, tabIndex)}>
+          <Tab key={tab.id.toString()} label={tabLabel(tab, tabIndex)}>
             <div className="tabs">
               <DialogGroups dialogGroups={tab.dialog_groups} />
             </div>

diff --git a/app/javascript/components/service/dialogFieldItems/RadioField.jsx b/app/javascript/components/service/dialogFieldItems/RadioField.jsx
@@ -39,7 +39,7 @@ const RadioField = ({ field }) => {
         valueSelected={fieldData.value} // Ensure the selected value is correctly handled
       >
         {
-          field.values.map((radio) => (
+          field.values && field.values.map((radio) => (
             <RadioButton
               key={`radio-${radio[1]}`}
               disabled={isDisabled}
@@ -50,6 +50,7 @@ const RadioField = ({ field }) => {
           ))
         }
       </RadioButtonGroup>
+      {!field.values && <div>{__('Radio button entries are not configured')}</div>}
       {field.required && !fieldData.valid && <div className="bx--form__helper-text">{requiredLabel}</div>}
     </div>
   );

diff --git a/app/javascript/components/service/helper.js b/app/javascript/components/service/helper.js
@@ -56,7 +56,7 @@ const otherServiceTypesValue = (field) => {
       return false;
     }
     if (field.type === DIALOG_FIELD_TYPES.tag) {
-      return [];
+      return {};
     }
     if (field.type === DIALOG_FIELD_TYPES.date) {
       return currentDate();

diff --git a/app/javascript/components/service/index.jsx b/app/javascript/components/service/index.jsx
@@ -44,6 +44,7 @@ const Service = ({
     isOrderServiceForm,
     locked: false,
     groupFieldsByTab: {},
+    serviceType,
   });
 
   const refreshStatus = useRef(RefreshStatus.notStarted);
@@ -97,8 +98,6 @@ const Service = ({
     </ServiceContext.Provider>
   );
 
-  console.log(data.dialogFields)
-  console.log(data.groupFieldsByTab)
   return (
     <div className={classNames('service-container', serviceType)}>
       { data.isLoading ? renderLoader() : renderContent() }

diff --git a/app/javascript/spec/service/__snapshots__/dialog-summary.spec.js.snap b/app/javascript/spec/service/__snapshots__/dialog-summary.spec.js.snap
@@ -1333,7 +1333,7 @@ exports[`Service component - Dialog Summary should render the Service component
                                 disabled={true}
                                 id="text_box_1-DialogFieldTextBox-7542"
                                 invalid={false}
-                                invalidText="Required"
+                                invalidText=""
                                 labelText={
                                   <UNDEFINED
                                     field={
@@ -1622,7 +1622,7 @@ exports[`Service component - Dialog Summary should render the Service component
                                 helperText=""
                                 id="textarea_box_1-DialogFieldTextAreaBox-7543"
                                 invalid={false}
-                                invalidText="Required"
+                                invalidText=""
                                 labelText={
                                   <UNDEFINED
                                     field={
@@ -3394,7 +3394,7 @@ exports[`Service component - Dialog Summary should render the Service component
                                   hideLegend={false}
                                   id="radio_button_1-DialogFieldRadioButton-7547"
                                   invalid={false}
-                                  invalidText="Required"
+                                  invalidText=""
                                   labelPosition="right"
                                   legendText={
                                     <UNDEFINED
@@ -3895,7 +3895,7 @@ exports[`Service component - Dialog Summary should render the Service component
                                   locale="en"
                                   onChange={[Function]}
                                   short={false}
-                                  value="7/11/2024"
+                                  value="7/15/2024"
                                 >
                                   <div
                                     className="bx--form-item"

diff --git a/app/javascript/spec/service/__snapshots__/order-service-form.spec.js.snap b/app/javascript/spec/service/__snapshots__/order-service-form.spec.js.snap
@@ -1346,7 +1346,7 @@ exports[`Service component - Order Service should render the Service component f
                                 disabled={false}
                                 id="text_box_1-DialogFieldTextBox-7542"
                                 invalid={true}
-                                invalidText="Required"
+                                invalidText=""
                                 labelText={
                                   <UNDEFINED
                                     field={
@@ -1543,9 +1543,7 @@ exports[`Service component - Order Service should render the Service component f
                                     <div
                                       className="bx--form-requirement"
                                       id="text_box_1-DialogFieldTextBox-7542-error-msg"
-                                    >
-                                      Required
-                                    </div>
+                                    />
                                   </div>
                                 </div>
                               </TextInput>
@@ -1683,7 +1681,7 @@ exports[`Service component - Order Service should render the Service component f
                                 helperText=""
                                 id="textarea_box_1-DialogFieldTextAreaBox-7543"
                                 invalid={true}
-                                invalidText="Required"
+                                invalidText=""
                                 labelText={
                                   <UNDEFINED
                                     field={
@@ -1886,9 +1884,7 @@ exports[`Service component - Order Service should render the Service component f
                                     className="bx--form-requirement"
                                     id="textarea_box_1-DialogFieldTextAreaBox-7543-error-msg"
                                     role="alert"
-                                  >
-                                    Required
-                                  </div>
+                                  />
                                 </div>
                               </TextArea>
                             </TextAreaField>
@@ -3617,7 +3613,7 @@ exports[`Service component - Order Service should render the Service component f
                                   hideLegend={false}
                                   id="radio_button_1-DialogFieldRadioButton-7547"
                                   invalid={true}
-                                  invalidText="Required"
+                                  invalidText=""
                                   labelPosition="right"
                                   legendText={
                                     <UNDEFINED
@@ -3970,9 +3966,7 @@ exports[`Service component - Order Service should render the Service component f
                                 </RadioButtonGroup>
                                 <div
                                   className="bx--form__helper-text"
-                                >
-                                  Required
-                                </div>
+                                />
                               </div>
                             </RadioField>
                           </div>
@@ -4128,7 +4122,7 @@ exports[`Service component - Order Service should render the Service component f
                                   locale="en"
                                   onChange={[Function]}
                                   short={false}
-                                  value="7/11/2024"
+                                  value="7/15/2024"
                                 >
                                   <div
                                     className="bx--form-item"

diff --git a/app/javascript/spec/service/__snapshots__/secive-request.spec.js.snap b/app/javascript/spec/service/__snapshots__/secive-request.spec.js.snap
@@ -1424,7 +1424,7 @@ exports[`Service component - Service Request should render the Service component
                                 onChange={[Function]}
                                 readOnly={false}
                                 type="text"
-                                value={0}
+                                value="0"
                               >
                                 <div
                                   className="bx--form-item bx--text-input-wrapper"
@@ -1511,7 +1511,7 @@ exports[`Service component - Service Request should render the Service component
                                         onClick={[Function]}
                                         readOnly={false}
                                         type="text"
-                                        value={0}
+                                        value="0"
                                       />
                                     </div>
                                   </div>
@@ -3992,7 +3992,7 @@ exports[`Service component - Service Request should render the Service component
                                 onChange={[Function]}
                                 readOnly={false}
                                 type="text"
-                                value="Database, DHCP Server"
+                                value=""
                               >
                                 <div
                                   className="bx--form-item bx--text-input-wrapper"
@@ -4147,7 +4147,7 @@ exports[`Service component - Service Request should render the Service component
                                         onClick={[Function]}
                                         readOnly={false}
                                         type="text"
-                                        value="Database, DHCP Server"
+                                        value=""
                                       />
                                     </div>
                                   </div>