datajunction-ui 0.0.1-a42.dev0 → 0.0.1-a43.dev0

package/package.json

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

package/src/app/index.tsx

@@ -58,6 +58,7 @@ export function App() {
                           key="edit-cube"
                           element={<CubeBuilderPage />}
                         />
+                        <Route path=":name/:tab" element={<NodePage />} />
                       </Route>
 
                       <Route path="/" element={<NamespacePage />} key="index" />

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

@@ -0,0 +1,10 @@
+import AlertIcon from '../../icons/AlertIcon';
+
+export const AlertMessage = ({ message }) => {
+  return (
+    <div className="message alert">
+      <AlertIcon />
+      {message}
+    </div>
+  );
+};

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

@@ -0,0 +1,17 @@
+import { ErrorMessage, Field } from 'formik';
+
+export const DescriptionField = () => {
+  return (
+    <div className="DescriptionInput NodeCreationInput">
+      <ErrorMessage name="description" component="span" />
+      <label htmlFor="Description">Description</label>
+      <Field
+        type="textarea"
+        as="textarea"
+        name="description"
+        id="Description"
+        placeholder="Describe your node"
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,16 @@
+import { ErrorMessage, Field } from 'formik';
+
+export const DisplayNameField = () => {
+  return (
+    <div className="DisplayNameInput NodeCreationInput">
+      <ErrorMessage name="display_name" component="span" />
+      <label htmlFor="displayName">Display Name *</label>
+      <Field
+        type="text"
+        name="display_name"
+        id="displayName"
+        placeholder="Human readable display name"
+      />
+    </div>
+  );
+};

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

@@ -12,6 +12,7 @@ export const FormikSelect = ({
   style,
   className = 'SelectInput',
   isMulti = false,
+  onFocus = event => {},
 }) => {
   // eslint-disable-next-line no-unused-vars
   const [field, _, helpers] = useField(formikFieldName);
@@ -37,6 +38,7 @@ export const FormikSelect = ({
       onChange={selected => setValue(getValue(selected))}
       styles={style}
       isMulti={isMulti}
+      onFocus={event => onFocus(event)}
     />
   );
 };

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

@@ -11,12 +11,13 @@ export const FullNameField = props => {
 
   useEffect(() => {
     // Set the value of the node's full name based on its namespace and display name
-    if (values.namespace && values.display_name) {
+    if (values.namespace || values.display_name) {
       setFieldValue(
         props.name,
         `${values.namespace}.${values.display_name
           .toLowerCase()
-          .replace(/ /g, '_')}` || '',
+          .replace(/ /g, '_')
+          .replace(/[^a-zA-Z0-9_]/g, '')}` || '',
       );
     }
   }, [setFieldValue, props.name, values]);

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

@@ -0,0 +1,60 @@
+/**
+ * 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
+        className="MetricDirectionInput NodeCreationInput"
+        style={{ width: '25%' }}
+      >
+        <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
+        className="MetricUnitInput NodeCreationInput"
+        style={{ width: '25%' }}
+      >
+        <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>
+    </>
+  );
+};

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="react-select-3-input">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' }}
@@ -84,6 +86,6 @@ export const NodeQueryField = ({ djClient, value }) => {
           }}
         />
       </div>
-    </>
+    </div>
   );
 };

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

@@ -0,0 +1,61 @@
+/**
+ * Primary key select component
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import { useContext, useMemo, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const PrimaryKeySelect = ({ defaultValue }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // The available columns, determined from validating the node query
+  const [availableColumns, setAvailableColumns] = useState([]);
+  const selectableOptions = useMemo(() => {
+    if (availableColumns && availableColumns.length > 0) {
+      return availableColumns;
+    }
+  }, [availableColumns]);
+
+  // When focus is on the primary key field, refresh the list of available
+  // primary key columns for selection
+  const refreshColumns = event => {
+    async function fetchData() {
+      // eslint-disable-next-line no-unused-vars
+      const { status, json } = await djClient.validateNode(
+        values.type,
+        values.name,
+        values.display_name,
+        values.description,
+        values.query,
+      );
+      setAvailableColumns(
+        json.columns.map(col => {
+          return { value: col.name, label: col.name };
+        }),
+      );
+    }
+    fetchData();
+  };
+
+  return (
+    <div className="CubeCreationInput">
+      <ErrorMessage name="primary_key" component="span" />
+      <label htmlFor="react-select-3-input">Primary Key</label>
+      <span data-testid="select-primary-key">
+        <FormikSelect
+          className="MultiSelectInput"
+          defaultValue={defaultValue}
+          selectOptions={selectableOptions}
+          formikFieldName="primary_key"
+          placeholder="Choose Primary Key"
+          onFocus={event => refreshColumns(event)}
+          isMulti={true}
+        />
+      </span>
+    </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="react-select-3-input">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

@@ -49,11 +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/),