Fixes array index mismatch issues

Author: elsamaryv

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

@@ -1,13 +1,12 @@
 import React, {
-  useState, useEffect, useMemo, useCallback,
+  useState, useEffect, useCallback,
 } from 'react';
 import PropTypes from 'prop-types';
 import { Modal } from 'carbon-components-react';
 import MiqFormRenderer from '@@ddf';
 import debounce from 'lodash/debounce';
 import { schemaHeaders, createEditableRows } from '../helper';
 import createClassFieldsSchema from './modal-form.schema';
-// import miqRedirectBack from '../../helpers/miq-redirect-back';
 import createSchemaEditSchema from './class-fields-schema';
 import mapper from '../../../../forms/mappers/componentMapper';
 import { SchemaTableComponent } from './schema-table';
@@ -33,11 +32,12 @@ export const ClassFieldsEditor = (props) => {
       // eslint-disable-next-line camelcase
       id, field_id, cells, clickable,
     }) => {
+      // eslint-disable-next-line camelcase
+      const fieldId = field_id;
       const reducedItems = cells.reduce((result, item, index) => {
         result[headers[index].name] = item;
-        result.id = id;
-        // eslint-disable-next-line camelcase
-        result.field_id = field_id;
+        result.id = fieldId.toString();
+        result.field_id = fieldId;
         result.clickable = clickable;
         return result;
       }, {});
@@ -60,7 +60,7 @@ export const ClassFieldsEditor = (props) => {
   }, [state.rows]);
 
   const handleModalClose = () => {
-    setState((state) => ({ ...state, isModalOpen: false }));
+    setState((state) => ({ ...state, isModalOpen: false, selectedRowId: undefined }));
   };
 
   const formatFieldValues = (field, rowId) => {
@@ -80,8 +80,6 @@ export const ClassFieldsEditor = (props) => {
       return [aeTypeIcon, dTypeIcon, subIcon];
     };
 
-    debugger
-
     const row = {
       id: rowId.toString(),
       field_id: field.id,
@@ -150,10 +148,10 @@ export const ClassFieldsEditor = (props) => {
   };
 
   const updateFieldValueInState = (fieldName, newValue) => {
-    // Update existing field in rows
+    // Update existing field in state attr - rows
     setState((prevState) => {
-      const updatedRow = prevState.rows.map((row) => {
-        if (row.id === prevState.selectedRowId) {
+      const updatedRow = prevState.rows.map((row, index) => {
+        if (index === prevState.selectedRowId) {
           return {
             ...row,
             [fieldName]: {
@@ -204,8 +202,6 @@ export const ClassFieldsEditor = (props) => {
     [aeClassId, state.selectedRowId]
   );
 
-
-
   const onSchemaReset = () => {
     http.post(`/miq_ae_class/update_fields/${aeClassId}?button=reset`, { skipErrors: [400] })
       .then((response) => {
@@ -232,6 +228,7 @@ export const ClassFieldsEditor = (props) => {
       .catch(miqSparkleOff);
   };
 
+  // On cancelling the edit schema action
   const onCancel = () => {
     http.post(`/miq_ae_class/update_fields/${aeClassId}?button=cancel`, { skipErrors: [400] })
       .then((response) => {
@@ -272,12 +269,14 @@ export const ClassFieldsEditor = (props) => {
             aeTypeOptions,
             dTypeOptions,
             state.rows[state.selectedRowId],
+            // state.rows.find((row) => row.id === state.selectedRowId),
             handleSchemaFieldChange,
             updateFieldValueInState,
           )}
           onSubmit={onModalSubmit}
           onCancel={handleModalClose}
-          // canReset
+          canReset
+          disableSubmit={['invalid']}
           buttonsLabels={{ submitLabel: __('Save') }}
         />
       </Modal>

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

@@ -17,16 +17,19 @@ const createSchemaEditSchema = (rows, setState, isSchemaModified) => {
       });
   };
 
-  const handleFieldDelete = (index) => {
-    const field = rows.find((field) => field.id === index);
-    const arrId = rows.findIndex((field) => field.id === index);
+  const handleFieldDelete = (rowId) => {
+    const field = rows.find((field) => field.id === rowId);
+    // const field = rows.find((field, rowIndex) => rowIndex === index);
+    const arrId = rows.findIndex((field) => field.id === rowId);
     const fId = field.field_id;
     const url = `/miq_ae_class/field_delete${fId ? `/${fId}` : ''}?arr_id=${arrId}`;
+    // const url = `/miq_ae_class/field_delete${fId ? `/${fId}` : ''}?arr_id=${rowId}`;
     http.post(url, { skipErrors: [400] })
       .then(() => {
         setState((prev) => ({
           ...prev,
-          rows: prev.rows.filter((field) => field.id !== index),
+          selectedRowId: undefined,
+          rows: prev.rows.filter((field) => field.id !== rowId),
         }));
       })
       .catch((error) => {
@@ -49,11 +52,13 @@ const createSchemaEditSchema = (rows, setState, isSchemaModified) => {
             rows,
             headers: schemaHeaders(true),
             onCellClick: (selectedRow) => {
+              debugger
               switch (selectedRow.callbackAction) {
                 case 'editClassField':
                   setState((prev) => ({
                     ...prev,
-                    selectedRowId: selectedRow.id,
+                    // selectedRowId: selectedRow.id,
+                    selectedRowId: rows.findIndex((row) => row.id === selectedRow.id),
                     isModalOpen: true,
                     formKey: !prev.formKey,
                   }));