datajunction-ui 0.0.1-rc.9 → 0.0.2-3.dev1

package/src/app/index.tsx

@@ -8,50 +8,150 @@ import { Helmet } from 'react-helmet-async';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 import { NamespacePage } from './pages/NamespacePage/Loadable';
-import { NodePage } from './pages/NodePage/Loadable';
+import { OverviewPage } from './pages/OverviewPage/Loadable';
+import { SettingsPage } from './pages/SettingsPage/Loadable';
+import { NotificationsPage } from './pages/NotificationsPage/Loadable';
+import { NodePage } from './pages/NodePage';
+import RevisionDiff from './pages/NodePage/RevisionDiff';
+import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
+import { CubeBuilderPage } from './pages/CubeBuilderPage/Loadable';
+import { TagPage } from './pages/TagPage/Loadable';
+import { AddEditNodePage } from './pages/AddEditNodePage/Loadable';
+import { AddEditTagPage } from './pages/AddEditTagPage/Loadable';
 import { NotFoundPage } from './pages/NotFoundPage/Loadable';
-import { Root } from './pages/Root/Loadable';
-import { ListNamespacesPage } from './pages/ListNamespacesPage';
+import { LoginPage } from './pages/LoginPage';
+import { RegisterTablePage } from './pages/RegisterTablePage';
+import { Root } from './pages/Root';
 import DJClientContext from './providers/djclient';
-import {DataJunctionAPI} from "./services/DJService";
+import { UserProvider } from './providers/UserProvider';
+import { DataJunctionAPI } from './services/DJService';
+import { CookiesProvider, useCookies } from 'react-cookie';
+import * as Constants from './constants';
 
 export function App() {
+  const [cookies] = useCookies([Constants.LOGGED_IN_FLAG_COOKIE]);
   return (
-    <BrowserRouter>
-      <Helmet
-        titleTemplate="DataJunction: %s"
-        defaultTitle="DataJunction: A Metrics Platform"
-      >
-        <meta
-          name="description"
-          content="DataJunction serves as a semantic layer to help manage metrics"
-        />
-      </Helmet>
-      <DJClientContext.Provider value={{ DataJunctionAPI }}>
-        <Routes>
-          <Route
-            path="/"
-            element={<Root />}
-            children={
-              <>
-                <Route path="nodes" key="nodes">
-                  <Route path=":name" element={<NodePage />} />
-                </Route>
-
-                <Route path="/" element={<ListNamespacesPage />} key="index" />
-                <Route path="namespaces">
+    <CookiesProvider>
+      <BrowserRouter>
+        {cookies.__djlif || process.env.REACT_DISABLE_AUTH === 'true' ? (
+          <>
+            <Helmet
+              titleTemplate="DataJunction: %s"
+              defaultTitle="DataJunction: A Metrics Platform"
+            >
+              <meta
+                name="description"
+                content="DataJunction serves as a semantic layer to help manage metrics"
+              />
+            </Helmet>
+            <DJClientContext.Provider value={{ DataJunctionAPI }}>
+              <UserProvider>
+                <Routes>
                   <Route
-                    path=":namespace"
-                    element={<NamespacePage />}
-                    key="namespaces"
+                    path="/"
+                    element={<Root />}
+                    children={
+                      <>
+                        <Route path="nodes" key="nodes">
+                          <Route path=":name" element={<NodePage />} />
+                          <Route
+                            path=":name/edit"
+                            key="edit"
+                            element={<AddEditNodePage />}
+                          />
+                          <Route
+                            path=":name/edit-cube"
+                            key="edit-cube"
+                            element={<CubeBuilderPage />}
+                          />
+                          <Route
+                            path=":name/revisions/:revision"
+                            element={<RevisionDiff />}
+                          />
+                          <Route path=":name/:tab" element={<NodePage />} />
+                        </Route>
+
+                        <Route
+                          path="/"
+                          element={<NamespacePage />}
+                          key="index"
+                        />
+                        <Route path="namespaces">
+                          <Route
+                            path=":namespace"
+                            element={<NamespacePage />}
+                            key="namespaces"
+                          />
+                        </Route>
+                        <Route
+                          path="create/tag"
+                          key="createtag"
+                          element={<AddEditTagPage />}
+                        ></Route>
+                        <Route
+                          path="create/source"
+                          key="register"
+                          element={<RegisterTablePage />}
+                        ></Route>
+                        <Route path="/create/cube">
+                          <Route
+                            path=":initialNamespace"
+                            key="create"
+                            element={<CubeBuilderPage />}
+                          />
+                          <Route
+                            path=""
+                            key="create"
+                            element={<CubeBuilderPage />}
+                          />
+                        </Route>
+                        <Route path="create/:nodeType">
+                          <Route
+                            path=":initialNamespace"
+                            key="create"
+                            element={<AddEditNodePage />}
+                          />
+                          <Route
+                            path=""
+                            key="create"
+                            element={<AddEditNodePage />}
+                          />
+                        </Route>
+                        <Route
+                          path="sql"
+                          key="sql"
+                          element={<SQLBuilderPage />}
+                        />
+                        <Route path="tags" key="tags">
+                          <Route path=":name" element={<TagPage />} />
+                        </Route>
+                        <Route
+                          path="overview"
+                          key="overview"
+                          element={<OverviewPage />}
+                        />
+                        <Route
+                          path="settings"
+                          key="settings"
+                          element={<SettingsPage />}
+                        />
+                        <Route
+                          path="notifications"
+                          key="notifications"
+                          element={<NotificationsPage />}
+                        />
+                      </>
+                    }
                   />
-                </Route>
-              </>
-            }
-          />
-          <Route path="*" element={<NotFoundPage />} />
-        </Routes>
-      </DJClientContext.Provider>
-    </BrowserRouter>
+                  <Route path="*" element={<NotFoundPage />} />
+                </Routes>
+              </UserProvider>
+            </DJClientContext.Provider>
+          </>
+        ) : (
+          <LoginPage />
+        )}
+      </BrowserRouter>
+    </CookiesProvider>
   );
 }

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/ColumnsSelect.jsx

