datajunction-ui 0.0.1-a1

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/providers/djclient.jsx

@@ -0,0 +1,5 @@
+import { DataJunctionAPI } from '../services/DJService';
+import * as React from 'react';
+
+const DJClientContext = React.createContext({ DataJunctionAPI });
+export default DJClientContext;