datajunction-ui 0.0.1-a1 → 0.0.1-a101

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

@@ -0,0 +1,164 @@
+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: 1,
+      node_id: 1,
+      type: 'dimension',
+      name: 'default.repair_order',
+      display_name: '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',
+      },
+      description: 'Repair order dimension',
+      query:
+        'SELECT repair_order_id, municipality_id, hard_hat_id, order_date, ' +
+        'dispatcher_id FROM default.repair_orders',
+      availability: null,
+      columns: [
+        {
+          name: 'repair_order_id',
+          type: 'int',
+          attributes: [],
+          dimension: {
+            name: 'default.repair_order',
+          },
+        },
+        {
+          name: 'municipality_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'hard_hat_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'order_date',
+          type: 'date',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'dispatcher_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+      ],
+      updated_at: '2023-08-21T16:48:52.981201+00:00',
+      materializations: [],
+      parents: [],
+    },
+    {
+      node_revision_id: 2,
+      node_id: 2,
+      type: 'dimension',
+      name: 'default.repair_order',
+      display_name: 'Repair Orders',
+      version: 'v2.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',
+      },
+      description: 'Repair order dimension',
+      query:
+        'SELECT repair_order_id, municipality_id, hard_hat_id, ' +
+        'dispatcher_id FROM default.repair_orders',
+      availability: null,
+      columns: [
+        {
+          name: 'repair_order_id',
+          type: 'int',
+          attributes: [],
+          dimension: {
+            name: 'default.repair_order',
+          },
+        },
+        {
+          name: 'municipality_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'hard_hat_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'dispatcher_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+      ],
+      updated_at: '2023-08-21T16:48:52.981201+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/v2.0']}
+      >
+        <Routes>
+          <Route path="nodes/:name/revisions/:revision" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.revisions).toHaveBeenCalledWith(
+        'default.repair_orders_cube',
+      );
+
+      const diffViews = screen.getAllByRole('gridcell', 'DiffView');
+      diffViews.map(diffView => expect(diffView).toBeInTheDocument());
+    });
+  });
+});

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

@@ -1,403 +1,19 @@
 // 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>
