Fix required dimensions component to read/write formik state properly (#1783)

* Fix required dimensions component to read/write formik state properly

* Fix lint

* Fix tests

Author: shangyian

datajunction-ui/src/app/pages/AddEditNodePage/FormikSelect.jsx

@@ -39,10 +39,33 @@ export const FormikSelect = ({
     }
   };
 
+  // Convert Formik field value to React Select format
+  const getSelectValue = () => {
+    if (!field.value) {
+      return isMulti ? [] : null;
+    }
+
+    if (isMulti) {
+      // For multi-select, map array of values to option objects
+      return Array.isArray(field.value)
+        ? field.value.map(
+            val =>
+              selectOptions.find(opt => opt.value === val) || {
+                value: val,
+                label: val,
+              },
+          )
+        : [];
+    } else {
+      // For single-select, find the matching option
+      return selectOptions.find(opt => opt.value === field.value) || null;
+    }
+  };
+
   return (
     <Select
       className={className}
-      defaultValue={defaultValue}
+      value={getSelectValue()}
       options={selectOptions}
       name={field.name}
       placeholder={placeholder}

datajunction-ui/src/app/pages/AddEditNodePage/__tests__/FormikSelect.test.jsx

@@ -14,7 +14,7 @@ describe('FormikSelect', () => {
 
   const singleSelect = () => {
     const utils = render(
-      <Formik initialValues={{ selectedOption: '' }} onSubmit={jest.fn()}>
+      <Formik initialValues={{ namespace: '' }} onSubmit={jest.fn()}>
         <Form>
           <FormikSelect
             selectOptions={namespaces}
@@ -38,7 +38,7 @@ describe('FormikSelect', () => {
 
   const multiSelect = () => {
     const utils = render(
-      <Formik initialValues={{ selectedOption: '' }} onSubmit={jest.fn()}>
+      <Formik initialValues={{ namespace: [] }} onSubmit={jest.fn()}>
         <Form>
           <FormikSelect
             selectOptions={namespaces}
@@ -61,15 +61,15 @@ describe('FormikSelect', () => {
     };
   };
 
-  it('renders the single select component with provided options', () => {
+  it('renders the single select component with provided options', async () => {
     singleSelect();
-    userEvent.click(screen.getByRole('combobox')); // to open the dropdown
+    await userEvent.click(screen.getByRole('combobox')); // to open the dropdown
     expect(screen.getByText('basic.one')).toBeInTheDocument();
   });
 
-  it('renders the multi-select component with provided options', () => {
+  it('renders the multi-select component with provided options', async () => {
     multiSelect();
-    userEvent.click(screen.getByRole('combobox')); // to open the dropdown
+    await userEvent.click(screen.getByRole('combobox')); // to open the dropdown
     expect(screen.getByText('basic.one')).toBeInTheDocument();
   });
 });

datajunction-ui/src/app/pages/NodePage/EditColumnPopover.jsx

@@ -63,7 +63,7 @@ export default function EditColumnPopover({ column, node, options, onSubmit }) {
           initialValues={{
             column: column.name,
             node: node.name,
-            attributes: [],
+            attributes: column.attributes.map(attr => attr.attribute_type.name),
           }}
           onSubmit={saveAttributes}
         >