datajunction-ui 0.0.1-a45 → 0.0.1-a45.dev5

package/src/app/pages/NodePage/__tests__/RevisionDiff.test.jsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import RevisionDiff from '../RevisionDiff';
+import DJClientContext from '../../../providers/djclient';
+import { NodePage } from '../Loadable';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+
+describe('<RevisionDiff />', () => {
+  const mockDjClient = {
+    DataJunctionAPI: {
+      revisions: jest.fn(),
+    },
+  };
+
+  const mockNodesWithDimension = [
+    {
+      node_revision_id: 2,
+      node_id: 2,
+      type: 'source',
+      name: 'default.repair_order_details',
+      display_name: 'Default: Repair Order Details',
+      version: 'v1.0',
+      status: 'valid',
+      mode: 'published',
+      catalog: {
+        id: 1,
+        uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+        created_at: '2023-08-21T16:48:51.146121+00:00',
+        updated_at: '2023-08-21T16:48:51.146122+00:00',
+        extra_params: {},
+        name: 'warehouse',
+      },
+      schema_: 'roads',
+      table: 'repair_order_details',
+      description: 'Details on repair orders',
+      query: null,
+      availability: null,
+      columns: [
+        {
+          name: 'repair_order_id',
+          type: 'int',
+          attributes: [],
+          dimension: {
+            name: 'default.repair_order',
+          },
+        },
+        {
+          name: 'repair_type_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'price',
+          type: 'float',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'quantity',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'discount',
+          type: 'float',
+          attributes: [],
+          dimension: null,
+        },
+      ],
+      updated_at: '2023-08-21T16:48:52.981201+00:00',
+      materializations: [],
+      parents: [],
+    },
+    {
+      node_revision_id: 1,
+      node_id: 1,
+      type: 'source',
+      name: 'default.repair_orders',
+      display_name: 'Default: Repair Orders',
+      version: 'v1.0',
+      status: 'valid',
+      mode: 'published',
+      catalog: {
+        id: 1,
+        uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+        created_at: '2023-08-21T16:48:51.146121+00:00',
+        updated_at: '2023-08-21T16:48:51.146122+00:00',
+        extra_params: {},
+        name: 'warehouse',
+      },
+      schema_: 'roads',
+      table: 'repair_orders',
+      description: 'Repair orders',
+      query: null,
+      availability: null,
+      columns: [
+        {
+          name: 'repair_order_id',
+          type: 'int',
+          attributes: [],
+          dimension: {
+            name: 'default.repair_order',
+          },
+        },
+        {
+          name: 'municipality_id',
+          type: 'string',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'hard_hat_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'order_date',
+          type: 'date',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'required_date',
+          type: 'date',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'dispatched_date',
+          type: 'date',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'dispatcher_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+      ],
+      updated_at: '2023-08-21T16:48:52.880498+00:00',
+      materializations: [],
+      parents: [],
+    },
+  ];
+
+  beforeEach(() => {
+    // Reset the mocks before each test
+    mockDjClient.DataJunctionAPI.revisions.mockReset();
+  });
+
+  it('renders revision diff', async () => {
+    mockDjClient.DataJunctionAPI.revisions.mockReturnValue(
+      mockNodesWithDimension,
+    );
+    const element = (
+      <DJClientContext.Provider value={mockDjClient}>
+        <RevisionDiff />
+      </DJClientContext.Provider>
+    );
+    const { container } = render(
+      <MemoryRouter
+        initialEntries={['/nodes/default.repair_orders_cube/revisions/v1.0']}
+      >
+        <Routes>
+          <Route path="nodes/:name/revisions/:revision" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.revisions).toHaveBeenCalledWith(
+        'default.repair_orders_cube',
+      );
+    });
+  });
+});

package/src/app/pages/NodePage/__tests__/__snapshots__/NodePage.test.jsx.snap

