datajunction-ui 0.0.1-rc.24 → 0.0.1-rc.25

package/src/app/pages/TagPage/__tests__/TagPage.test.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import fetchMock from 'jest-fetch-mock';
+import { render } from '../../../../setupTests';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import { TagPage } from '../index';
+
+describe('<TagPage />', () => {
+  const initializeMockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        getTag: jest.fn(),
+        listNodesForTag: jest.fn(),
+      },
+    };
+  };
+
+  const mockDjClient = initializeMockDJClient();
+
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+
+    mockDjClient.DataJunctionAPI.getTag.mockReturnValue({
+      name: 'domains.com',
+      tag_type: 'domains',
+      description: 'Top-level domain .com',
+    });
+    mockDjClient.DataJunctionAPI.listNodesForTag.mockReturnValue([
+      {
+        name: 'random.node_a',
+        type: 'metric',
+        display_name: 'Node A',
+      },
+    ]);
+  });
+
+  const renderTagsPage = element => {
+    return render(
+      <MemoryRouter initialEntries={['/tags/:name']}>
+        <Routes>
+          <Route path="tags/:name" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  };
+
+  const testElement = djClient => {
+    return (
+      <DJClientContext.Provider value={djClient}>
+        <TagPage />
+      </DJClientContext.Provider>
+    );
+  };
+
+  it('renders the tag page correctly', async () => {
+    const element = testElement(mockDjClient);
+    renderTagsPage(element);
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.getTag).toHaveBeenCalledTimes(1);
+      expect(
+        mockDjClient.DataJunctionAPI.listNodesForTag,
+      ).toHaveBeenCalledTimes(1);
+    });
+    expect(screen.getByText('Nodes')).toBeInTheDocument();
+    expect(screen.getByText('Node A')).toBeInTheDocument();
+  }, 60000);
+});

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

