datajunction-ui 0.0.76 → 0.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "description": "DataJunction UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/pages/AddEditNodePage/ColumnsSelect.jsx

@@ -21,10 +21,12 @@ export const ColumnsSelect = ({
 
   // The available columns, determined from validating the node query
   const [availableColumns, setAvailableColumns] = useState([]);
+  const [validationError, setValidationError] = useState(null);
   const selectableOptions = useMemo(() => {
     if (availableColumns && availableColumns.length > 0) {
       return availableColumns;
     }
+    return [];
   }, [availableColumns]);
 
   // Fetch columns by validating the latest node query
@@ -41,9 +43,18 @@ export const ColumnsSelect = ({
         setAvailableColumns(
           json.columns.map(col => ({ value: col.name, label: col.name })),
         );
+        setValidationError(null);
+      } else if (json?.message) {
+        setValidationError(json.message);
+        setAvailableColumns([]);
       }
     } catch (error) {
       console.error('Error fetching columns:', error);
+      setValidationError(
+        error.message ||
+          'Failed to validate query. Please check your query syntax.',
+      );
+      setAvailableColumns([]);
     }
   };
 
@@ -57,6 +68,22 @@ export const ColumnsSelect = ({
       <label htmlFor={fieldName} style={labelStyle}>
         {label}
       </label>
+      {validationError && (
+        <div
+          className="validation-error"
+          style={{
+            color: '#d32f2f',
+            fontSize: '0.875rem',
+            marginBottom: '8px',
+            padding: '8px',
+            backgroundColor: '#ffebee',
+            borderRadius: '4px',
+            border: '1px solid #ef9a9a',
+          }}
+        >
+          <strong>Validation Error:</strong> {validationError}
+        </div>
+      )}
       <span data-testid={`select-${fieldName}`}>
         <FormikSelect
           className={isMulti ? 'MultiSelectInput' : 'SelectInput'}

package/src/app/pages/AddEditNodePage/FormikSelect.jsx

@@ -41,7 +41,7 @@ export const FormikSelect = ({
 
   // Convert Formik field value to React Select format
   const getSelectValue = () => {
-    if (!field.value) {
+    if (!field.value || !selectOptions) {
       return isMulti ? [] : null;
     }
 

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormSuccess.test.jsx

@@ -201,7 +201,7 @@ describe('AddEditNodePage submission succeeded', () => {
         '',
         '',
         '',
-        undefined,
+        '',
         ['dj'],
         null,
       );
@@ -270,7 +270,7 @@ describe('AddEditNodePage submission succeeded', () => {
         'neutral',
         'unitless',
         5,
-        undefined,
+        [],
         ['dj'],
         { key1: 'value1', key2: 'value2' },
       );

package/src/app/pages/AddEditNodePage/__tests__/FormikSelect.test.jsx

@@ -72,4 +72,81 @@ describe('FormikSelect', () => {
     await userEvent.click(screen.getByRole('combobox')); // to open the dropdown
     expect(screen.getByText('basic.one')).toBeInTheDocument();
   });
+
+  it('handles undefined selectOptions gracefully for single-select', () => {
+    const utils = render(
+      <Formik initialValues={{ test: '' }} onSubmit={jest.fn()}>
+        <Form>
+          <FormikSelect
+            selectOptions={undefined}
+            formikFieldName="test"
+            placeholder="Choose Option"
+          />
+        </Form>
+      </Formik>,
+    );
+
+    // Should render without crashing
+    const selectInput = screen.getByRole('combobox');
+    expect(selectInput).toBeInTheDocument();
+  });
+
+  it('handles undefined selectOptions gracefully for multi-select', () => {
+    const utils = render(
+      <Formik initialValues={{ test: [] }} onSubmit={jest.fn()}>
+        <Form>
+          <FormikSelect
+            selectOptions={undefined}
+            formikFieldName="test"
+            placeholder="Choose Options"
+            isMulti={true}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    // Should render without crashing
+    const selectInput = screen.getByRole('combobox');
+    expect(selectInput).toBeInTheDocument();
+  });
+
+  it('handles undefined selectOptions with existing field value for single-select', () => {
+    const utils = render(
+      <Formik initialValues={{ test: 'existing-value' }} onSubmit={jest.fn()}>
+        <Form>
+          <FormikSelect
+            selectOptions={undefined}
+            formikFieldName="test"
+            placeholder="Choose Option"
+          />
+        </Form>
+      </Formik>,
+    );
+
+    // Should render without crashing even when field has a value
+    const selectInput = screen.getByRole('combobox');
+    expect(selectInput).toBeInTheDocument();
+  });
+
+  it('handles undefined selectOptions with existing field value for multi-select', () => {
+    const utils = render(
+      <Formik
+        initialValues={{ test: ['value1', 'value2'] }}
+        onSubmit={jest.fn()}
+      >
+        <Form>
+          <FormikSelect
+            selectOptions={undefined}
+            formikFieldName="test"
+            placeholder="Choose Options"
+            isMulti={true}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    // Should render without crashing even when field has values
+    const selectInput = screen.getByRole('combobox');
+    expect(selectInput).toBeInTheDocument();
+  });
 });

package/src/app/pages/AddEditNodePage/index.jsx

@@ -325,6 +325,7 @@ export function AddEditNodePage({ extensions = {} }) {
       'metric_unit',
       'metric_direction',
       'significant_digits',
+      'required_dimensions',
       'owners',
       'custom_metadata',
     ];