datajunction-ui 0.0.1-rc.9 → 0.0.3

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

@@ -0,0 +1,116 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Form, Formik } from 'formik';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export default function EditColumnDescriptionPopover({
+  column,
+  node,
+  onSubmit,
+}) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setPopoverAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setPopoverAnchor]);
+
+  const saveDescription = async (
+    { node, column, description },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    const response = await djClient.setColumnDescription(
+      node,
+      column,
+      description,
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    onSubmit();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="EditColumnDescription"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="edit-description"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+        ref={ref}
+      >
+        <Formik
+          initialValues={{
+            column: column.name,
+            node: node.name,
+            description: column.description || '',
+          }}
+          onSubmit={saveDescription}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <div className="form-group mt-3">
+                  <label htmlFor="description">Description</label>
+                  <textarea
+                    name="description"
+                    className="form-control"
+                    rows="3"
+                    onChange={e => setFieldValue('description', e.target.value)}
+                    defaultValue={column.description || ''}
+                  />
+                </div>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <button
+                  className="btn btn-primary mt-3"
+                  type="submit"
+                  disabled={isSubmitting}
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,116 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+
+export default function EditColumnPopover({ column, node, options, onSubmit }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setPopoverAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setPopoverAnchor]);
+
+  const saveAttributes = async (
+    { node, column, attributes },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    const response = await djClient.setAttributes(node, column, attributes);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    onSubmit();
+    // window.location.reload();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="EditColumn"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="client-code"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+        ref={ref}
+      >
+        <Formik
+          initialValues={{
+            column: column.name,
+            node: node.name,
+            attributes: [],
+          }}
+          onSubmit={saveAttributes}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="edit-attributes">
+                  <FormikSelect
+                    selectOptions={options}
+                    formikFieldName="attributes"
+                    placeholder="Select column attributes"
+                    className=""
+                    defaultValue={column.attributes.map(attr => {
+                      return {
+                        value: attr.attribute_type.name,
+                        label: labelize(attr.attribute_type.name),
+                      };
+                    })}
+                    isMulti={true}
+                  />
+                </span>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveEditColumn"
+                  aria-hidden="false"
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,164 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Field, Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+import LoadingIcon from '../../icons/LoadingIcon';
+
+export default function LinkDimensionPopover({
+  column,
+  dimensionNodes,
+  node,
+  options,
+  onSubmit,
+}) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setPopoverAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setPopoverAnchor]);
+
+  const handleSubmit = async (
+    { node, column, updatedDimensionNodes },
+    { setSubmitting, setStatus },
+  ) => {
+    const oldSet = new Set(dimensionNodes);
+    const newSet = new Set(updatedDimensionNodes);
+    try {
+      const linkPromises = Array.from(newSet)
+        .filter(item => !oldSet.has(item))
+        .map(dimension => {
+          return linkDimension(node, column, dimension, setStatus);
+        });
+      const unlinkPromises = Array.from(oldSet)
+        .filter(item => !newSet.has(item))
+        .map(dimension => {
+          return unlinkDimension(node, column, dimension, setStatus);
+        });
+      await Promise.all([...linkPromises, ...unlinkPromises]);
+    } catch (error) {
+      console.error('Error in editing linked dimensions:', error);
+      setStatus({ error: error.message });
+    } finally {
+      setSubmitting(false);
+      onSubmit();
+    }
+  };
+
+  const linkDimension = async (node, column, dimension, setStatus) => {
+    const response = await djClient.linkDimension(node, column, dimension);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  const unlinkDimension = async (node, column, currentDimension, setStatus) => {
+    const response = await djClient.unlinkDimension(
+      node,
+      column,
+      currentDimension,
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Removed dimension link!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="LinkDimension"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="client-code"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+        ref={ref}
+      >
+        <Formik
+          initialValues={{
+            column: column.name,
+            node: node.name,
+            updatedDimensionNodes: '',
+          }}
+          onSubmit={handleSubmit}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="link-dimension">
+                  <FormikSelect
+                    selectOptions={options}
+                    formikFieldName="updatedDimensionNodes"
+                    placeholder="Select dimension to link"
+                    className=""
+                    defaultValue={
+                      dimensionNodes.length > 0
+                        ? dimensionNodes.map(dimNode => {
+                            return {
+                              value: dimNode,
+                              label: dimNode,
+                            };
+                          })
+                        : []
+                    }
+                    isMulti={true}
+                  />
+                </span>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveLinkDimension"
+                  aria-hidden="false"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? <LoadingIcon /> : 'Save'}
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,60 @@
+/**
+ * Materialization configuration field.
+ */
+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 ConfigField = ({ djClient, value }) => {
+  const formik = useFormikContext();
+  const jsonExt = langs.json();
+
+  const updateFormik = val => {
+    formik.setFieldValue('spark_config', JSON.parse(val));
+  };
+
+  return (
+    <div className="DescriptionInput">
+      <details>
+        <summary>
+          <label htmlFor="SparkConfig" style={{ display: 'inline-block' }}>
+            Spark Config
+          </label>
+        </summary>
+        <ErrorMessage name="spark_config" component="span" />
+        <Field
+          type="textarea"
+          style={{ display: 'none' }}
+          as="textarea"
+          name="spark_config"
+          id="SparkConfig"
+        />
+        <div role="button" tabIndex={0} className="relative flex bg-[#282a36]">
+          <CodeMirror
+            id={'spark_config'}
+            name={'spark_config'}
+            extensions={[jsonExt]}
+            value={JSON.stringify(value, null, '    ')}
+            options={{
+              theme: 'default',
+              lineNumbers: true,
+            }}
+            width="100%"
+            height="170px"
+            style={{
+              margin: '0 0 23px 0',
+              flex: 1,
+              fontSize: '150%',
+              textAlign: 'left',
+            }}
+            onChange={(value, viewUpdate) => {
+              updateFormik(value);
+            }}
+          />
+        </div>
+      </details>{' '}
+      <></>
+    </div>
+  );
+};