datajunction-ui 0.0.1-a1 → 0.0.1-a101

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

@@ -3,18 +3,27 @@
  * node types is largely the same, with minor differences handled server-side. For the `query`
  * field, this page will render a CodeMirror SQL editor with autocompletion and syntax highlighting.
  */
-import { ErrorMessage, Field, Form, Formik } from 'formik';
-
+import { ErrorMessage, Form, Formik } from 'formik';
 import NamespaceHeader from '../../components/NamespaceHeader';
 import { useContext, useEffect, useState } from 'react';
 import DJClientContext from '../../providers/djclient';
 import 'styles/node-creation.scss';
-import AlertIcon from '../../icons/AlertIcon';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { FullNameField } from './FullNameField';
-import { FormikSelect } from './FormikSelect';
+import { MetricQueryField } from './MetricQueryField';
+import { displayMessageAfterSubmit } from '../../../utils/form';
 import { NodeQueryField } from './NodeQueryField';
-import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+import { MetricMetadataFields } from './MetricMetadataFields';
+import { UpstreamNodeField } from './UpstreamNodeField';
+import { TagsField } from './TagsField';
+import { NamespaceField } from './NamespaceField';
+import { AlertMessage } from './AlertMessage';
+import { DisplayNameField } from './DisplayNameField';
+import { DescriptionField } from './DescriptionField';
+import { NodeModeField } from './NodeModeField';
+import { RequiredDimensionsSelect } from './RequiredDimensionsSelect';
+import LoadingIcon from '../../icons/LoadingIcon';
+import { ColumnsSelect } from './ColumnsSelect';
 
 class Action {
   static Add = new Action('add');
@@ -25,24 +34,22 @@ class Action {
   }
 }
 