@@ -0,0 +1,79 @@
+/**
+ * For a given tag, displays nodes tagged with it
+ */
+import NamespaceHeader from '../../components/NamespaceHeader';
+import React, { useContext, useEffect, useState } from 'react';
+import 'styles/node-creation.scss';
+import DJClientContext from '../../providers/djclient';
+import { useParams } from 'react-router-dom';
+
+export function TagPage() {
+  const [nodes, setNodes] = useState([]);
+  const [tag, setTag] = useState([]);
+
+  const { name } = useParams();
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await djClient.listNodesForTag(name);
+      const tagData = await djClient.getTag(name);
+      setNodes(data);
+      setTag(tagData);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, name]);
+
+  return (
+    <div className="mid">
+      <NamespaceHeader namespace="" />
+      <div className="card">
+        <div className="card-header">
+          <h3
+            className="card-title align-items-start flex-column"
+            style={{ display: 'inline-block' }}
+          >
+            Tag
+          </h3>
+          <div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Display Name</h6>
+              <p className="mb-0 opacity-75">{tag.display_name}</p>
+            </div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Name</h6>
+              <p className="mb-0 opacity-75">{name}</p>
+            </div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Tag Type</h6>
+              <p className="mb-0 opacity-75">{tag.tag_type}</p>
+            </div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Description</h6>
+              <p className="mb-0 opacity-75">{tag.description}</p>
+            </div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Nodes</h6>
+              <div className={`list-group-item`}>
+                {nodes?.map(node => (
+                  <div
+                    className="button-3 cube-element"
+                    key={node.name}
+                    role="cell"
+                    aria-label="CubeElement"
+                    aria-hidden="false"
+                  >
+                    <a href={`/nodes/${node.name}`}>{node.display_name}</a>
+                    <span className={`badge node_type__${node.type}`}>
+                      {node.type}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/services/DJService.js

@@ -12,7 +12,7 @@ export const DataJunctionAPI = {
   },
 
   logout: async function () {
-    await await fetch(`${DJ_URL}/basic/logout/`, {
+    await await fetch(`${DJ_URL}/logout/`, {
       credentials: 'include',
       method: 'POST',
     });
@@ -497,4 +497,82 @@ export const DataJunctionAPI = {
     });
     return { status: response.status, json: await response.json() };
   },
+  listTags: async function () {
+    const response = await fetch(`${DJ_URL}/tags`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+    return await response.json();
+  },
+  getTag: async function (tagName) {
+    const response = await fetch(`${DJ_URL}/tags/${tagName}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+    return await response.json();
+  },
+  listNodesForTag: async function (tagName) {
+    const response = await fetch(`${DJ_URL}/tags/${tagName}/nodes`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+    return await response.json();
+  },
+  tagsNode: async function (nodeName, tagNames) {
+    const url = tagNames
+      .map(value => `tag_names=${encodeURIComponent(value)}`)
+      .join('&');
+    const response = await fetch(`${DJ_URL}/nodes/${nodeName}/tags?${url}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
+  addTag: async function (name, displayName, tagType, description) {
+    const response = await fetch(`${DJ_URL}/tags`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: name,
+        display_name: displayName,
+        tag_type: tagType,
+        description: description,
+      }),
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
+  editTag: async function (name, description, displayName) {
+    const updates = {};
+    if (description) {
+      updates.description = description;
+    }
+    if (displayName) {
+      updates.display_name = displayName;
+    }
+
+    const response = await fetch(`${DJ_URL}/tags/${name}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(updates),
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
 };

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

@@ -28,7 +28,7 @@ describe('DataJunctionAPI', () => {
   it('calls logout correctly', async () => {
     fetch.mockResponseOnce(JSON.stringify({}));
     await DataJunctionAPI.logout();
-    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/basic/logout/`, {
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/logout/`, {
       credentials: 'include',
       method: 'POST',
     });
@@ -606,4 +606,87 @@ describe('DataJunctionAPI', () => {
       },
     );
   });
+
+  it('calls listTags correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify(mocks.tags));
+    const res = await DataJunctionAPI.listTags();
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/tags`, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'GET',
+    });
+    expect(res).toEqual(mocks.tags);
+  });
+
+  it('calls getTag correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify(mocks.tags[0]));
+    const res = await DataJunctionAPI.getTag('report.financials');
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/tags/report.financials`, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'GET',
+    });
+    expect(res).toEqual(mocks.tags[0]);
+  });
+
+  it('calls listNodesForTag correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify(mocks.mockLinkedNodes));
+    const res = await DataJunctionAPI.listNodesForTag('report.financials');
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/tags/report.financials/nodes`,
+      {
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'GET',
+      },
+    );
+    expect(res).toEqual(mocks.mockLinkedNodes);
+  });
+
+  it('calls tagsNode correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify(mocks.mockLinkedNodes));
+    await DataJunctionAPI.tagsNode('default.num_repair_orders', [
+      'report.financials',
+      'report.forecasts',
+    ]);
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/nodes/default.num_repair_orders/tags?tag_names=report.financials&tag_names=report.forecasts`,
+      {
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      },
+    );
+  });
+
+  it('calls addTag correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify(mocks.mockLinkedNodes));
+    await DataJunctionAPI.addTag(
+      'report.financials',
+      'Financial Reports',
+      'report',
+      'financial reports',
+    );
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/tags`, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: 'report.financials',
+        display_name: 'Financial Reports',
+        tag_type: 'report',
+        description: 'financial reports',
+      }),
+      method: 'POST',
+    });
+  });
 });

package/src/mocks/mockNodes.jsx

@@ -27,6 +27,7 @@ export const mocks = {
       {
         name: 'default_DOT_num_repair_orders',
         type: 'bigint',
+        display_name: 'Default DOT num repair orders',
         attributes: [],
         dimension: null,
       },
@@ -40,7 +41,7 @@ export const mocks = {
       },
     ],
     created_at: '2023-08-21T16:48:56.841631+00:00',
