datajunction-ui 0.0.11 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

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

@@ -2,59 +2,86 @@
  * Custom metadata field component for nodes
  */
 import { ErrorMessage, Field } from 'formik';
-import { useState } from 'react';
+import { useEffect } from 'react';
 
-export const CustomMetadataField = ({ initialValue = {} }) => {
-  const [jsonString, setJsonString] = useState(
-    JSON.stringify(initialValue, null, 2),
-  );
-  const [error, setError] = useState('');
+export const CustomMetadataField = () => {
+  const formatValue = value => {
+    if (value === null || value === undefined) {
+      return '';
+    }
+    if (typeof value === 'string') {
+      return value;
+    }
+    return JSON.stringify(value, null, 2);
+  };
 
   const handleChange = (e, setFieldValue) => {
-    const value = e.target.value;
-    setJsonString(value);
-
-    try {
-      if (value.trim() === '') {
-        setFieldValue('custom_metadata', null);
-        setError('');
-      } else {
-        const parsed = JSON.parse(value);
-        setFieldValue('custom_metadata', parsed);
-        setError('');
-      }
-    } catch (err) {
-      setError('Invalid JSON format');
-    }
+    setFieldValue('custom_metadata', e.target.value);
   };
 
   return (
     <div className="NodeCreationInput" style={{ marginTop: '20px' }}>
-      <ErrorMessage name="custom_metadata" component="span" />
       <label htmlFor="CustomMetadata">Custom Metadata (JSON)</label>
-      <Field name="custom_metadata">
-        {({ field, form }) => (
-          <div>
-            <textarea
-              id="CustomMetadata"
-              value={jsonString}
-              onChange={e => handleChange(e, form.setFieldValue)}
-              style={{
-                width: '100%',
-                minHeight: '100px',
-                fontFamily: 'monospace',
-                fontSize: '12px',
-                padding: '8px',
-                border: error ? '1px solid red' : '1px solid #ccc',
-                borderRadius: '4px',
-              }}
-              placeholder='{"key": "value"}'
-            />
-            {error && (
-              <span style={{ color: 'red', fontSize: '12px' }}>{error}</span>
-            )}
-          </div>
-        )}
+      <Field
+        name="custom_metadata"
+        validate={value => {
+          if (!value || value.trim() === '') {
+            return undefined;
+          }
+          try {
+            const parsed = JSON.parse(value);
+
+            if (
+              typeof parsed === 'object' &&
+              parsed !== null &&
+              !Array.isArray(parsed)
+            ) {
+              const keys = Object.keys(parsed);
+              const originalKeyMatches = value.match(/"([^"]+)"\s*:/g);
+              if (
+                originalKeyMatches &&
+                originalKeyMatches.length > keys.length
+              ) {
+                return 'Duplicate keys detected';
+              }
+            }
+
+            return undefined;
+          } catch (err) {
+            return 'Invalid JSON format';
+          }
+        }}
+      >
+        {({ field, form }) => {
+          const errorMessage = form.errors.custom_metadata;
+          const hasError = errorMessage && form.touched.custom_metadata;
+
+          return (
+            <div>
+              <textarea
+                id="CustomMetadata"
+                value={formatValue(field.value)}
+                onChange={e => handleChange(e, form.setFieldValue)}
+                onBlur={() => form.setFieldTouched('custom_metadata', true)}
+                style={{
+                  width: '100%',
+                  minHeight: '100px',
+                  fontFamily: 'monospace',
+                  fontSize: '12px',
+                  padding: '8px',
+                  border: hasError ? '1px solid red' : '1px solid #ccc',
+                  borderRadius: '4px',
+                }}
+                placeholder="Define custom node metadata here..."
+              />
+              {hasError && (
+                <span style={{ color: 'red', fontSize: '12px' }}>
+                  {errorMessage}
+                </span>
+              )}
+            </div>
+          );
+        }}
       </Field>
     </div>
   );

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

@@ -203,7 +203,7 @@ describe('AddEditNodePage submission succeeded', () => {
         '',
         undefined,
         ['dj'],
-        '', // custom_metadata is set to '' when null in the form
+        null,
       );
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(

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

@@ -109,6 +109,17 @@ export function AddEditNodePage({ extensions = {} }) {
     return primaryKey.map(columnName => columnName.trim());
   };
 
+  const parseCustomMetadata = customMetadata => {
+    if (!customMetadata || customMetadata.trim() === '') {
+      return null;
+    }
+    try {
+      return JSON.parse(customMetadata);
+    } catch (err) {
+      return null;
+    }
+  };
+
   const createNode = async (values, setStatus) => {
     const { status, json } = await djClient.createNode(
       nodeType,
@@ -124,7 +135,7 @@ export function AddEditNodePage({ extensions = {} }) {
       values.metric_direction,
       values.metric_unit,
       values.required_dimensions,
-      values.custom_metadata,
+      parseCustomMetadata(values.custom_metadata),
     );
     if (status === 200 || status === 201) {
       if (values.tags) {
@@ -160,7 +171,7 @@ export function AddEditNodePage({ extensions = {} }) {
       values.significant_digits,
       values.required_dimensions,
       values.owners,
-      values.custom_metadata,
+      parseCustomMetadata(values.custom_metadata),
     );
     const tagsResponse = await djClient.tagsNode(
       values.name,
@@ -283,6 +294,9 @@ export function AddEditNodePage({ extensions = {} }) {
           field,
           data[field].map(owner => owner.username),
         );
+      } else if (field === 'custom_metadata') {
+        const value = data[field] ? JSON.stringify(data[field], null, 2) : '';
+        setFieldValue(field, value, false);
       } else {
         setFieldValue(field, data[field] || '', false);
       }
@@ -352,6 +366,8 @@ export function AddEditNodePage({ extensions = {} }) {
             <Formik
               initialValues={initialValues}
               validate={validator}
+              validateOnChange={true}
+              validateOnBlur={true}
               onSubmit={async (values, { setSubmitting, setStatus }) => {
                 try {
                   for (const handler of submitHandlers) {
@@ -364,7 +380,16 @@ export function AddEditNodePage({ extensions = {} }) {
                 }
               }}
             >
-              {function Render({ isSubmitting, status, setFieldValue }) {
+              {function Render(formikProps) {
+                const {
+                  isSubmitting,
+                  status,
+                  setFieldValue,
+                  errors,
+                  touched,
+                  isValid,
+                  dirty,
+                } = formikProps;
                 const [node, setNode] = useState([]);
                 const [selectPrimaryKey, setSelectPrimaryKey] = useState(null);
                 const [selectRequiredDims, setSelectRequiredDims] =
@@ -449,9 +474,7 @@ export function AddEditNodePage({ extensions = {} }) {
                         ) : (
                           ''
                         )}
-                        <CustomMetadataField
-                          initialValue={node.custom_metadata || {}}
-                        />
+                        <CustomMetadataField />
                         {nodeType !== 'metric' && node.type !== 'metric' ? (
                           action === Action.Edit ? (
                             selectPrimaryKey
@@ -493,7 +516,10 @@ export function AddEditNodePage({ extensions = {} }) {
                         {action === Action.Edit ? selectTags : <TagsField />}
                         <NodeModeField />
 
-                        <button type="submit" disabled={isSubmitting}>
+                        <button
+                          type="submit"
+                          disabled={isSubmitting || !isValid}
+                        >
                           {isSubmitting ? (
                             <LoadingIcon />
                           ) : (