datajunction-ui 0.0.1-rc.9 → 0.0.2

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

@@ -0,0 +1,373 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { CubeBuilderPage } from '../index';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import React from 'react';
+
+const mockDjClient = {
+  metrics: jest.fn(),
+  commonDimensions: jest.fn(),
+  createCube: jest.fn(),
+  namespaces: jest.fn(),
+  cube: jest.fn(),
+  getCubeForEditing: jest.fn(),
+  node: jest.fn(),
+  listTags: jest.fn(),
+  tagsNode: jest.fn(),
+  patchCube: jest.fn(),
+  users: jest.fn(),
+  whoami: jest.fn(),
+};
+
+const mockMetrics = [
+  'default.num_repair_orders',
+  'default.avg_repair_price',
+  'default.total_repair_cost',
+];
+
+const mockCube = {
+  name: 'default.repair_orders_cube',
+  type: 'CUBE',
+  owners: [
+    {
+      username: 'someone@example.com',
+    },
+  ],
+  current: {
+    displayName: 'Default: Repair Orders Cube',
+    description: 'Repairs cube',
+    mode: 'DRAFT',
+    cubeMetrics: [
+      {
+        name: 'default.total_repair_cost',
+      },
+      {
+        name: 'default.num_repair_orders',
+      },
+    ],
+    cubeDimensions: [
+      {
+        name: 'default.hard_hat.country',
+        attribute: 'country',
+        properties: ['dimension'],
+      },
+      {
+        name: 'default.hard_hat.state',
+        attribute: 'state',
+        properties: ['dimension'],
+      },
+    ],
+  },
+  tags: [
+    {
+      name: 'repairs',
+      displayName: 'Repairs Domain',
+    },
+  ],
+};
+
+const mockCommonDimensions = [
+  {
+    name: 'default.date_dim.dateint',
+    type: 'timestamp',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    properties: [],
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.birth_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.dateint',
+    type: 'timestamp',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    properties: [],
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.hire_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.day',
+    type: 'int',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    properties: [],
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.birth_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.day',
+    type: 'int',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    properties: [],
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.hire_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.month',
+    type: 'int',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    properties: [],
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.birth_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.month',
+    type: 'int',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    properties: [],
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.hire_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.year',
+    type: 'int',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    properties: [],
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.birth_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.year',
+    type: 'int',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    properties: [],
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.hire_date',
+    ],
+  },
+];
+
+describe('CubeBuilderPage', () => {
+  beforeEach(() => {
+    mockDjClient.metrics.mockResolvedValue(mockMetrics);
+    mockDjClient.commonDimensions.mockResolvedValue(mockCommonDimensions);
+    mockDjClient.createCube.mockResolvedValue({ status: 201, json: {} });
+    mockDjClient.namespaces.mockResolvedValue(['default']);
+    mockDjClient.getCubeForEditing.mockResolvedValue(mockCube);
+    mockDjClient.listTags.mockResolvedValue([]);
+    mockDjClient.tagsNode.mockResolvedValue([]);
+    mockDjClient.patchCube.mockResolvedValue({ status: 201, json: {} });
+    mockDjClient.users.mockResolvedValue([{ username: 'dj' }]);
+    mockDjClient.whoami.mockResolvedValue({ username: 'dj' });
+
+    window.scrollTo = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <CubeBuilderPage />
+      </DJClientContext.Provider>,
+    );
+    expect(screen.getByText('Cube')).toBeInTheDocument();
+  });
+
+  it('renders the Metrics section', () => {
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <CubeBuilderPage />
+      </DJClientContext.Provider>,
+    );
+    expect(screen.getByText('Metrics *')).toBeInTheDocument();
+  });
+
+  it('renders the Dimensions section', () => {
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <CubeBuilderPage />
+      </DJClientContext.Provider>,
+    );
+    expect(screen.getByText('Dimensions *')).toBeInTheDocument();
+  });
+
+  it('creates a new cube', async () => {
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <CubeBuilderPage />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.metrics).toHaveBeenCalled();
+    });
+
+    const selectMetrics = screen.getAllByTestId('select-metrics')[0];
+    expect(selectMetrics).toBeDefined();
+    expect(selectMetrics).not.toBeNull();
+    expect(screen.getAllByText('3 Available Metrics')[0]).toBeInTheDocument();
+
+    fireEvent.keyDown(selectMetrics.firstChild, { key: 'ArrowDown' });
+    for (const metric of mockMetrics) {
+      await waitFor(() => {
+        expect(screen.getByText(metric)).toBeInTheDocument();
+        fireEvent.click(screen.getByText(metric));
+      });
+    }
+    fireEvent.click(screen.getAllByText('Dimensions *')[0]);
+
+    expect(mockDjClient.commonDimensions).toHaveBeenCalled();
+
+    const selectDimensions = screen.getAllByTestId('select-dimensions')[0];
+    expect(selectDimensions).toBeDefined();
+    expect(selectDimensions).not.toBeNull();
+    expect(
+      screen.getByText(
+        'default.repair_order_details.repair_order_id → default.repair_order.hard_hat_id → default.hard_hat.birth_date',
+      ),
+    ).toBeInTheDocument();
+
+    const selectDimensionsDate = screen.getAllByTestId(
+      'dimensions-default.date_dim',
+    )[0];
+
+    fireEvent.keyDown(selectDimensionsDate.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Day'));
+    fireEvent.click(screen.getByText('Month'));
+    fireEvent.click(screen.getByText('Year'));
+    fireEvent.click(screen.getByText('Dateint'));
+
+    // Save
+    const createCube = screen.getAllByRole('button', {
+      name: 'CreateCube',
+    })[0];
+    expect(createCube).toBeInTheDocument();
+
+    await waitFor(() => {
+      fireEvent.click(createCube);
+    });
+    await waitFor(() => {
+      expect(mockDjClient.createCube).toHaveBeenCalledWith(
+        '',
+        '',
+        '',
+        'published',
+        [
+          'default.num_repair_orders',
+          'default.avg_repair_price',
+          'default.total_repair_cost',
+        ],
+        [
+          'default.date_dim.day',
+          'default.date_dim.month',
+          'default.date_dim.year',
+          'default.date_dim.dateint',
+        ],
+        [],
+      );
+    });
+  });
+
+  const renderEditNode = element => {
+    return render(
+      <MemoryRouter
+        initialEntries={['/nodes/default.repair_orders_cube/edit-cube']}
+      >
+        <Routes>
+          <Route path="nodes/:name/edit-cube" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  };
+
+  it('updates an existing cube', async () => {
+    renderEditNode(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <CubeBuilderPage />
+      </DJClientContext.Provider>,
+    );
+    expect(screen.getAllByText('Edit')[0]).toBeInTheDocument();
+    await waitFor(() => {
+      expect(mockDjClient.getCubeForEditing).toHaveBeenCalled();
+    });
+    await waitFor(() => {
+      expect(mockDjClient.metrics).toHaveBeenCalled();
+    });
+
+    const selectMetrics = screen.getAllByTestId('select-metrics')[0];
+    expect(selectMetrics).toBeDefined();
+    expect(selectMetrics).not.toBeNull();
+    expect(screen.getByText('default.num_repair_orders')).toBeInTheDocument();
+
+    fireEvent.click(screen.getAllByText('Dimensions *')[0]);
+
+    expect(mockDjClient.commonDimensions).toHaveBeenCalled();
+
+    const selectDimensions = screen.getAllByTestId('select-dimensions')[0];
+    expect(selectDimensions).toBeDefined();
+    expect(selectDimensions).not.toBeNull();
+    expect(
+      screen.getByText(
+        'default.repair_order_details.repair_order_id → default.repair_order.hard_hat_id → default.hard_hat.birth_date',
+      ),
+    ).toBeInTheDocument();
+
+    const selectDimensionsDate = screen.getAllByTestId(
+      'dimensions-default.date_dim',
+    )[0];
+
+    fireEvent.keyDown(selectDimensionsDate.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Day'));
+    fireEvent.click(screen.getByText('Month'));
+    fireEvent.click(screen.getByText('Year'));
+    fireEvent.click(screen.getByText('Dateint'));
+
+    // Save
+    const createCube = screen.getAllByRole('button', {
+      name: 'CreateCube',
+    })[0];
+    expect(createCube).toBeInTheDocument();
+
+    await waitFor(() => {
+      fireEvent.click(createCube);
+    });
+    await waitFor(() => {
+      expect(mockDjClient.patchCube).toHaveBeenCalledWith(
+        'default.repair_orders_cube',
+        'Default: Repair Orders Cube',
+        'Repairs cube',
+        'draft',
+        ['default.total_repair_cost', 'default.num_repair_orders'],
+        [
+          'default.date_dim.day',
+          'default.date_dim.month',
+          'default.date_dim.year',
+          'default.date_dim.dateint',
+        ],
+        [],
+        [],
+      );
+    });
+  });
+});

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