-    tags: [],
+    tags: [{ name: 'purpose', display_name: 'Purpose' }],
     dimensions: [
       {
         value: 'default.date_dim.dateint',
@@ -243,6 +244,7 @@ export const mocks = {
     {
       name: 'default_DOT_avg_repair_price',
       type: 'double',
+      display_name: 'Default DOT avg repair price',
       attributes: [],
       dimension: null,
     },
@@ -402,6 +404,7 @@ export const mocks = {
         {
           name: 'default_DOT_avg_repair_price',
           type: 'double',
+          display_name: 'Default DOT avg repair price',
           attributes: [],
           dimension: null,
         },
@@ -442,30 +445,35 @@ export const mocks = {
       {
         name: 'default_DOT_num_repair_orders',
         type: 'bigint',
+        display_name: 'Default DOT num repair orders',
         attributes: [],
         dimension: null,
       },
       {
         name: 'default_DOT_avg_repair_price',
         type: 'double',
+        display_name: 'Default DOT avg repair price',
         attributes: [],
         dimension: null,
       },
       {
         name: 'default_DOT_total_repair_cost',
         type: 'double',
+        display_name: 'Default DOT total repair cost',
         attributes: [],
         dimension: null,
       },
       {
         name: 'default_DOT_total_repair_order_discounts',
         type: 'double',
+        display_name: 'Default DOT total repair order discounts',
         attributes: [],
         dimension: null,
       },
       {
         name: 'company_name',
         type: 'string',
+        display_name: 'Company Name',
         attributes: [
           {
             attribute_type: {
@@ -821,6 +829,7 @@ export const mocks = {
       {
         name: 'default_DOT_avg_repair_price',
         type: 'double',
+        display_name: 'Default DOT avg repair price',
         attributes: [],
         dimension: null,
       },
@@ -1044,6 +1053,7 @@ export const mocks = {
         {
           name: 'repair_order_id',
           type: 'int',
+          display_name: 'Repair Order Id',
           attributes: [],
           dimension: {
             name: 'default.repair_order',
@@ -1052,24 +1062,28 @@ export const mocks = {
         {
           name: 'repair_type_id',
           type: 'int',
+          display_name: 'Repair Type Id',
           attributes: [],
           dimension: null,
         },
         {
           name: 'price',
           type: 'float',
+          display_name: 'Price',
           attributes: [],
           dimension: null,
         },
         {
           name: 'quantity',
           type: 'int',
+          display_name: 'Quantity',
           attributes: [],
           dimension: null,
         },
         {
           name: 'discount',
           type: 'float',
+          display_name: 'Discount',
           attributes: [],
           dimension: null,
         },
@@ -1108,6 +1122,7 @@ export const mocks = {
         {
           name: 'dateint',
           type: 'timestamp',
+          display_name: 'Dateint',
           attributes: [
             {
               attribute_type: {
@@ -1121,18 +1136,21 @@ export const mocks = {
         {
           name: 'month',
           type: 'int',
+          display_name: 'Month',
           attributes: [],
           dimension: null,
         },
         {
           name: 'year',
           type: 'int',
+          display_name: 'Year',
           attributes: [],
           dimension: null,
         },
         {
           name: 'day',
           type: 'int',
+          display_name: 'Day',
           attributes: [],
           dimension: null,
         },
@@ -1175,6 +1193,7 @@ export const mocks = {
         {
           name: 'hard_hat_id',
           type: 'int',
+          display_name: 'Hard Hat Id',
           attributes: [
             {
               attribute_type: {
@@ -1188,89 +1207,94 @@ export const mocks = {
         {
           name: 'last_name',
           type: 'string',
+          display_name: 'Last Name',
           attributes: [],
           dimension: null,
         },
         {
           name: 'first_name',
           type: 'string',
+          display_name: 'First Name',
           attributes: [],
           dimension: null,
         },
         {
           name: 'title',
           type: 'string',
+          display_name: 'Title',
           attributes: [],
           dimension: null,
         },
         {
           name: 'birth_date',
           type: 'date',
+          display_name: 'Birth Date',
           attributes: [],
           dimension: {
             name: 'default.date_dim',
           },
         },
         {
-          name: 'hire_date',
-          type: 'date',
-          attributes: [],
-          dimension: {
-            name: 'default.date_dim',
+          "name": "hire_date",
+          "type": "date",
+          "attributes": [],
+          "dimension": {
+            "name": "default.date_dim"
           },
+          "display_name": "Hire Date"
         },
         {
-          name: 'address',
-          type: 'string',
-          attributes: [],
-          dimension: null,
+          "name": "address",
+          "type": "string",
+          "attributes": [],
+          "dimension": null,
+          "display_name": "Address"
         },
         {
-          name: 'city',
-          type: 'string',
-          attributes: [],
-          dimension: null,
+          "name": "city",
+          "type": "string",
+          "attributes": [],
+          "dimension": null,
+          "display_name": "City"
         },
         {
-          name: 'state',
-          type: 'string',
-          attributes: [],
-          dimension: {
-            name: 'default.us_state',
+          "name": "state",
+          "type": "string",
+          "attributes": [],
+          "dimension": {
+            "name": "default.us_state"
           },
+          "display_name": "State"
         },
         {
-          name: 'postal_code',
-          type: 'string',
-          attributes: [],
-          dimension: null,
+          "name": "postal_code",
+          "type": "string",
+          "attributes": [],
+          "dimension": null,
+          "display_name": "Postal Code"
         },
         {
-          name: 'country',
-          type: 'string',
-          attributes: [],
-          dimension: null,
+          "name": "country",
+          "type": "string",
+          "attributes": [],
+          "dimension": null,
+          "display_name": "Country"
         },
         {
-          name: 'manager',
-          type: 'int',
-          attributes: [],
-          dimension: null,
+          "name": "manager",
+          "type": "int",
+          "attributes": [],
+          "dimension": null,
+          "display_name": "Manager"
         },
         {
-          name: 'contractor_id',
-          type: 'int',
-          attributes: [],
-          dimension: null,
-        },
-      ],
-      updated_at: '2023-08-21T16:48:55.594603+00:00',
-      materializations: [],
-      parents: [
-        {
-          name: 'default.hard_hats',
-        },
-      ],
+          "name": "contractor_id",
+          "type": "int",
+          "attributes": [],
+          "dimension": null,
+          "display_name": "Contractor Id"
+        }
+        ],
       created_at: '2023-08-21T16:48:55.594537+00:00',
       tags: [],
     },
@@ -1302,6 +1326,7 @@ export const mocks = {
         {
           name: 'default_DOT_avg_repair_price',
           type: 'double',
+          display_name: 'Default DOT avg repair price',
           attributes: [],
           dimension: null,
         },
@@ -1345,6 +1370,7 @@ export const mocks = {
       {
         name: 'dispatcher_id',
         type: 'int',
+        display_name: 'Dispatcher Id',
         attributes: [
           {
             attribute_type: {
@@ -1358,12 +1384,14 @@ export const mocks = {
       {
         name: 'company_name',
         type: 'string',
+        display_name: 'Company Name',
         attributes: [],
         dimension: null,
       },
       {
         name: 'phone',
         type: 'string',
+        display_name: 'Phone',
         attributes: [],
         dimension: null,
       },
@@ -1394,4 +1422,20 @@ export const mocks = {
       display_name: 'Default: Num Repair Orders',
     },
   ],
+  tags: [
+    {
+      description: 'Financial-related reports',
+      display_name: 'Financial Reports',
+      tag_metadata: {},
+      name: 'report.financials',
+      tag_type: 'reports',
+    },
+    {
+      description: 'Forecasting reports',
+      display_name: 'Forecasting Reports',
+      tag_metadata: {},
+      name: 'reports.forecasts',
+      tag_type: 'reports',
+    },
+  ],
 };