datajunction-ui 0.0.9 → 0.0.11

package/package.json

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

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

@@ -0,0 +1,61 @@
+/**
+ * Custom metadata field component for nodes
+ */
+import { ErrorMessage, Field } from 'formik';
+import { useState } from 'react';
+
+export const CustomMetadataField = ({ initialValue = {} }) => {
+  const [jsonString, setJsonString] = useState(
+    JSON.stringify(initialValue, null, 2),
+  );
+  const [error, setError] = useState('');
+
+  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');
+    }
+  };
+
+  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>
+  );
+};

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

@@ -55,6 +55,7 @@ describe('AddEditNodePage submission failed', () => {
         undefined,
         undefined,
         undefined,
+        null,
       );
       expect(
         screen.getByText(/Some columns in the primary key \[] were not found/),

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

@@ -67,6 +67,7 @@ describe('AddEditNodePage submission succeeded', () => {
         undefined,
         undefined,
         undefined,
+        null,
       );
       expect(screen.getByText(/default.some_test_dim/)).toBeInTheDocument();
     });
@@ -140,6 +141,7 @@ describe('AddEditNodePage submission succeeded', () => {
           undefined,
           undefined,
           undefined,
+          null,
         );
         expect(
           screen.getByText(/default.some_test_metric/),
@@ -201,6 +203,7 @@ describe('AddEditNodePage submission succeeded', () => {
         '',
         undefined,
         ['dj'],
+        '', // custom_metadata is set to '' when null in the form
       );
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
@@ -269,6 +272,7 @@ describe('AddEditNodePage submission succeeded', () => {
         5,
         undefined,
         ['dj'],
+        { key1: 'value1', key2: 'value2' },
       );
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(

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

@@ -25,6 +25,7 @@ import { NodeModeField } from './NodeModeField';
 import { RequiredDimensionsSelect } from './RequiredDimensionsSelect';
 import LoadingIcon from '../../icons/LoadingIcon';
 import { ColumnsSelect } from './ColumnsSelect';
+import { CustomMetadataField } from './CustomMetadataField';
 
 class Action {
   static Add = new Action('add');
@@ -52,6 +53,7 @@ export function AddEditNodePage({ extensions = {} }) {
     primary_key: '',
     mode: 'published',
     owners: [],
+    custom_metadata: null,
   };
 
   const validator = values => {
@@ -122,6 +124,7 @@ export function AddEditNodePage({ extensions = {} }) {
       values.metric_direction,
       values.metric_unit,
       values.required_dimensions,
+      values.custom_metadata,
     );
     if (status === 200 || status === 201) {
       if (values.tags) {
@@ -157,6 +160,7 @@ export function AddEditNodePage({ extensions = {} }) {
       values.significant_digits,
       values.required_dimensions,
       values.owners,
+      values.custom_metadata,
     );
     const tagsResponse = await djClient.tagsNode(
       values.name,
@@ -205,6 +209,7 @@ export function AddEditNodePage({ extensions = {} }) {
       tags: node.tags,
       mode: node.current.mode.toLowerCase(),
       owners: node.owners,
+      custom_metadata: node.current.customMetadata,
     };
 
     if (node.type === 'METRIC') {
@@ -265,6 +270,7 @@ export function AddEditNodePage({ extensions = {} }) {
       'metric_direction',
       'significant_digits',
       'owners',
+      'custom_metadata',
     ];
     fields.forEach(field => {
       if (field === 'tags') {
@@ -443,6 +449,9 @@ export function AddEditNodePage({ extensions = {} }) {
                         ) : (
                           ''
                         )}
+                        <CustomMetadataField
+                          initialValue={node.custom_metadata || {}}
+                        />
                         {nodeType !== 'metric' && node.type !== 'metric' ? (
                           action === Action.Edit ? (
                             selectPrimaryKey

package/src/app/pages/NodePage/NodeInfoTab.jsx

@@ -198,6 +198,26 @@ export default function NodeInfoTab({ node }) {
       ''
     );
 
+  const customMetadataDiv =
+    node?.custom_metadata && Object.keys(node.custom_metadata).length > 0 ? (
+      <div className="list-group-item d-flex">
+        <div className="d-flex gap-2 w-100 justify-content-between py-3">
+          <div
+            style={{
+              width: window.innerWidth * 0.8,
+            }}
+          >
+            <h6 className="mb-0 w-100">Custom Metadata</h6>
+            <SyntaxHighlighter language="json" style={foundation}>
+              {JSON.stringify(node.custom_metadata, null, 2)}
+            </SyntaxHighlighter>
+          </div>
+        </div>
+      </div>
+    ) : (
+      ''
+    );
+
   const cubeElementsDiv = node?.cube_elements ? (
     <div className="list-group-item d-flex">
       <div className="d-flex gap-2 w-100 justify-content-between py-3">
@@ -357,6 +377,7 @@ export default function NodeInfoTab({ node }) {
       {metricMetadataDiv}
       {node?.type !== 'cube' && node?.type !== 'metric' ? queryDiv : ''}
       {node?.type === 'metric' ? metricQueryDiv : ''}
+      {customMetadataDiv}
       {cubeElementsDiv}
     </div>
   );

package/src/app/services/DJService.js

@@ -285,8 +285,9 @@ export const DataJunctionAPI = {
               name
             }
             mode
+            customMetadata
           }
-          tags { 
+          tags {
             name
             displayName
           }
@@ -471,6 +472,7 @@ export const DataJunctionAPI = {
     metric_direction,
     metric_unit,
     required_dimensions,
+    custom_metadata,
   ) {
     const metricMetadata =
       metric_direction || metric_unit
@@ -494,6 +496,7 @@ export const DataJunctionAPI = {
         primary_key: primary_key,
         metric_metadata: metricMetadata,
         required_dimensions: required_dimensions,
+        custom_metadata: custom_metadata,
       }),
       credentials: 'include',
     });
@@ -512,6 +515,7 @@ export const DataJunctionAPI = {
     significant_digits,
     required_dimensions,
     owners,
+    custom_metadata,
   ) {
     try {
       const metricMetadata =
@@ -536,6 +540,7 @@ export const DataJunctionAPI = {
           metric_metadata: metricMetadata,
           required_dimensions: required_dimensions,
           owners: owners,
+          custom_metadata: custom_metadata,
         }),
         credentials: 'include',
       });

package/src/app/services/__tests__/DJService.test.jsx

@@ -154,6 +154,10 @@ describe('DataJunctionAPI', () => {
       'mode',
       'namespace',
       'primary_key',
+      undefined, // metric_direction
+      undefined, // metric_unit
+      undefined, // required_dimensions
+      { key: 'value' }, // custom_metadata
     ];
     fetch.mockResponseOnce(JSON.stringify({}));
     await DataJunctionAPI.createNode(...sampleArgs);
@@ -171,6 +175,8 @@ describe('DataJunctionAPI', () => {
         namespace: sampleArgs[6],
         primary_key: sampleArgs[7],
         metric_metadata: null,
+        required_dimensions: undefined,
+        custom_metadata: { key: 'value' },
       }),
       credentials: 'include',
     });
@@ -186,6 +192,10 @@ describe('DataJunctionAPI', () => {
       'primary_key',
       'neutral',
       '',
+      null, // significant_digits
+      undefined, // required_dimensions
+      undefined, // owners
+      { key: 'value' }, // custom_metadata
     ];
     fetch.mockResponseOnce(JSON.stringify({}));
     await DataJunctionAPI.patchNode(...sampleArgs);
@@ -205,6 +215,9 @@ describe('DataJunctionAPI', () => {
           unit: '',
           significant_digits: null,
         },
+        required_dimensions: undefined,
+        owners: undefined,
+        custom_metadata: { key: 'value' },
       }),
       credentials: 'include',
     });

package/src/mocks/mockNodes.jsx

@@ -108,6 +108,7 @@ export const mocks = {
     owners: [{ username: 'dj' }],
     dimension_links: [],
     incompatible_druid_functions: ['IF'],
+    custom_metadata: { key1: 'value1', key2: 'value2' },
     dimensions: [
       {
         value: 'default.date_dim.dateint',
@@ -332,6 +333,7 @@ export const mocks = {
       },
       requiredDimensions: [],
       mode: 'PUBLISHED',
+      customMetadata: { key1: 'value1', key2: 'value2' },
     },
     tags: [{ name: 'purpose', displayName: 'Purpose' }],
     owners: [{ username: 'dj' }],
@@ -354,6 +356,7 @@ export const mocks = {
       metricMetadata: null,
       requiredDimensions: [],
       mode: 'PUBLISHED',
+      customMetadata: null,
     },
     tags: [],
     owners: [{ username: 'dj' }],