Update UI properly with icons after add/edit

Author: elsamaryv

app/javascript/components/data-tables/datastore/schema/class-fields-editor.jsx

@@ -55,34 +55,29 @@ export const ClassFieldsEditor = (props) => {
     setState((state) => ({ ...state, isSchemaModified: !state.isSchemaModified }));
   }, [state.rows]);
 
-  // const editClassField = (selectedRow) => {
-  //   const rowId = selectedRow.id;
-  //   setState((state) => ({
-  //     ...state,
-  //     selectedRowId: rowId,
-  //     isModalOpen: true,
-  //     formKey: !state.formKey,
-  //   }));
-  // };
-
-  // const deleteClassField = (selectedRow) => {
-  //   setState((prevState) => ({
-  //     ...prevState,
-  //     rows: prevState.rows.filter((field) => field.id !== selectedRow.id),
-  //   }));
-  // };
-
   const handleModalClose = () => {
-    // setModalOpen(false);
     setState((state) => ({ ...state, isModalOpen: false }));
   };
 
   const formatFieldValues = (field, id, data = {}) => {
     if (!field || typeof field !== 'object') return [];
+    const getFieldName = () => `${field.display_name} (${field.name})`;
+    const getIconForValue = () => {
+      const aeMatch = aeTypeOptions.find((option) => option[1] === field.aetype);
+      const aeTypeIcon = (aeMatch && aeMatch[2] && aeMatch[2]['data-icon']) || '';
+
+      const dtypeMatch = dTypeOptions.find((option) => option[1] === field.datatype);
+      const dTypeIcon = (dtypeMatch && dtypeMatch[2] && dtypeMatch[2]['data-icon']) || '';
+
+      return [aeTypeIcon, dTypeIcon];
+    };
 
     const row = {
       id: (field.id || id).toString(),
-      name: { text: field.name, icon: data.icons || [] },
+      name: {
+        text: getFieldName(),
+        icon: getIconForValue() || [],
+      },
       aetype: { text: field.aetype },
       datatype: { text: field.datatype },
       default_value: { text: field.default_value || '' },
@@ -146,8 +141,7 @@ export const ClassFieldsEditor = (props) => {
   const updateFieldValueInState = (fieldName, newValue) => {
     // Update existing field in rows
     setState((prevState) => {
-      debugger
-      const updatedRows = prevState.rows.map((row) => {
+      const updatedRow = prevState.rows.map((row) => {
         if (row.id === prevState.selectedRowId) {
           return {
             ...row,
@@ -159,11 +153,11 @@ export const ClassFieldsEditor = (props) => {
         }
         return row;
       });
+      debugger
 
       return {
         ...prevState,
-        rows: updatedRows,
-        isSchemaModified: !prevState.isSchemaModified,
+        rows: updatedRow,
       };
     });
   };
@@ -212,7 +206,6 @@ export const ClassFieldsEditor = (props) => {
   };
 
   const onSchemaSave = (values) => {
-    debugger
     http.post(`/miq_ae_class/update_fields/${aeClassId}?button=save`, { skipErrors: [400] })
       .then((response) => {
         console.log(response);
@@ -237,7 +230,6 @@ export const ClassFieldsEditor = (props) => {
   const onCancel = () => {
     http.post(`/miq_ae_class/update_fields/${aeClassId}?button=cancel`, { skipErrors: [400] })
       .then((response) => {
-        debugger
         console.log(response);
       }).catch((error) => {
         console.error('Failed to cancel schema updates:', error);

app/javascript/components/data-tables/datastore/schema/modal-form.schema.js

@@ -4,19 +4,55 @@ import { transformSelectOptions } from '../helper';
 const createClassFieldsSchema = (aeClassId, selectedRowId, aeTypeOptions,
   dTypeOptions, schemaField = {}, handleSchemaFieldChange, updateFieldValueInState) => {
   const classField = schemaField;
+
+  // const formatName = () => {
+  //   const fullName = classField.name.text;
+  //   const match = fullName.match(/^(.+?)\s*\(([^)]+)\)$/);
+  //   return {
+  //     display_name: match[1],
+  //     name: match[2],
+  //   };
+  // };
+
+  const formatName = () => {
+    const fullName = classField.name.text;
+    const match = fullName.match(/^(.+?)\s*\(([^)]+)\)$/);
+
+    if (classField.display_name && classField.display_name.text) {
+      return {
+        display_name: classField.display_name.text,
+        name: (match && match[2]) || fullName,
+      };
+    }
+    return {
+      display_name: (match && match[1]) || '',
+      name: (match && match[2]) || fullName,
+    };
+  };
+
   const getInitialValue = (field, defaultVal = '') => {
     if (
       classField
       && typeof classField === 'object'
       && Object.keys(classField).length > 0
-      && classField[field]
-      && 'text' in classField[field]
     ) {
-      return classField[field].text;
+      if (selectedRowId) {
+        if (field === 'name' || field === 'display_name') {
+          // debugger
+          const formatted = formatName();
+          return formatted[field] || defaultVal;
+        }
+      }
+
+      if (classField[field] && 'text' in classField[field]) {
+        return classField[field].text || defaultVal;
+      }
     }
+
     return defaultVal;
   };
 
+
   const getIcons = (index) => {
     if (
       classField
@@ -35,7 +71,7 @@ const createClassFieldsSchema = (aeClassId, selectedRowId, aeTypeOptions,
       (item) => item[2] && item[2]['data-icon'] === icon
     );
 
-    return match ? match[1] : null;
+    return match ? match[1] : '';
   };
 
   return {