-export function AddEditNodePage() {
+export function AddEditNodePage({ extensions = {} }) {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const navigate = useNavigate();
 
   let { nodeType, initialNamespace, name } = useParams();
   const action = name !== undefined ? Action.Edit : Action.Add;
 
-  const [namespaces, setNamespaces] = useState([]);
-  const [tags, setTags] = useState([]);
-
   const initialValues = {
     name: action === Action.Edit ? name : '',
     namespace: action === Action.Add ? initialNamespace : '',
     display_name: '',
     query: '',
-    node_type: '',
+    type: nodeType,
     description: '',
     primary_key: '',
-    mode: 'draft',
+    mode: 'published',
   };
 
   const validator = values => {
@@ -50,26 +57,26 @@ export function AddEditNodePage() {
     if (!values.name) {
       errors.name = 'Required';
     }
-    if (!values.query) {
+    if (values.type !== 'metric' && !values.query) {
       errors.query = 'Required';
     }
     return errors;
   };
 
-  const handleSubmit = (values, { setSubmitting, setStatus }) => {
+  const handleSubmit = async (values, { setSubmitting, setStatus }) => {
     if (action === Action.Add) {
-      setTimeout(() => {
-        createNode(values, setStatus);
+      await createNode(values, setStatus).then(_ => {
+        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
         setSubmitting(false);
-      }, 400);
+      });
     } else {
-      setTimeout(() => {
-        patchNode(values, setStatus);
+      await patchNode(values, setStatus).then(_ => {
+        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
         setSubmitting(false);
-      }, 400);
+      });
     }
-    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
   };
+  const submitHandlers = [handleSubmit];
 
   const pageTitle =
     action === Action.Add ? (
@@ -86,16 +93,16 @@ export function AddEditNodePage() {
   const staticFieldsInEdit = node => (
     <>
       <div className="NodeNameInput NodeCreationInput">
-        <label htmlFor="name">Name</label> {name}
+        <label>Name</label> {name}
       </div>
       <div className="NodeNameInput NodeCreationInput">
-        <label htmlFor="name">Type</label> {node.type}
+        <label>Type</label> {node.type}
       </div>
     </>
   );
 
   const primaryKeyToList = primaryKey => {
-    return primaryKey.split(',').map(columnName => columnName.trim());
+    return primaryKey.map(columnName => columnName.trim());
   };
 
   const createNode = async (values, setStatus) => {
@@ -104,13 +111,20 @@ export function AddEditNodePage() {
       values.name,
       values.display_name,
       values.description,
-      values.query,
+      values.type === 'metric'
+        ? `SELECT ${values.aggregate_expression} FROM ${values.upstream_node}`
+        : values.query,
       values.mode,
       values.namespace,
       values.primary_key ? primaryKeyToList(values.primary_key) : null,
+      values.metric_direction,
+      values.metric_unit,
+      values.required_dimensions,
     );
     if (status === 200 || status === 201) {
-      await djClient.tagsNode(values.name, values.tags);
+      if (values.tags) {
+        await djClient.tagsNode(values.name, values.tags);
+      }
       setStatus({
         success: (
           <>
@@ -131,11 +145,20 @@ export function AddEditNodePage() {
       values.name,
       values.display_name,
       values.description,
-      values.query,
+      values.type === 'metric'
+        ? `SELECT ${values.aggregate_expression} FROM ${values.upstream_node}`
+        : values.query,
       values.mode,
       values.primary_key ? primaryKeyToList(values.primary_key) : null,
+      values.metric_direction,
+      values.metric_unit,
+      values.significant_digits,
+      values.required_dimensions,
+    );
+    const tagsResponse = await djClient.tagsNode(
+      values.name,
+      values.tags.map(tag => tag),
     );
-    const tagsResponse = await djClient.tagsNode(values.name, values.tags);
     if ((status === 200 || status === 201) && tagsResponse.status === 200) {
       setStatus({
         success: (
@@ -147,31 +170,15 @@ export function AddEditNodePage() {
       });
     } else {
       setStatus({
-        failure: `${json.message}, ${tagsResponse.json.message}`,
+        failure: `${json.message}`,
       });
     }
   };
 
-  const namespaceInput = (
-    <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>
-  );
-
   const fullNameInput = (
     <div className="FullNameInput NodeCreationInput">
       <ErrorMessage name="name" component="span" />
-      <label htmlFor="FullName">Full Name</label>
+      <label htmlFor="FullName">Full Name *</label>
       <FullNameField type="text" name="name" />
     </div>
   );
@@ -180,7 +187,65 @@ export function AddEditNodePage() {
     return new Set(['transform', 'metric', 'dimension']).has(nodeType);
   };
 
-  const updateFieldsWithNodeData = (data, setFieldValue) => {
+  const getExistingNodeData = async name => {
+    const node = await djClient.getNodeForEditing(name);
+    if (node === null) {
+      return { message: `Node ${name} does not exist` };
+    }
+    const baseData = {
+      name: node.name,
+      type: node.type.toLowerCase(),
+      display_name: node.current.displayName,
+      description: node.current.description,
+      primary_key: node.current.primaryKey,
+      query: node.current.query,
+      tags: node.tags,
+      mode: node.current.mode.toLowerCase(),
+    };
+
+    if (node.type === 'METRIC') {
+      return {
+        ...baseData,
+        metric_direction: node.current.metricMetadata?.direction?.toLowerCase(),
+        metric_unit: node.current.metricMetadata?.unit?.name?.toLowerCase(),
+        significant_digits: node.current.metricMetadata?.significantDigits,
+        required_dimensions: node.current.requiredDimensions.map(
+          dim => dim.name,
+        ),
+        upstream_node: node.current.parents[0]?.name,
+        aggregate_expression: node.current.metricMetadata?.expression,
+      };
+    }
+    return baseData;
+  };
+
+  const runValidityChecks = (data, setNode, setMessage) => {
+    // Check if node exists
+    if (data.message !== undefined) {
+      setNode(null);
+      setMessage(`Node ${name} does not exist!`);
+      return;
+    }
+    // Check if node type can be edited
+    if (!nodeCanBeEdited(data.type)) {
+      setNode(null);
+      if (data.type === 'cube') {
+        navigate(`/nodes/${data.name}/edit-cube`);
+      }
+      setMessage(`Node ${name} is of type ${data.type} and cannot be edited`);
+    }
+  };
+
+  const updateFieldsWithNodeData = (
+    data,
+    setFieldValue,
+    setNode,
+    setSelectTags,
+    setSelectPrimaryKey,
+    setSelectUpstreamNode,
+    setSelectRequiredDims,
+  ) => {
+    // Update fields with existing data to prepare for edit
     const fields = [
       'display_name',
       'query',
@@ -189,62 +254,71 @@ export function AddEditNodePage() {
       'primary_key',
       'mode',
       'tags',
+      'aggregate_expression',
+      'upstream_node',
+      'metric_unit',
+      'metric_direction',
+      'significant_digits',
     ];
     fields.forEach(field => {
-      if (
-        field === 'primary_key' &&
-        data[field] !== undefined &&
-        Array.isArray(data[field])
-      ) {
-        data[field] = data[field].join(', ');
+      if (field === 'tags') {
+        setFieldValue(
+          field,
+          data[field].map(tag => tag.name),
+        );
       } else {
         setFieldValue(field, data[field] || '', false);
       }
     });
-  };
+    setNode(data);
 
-  const alertMessage = message => {
-    return (
-      <div className="message alert">
-        <AlertIcon />
-        {message}
-      </div>
+    // For react-select fields, we have to explicitly set the entire
+    // field rather than just the values
+    setSelectTags(
+      <TagsField
+        defaultValue={data.tags.map(t => {
+          return { value: t.name, label: t.displayName };
+        })}
+      />,
     );
-  };
-
-  // Get namespaces, only necessary when creating a node
-  useEffect(() => {
-    if (action === Action.Add) {
-      const fetchData = async () => {
-        const namespaces = await djClient.namespaces();
-        setNamespaces(
-          namespaces.map(m => ({
-            value: m['namespace'],
-            label: m['namespace'],
-          })),
-        );
-      };
-      fetchData().catch(console.error);
-    }
-  }, [action, djClient, djClient.metrics]);
-
-  // Get list of tags
-  useEffect(() => {
-    const fetchData = async () => {
-      const tags = await djClient.listTags();
-      setTags(
-        tags.map(tag => ({
-          value: tag.name,
-          label: tag.display_name,
-        })),
+    setSelectPrimaryKey(
+      <ColumnsSelect
+        defaultValue={data.primary_key}
+        fieldName="primary_key"
+        label="Primary Key"
+        isMulti={true}
+      />,
+    );
+    if (data.required_dimensions) {
+      setSelectRequiredDims(
+        <RequiredDimensionsSelect
+          defaultValue={data.required_dimensions.map(dim => {
+            return { value: dim, label: dim };
+          })}
+        />,
       );
-    };
-    fetchData().catch(console.error);
-  }, [djClient, djClient.listTags]);
+    }
+    setSelectUpstreamNode(
+      <UpstreamNodeField
+        defaultValue={{
+          value: data.upstream_node,
+          label: data.upstream_node,
+        }}
+      />,
+    );
+  };
 
   return (
     <div className="mid">
-      <NamespaceHeader namespace="" />
+      <NamespaceHeader
+        namespace={
+          initialNamespace
+            ? initialNamespace
+            : name
+            ? name.substring(0, name.lastIndexOf('.'))
+            : ''
+        }
+      />
       <div className="card">
         <div className="card-header">
           {pageTitle}
@@ -252,135 +326,142 @@ export function AddEditNodePage() {
             <Formik
               initialValues={initialValues}
               validate={validator}
-              onSubmit={handleSubmit}
+              onSubmit={async (values, { setSubmitting, setStatus }) => {
+                try {
+                  for (const handler of submitHandlers) {
+                    await handler(values, { setSubmitting, setStatus });
+                  }
+                } catch (error) {
+                  console.error('Error in submission', error);
+                } finally {
+                  setSubmitting(false);
+                }
+              }}
             >
               {function Render({ isSubmitting, status, setFieldValue }) {
                 const [node, setNode] = useState([]);
+                const [selectPrimaryKey, setSelectPrimaryKey] = useState(null);
+                const [selectRequiredDims, setSelectRequiredDims] =
+                  useState(null);
+                const [selectUpstreamNode, setSelectUpstreamNode] =
+                  useState(null);
                 const [selectTags, setSelectTags] = useState(null);
                 const [message, setMessage] = useState('');
 
-                const tagsInput = (
-                  <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">
-                      {action === Action.Edit ? (
-                        selectTags
-                      ) : (
-                        <FormikSelect
-                          isMulti={true}
-                          selectOptions={tags}
-                          formikFieldName="tags"
-                          placeholder="Choose Tags"
-                        />
-                      )}
-                    </span>
-                  </div>
-                );
-
                 useEffect(() => {
                   const fetchData = async () => {
                     if (action === Action.Edit) {
-                      const data = await djClient.node(name);
-
-                      // Check if node exists
-                      if (data.message !== undefined) {
-                        setNode(null);
-                        setMessage(`Node ${name} does not exist!`);
-                        return;
-                      }
-
-                      // Check if node type can be edited
-                      if (!nodeCanBeEdited(data.type)) {
-                        setNode(null);
-                        setMessage(
-                          `Node ${name} is of type ${data.type} and cannot be edited`,
-                        );
-                        return;
-                      }
-
-                      // Update fields with existing data to prepare for edit
-                      updateFieldsWithNodeData(data, setFieldValue);
-                      setNode(data);
-                      setSelectTags(
-                        <FormikSelect
-                          isMulti={true}
-                          selectOptions={tags}
-                          formikFieldName="tags"
-                          placeholder="Choose Tags"
-                          defaultValue={data.tags.map(t => {
-                            return { value: t.name, label: t.display_name };
-                          })}
-                        />,
+                      const data = await getExistingNodeData(name);
+                      runValidityChecks(data, setNode, setMessage);
+                      updateFieldsWithNodeData(
+                        data,
+                        setFieldValue,
+                        setNode,
+                        setSelectTags,
+                        setSelectPrimaryKey,
+                        setSelectUpstreamNode,
+                        setSelectRequiredDims,
                       );
                     }
                   };
                   fetchData().catch(console.error);
-                }, [setFieldValue, tags]);
+                }, [setFieldValue]);
                 return (
                   <Form>
                     {displayMessageAfterSubmit(status)}
                     {action === Action.Edit && message ? (
-                      alertMessage(message)
+                      <AlertMessage message={message} />
                     ) : (
                       <>
-                        {action === Action.Add
-                          ? namespaceInput
-                          : staticFieldsInEdit(node)}
-                        <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>
+                        {action === Action.Add ? (
+                          <NamespaceField initialNamespace={initialNamespace} />
+                        ) : (
+                          staticFieldsInEdit(node)
+                        )}
+                        <DisplayNameField />
                         {action === Action.Add ? fullNameInput : ''}
-                        <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"
+                        <DescriptionField />
+                        <br />
+                        {nodeType === 'metric' || node?.type === 'metric' ? (
+                          action === Action.Edit ? (
+                            selectUpstreamNode
+                          ) : (
+                            <UpstreamNodeField />
+                          )
+                        ) : (
+                          ''
+                        )}
+                        <br />
+                        <br />
+                        {nodeType === 'metric' || node.type === 'metric' ? (
+                          <MetricQueryField
+                            djClient={djClient}
+                            value={
+                              node.aggregate_expression
+                                ? node.aggregate_expression
+                                : ''
+                            }
                           />
-                        </div>
-                        <div className="QueryInput NodeCreationInput">
-                          <ErrorMessage name="query" component="span" />
-                          <label htmlFor="Query">Query</label>
+                        ) : (
                           <NodeQueryField
                             djClient={djClient}
                             value={node.query ? node.query : ''}
                           />
-                        </div>
-                        <div className="PrimaryKeyInput NodeCreationInput">
-                          <ErrorMessage name="primary_key" component="span" />
-                          <label htmlFor="primaryKey">Primary Key</label>
-                          <Field
-                            type="text"
-                            name="primary_key"
-                            id="primaryKey"
-                            placeholder="Comma-separated list of PKs"
-                          />
-                        </div>
-                        {tagsInput}
-                        <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>
+                        )}
+                        <br />
+                        {nodeType === 'metric' || node.type === 'metric' ? (
+                          <MetricMetadataFields />
+                        ) : (
+                          ''
+                        )}
+                        {nodeType !== 'metric' && node.type !== 'metric' ? (
+                          action === Action.Edit ? (
+                            selectPrimaryKey
+                          ) : (
+                            <ColumnsSelect
+                              defaultValue={[]}
+                              fieldName="primary_key"
+                              label="Primary Key"
+                              isMulti={true}
+                            />
+                          )
+                        ) : action === Action.Edit ? (
+                          selectRequiredDims
+                        ) : (
+                          <RequiredDimensionsSelect />
+                        )}
+                        {Object.entries(extensions).map(
+                          ([key, ExtensionComponent]) => (
+                            <div key={key} className="mt-4 border-t pt-4">
+                              <ExtensionComponent
+                                node={node}
+                                action={action}
+                                registerSubmitHandler={(
+                                  onSubmit,
+                                  { prepend } = {},
+                                ) => {
+                                  if (!submitHandlers.includes(onSubmit)) {
+                                    if (prepend) {
+                                      submitHandlers.unshift(onSubmit);
+                                    } else {
+                                      submitHandlers.push(onSubmit);
+                                    }
+                                  }
+                                }}
+                              />
+                            </div>
+                          ),
+                        )}
+                        {action === Action.Edit ? selectTags : <TagsField />}
+                        <NodeModeField />
+
                         <button type="submit" disabled={isSubmitting}>
-                          {action === Action.Add ? 'Create' : 'Save'} {nodeType}
+                          {isSubmitting ? (
+                            <LoadingIcon />
+                          ) : (
+                            (action === Action.Add ? 'Create ' : 'Save ') +
+                            (nodeType ? nodeType : '')
+                          )}
                         </button>
                       </>
                     )}