datajunction-ui 0.0.1-a35.dev0 → 0.0.1-a37

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

@@ -0,0 +1,405 @@
+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(),
+  node: jest.fn(),
+  listTags: jest.fn(),
+  tagsNode: jest.fn(),
+  patchCube: jest.fn(),
+};
+
+const mockMetrics = [
+  'default.num_repair_orders',
+  'default.avg_repair_price',
+  'default.total_repair_cost',
+];
+
+const mockCube = {
+  node_revision_id: 102,
+  node_id: 33,
+  type: 'cube',
+  name: 'default.repair_orders_cube',
+  display_name: 'Default: Repair Orders Cube',
+  version: 'v4.0',
+  description: 'Repairs cube',
+  availability: null,
+  cube_elements: [
+    {
+      name: 'default_DOT_total_repair_cost',
+      display_name: 'Total Repair Cost',
+      node_name: 'default.total_repair_cost',
+      type: 'metric',
+      partition: null,
+    },
+    {
+      name: 'default_DOT_num_repair_orders',
+      display_name: 'Num Repair Orders',
+      node_name: 'default.num_repair_orders',
+      type: 'metric',
+      partition: null,
+    },
+    {
+      name: 'country',
+      display_name: 'Country',
+      node_name: 'default.hard_hat',
+      type: 'dimension',
+      partition: null,
+    },
+    {
+      name: 'state',
+      display_name: 'State',
+      node_name: 'default.hard_hat',
+      type: 'dimension',
+      partition: null,
+    },
+  ],
+  query: '',
+  columns: [
+    {
+      name: 'default.total_repair_cost',
+      display_name: 'Total Repair Cost',
+      type: 'double',
+      attributes: [],
+      dimension: null,
+      partition: null,
+    },
+    {
+      name: 'default.num_repair_orders',
+      display_name: 'Num Repair Orders',
+      type: 'bigint',
+      attributes: [],
+      dimension: null,
+      partition: null,
+    },
+    {
+      name: 'default.hard_hat.country',
+      display_name: 'Country',
+      type: 'string',
+      attributes: [],
+      dimension: null,
+      partition: null,
+    },
+    {
+      name: 'default.hard_hat.state',
+      display_name: 'State',
+      type: 'string',
+      attributes: [],
+      dimension: null,
+      partition: null,
+    },
+  ],
+  updated_at: '2023-12-03T06:51:09.598532+00:00',
+  materializations: [],
+};
+
+const mockCommonDimensions = [
+  {
+    name: 'default.date_dim.dateint',
+    type: 'timestamp',
+    node_name: 'default.date_dim',
+    node_display_name: 'Date',
+    is_primary_key: false,
+    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',
+    is_primary_key: true,
+    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',
+    is_primary_key: false,
+    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',
+    is_primary_key: false,
+    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',
+    is_primary_key: false,
+    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',
+    is_primary_key: false,
+    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',
+    is_primary_key: false,
+    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',
+    is_primary_key: false,
+    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.cube.mockResolvedValue(mockCube);
+    mockDjClient.node.mockResolvedValue(mockCube);
+    mockDjClient.listTags.mockResolvedValue([]);
+    mockDjClient.tagsNode.mockResolvedValue([]);
+    mockDjClient.patchCube.mockResolvedValue({ status: 201, json: {} });
+
+    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(
+        '',
+        '',
+        '',
+        'draft',
+        [
+          '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.cube).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,254 @@
+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 NodeTagsInput from '../../components/forms/NodeTagsInput';
+import { MetricsSelect } from './MetricsSelect';
+import { DimensionsSelect } from './DimensionsSelect';
+
+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: 'draft',
+    metrics: [],
+    dimensions: [],
+    filters: [],
+  };
+
+  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) => {
+    setFieldValue('display_name', data.display_name || '', false);
+    setFieldValue('description', data.description || '', false);
+    setFieldValue('mode', data.mode || 'draft', false);
+  };
+
+  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([]);
+
+            // Get cube
+            useEffect(() => {
+              const fetchData = async () => {
+                if (name) {
+                  const node = await djClient.node(name);
+                  const cube = await djClient.cube(name);
+                  cube.tags = node.tags;
+                  setNode(cube);
+                  updateFieldsWithNodeData(cube, setFieldValue);
+                }
+              };
+              fetchData().catch(console.error);
+            }, [djClient, djClient.metrics, name]);
+
+            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 htmlFor="react-select-3-input">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 htmlFor="react-select-3-input">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>
+                    <NodeTagsInput action={action} node={node} />
+                    <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/index.jsx

@@ -150,6 +150,11 @@ export function NamespacePage() {
                       Tag
                     </div>
                   </a>
+                  <a href={`/create/cube/${namespace}`}>
+                    <div className="node_type__cube node_type_creation_heading">
+                      Cube
+                    </div>
+                  </a>
                 </div>
               </div>
             </span>

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

@@ -97,13 +97,20 @@ export default function AddBackfillPopover({
                 {displayMessageAfterSubmit(status)}
                 <h2>Run Backfill</h2>
                 <span data-testid="edit-partition">
-                  <label htmlFor="engine" style={{ paddingBottom: '1rem' }}>
-                    Engine
+                  <label
+                    htmlFor="materializationName"
+                    style={{ paddingBottom: '1rem' }}
+                  >
+                    Materialization Name
                   </label>
-                  <Field as="select" name="engine" id="engine" disabled={true}>
-                    <option value={materialization?.engine?.name}>
-                      {materialization?.engine?.name}{' '}
-                      {materialization?.engine?.version}
+                  <Field
+                    as="select"
+                    name="materializationName"
+                    id="materializationName"
+                    disabled={true}
+                  >
+                    <option value={materialization?.name}>
+                      {materialization?.name}{' '}
                     </option>
                   </Field>
                 </span>