datajunction-ui 0.0.1-a1 → 0.0.1-a101

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

@@ -0,0 +1,267 @@
+import React, { useContext, useEffect, useState } from 'react';
+import NamespaceHeader from '../../components/NamespaceHeader';
+import { DataJunctionAPI } from '../../services/DJService';
+import DJClientContext from '../../providers/djclient';
+import 'react-querybuilder/dist/query-builder.scss';
+import 'styles/styles.scss';
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+import { useParams } from 'react-router-dom';
+import { Action } from '../../components/forms/Action';
+import NodeNameField from '../../components/forms/NodeNameField';
+import { MetricsSelect } from './MetricsSelect';
+import { DimensionsSelect } from './DimensionsSelect';
+import { TagsField } from '../AddEditNodePage/TagsField';
+
+export function CubeBuilderPage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  let { nodeType, initialNamespace, name } = useParams();
+  const action = name !== undefined ? Action.Edit : Action.Add;
+  const validator = ruleType => !!ruleType.value;
+
+  const initialValues = {
+    name: action === Action.Edit ? name : '',
+    namespace: action === Action.Add ? initialNamespace : '',
+    display_name: '',
+    description: '',
+    mode: 'published',
+    metrics: [],
+    dimensions: [],
+    filters: [],
+    tags: [],
+  };
+
+  const handleSubmit = (values, { setSubmitting, setStatus }) => {
+    if (action === Action.Add) {
+      setTimeout(() => {
+        createNode(values, setStatus);
+        setSubmitting(false);
+      }, 400);
+    } else {
+      setTimeout(() => {
+        patchNode(values, setStatus);
+        setSubmitting(false);
+      }, 400);
+    }
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  };
+
+  const createNode = async (values, setStatus) => {
+    const { status, json } = await djClient.createCube(
+      values.name,
+      values.display_name,
+      values.description,
+      values.mode,
+      values.metrics,
+      values.dimensions,
+      values.filters || [],
+    );
+    if (status === 200 || status === 201) {
+      if (values.tags) {
+        await djClient.tagsNode(values.name, values.tags);
+      }
+      setStatus({
+        success: (
+          <>
+            Successfully created {json.type} node{' '}
+            <a href={`/nodes/${json.name}`}>{json.name}</a>!
+          </>
+        ),
+      });
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  const patchNode = async (values, setStatus) => {
+    const { status, json } = await djClient.patchCube(
+      values.name,
+      values.display_name,
+      values.description,
+      values.mode,
+      values.metrics,
+      values.dimensions,
+      values.filters || [],
+    );
+    const tagsResponse = await djClient.tagsNode(
+      values.name,
+      (values.tags || []).map(tag => tag),
+    );
+    if ((status === 200 || status === 201) && tagsResponse.status === 200) {
+      setStatus({
+        success: (
+          <>
+            Successfully updated {json.type} node{' '}
+            <a href={`/nodes/${json.name}`}>{json.name}</a>!
+          </>
+        ),
+      });
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  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 = () => (
+    <>
+      <div className="NodeNameInput NodeCreationInput">
+        <label htmlFor="name">Name</label> {name}
+      </div>
+      <div className="NodeNameInput NodeCreationInput">
+        <label htmlFor="name">Type</label> cube
+      </div>
+      <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>
+    </>
+  );
+
+  // @ts-ignore
+  return (
+    <>
+      <div className="mid">
+        <NamespaceHeader namespace="" />
+        <Formik
+          initialValues={initialValues}
+          validate={validator}
+          onSubmit={handleSubmit}
+        >
+          {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);
+                  setNode(cube);
+                  updateFieldsWithNodeData(cube, setFieldValue, setSelectTags);
+                }
+              };
+              fetchData().catch(console.error);
+            }, [setFieldValue]);
+
+            return (
+              <Form>
+                <div className="card">
+                  <div className="card-header">
+                    <h2>
+                      {action === Action.Edit ? 'Edit' : 'Create'}{' '}
+                      <span
+                        className={`node_type__cube node_type_creation_heading`}
+                      >
+                        Cube
+                      </span>
+                    </h2>
+                    {displayMessageAfterSubmit(status)}
+                    {action === Action.Add ? (
+                      <NodeNameField />
+                    ) : (
+                      staticFieldsInEdit(node)
+                    )}
+                    <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>
+                    <div className="CubeCreationInput">
+                      <label>Metrics *</label>
+                      <p>Select metrics to include in the cube.</p>
+                      <span
+                        data-testid="select-metrics"
+                        style={{ marginTop: '15px' }}
+                      >
+                        {action === Action.Edit ? (
+                          <MetricsSelect cube={node} />
+                        ) : (
+                          <MetricsSelect />
+                        )}
+                      </span>
+                    </div>
+                    <br />
+                    <br />
+                    <div className="CubeCreationInput">
+                      <label>Dimensions *</label>
+                      <p>
+                        Select dimensions to include in the cube. As metrics are
+                        selected above, the list of available dimensions will be
+                        filtered to those shared by the selected metrics. If the
+                        dimensions list is empty, no shared dimensions were
+                        discovered.
+                      </p>
+                      <span data-testid="select-dimensions">
+                        {action === Action.Edit ? (
+                          <DimensionsSelect cube={node} />
+                        ) : (
+                          <DimensionsSelect />
+                        )}
+                      </span>
+                    </div>
+                    <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>
+                    {action === Action.Edit ? selectTags : <TagsField />}
+                    <button
+                      type="submit"
+                      disabled={isSubmitting}
+                      aria-label="CreateCube"
+                    >
+                      {action === Action.Add ? 'Create Cube' : 'Save'}{' '}
+                      {nodeType}
+                    </button>
+                  </div>
+                </div>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}
+
+CubeBuilderPage.defaultProps = {
+  djClient: DataJunctionAPI,
+};

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

@@ -2,9 +2,8 @@ import { useContext, useState } from 'react';
 import * as React from 'react';
 import DJClientContext from '../../providers/djclient';
 import { ErrorMessage, Field, Form, Formik } from 'formik';
-import { FormikSelect } from '../AddEditNodePage/FormikSelect';
-import EditIcon from '../../icons/EditIcon';
-import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+import AddItemIcon from '../../icons/AddItemIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
 
 export default function AddNamespacePopover({ namespace }) {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -33,7 +32,7 @@ export default function AddNamespacePopover({ namespace }) {
           setPopoverAnchor(!popoverAnchor);
         }}
       >
-        <EditIcon />
+        <AddItemIcon />
       </button>
       <div
         className="popover"
@@ -48,7 +47,7 @@ export default function AddNamespacePopover({ namespace }) {
       >
         <Formik
           initialValues={{
-            namespace: '',
+            namespace: namespace + '.',
           }}
           onSubmit={addNamespace}
         >
@@ -64,6 +63,7 @@ export default function AddNamespacePopover({ namespace }) {
                     name="namespace"
                     id="namespace"
                     placeholder="New namespace"
+                    default={namespace}
                   />
                 </span>
                 <button

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

@@ -10,7 +10,7 @@ const Explorer = ({ item = [], current }) => {
   useEffect(() => {
     setItems(item);
     setHighlight(current);
-    if (current === undefined || current?.startsWith(item.path)) {
+    if (current !== undefined && current?.startsWith(item.path)) {
       setExpand(true);
     } else setExpand(false);
   }, [current, item]);
@@ -43,8 +43,12 @@ const Explorer = ({ item = [], current }) => {
                 marginLeft: '1rem',
                 borderLeft: '1px solid rgb(218 233 255)',
               }}
+              key={index}
             >
-              <div className={`${expand ? '' : 'inactive'}`}>
+              <div
+                className={`${expand ? '' : 'inactive'}`}
+                key={`nested-${index}`}
+              >
                 <Explorer item={item} current={highlight} />
               </div>
             </div>

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

@@ -0,0 +1,21 @@
+import { components } from 'react-select';
+
+const Control = ({ children, ...props }) => {
+  const { label, onLabelClick } = props.selectProps;
+  const style = {
+    cursor: 'pointer',
+    padding: '10px 5px 10px 12px',
+    color: 'rgb(112, 110, 115)',
+  };
+
+  return (
+    <components.Control {...props}>
+      <span onMouseDown={onLabelClick} style={style}>
+        {label}
+      </span>
+      {children}
+    </components.Control>
+  );
+};
+
+export default Control;

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

@@ -0,0 +1,30 @@
+import Select from 'react-select';
+import Control from './FieldControl';
+
+export default function NodeTypeSelect({ onChange }) {
+  return (
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '300px' }}
+      data-testid="select-node-type"
+    >
+      <Select
+        name="node_type"
+        isClearable
+        label="Node Type"
+        components={{ Control }}
+        onChange={e => onChange(e)}
+        styles={{
+          control: styles => ({ ...styles, backgroundColor: 'white' }),
+        }}
+        options={[
+          { value: 'source', label: 'Source' },
+          { value: 'transform', label: 'Transform' },
+          { value: 'dimension', label: 'Dimension' },
+          { value: 'metric', label: 'Metric' },
+          { value: 'cube', label: 'Cube' },
+        ]}
+      />
+    </span>
+  );
+}

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

@@ -0,0 +1,44 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import Control from './FieldControl';
+
+import Select from 'react-select';
+
+export default function TagSelect({ onChange }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const [retrieved, setRetrieved] = useState(false);
+  const [tags, setTags] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const tags = await djClient.listTags();
+      setTags(tags);
+      setRetrieved(true);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '350px' }}
+      data-testid="select-tag"
+    >
+      <Select
+        name="tags"
+        isClearable
+        isMulti
+        label="Tags"
+        components={{ Control }}
+        onChange={e => onChange(e)}
+        options={tags?.map(tag => {
+          return {
+            value: tag.name,
+            label: tag.display_name,
+          };
+        })}
+      />
+    </span>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import Control from './FieldControl';
+
+import Select from 'react-select';
+
+export default function UserSelect({ onChange, currentUser }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [retrieved, setRetrieved] = useState(false);
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const users = await djClient.users();
+      setUsers(users);
+      setRetrieved(true);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '400px' }}
+      data-testid="select-user"
+    >
+      {retrieved ? (
+        <Select
+          name="edited_by"
+          isClearable
+          label="Edited By"
+          components={{ Control }}
+          onChange={e => onChange(e)}
+          defaultValue={{
+            value: currentUser,
+            label: currentUser,
+          }}
+          options={users?.map(user => {
+            return { value: user.username, label: user.username };
+          })}
+        />
+      ) : (
+        ''
+      )}
+    </span>
+  );
+}

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