-        SELECT  avg(price) default_DOT_avg_repair_price 
- FROM default.repair_order_details
-
-
-      </td>
-      <td />
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`<NodePage /> renders the NodeInfo tab correctly 1`] = `
+exports[`<NodePage /> renders the NodeInfo tab correctly for a metric node 1`] = `
 HTMLCollection [
   <code
     class="language-sql"
     style="white-space: pre;"
   >
-    <span
-      style="color: rgb(0, 153, 153);"
-    >
-      SELECT
-    </span>
-    <span>
-       
-    </span>
     <span
       class="hljs-built_in"
     >
       count
     </span>
     <span>
-      (repair_order_id) default_DOT_num_repair_orders 
-    </span>
-    <span
-      style="color: rgb(0, 153, 153);"
-    >
-      FROM
-    </span>
-    <span>
-       default.repair_orders
+      (repair_order_id)
     </span>
   </code>,
 ]
 `;
-
-exports[`<NodePage /> renders the NodeMaterialization tab with materializations correctly 1`] = `
-<table
-  aria-hidden="false"
-  aria-label="Materializations"
-  class="card-inner-table table"
->
-  <thead
-    class="fs-7 fw-bold text-gray-400 border-bottom-0"
-  >
-    <tr>
-      <th
-        class="text-start"
-      >
-        Schedule
-      </th>
-      <th>
-        Engine
-      </th>
-      <th>
-        Partitions
-      </th>
-      <th>
-        Output Tables
-      </th>
-      <th>
-        Backfills
-      </th>
-      <th>
-        URLs
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td
-        class="text-start node_name"
-      >
-        <span
-          class="badge cron"
-        >
-          0 * * * *
-        </span>
-        <div
-          class="cron-description"
-        >
-          Every hour
-           
-        </div>
-      </td>
-      <td>
-        spark
-        <br />
-        2.4.4
-        <button
-          aria-label="code-button"
-          class="code-button"
-          height="45px"
-          tabindex="0"
-        >
-          <svg
-            fill="none"
-            height="45px"
-            viewBox="0 0 64 64"
-            width="45px"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              id="SVGRepo_bgCarrier"
-              stroke-width="0"
-            />
-            <g
-              id="SVGRepo_tracerCarrier"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-            <g
-              id="SVGRepo_iconCarrier"
-            >
-              <path
-                d="M31.885 16c-8.124 0-7.617 3.523-7.617 3.523l.01 3.65h7.752v1.095H21.197S16 23.678 16 31.876c0 8.196 4.537 7.906 4.537 7.906h2.708v-3.804s-.146-4.537 4.465-4.537h7.688s4.32.07 4.32-4.175v-7.019S40.374 16 31.885 16zm-4.275 2.454c.771 0 1.395.624 1.395 1.395s-.624 1.395-1.395 1.395a1.393 1.393 0 0 1-1.395-1.395c0-.771.624-1.395 1.395-1.395z"
-                fill="url(#a)"
-              />
-              <path
-                d="M32.115 47.833c8.124 0 7.617-3.523 7.617-3.523l-.01-3.65H31.97v-1.095h10.832S48 40.155 48 31.958c0-8.197-4.537-7.906-4.537-7.906h-2.708v3.803s.146 4.537-4.465 4.537h-7.688s-4.32-.07-4.32 4.175v7.019s-.656 4.247 7.833 4.247zm4.275-2.454a1.393 1.393 0 0 1-1.395-1.395c0-.77.624-1.394 1.395-1.394s1.395.623 1.395 1.394c0 .772-.624 1.395-1.395 1.395z"
-                fill="url(#b)"
-              />
-              <defs>
-                <lineargradient
-                  gradientUnits="userSpaceOnUse"
-                  id="a"
-                  x1="19.075"
-                  x2="34.898"
-                  y1="18.782"
-                  y2="34.658"
-                >
-                  <stop
-                    stop-color="#387EB8"
-                  />
-                  <stop
-                    offset="1"
-                    stop-color="#366994"
-                  />
-                </lineargradient>
-                <lineargradient
-                  gradientUnits="userSpaceOnUse"
-                  id="b"
-                  x1="28.809"
-                  x2="45.803"
-                  y1="28.882"
-                  y2="45.163"
-                >
-                  <stop
-                    stop-color="#FFE052"
-                  />
-                  <stop
-                    offset="1"
-                    stop-color="#FFC331"
-                  />
-                </lineargradient>
-              </defs>
-            </g>
-          </svg>
-        </button>
-        <div
-          aria-label="client-code"
-          id="node-create-code"
-          role="dialog"
-          style="display: none;"
-        >
-          <pre
-            style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(1, 22, 39); color: rgb(214, 222, 235);"
-          >
-            <code
-              class="language-python"
-              style="white-space: pre;"
-            />
-          </pre>
-        </div>
-      </td>
-      <td />
-      <td>
-        <div
-          class="table__full"
-        >
-          <div
-            class="table__header"
-          >
-            <svg
-              class="bi bi-table"
-              fill="currentColor"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
-              />
-            </svg>
-             
-            <span
-              class="entity-info"
-            >
-              common.a
-            </span>
-          </div>
-          <div
-            class="table__body upstream_tables"
-          />
-        </div>
-        <div
-          class="table__full"
-        >
-          <div
-            class="table__header"
-          >
-            <svg
-              class="bi bi-table"
-              fill="currentColor"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
-              />
-            </svg>
-             
-            <span
-              class="entity-info"
-            >
-              common.b
-            </span>
-          </div>
-          <div
-            class="table__body upstream_tables"
-          />
-        </div>
-      </td>
-      <td>
-        <a
-          class="partitionLink"
-        >
-          <div
-            class="partition__full"
-          >
-            <div
-              class="partition__header"
-            />
-            <div
-              class="partition__body"
-            >
-              <span
-                class="badge partition_value"
-              >
-                20230101
-              </span>
-              to
-              <span
-                class="badge partition_value"
-              >
-                20230102
-              </span>
-            </div>
-          </div>
-        </a>
-        <button
-          aria-label="AddBackfill"
-          class="edit_button"
-          tabindex="0"
-        >
-          <span
-            class="add_node"
-          >
-            + Add Backfill
-          </span>
-        </button>
-        <div
-          class="fade modal-backdrop in"
-          style="display: none;"
-        />
-        <div
-          aria-label="client-code"
-          class="centerPopover"
-          role="dialog"
-          style="display: none; width: 50%;"
-        >
-          <form
-            action="#"
-          >
-            <h2>
-              Run Backfill
-            </h2>
-            <span
-              data-testid="edit-partition"
-            >
-              <label
-                for="engine"
-                style="padding-bottom: 1rem;"
-              >
-                Engine
-              </label>
-              <select
-                disabled=""
-                id="engine"
-                name="engine"
-              >
-                <option
-                  value="spark"
-                >
-                  spark
-                   
-                  2.4.4
-                </option>
-              </select>
-            </span>
-            <br />
-            <br />
-            <label
-              for="partition"
-              style="padding-bottom: 1rem;"
-            >
-              Partition Range
-            </label>
-            <br />
-            <button
-              aria-hidden="false"
-              aria-label="SaveEditColumn"
-              class="add_node"
-              type="submit"
-            >
-              Save
-            </button>
-          </form>
-        </div>
-      </td>
-      <td>
-        <a
-          href="http://fake.url/job"
-        >
-          [
-          1
-          ]
-        </a>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;