datajunction-ui 0.0.77 → 0.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "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

@@ -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

@@ -147,7 +147,10 @@ export function AddEditNodePage({ extensions = {} }) {
       values.primary_key ? primaryKeyToList(values.primary_key) : null,
       values.metric_direction,
       values.metric_unit,
-      values.required_dimensions,
+      // Only send required_dimensions if it's set (for metrics)
+      values.required_dimensions && Array.isArray(values.required_dimensions)
+        ? values.required_dimensions
+        : undefined,
       parseCustomMetadata(values.custom_metadata),
     );
     if (status === 200 || status === 201) {
@@ -182,7 +185,10 @@ export function AddEditNodePage({ extensions = {} }) {
       values.metric_direction,
       values.metric_unit,
       values.significant_digits,
-      values.required_dimensions,
+      // Only send required_dimensions if it's set (for metrics)
+      values.required_dimensions && Array.isArray(values.required_dimensions)
+        ? values.required_dimensions
+        : undefined,
       values.owners,
       parseCustomMetadata(values.custom_metadata),
     );
@@ -325,6 +331,7 @@ export function AddEditNodePage({ extensions = {} }) {
       'metric_unit',
       'metric_direction',
       'significant_digits',
+      'required_dimensions',
       'owners',
       'custom_metadata',
     ];

package/src/app/services/DJService.js

@@ -673,23 +673,30 @@ export const DataJunctionAPI = {
             unit: metric_unit,
           }
         : null;
+    // Build request body, filtering out undefined values
+    const requestBody = {
+      name: name,
+      display_name: display_name,
+      description: description,
+      query: query,
+      mode: mode,
+      namespace: namespace,
+      primary_key: primary_key,
+      metric_metadata: metricMetadata,
+      required_dimensions: required_dimensions,
+      custom_metadata: custom_metadata,
+    };
+    // Remove undefined fields to avoid sending them to the API
+    Object.keys(requestBody).forEach(
+      key => requestBody[key] === undefined && delete requestBody[key],
+    );
+
     const response = await fetch(`${DJ_URL}/nodes/${nodeType}`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({
-        name: name,
-        display_name: display_name,
-        description: description,
-        query: query,
-        mode: mode,
-        namespace: namespace,
-        primary_key: primary_key,
-        metric_metadata: metricMetadata,
-        required_dimensions: required_dimensions,
-        custom_metadata: custom_metadata,
-      }),
+      body: JSON.stringify(requestBody),
       credentials: 'include',
     });
     return { status: response.status, json: await response.json() };
@@ -718,22 +725,29 @@ export const DataJunctionAPI = {
               significant_digits: significant_digits || null,
             }
           : null;
+      // Build request body, filtering out undefined values
+      const requestBody = {
+        display_name: display_name,
+        description: description,
+        query: query,
+        mode: mode,
+        primary_key: primary_key,
+        metric_metadata: metricMetadata,
+        required_dimensions: required_dimensions,
+        owners: owners,
+        custom_metadata: custom_metadata,
+      };
+      // Remove undefined fields to avoid sending them to the API
+      Object.keys(requestBody).forEach(
+        key => requestBody[key] === undefined && delete requestBody[key],
+      );
+
       const response = await fetch(`${DJ_URL}/nodes/${name}`, {
         method: 'PATCH',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({
-          display_name: display_name,
-          description: description,
-          query: query,
-          mode: mode,
-          primary_key: primary_key,
-          metric_metadata: metricMetadata,
-          required_dimensions: required_dimensions,
-          owners: owners,
-          custom_metadata: custom_metadata,
-        }),
+        body: JSON.stringify(requestBody),
         credentials: 'include',
       });
       return { status: response.status, json: await response.json() };