@@ -0,0 +1,84 @@
+/**
+ * Component for selecting node columns based on the current form state
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import { useContext, useMemo, useState, useEffect } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const ColumnsSelect = ({
+  defaultValue,
+  fieldName,
+  label,
+  labelStyle = {},
+  isMulti = false,
+  isClearable = true,
+}) => {
+  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]);
+
+  // Fetch columns by validating the latest node query
+  const fetchColumns = async () => {
+    try {
+      const { status, json } = await djClient.validateNode(
+        values.type,
+        values.name,
+        values.display_name,
+        values.description,
+        values.query,
+      );
+      if (json?.columns) {
+        setAvailableColumns(
+          json.columns.map(col => ({ value: col.name, label: col.name })),
+        );
+      }
+    } catch (error) {
+      console.error('Error fetching columns:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchColumns();
+  }, [values.type, values.name, values.query]);
+
+  return (
+    <div className="CubeCreationInput">
+      <ErrorMessage name={fieldName} component="span" />
+      <label htmlFor={fieldName} style={labelStyle}>
+        {label}
+      </label>
+      <span data-testid={`select-${fieldName}`}>
+        <FormikSelect
+          className={isMulti ? 'MultiSelectInput' : 'SelectInput'}
+          defaultValue={
+            isMulti
+              ? defaultValue.map(val => {
+                  return {
+                    value: val,
+                    label: val,
+                  };
+                })
+              : defaultValue
+              ? { value: defaultValue, label: defaultValue }
+              : null
+          }
+          selectOptions={selectableOptions}
+          formikFieldName={fieldName}
+          onFocus={event => fetchColumns(event)}
+          isMulti={isMulti}
+          isClearable={isClearable}
+        />
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,144 @@
+/**
+ * Custom metadata field component for nodes
+ */
+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 = ({ value }) => {
+  const formik = useFormikContext();
+  const jsonExt = langs.json();
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    if (!value || value === '') {
+      setHasError(false);
+      return;
+    }
+
+    const stringValue =
+      typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+
+    try {
+      JSON.parse(stringValue);
+      setHasError(false);
+    } catch (err) {
+      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="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/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

@@ -0,0 +1,64 @@
+/**
+ * A React Select component for use in Formik forms.
+ */
+import { useField } from 'formik';
+import Select from 'react-select';
+
+export const FormikSelect = ({
+  selectOptions,
+  formikFieldName,
+  placeholder,
+  defaultValue,
+  style,
+  className = 'SelectInput',
+  isMulti = false,
+  isClearable = false,
+  onFocus = event => {},
+  onChange: customOnChange,
+  menuPortalTarget,
+  styles,
+  ...rest
+}) => {
+  // eslint-disable-next-line no-unused-vars
+  const [field, _, helpers] = useField(formikFieldName);
+  const { setValue } = helpers;
+
+  // handles both multi-select and single-select cases
+  const getValue = options => {
+    if (options) {
+      return isMulti ? options.map(option => option.value) : options.value;
+    } else {
+      return isMulti ? [] : '';
+    }
+  };
+
+  const handleChange = selected => {
+    setValue(getValue(selected));
+    if (customOnChange) {
+      customOnChange(selected);
+    }
+  };
+
+  return (
+    <Select
+      className={className}
+      defaultValue={defaultValue}
+      options={selectOptions}
+      name={field.name}
+      placeholder={placeholder}
+      onBlur={field.onBlur}
+      onChange={handleChange}
+      styles={styles || style}
+      isMulti={isMulti}
+      isClearable={isClearable}
+      onFocus={event => onFocus(event)}
+      id={field.name}
+      menuPortalTarget={menuPortalTarget}
+      {...rest}
+    />
+  );
+};
+
+FormikSelect.defaultProps = {
+  placeholder: '',
+};

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

@@ -0,0 +1,38 @@
+/**
+ * A field for the full node name, which is generated based on the node's input
+ * namespace and display name.
+ */
+import { useField, useFormikContext } from 'formik';
+import { useEffect } from 'react';
+
+export const FullNameField = props => {
+  const { values, setFieldValue } = useFormikContext();
+  const [field, meta] = useField(props);
+
+  useEffect(() => {
+    // Set the value of the node's full name based on its namespace and display name
+    if (values.namespace || values.display_name) {
+      setFieldValue(
+        props.name,
+        `${values.namespace}.${values.display_name
+          .toLowerCase()
+          .replace(/ /g, '_')
+          .replace(/[^a-zA-Z0-9_]/g, '')}` || '',
+      );
+    }
+  }, [setFieldValue, props.name, values]);
+
+  return (
+    <>
+      <input
+        {...props}
+        {...field}
+        className="FullNameField"
+        disabled="disabled"
+        id="FullName"
+        value={values.name || ''}
+      />
+      {!!meta.touched && !!meta.error && <div>{meta.error}</div>}
+    </>
+  );
+};

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

@@ -0,0 +1,20 @@
+/**
+ * Asynchronously loads the component for the Node page
+ */
+
+import * as React from 'react';
+import { lazyLoad } from '../../../utils/loadable';
+
+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>
+  );
+};