@@ -1,105 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<NodePage /> renders the NodeHistory tab correctly 1`] = `
-<table
-  aria-label="Revisions"
-  class="card-inner-table table"
->
-  <thead
-    class="fs-7 fw-bold text-gray-400 border-bottom-0"
-  >
-    <tr>
-      <th
-        class="text-start"
-      >
-        Version
-      </th>
-      <th>
-        Display Name
-      </th>
-      <th>
-        Description
-      </th>
-      <th>
-        Query
-      </th>
-      <th>
-        Tags
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td
-        class="text-start"
-      >
-        <span
-          class="badge node_type__source"
-        >
-          v1.0
-        </span>
-      </td>
-      <td>
-        Default: Avg Repair Price
-      </td>
-      <td>
-        Average repair price
-      </td>
-      <td>
-        <pre
-          style="display: block; overflow-x: auto; padding: 2rem; background: rgb(238, 238, 238); color: black;"
-        >
-          <code
-            class="language-sql"
-            style="white-space: pre-wrap;"
-          >
-            <span>
-              <span
-                style="color: rgb(0, 153, 153);"
-              >
-                SELECT
-              </span>
-              <span>
-                  
-              </span>
-              <span
-                class="hljs-built_in"
-              >
-                avg
-              </span>
-              <span>
-                (price) default_DOT_avg_repair_price 
-
-              </span>
-            </span>
-            <span>
-              <span>
-                 
-              </span>
-              <span
-                style="color: rgb(0, 153, 153);"
-              >
-                FROM
-              </span>
-              <span>
-                 default.repair_order_details
-
-              </span>
-            </span>
-            <span>
-              
-
-            </span>
-            <span />
-          </code>
-        </pre>
-      </td>
-      <td />
-    </tr>
-  </tbody>
-</table>
-`;
-
 exports[`<NodePage /> renders the NodeInfo tab correctly for a metric node 1`] = `
 HTMLCollection [
   <code

package/src/app/services/__tests__/DJService.test.jsx

@@ -49,6 +49,57 @@ describe('DataJunctionAPI', () => {
     expect(nodeData.primary_key).toEqual([]);
   });
 
+  it('calls nodeDetails correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify([mocks.mockMetricNode]));
+    const nodeData = await DataJunctionAPI.nodeDetails();
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/nodes/details/`, {
+      credentials: 'include',
+    });
+    expect(nodeData).toEqual([mocks.mockMetricNode]);
+  });
+
+  it('calls validate correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify([mocks.mockMetricNode]));
+    await DataJunctionAPI.validateNode(
+      'metric',
+      'default.num_repair_orders',
+      'aa',
+      'desc',
+      'select 1',
+    );
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/nodes/validate`, {
+      credentials: 'include',
+      body: JSON.stringify({
+        name: 'default.num_repair_orders',
+        display_name: 'aa',
+        description: 'desc',
+        query: 'select 1',
+        type: 'metric',
+        mode: 'published',
+      }),
+
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    });
+  });
+
+  it('calls registerTable correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify([mocks.mockMetricNode]));
+    await DataJunctionAPI.registerTable('default', 'xyz', 'abc');
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/register/table/default/xyz/abc`,
+      {
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      },
+    );
+  });
+
   it('node with errors are handled', async () => {
     const mockNotFound = { message: 'node not found' };
     fetch.mockResponseOnce(JSON.stringify(mockNotFound));

package/src/index.tsx

@@ -15,6 +15,7 @@ import FontFaceObserver from 'fontfaceobserver';
 // Use consistent styling
 import 'sanitize.css/sanitize.css';
 import './styles/index.css';
+import 'react-diff-view/style/index.css';
 
 import { App } from './app';
 

package/src/mocks/mockNodes.jsx

@@ -408,6 +408,53 @@ export const mocks = {
       },
       created_at: '2023-08-21T16:48:56.950482+00:00',
     },
+    {
+      id: 7,
+      entity_type: 'backfill',
+      entity_name: 'default.avg_repair_price',
+      node: 'default.avg_repair_price',
+      activity_type: 'create',
+      user: null,
+      pre: { status: 'valid' },
+      post: { status: 'invalid' },
+      details: {
+        materialization: 'druid_metrics_cube__incremental_time__xyz',
+        partition: {
+          column_name: 'xyz.abc',
+          values: null,
+          range: ['20240201', '20240301'],
+        },
+      },
+      created_at: '2023-08-21T16:48:56.950482+00:00',
+    },
+    {
+      id: 8,
+      entity_type: 'node',
+      entity_name: 'default.avg_repair_price',
+      node: 'default.avg_repair_price',
+      activity_type: 'tag',
+      user: null,
+      pre: {},
+      post: {},
+      details: {
+        tags: ['a', 'b'],
+      },
+      created_at: '2023-08-21T16:48:56.950482+00:00',
+    },
+    {
+      id: 9,
+      entity_type: 'link',
+      entity_name: 'default.avg_repair_price',
+      node: 'default.avg_repair_price',
+      activity_type: 'create',
+      user: null,
+      pre: {},
+      post: {},
+      details: {
+        dimension: 'abcde',
+      },
+      created_at: '2023-08-21T16:48:56.950482+00:00',
+    },
   ],
   nodeMaterializations: [
     {

package/src/styles/index.css

@@ -1113,3 +1113,92 @@ pre {
   font-size: 100%;
   margin-bottom: 5px;
 }
+
+.history {
+  padding: 20px;
+  list-style: none;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: #748f7c75;
+  display: grid;
+
+  position: relative;
+  min-height: 2rem;
+  font-size: 14px;
+  grid-template-rows: repeat(3, auto);
+  grid-template-areas:
+    'description description details'
+    'description description details'
+    'metadata metadata details';
+  grid-template-columns: min-content minmax(30%, 1fr);
+  gap: 4px;
+}
+
+.history-border {
+  display: block;
+  list-style-type: disc;
+  padding-inline-start: 0;
+  unicode-bidi: isolate;
+  border-radius: 6px !important;
+  border: 1px solid #748f7c75;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+.history-left {
+  grid-area: description;
+  -webkit-box-flex: 2;
+  flex-grow: 2;
+  display: inline;
+  font-size: 16px;
+}
+.history-small {
+  display: flex;
+  flex-direction: row;
+  -webkit-box-align: center;
+  align-items: center;
+  gap: 5px;
+  padding-right: 8px;
+  -webkit-box-flex: 1;
+  flex-grow: 1;
+  overflow: hidden;
+  grid-area: metadata;
+  font-size: 12px;
+}
+.history-right {
+  display: flex;
+  flex-flow: wrap;
+  padding-top: 10px;
+  gap: 19px;
+  grid-area: details;
+  -webkit-box-flex: 2;
+}
+
+.version {
+  color: #055d20;
+  font-weight: bold;
+  font-size: 13px;
+  border: solid #055d20 1px;
+  background-color: #ccf7e545;
+  margin: 0.25rem;
+}
+
+.highlight-svg:hover {
+  filter: invert(56%) sepia(68%) saturate(4415%) hue-rotate(162deg)
+    brightness(96%) contrast(101%);
+  text-decoration: none;
+}
+.no-change {
+  padding: 10px;
+  display: inline-block;
+  margin-top: -25px;
+}
+
+.no-change-banner {
+  color: #055d20;
+  text-transform: uppercase;
+  padding-left: 10px;
+}

package/src/app/components/DeleteNode.jsx

@@ -1,55 +0,0 @@
-import DJClientContext from '../providers/djclient';
-import * as React from 'react';
-import DeleteIcon from '../icons/DeleteIcon';
-import { Form, Formik } from 'formik';
-import { useContext } from 'react';
-import { displayMessageAfterSubmit } from '../../utils/form';
-
-export default function DeleteNode({ nodeName }) {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const deleteNode = async (values, { setSubmitting, setStatus }) => {
-    const { status, json } = await djClient.deactivate(values.nodeName);
-    if (status === 200 || status === 201 || status === 204) {
-      setStatus({
-        success: <>Successfully deleted node {values.nodeName}</>,
-      });
-    } else {
-      setStatus({
-        failure: `${json.message}`,
-      });
-    }
-    setSubmitting(false);
-  };
-
-  const initialValues = {
-    nodeName: nodeName,
-  };
-
-  return (
-    <Formik initialValues={initialValues} onSubmit={deleteNode}>
-      {function Render({ isSubmitting, status, setFieldValue }) {
-        return (
-          <Form className="deleteNode">
-            {displayMessageAfterSubmit(status)}
-            {
-              <>
-                <button
-                  type="submit"
-                  disabled={isSubmitting}
-                  style={{
-                    marginLeft: 0,
-                    all: 'unset',
-                    color: '#005c72',
-                    cursor: 'pointer',
-                  }}
-                >
-                  <DeleteIcon />
-                </button>
-              </>
-            }
-          </Form>
-        );
-      }}
-    </Formik>
-  );
-}

package/src/app/components/__tests__/DeleteNode.test.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import fetchMock from 'jest-fetch-mock';
-import userEvent from '@testing-library/user-event';
-import { render } from '../../../setupTests';
-import DJClientContext from '../../providers/djclient';
-import DeleteNode from '../DeleteNode';
-
-describe('<DeleteNode />', () => {
-  beforeEach(() => {
-    fetchMock.resetMocks();
-    jest.clearAllMocks();
-    window.scrollTo = jest.fn();
-  });
-
-  const renderElement = djClient => {
-    return render(
-      <DJClientContext.Provider value={djClient}>
-        <DeleteNode nodeName="default.hard_hat" />
-      </DJClientContext.Provider>,
-    );
-  };
-
-  const initializeMockDJClient = () => {
-    return {
-      DataJunctionAPI: {
-        deactivate: jest.fn(),
-      },
-    };
-  };
-
-  it('deletes a node when clicked', async () => {
-    const mockDjClient = initializeMockDJClient();
-    mockDjClient.DataJunctionAPI.deactivate.mockReturnValue({
-      status: 204,
-      json: { name: 'source.warehouse.schema.some_table' },
-    });
-
-    renderElement(mockDjClient);
-
-    await userEvent.click(screen.getByRole('button'));
-
-    await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalled();
-      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalledWith(
-        'default.hard_hat',
-      );
-    });
-    expect(
-      screen.getByText('Successfully deleted node default.hard_hat'),
-    ).toBeInTheDocument();
-  }, 60000);
-});