@@ -0,0 +1,291 @@
+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';
+import { OwnersField } from '../AddEditNodePage/OwnersField';
+
+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: [],
+    owners: [],
+  };
+
+  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 || [],
+      values.owners,
+    );
+    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,
+    setSelectOwners,
+  ) => {
+    setFieldValue('display_name', data.current.displayName || '', false);
+    setFieldValue('description', data.current.description || '', false);
+    setFieldValue('mode', data.current.mode.toLowerCase() || '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.displayName };
+        })}
+      />,
+    );
+    if (data.owners) {
+      setSelectOwners(
+        <OwnersField
+          defaultValue={data.owners.map(owner => {
+            return { value: owner.username, label: owner.username };
+          })}
+        />,
+      );
+    }
+  };
+
+  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);
+            const [selectOwners, setSelectOwners] = useState(null);
+
+            // Get cube
+            useEffect(() => {
+              const fetchData = async () => {
+                if (name) {
+                  const cube = await djClient.getCubeForEditing(name);
+                  setNode(cube);
+                  updateFieldsWithNodeData(
+                    cube,
+                    setFieldValue,
+                    setSelectTags,
+                    setSelectOwners,
+                  );
+                }
+              };
+              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 />}
+                    {action === Action.Edit ? selectOwners : <OwnersField />}
+                    <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,
+};