datajunction-ui 0.0.1-a1 → 0.0.1-a101

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

@@ -5,12 +5,16 @@
 import * as React from 'react';
 import { lazyLoad } from '../../../utils/loadable';
 
-export const AddEditNodePage = () => {
+export const LazyAddEditNodePage = props => {
   return lazyLoad(
     () => import('./index'),
     module => module.AddEditNodePage,
     {
       fallback: <div></div>,
     },
-  )();
+  )(props);
+};
+
+export const AddEditNodePage = props => {
+  return <LazyAddEditNodePage {...props} />;
 };

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

@@ -0,0 +1,75 @@
+/**
+ * Metric unit select component
+ */
+import { ErrorMessage, Field } from 'formik';
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { labelize } from '../../../utils/form';
+
+export const MetricMetadataFields = () => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Metric metadata
+  const [metricUnits, setMetricUnits] = useState([]);
+  const [metricDirections, setMetricDirections] = useState([]);
+
+  // Get metric metadata values
+  useEffect(() => {
+    const fetchData = async () => {
+      const metadata = await djClient.listMetricMetadata();
+      setMetricDirections(metadata.directions);
+      setMetricUnits(metadata.units);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <div
+      style={{
+        borderRadius: '8px',
+        padding: '10px 10px 20px 10px',
+        margin: '32px 0',
+        background: '#f9f9f9',
+        width: 'max-content',
+        display: 'flex',
+      }}
+    >
+      <div style={{ margin: '15px 25px' }}>
+        <ErrorMessage name="metric_direction" component="span" />
+        <label htmlFor="MetricDirection">Metric Direction</label>
+        <Field as="select" name="metric_direction" id="MetricDirection">
+          <option value=""></option>
+          {metricDirections.map(direction => (
+            <option value={direction} key={direction}>
+              {labelize(direction)}
+            </option>
+          ))}
+        </Field>
+      </div>
+      <div style={{ margin: '15px 25px' }}>
+        <ErrorMessage name="metric_unit" component="span" />
+        <label htmlFor="MetricUnit">Metric Unit</label>
+        <Field as="select" name="metric_unit" id="MetricUnit">
+          <option value=""></option>
+          {metricUnits.map(unit => (
+            <option value={unit.name} key={unit.name}>
+              {unit.label}
+            </option>
+          ))}
+        </Field>
+      </div>
+      <div style={{ margin: '15px 25px' }}>
+        <ErrorMessage name="significant_digits" component="span" />
+        <label htmlFor="SignificantDigits">Significant Digits</label>
+        <Field as="select" name="significant_digits" id="SignificantDigits">
+          <option value=""></option>
+          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(val => (
+            <option value={val} key={val}>
+              {val}
+            </option>
+          ))}
+        </Field>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,71 @@
+/**
+ * Metric aggregate expression input field, which consists of a CodeMirror SQL
+ * editor with autocompletion for node columns and syntax highlighting.
+ */
+import React from 'react';
+import { ErrorMessage, Field, useFormikContext } from 'formik';
+import CodeMirror from '@uiw/react-codemirror';
+import { langs } from '@uiw/codemirror-extensions-langs';
+
+export const MetricQueryField = ({ djClient, value }) => {
+  const [schema, setSchema] = React.useState([]);
+  const formik = useFormikContext();
+  const sqlExt = langs.sql({ schema: schema });
+
+  const initialAutocomplete = async context => {
+    // Based on the selected upstream, we load the upstream node's columns
+    // into the autocomplete schema
+    const nodeName = formik.values['upstream_node'];
+    const nodeDetails = await djClient.node(nodeName);
+    nodeDetails.columns.forEach(col => {
+      schema[col.name] = [];
+    });
+    setSchema(schema);
+  };
+
+  const updateFormik = val => {
+    formik.setFieldValue('aggregate_expression', val);
+  };
+
+  return (
+    <div className="QueryInput MetricQueryInput NodeCreationInput">
+      <ErrorMessage name="query" component="span" />
+      <label htmlFor="Query">Aggregate Expression *</label>
+      <Field
+        type="textarea"
+        style={{ display: 'none' }}
+        as="textarea"
+        name="aggregate_expression"
+        id="Query"
+      />
+      <div role="button" tabIndex={0} className="relative flex bg-[#282a36]">
+        <CodeMirror
+          id={'aggregate_expression'}
+          name={'aggregate_expression'}
+          extensions={[
+            sqlExt,
+            sqlExt.language.data.of({
+              autocomplete: initialAutocomplete,
+            }),
+          ]}
+          value={value}
+          options={{
+            theme: 'default',
+            lineNumbers: true,
+          }}
+          width="100%"
+          height="100px"
+          style={{
+            margin: '0 0 23px 0',
+            flex: 1,
+            fontSize: '150%',
+            textAlign: 'left',
+          }}
+          onChange={(value, viewUpdate) => {
+            updateFormik(value);
+          }}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,40 @@
+import { ErrorMessage } from 'formik';
+import { FormikSelect } from './FormikSelect';
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+
+export const NamespaceField = ({ initialNamespace }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const [namespaces, setNamespaces] = useState([]);
+
+  // Get namespaces, only necessary when creating a node
+  useEffect(() => {
+    const fetchData = async () => {
+      const namespaces = await djClient.namespaces();
+      setNamespaces(
+        namespaces.map(m => ({
+          value: m['namespace'],
+          label: m['namespace'],
+        })),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <div className="NamespaceInput">
+      <ErrorMessage name="namespace" component="span" />
+      <label htmlFor="namespace">Namespace *</label>
+      <FormikSelect
+        selectOptions={namespaces}
+        formikFieldName="namespace"
+        placeholder="Choose Namespace"
+        defaultValue={{
+          value: initialNamespace,
+          label: initialNamespace,
+        }}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,14 @@
+import { ErrorMessage, Field } from 'formik';
+
+export const NodeModeField = () => {
+  return (
+    <div className="NodeModeInput NodeCreationInput">
+      <ErrorMessage name="mode" component="span" />
+      <label htmlFor="Mode">Mode</label>
+      <Field as="select" name="mode" id="Mode">
+        <option value="draft">Draft</option>
+        <option value="published">Published</option>
+      </Field>
+    </div>
+  );
+};

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

@@ -3,7 +3,7 @@
  * (for node names and columns) and syntax highlighting.
  */
 import React from 'react';
-import { Field, useFormikContext } from 'formik';
+import { ErrorMessage, Field, useFormikContext } from 'formik';
 import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
 
@@ -47,7 +47,9 @@ export const NodeQueryField = ({ djClient, value }) => {
   };
 
   return (
-    <>
+    <div className="QueryInput NodeCreationInput">
+      <ErrorMessage name="query" component="span" />
+      <label htmlFor="Query">Query *</label>
       <Field
         type="textarea"
         style={{ display: 'none' }}
@@ -66,6 +68,9 @@ export const NodeQueryField = ({ djClient, value }) => {
             }),
           ]}
           value={value}
+          placeholder={
+            'SELECT\n\tprimary_key,\n\tmeasure1,\n\tmeasure2,\n\tforeign_key_for_dimension1,\n\tforeign_key_for_dimension2\nFROM source.source_node\nWHERE ...'
+          }
           options={{
             theme: 'default',
             lineNumbers: true,
@@ -84,6 +89,6 @@ export const NodeQueryField = ({ djClient, value }) => {
           }}
         />
       </div>
-    </>
+    </div>
   );
 };

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

@@ -0,0 +1,54 @@
+/**
+ * Required dimensions select component
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const RequiredDimensionsSelect = ({
+  defaultValue,
+  style,
+  className = 'MultiSelectInput',
+}) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // Select options, i.e., the available dimensions
+  const [selectOptions, setSelectOptions] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (values.upstream_node) {
+        const data = await djClient.node(values.upstream_node);
+        setSelectOptions(
+          data.columns.map(col => {
+            return {
+              value: col.name,
+              label: col.name,
+            };
+          }),
+        );
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, values.upstream_node]);
+
+  return (
+    <div className="RequiredDimensionsInput CubeCreationInput">
+      <ErrorMessage name="required_dimensions" component="span" />
+      <label htmlFor="requiredDimensions">Required Dimensions</label>
+      <FormikSelect
+        className={className}
+        defaultValue={defaultValue}
+        selectOptions={selectOptions}
+        formikFieldName={'required_dimensions'}
+        placeholder={'Choose Required Dimensions'}
+        styles={style}
+        isMulti={true}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,47 @@
+/**
+ * Tags select field
+ */
+import { ErrorMessage } from 'formik';
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const TagsField = ({ defaultValue }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // All available tags
+  const [tags, setTags] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const tags = await djClient.listTags();
+      setTags(
+        tags.map(tag => ({
+          value: tag.name,
+          label: tag.display_name,
+        })),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <div
+      className="TagsInput"
+      style={{ width: '25%', margin: '1rem 0 1rem 1.2rem' }}
+    >
+      <ErrorMessage name="tags" component="span" />
+      <label htmlFor="tags">Tags</label>
+      <span data-testid="select-tags">
+        <FormikSelect
+          isMulti={true}
+          selectOptions={tags}
+          formikFieldName="tags"
+          className="MultiSelectInput"
+          placeholder="Choose Tags"
+          defaultValue={defaultValue}
+        />
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,49 @@
+/**
+ * Upstream node select field
+ */
+import { ErrorMessage } from 'formik';
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const UpstreamNodeField = ({ defaultValue }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // All available nodes
+  const [availableNodes, setAvailableNodes] = useState([]);
+
+  useEffect(() => {
+    async function fetchData() {
+      const sources = await djClient.nodesWithType('source');
+      const transforms = await djClient.nodesWithType('transform');
+      const dimensions = await djClient.nodesWithType('dimension');
+      const nodes = sources.concat(transforms).concat(dimensions);
+      setAvailableNodes(
+        nodes.map(node => {
+          return {
+            value: node,
+            label: node,
+          };
+        }),
+      );
+    }
+    fetchData();
+  }, [djClient]);
+
+  return (
+    <div className="NodeCreationInput">
+      <ErrorMessage name="mode" component="span" />
+      <label htmlFor="Mode">Upstream Node *</label>
+      <span data-testid="select-upstream-node">
+        <FormikSelect
+          className="SelectInput"
+          defaultValue={defaultValue}
+          selectOptions={availableNodes}
+          formikFieldName="upstream_node"
+          placeholder="Select Upstream Node"
+          isMulti={false}
+        />
+      </span>
+    </div>
+  );
+};

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

@@ -32,10 +32,13 @@ describe('AddEditNodePage submission failed', () => {
     const { container } = renderCreateNode(element);
 
     await userEvent.type(
-      screen.getByLabelText('Display Name'),
+      screen.getByLabelText('Display Name *'),
       'Some Test Metric',
     );
-    await userEvent.type(screen.getByLabelText('Query'), 'SELECT * FROM test');
+    await userEvent.type(
+      screen.getByLabelText('Query *'),
+      'SELECT * FROM test',
+    );
     await userEvent.click(screen.getByText('Create dimension'));
 
     await waitFor(() => {
@@ -46,9 +49,12 @@ describe('AddEditNodePage submission failed', () => {
         'Some Test Metric',
         '',
         'SELECT * FROM test',
-        'draft',
+        'published',
         'default',
         null,
+        undefined,
+        undefined,
+        undefined,
       );
       expect(
         screen.getByText(/Some columns in the primary key \[] were not found/),
@@ -61,7 +67,9 @@ describe('AddEditNodePage submission failed', () => {
 
   it('for editing a node', async () => {
     const mockDjClient = initializeMockDJClient();
-    mockDjClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
+    mockDjClient.DataJunctionAPI.getNodeForEditing.mockReturnValue(
+      mocks.mockGetMetricNode,
+    );
     mockDjClient.DataJunctionAPI.patchNode.mockReturnValue({
       status: 500,
       json: { message: 'Update failed' },
@@ -80,7 +88,7 @@ describe('AddEditNodePage submission failed', () => {
     const element = testElement(mockDjClient);
     renderEditNode(element);
 
-    await userEvent.type(screen.getByLabelText('Display Name'), '!!!');
+    await userEvent.type(screen.getByLabelText('Display Name *'), '!!!');
     await userEvent.type(screen.getByLabelText('Description'), '!!!');
     await userEvent.click(screen.getByText('Save'));
     await waitFor(async () => {
@@ -88,16 +96,14 @@ describe('AddEditNodePage submission failed', () => {
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalled();
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
         'default.num_repair_orders',
-        [{ display_name: 'Purpose', name: 'purpose' }],
+        ['purpose'],
       );
       expect(mockDjClient.DataJunctionAPI.tagsNode).toReturnWith({
         json: { message: 'Some tags were not found' },
         status: 404,
       });
 
-      expect(
-        await screen.getByText('Update failed, Some tags were not found'),
-      ).toBeInTheDocument();
+      expect(await screen.getByText('Update failed')).toBeInTheDocument();
     });
   }, 60000);
 });