datajunction-ui 0.0.11 → 0.0.13

package/package.json

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

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

@@ -1,61 +1,144 @@
 /**
  * Custom metadata field component for nodes
  */
-import { ErrorMessage, Field } from 'formik';
-import { useState } from 'react';
+import { ErrorMessage, Field, useFormikContext } from 'formik';
+import CodeMirror from '@uiw/react-codemirror';
+import { langs } from '@uiw/codemirror-extensions-langs';
+import { useState, useEffect } from 'react';
 
-export const CustomMetadataField = ({ initialValue = {} }) => {
-  const [jsonString, setJsonString] = useState(
-    JSON.stringify(initialValue, null, 2),
-  );
-  const [error, setError] = useState('');
+export const CustomMetadataField = ({ value }) => {
+  const formik = useFormikContext();
+  const jsonExt = langs.json();
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    if (!value || value === '') {
+      setHasError(false);
+      return;
+    }
 
-  const handleChange = (e, setFieldValue) => {
-    const value = e.target.value;
-    setJsonString(value);
+    const stringValue =
+      typeof value === 'string' ? value : JSON.stringify(value, null, 2);
 
     try {
-      if (value.trim() === '') {
-        setFieldValue('custom_metadata', null);
-        setError('');
-      } else {
-        const parsed = JSON.parse(value);
-        setFieldValue('custom_metadata', parsed);
-        setError('');
-      }
+      JSON.parse(stringValue);
+      setHasError(false);
     } catch (err) {
-      setError('Invalid JSON format');
+      setHasError(true);
+    }
+  }, [value]);
+
+  const formatValue = value => {
+    if (value === null || value === undefined) {
+      return '';
+    }
+    if (typeof value === 'string') {
+      return value;
+    }
+    return JSON.stringify(value, null, 2);
+  };
+
+  const updateFormik = val => {
+    formik.setFieldValue('custom_metadata', val);
+    formik.setFieldTouched('custom_metadata', true);
+
+    if (!val || val.trim() === '') {
+      setHasError(false);
+    } else {
+      try {
+        JSON.parse(val);
+        setHasError(false);
+      } catch (err) {
+        setHasError(true);
+      }
     }
   };
 
   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>
+    <div className="QueryInput NodeCreationInput">
+      <details>
+        <summary style={{ cursor: 'pointer' }}>
+          <label
+            style={{
+              paddingLeft: '3px',
+              display: 'inline-block',
+              pointerEvents: 'none',
+            }}
+          >
+            Custom Metadata (JSON)
+          </label>
+        </summary>
+        <ErrorMessage name="custom_metadata" component="span" />
+        <Field
+          type="textarea"
+          style={{ display: 'none' }}
+          as="textarea"
+          name="custom_metadata"
+          id="CustomMetadata"
+          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';
+            }
+          }}
+        />
+        <div
+          role="button"
+          tabIndex={0}
+          className={`relative flex ${
+            hasError ? 'bg-red-900/20' : 'bg-[#282a36]'
+          }`}
+          style={{
+            border: hasError ? '2px solid #ef4444' : 'none',
+            borderRadius: '4px',
+            boxShadow: hasError ? '0 0 0 1px rgba(239, 68, 68, 0.3)' : 'none',
+          }}
+        >
+          <CodeMirror
+            id={'custom_metadata'}
+            name={'custom_metadata'}
+            extensions={[jsonExt]}
+            value={formatValue(value)}
+            placeholder={'{\n  "key": "value"\n}'}
+            options={{
+              theme: 'default',
+              lineNumbers: true,
+            }}
+            width="100%"
+            height="200px"
+            style={{
+              margin: '0 0 23px 0',
+              flex: 1,
+              fontSize: '150%',
+              textAlign: 'left',
+            }}
+            onChange={(value, viewUpdate) => {
+              updateFormik(value);
+            }}
+          />
+        </div>
+      </details>
     </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,6 @@ export function AddEditNodePage({ extensions = {} }) {
                         ) : (
                           ''
                         )}
-                        <CustomMetadataField
-                          initialValue={node.custom_metadata || {}}
-                        />
                         {nodeType !== 'metric' && node.type !== 'metric' ? (
                           action === Action.Edit ? (
                             selectPrimaryKey
@@ -468,6 +490,11 @@ export function AddEditNodePage({ extensions = {} }) {
                         ) : (
                           <RequiredDimensionsSelect />
                         )}
+                        <CustomMetadataField
+                          value={
+                            node.custom_metadata ? node.custom_metadata : ''
+                          }
+                        />
                         {Object.entries(extensions).map(
                           ([key, ExtensionComponent]) => (
                             <div key={key} className="mt-4 border-t pt-4">
@@ -493,7 +520,10 @@ export function AddEditNodePage({ extensions = {} }) {
                         {action === Action.Edit ? selectTags : <TagsField />}
                         <NodeModeField />
 
-                        <button type="submit" disabled={isSubmitting}>
+                        <button
+                          type="submit"
+                          disabled={isSubmitting || !isValid}
+                        >
                           {isSubmitting ? (
                             <LoadingIcon />
                           ) : (