datajunction-ui 0.0.1-a46.dev1 → 0.0.1-a46.dev3

package/package.json

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

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

@@ -9,9 +9,9 @@ import { displayMessageAfterSubmit } from '../../../utils/form';
 import { useParams } from 'react-router-dom';
 import { Action } from '../../components/forms/Action';
 import NodeNameField from '../../components/forms/NodeNameField';
-import NodeTagsInput from '../../components/forms/NodeTagsInput';
 import { MetricsSelect } from './MetricsSelect';
 import { DimensionsSelect } from './DimensionsSelect';
+import { TagsField } from '../AddEditNodePage/TagsField';
 
 export function CubeBuilderPage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -29,6 +29,7 @@ export function CubeBuilderPage() {
     metrics: [],
     dimensions: [],
     filters: [],
+    tags: [],
   };
 
   const handleSubmit = (values, { setSubmitting, setStatus }) => {
@@ -105,10 +106,23 @@ export function CubeBuilderPage() {
     }
   };
 
-  const updateFieldsWithNodeData = (data, setFieldValue) => {
+  const updateFieldsWithNodeData = (data, setFieldValue, setSelectTags) => {
     setFieldValue('display_name', data.display_name || '', false);
     setFieldValue('description', data.description || '', false);
     setFieldValue('mode', data.mode || 'draft', false);
+    setFieldValue(
+      'tags',
+      data.tags.map(tag => tag.name),
+    );
+    // 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.display_name };
+        })}
+      />,
+    );
   };
 
   const staticFieldsInEdit = () => (
@@ -144,14 +158,15 @@ export function CubeBuilderPage() {
         >
           {function Render({ isSubmitting, status, setFieldValue, props }) {
             const [node, setNode] = useState([]);
+            const [selectTags, setSelectTags] = useState(null);
 
             // Get cube
             useEffect(() => {
               const fetchData = async () => {
                 if (name) {
                   const cube = await djClient.cube(name);
-                  updateFieldsWithNodeData(cube, setFieldValue);
                   setNode(cube);
+                  updateFieldsWithNodeData(cube, setFieldValue, setSelectTags);
                 }
               };
               fetchData().catch(console.error);
@@ -227,7 +242,7 @@ export function CubeBuilderPage() {
                         <option value="published">Published</option>
                       </Field>
                     </div>
-                    <NodeTagsInput action={action} node={node} />
+                    {action === Action.Edit ? selectTags : <TagsField />}
                     <button
                       type="submit"
                       disabled={isSubmitting}

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

@@ -6,6 +6,7 @@ import DJClientContext from '../../providers/djclient';
 import Explorer from '../NamespacePage/Explorer';
 import NodeListActions from '../../components/NodeListActions';
 import AddNamespacePopover from './AddNamespacePopover';
+import 'styles/node-list.css';
 
 export function NamespacePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;

package/src/styles/node-list.css

@@ -0,0 +1,4 @@
+table {
+  width: 100%;
+  height: min-content;
+}

package/src/app/components/forms/NodeTagsInput.jsx

@@ -1,61 +0,0 @@
-import { ErrorMessage } from 'formik';
-import { FormikSelect } from '../../pages/AddEditNodePage/FormikSelect';
-import { Action } from './Action';
-import { useContext, useEffect, useState } from 'react';
-import DJClientContext from '../../providers/djclient';
-
-export default function NodeTagsInput({ action, node }) {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const [tags, setTags] = useState([]);
-
-  // Get list of tags
-  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, djClient.listTags]);
-
-  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">
-        {action === Action.Edit && node?.tags?.length >= 0 ? (
-          <FormikSelect
-            className=""
-            isMulti={true}
-            selectOptions={tags}
-            formikFieldName="tags"
-            placeholder="Choose Tags"
-            defaultValue={node?.tags?.map(t => {
-              return { value: t.name, label: t.display_name };
-            })}
-          />
-        ) : (
-          ''
-        )}
-        {action === Action.Add ? (
-          <FormikSelect
-            className=""
-            isMulti={true}
-            selectOptions={tags}
-            formikFieldName="tags"
-            placeholder="Choose Tags"
-          />
-        ) : (
-          ''
-        )}
-      </span>
-    </div>
-  );
-}

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

@@ -1,62 +0,0 @@
-/**
- * Query tester component
- */
-import { ErrorMessage, useFormikContext } from 'formik';
-import React, { useContext, useEffect, useState } from 'react';
-import DJClientContext from '../../providers/djclient';
-import { FormikSelect } from './FormikSelect';
-import QueryBuilder from 'react-querybuilder';
-
-export const QueryTesterSection = ({}) => {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-
-  const [fields, setFields] = useState([]);
-  const [filters, setFilters] = useState({
-    combinator: 'and',
-    rules: [],
-  });
-
-  // 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.query) {
-        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 (
-    <>
-      <h4>Test Query</h4>
-      <label>Add Filters</label>
-      <QueryBuilder
-        fields={fields}
-        query={filters}
-        onQueryChange={q => setFilters(q)}
-      />
-      <span
-        className="button-3 execute-button"
-        // onClick={getData}
-        role="button"
-        aria-label="RunQuery"
-        aria-hidden="false"
-      >
-        {'Run Query'}
-      </span>
-    </>
-  );
-};

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

@@ -1,63 +0,0 @@
-import { useContext, useEffect, useRef, useState } from 'react';
-import * as React from 'react';
-import DJClientContext from '../../providers/djclient';
-import { Field, Form, Formik } from 'formik';
-import { displayMessageAfterSubmit } from '../../../utils/form';
-
-export default function PartitionValueForm({ col, materialization }) {
-  if (col.partition.type_ === 'temporal') {
-    return (
-      <>
-        <div
-          className="partition__full"
-          key={col.name}
-          style={{ width: '50%' }}
-        >
-          <div className="partition__header">{col.display_name}</div>
-          <div className="partition__body">
-            <span style={{ padding: '0.5rem' }}>From</span>{' '}
-            <Field
-              type="text"
-              name={`partitionValues.['${col.name}'].from`}
-              id={`${col.name}.from`}
-              placeholder="20230101"
-              default="20230101"
-              style={{ width: '7rem', paddingRight: '1rem' }}
-            />{' '}
-            <span style={{ padding: '0.5rem' }}>To</span>
-            <Field
-              type="text"
-              name={`partitionValues.['${col.name}'].to`}
-              id={`${col.name}.to`}
-              placeholder="20230102"
-              default="20230102"
-              style={{ width: '7rem' }}
-            />
-          </div>
-        </div>
-      </>
-    );
-  } else {
-    return (
-      <>
-        <div
-          className="partition__full"
-          key={col.name}
-          style={{ width: '50%' }}
-        >
-          <div className="partition__header">{col.display_name}</div>
-          <div className="partition__body">
-            <Field
-              type="text"
-              name={`partitionValues.['${col.name}']`}
-              id={col.name}
-              placeholder=""
-              default=""
-              style={{ width: '7rem', paddingRight: '1rem' }}
-            />
-          </div>
-        </div>
-      </>
-    );
-  }
-}

package/src/app/pages/QueryRunner.jsx

@@ -1,31 +0,0 @@
-import QueryBuilder from 'react-querybuilder';
-import { useState } from 'react';
-
-export function QueryRunner() {
-  const [fields, setFields] = useState([]);
-  const [filters, setFilters] = useState({
-    combinator: 'and',
-    rules: [],
-  });
-
-  return (
-    <>
-      <h4>Test Query</h4>
-      <label>Add Filters</label>
-      <QueryBuilder
-        fields={fields}
-        query={filters}
-        onQueryChange={q => setFilters(q)}
-      />
-      <span
-        className="button-3 execute-button"
-        // onClick={getData}
-        role="button"
-        aria-label="RunQuery"
-        aria-hidden="false"
-      >
-        {'Run Query'}
-      </span>
-    </>
-  );
-}