@@ -8,7 +8,11 @@ import userEvent from '@testing-library/user-event';
 const mockDjClient = {
   namespaces: jest.fn(),
   namespace: jest.fn(),
+  listNodesForLanding: jest.fn(),
   addNamespace: jest.fn(),
+  whoami: jest.fn(),
+  users: jest.fn(),
+  listTags: jest.fn(),
 };
 
 describe('NamespacePage', () => {
@@ -34,6 +38,15 @@ describe('NamespacePage', () => {
 
   beforeEach(() => {
     fetch.resetMocks();
+    mockDjClient.whoami.mockResolvedValue({ username: 'dj' });
+    mockDjClient.users.mockResolvedValue([
+      { username: 'dj' },
+      { username: 'user1' },
+    ]);
+    mockDjClient.listTags.mockResolvedValue([
+      { name: 'tag1' },
+      { name: 'tag2' },
+    ]);
     mockDjClient.namespaces.mockResolvedValue([
       {
         namespace: 'common.one',
@@ -75,8 +88,43 @@ describe('NamespacePage', () => {
         type: 'transform',
         mode: 'active',
         updated_at: new Date(),
+        tags: [{ name: 'tag1' }],
+        edited_by: ['dj'],
       },
     ]);
+    mockDjClient.listNodesForLanding.mockResolvedValue({
+      data: {
+        findNodesPaginated: {
+          pageInfo: {
+            hasNextPage: true,
+            endCursor:
+              'eyJjcmVhdGVkX2F0IjogIjIwMjQtMDQtMTZUMjM6MjI6MjIuNDQxNjg2KzAwOjAwIiwgImlkIjogNjE0fQ==',
+            hasPrevPage: true,
+            startCursor:
+              'eyJjcmVhdGVkX2F0IjogIjIwMjQtMTAtMTZUMTY6MDM6MTcuMDgzMjY3KzAwOjAwIiwgImlkIjogMjQwOX0=',
+          },
+          edges: [
+            {
+              node: {
+                name: 'default.test_node',
+                type: 'DIMENSION',
+                currentVersion: 'v4.0',
+                tags: [],
+                editedBy: ['dj'],
+                current: {
+                  displayName: 'Test Node',
+                  status: 'VALID',
+                  updatedAt: '2024-10-18T15:15:33.532949+00:00',
+                },
+                createdBy: {
+                  username: 'dj',
+                },
+              },
+            },
+          ],
+        },
+      },
+    });
   });
 
   afterEach(() => {
@@ -98,28 +146,59 @@ describe('NamespacePage', () => {
       </MemoryRouter>,
     );
 
-    await waitFor(() => {
-      expect(mockDjClient.namespaces).toHaveBeenCalledTimes(1);
-      expect(screen.getByText('Namespaces')).toBeInTheDocument();
+    await waitFor(
+      () => {
+        expect(mockDjClient.listNodesForLanding).toHaveBeenCalled();
+        expect(screen.getByText('Namespaces')).toBeInTheDocument();
 
-      // check that it displays namespaces
-      expect(screen.getByText('common')).toBeInTheDocument();
-      expect(screen.getByText('one')).toBeInTheDocument();
-      expect(screen.getByText('fruits')).toBeInTheDocument();
-      expect(screen.getByText('vegetables')).toBeInTheDocument();
+        // check that it displays namespaces
+        expect(screen.getByText('common')).toBeInTheDocument();
+        expect(screen.getByText('one')).toBeInTheDocument();
+        expect(screen.getByText('fruits')).toBeInTheDocument();
+        expect(screen.getByText('vegetables')).toBeInTheDocument();
 
-      // check that it renders nodes
-      expect(screen.getByText('Test Node')).toBeInTheDocument();
+        // check that it renders nodes
+        expect(screen.getByText('Test Node')).toBeInTheDocument();
 
-      // click to open and close tab
-      fireEvent.click(screen.getByText('common'));
-      fireEvent.click(screen.getByText('common'));
-    });
-  });
+        // check that it sorts nodes
+        fireEvent.click(screen.getByText('name'));
+        fireEvent.click(screen.getByText('name'));
+        fireEvent.click(screen.getByText('display Name'));
 
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
+        // paginate
+        const previousButton = screen.getByText('← Previous');
+        expect(previousButton).toBeDefined();
+        fireEvent.click(previousButton);
+        const nextButton = screen.getByText('Next →');
+        expect(nextButton).toBeDefined();
+        fireEvent.click(nextButton);
+
+        // check that we can filter by node type
+        const selectNodeType = screen.getAllByTestId('select-node-type')[0];
+        expect(selectNodeType).toBeDefined();
+        expect(selectNodeType).not.toBeNull();
+        fireEvent.keyDown(selectNodeType.firstChild, { key: 'ArrowDown' });
+        fireEvent.click(screen.getByText('Source'));
+
+        // check that we can filter by tag
+        const selectTag = screen.getAllByTestId('select-tag')[0];
+        expect(selectTag).toBeDefined();
+        expect(selectTag).not.toBeNull();
+        fireEvent.keyDown(selectTag.firstChild, { key: 'ArrowDown' });
+
+        // check that we can filter by user
+        const selectUser = screen.getAllByTestId('select-user')[0];
+        expect(selectUser).toBeDefined();
+        expect(selectUser).not.toBeNull();
+        fireEvent.keyDown(selectUser.firstChild, { key: 'ArrowDown' });
+
+        // click to open and close tab
+        fireEvent.click(screen.getByText('common'));
+        fireEvent.click(screen.getByText('common'));
+      },
+      { timeout: 3000 },
+    );
+  }, 60000);
 
   it('can add new namespace via add namespace popover', async () => {
     mockDjClient.addNamespace.mockReturnValue({
@@ -167,7 +246,7 @@ describe('NamespacePage', () => {
     });
     expect(mockDjClient.addNamespace).toHaveBeenCalled();
     expect(mockDjClient.addNamespace).toHaveBeenCalledWith(
-      'some.random.namespace',
+      'test.namespace.some.random.namespace',
     );
     expect(screen.getByText('Saved')).toBeInTheDocument();
     expect(window.location.reload).toHaveBeenCalled();