datajunction-ui 0.0.1-a45 → 0.0.1-a45.dev14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a45",
+  "version": "0.0.1-a45.dev14",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -69,6 +69,7 @@
     "react": "18.2.0",
     "react-app-polyfill": "3.0.0",
     "react-cookie": "4.1.1",
+    "react-diff-view": "3.2.1",
     "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
     "react-i18next": "11.18.6",
@@ -96,6 +97,7 @@
     "ts-loader": "9.4.2",
     "ts-node": "10.9.1",
     "typescript": "4.6.4",
+    "unidiff": "1.0.4",
     "web-vitals": "2.1.4",
     "webpack": "5.81.0",
     "webpack-cli": "5.0.2",

package/src/app/components/NodeListActions.jsx

@@ -0,0 +1,69 @@
+import DJClientContext from '../providers/djclient';
+import * as React from 'react';
+import DeleteIcon from '../icons/DeleteIcon';
+import EditIcon from '../icons/EditIcon';
+import { Form, Formik } from 'formik';
+import { useContext } from 'react';
+import { displayMessageAfterSubmit } from '../../utils/form';
+
+export default function NodeListActions({ nodeName }) {
+  const [editButton, setEditButton] = React.useState(<EditIcon />);
+  const [deleteButton, setDeleteButton] = React.useState(<DeleteIcon />);
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const deleteNode = async (values, { setStatus }) => {
+    if (
+      !window.confirm('Deleting node ' + values.nodeName + '. Are you sure?')
+    ) {
+      return;
+    }
+    const { status, json } = await djClient.deactivate(values.nodeName);
+    if (status === 200 || status === 201 || status === 204) {
+      setStatus({
+        success: <>Successfully deleted node {values.nodeName}</>,
+      });
+      setEditButton(''); // hide the Edit button
+      setDeleteButton(''); // hide the Delete button
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  const initialValues = {
+    nodeName: nodeName,
+  };
+
+  return (
+    <div>
+      <a href={`/nodes/${nodeName}/edit`} style={{ marginLeft: '0.5rem' }}>
+        {editButton}
+      </a>
+      <Formik initialValues={initialValues} onSubmit={deleteNode}>
+        {function Render({ status, setFieldValue }) {
+          return (
+            <Form className="deleteNode">
+              {displayMessageAfterSubmit(status)}
+              {
+                <>
+                  <button
+                    type="submit"
+                    style={{
+                      marginLeft: 0,
+                      all: 'unset',
+                      color: '#005c72',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    {deleteButton}
+                  </button>
+                </>
+              }
+            </Form>
+          );
+        }}
+      </Formik>
+    </div>
+  );
+}

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

@@ -0,0 +1,94 @@
+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 NodeListActions from '../NodeListActions';
+
+describe('<NodeListActions />', () => {
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  const renderElement = djClient => {
+    return render(
+      <DJClientContext.Provider value={djClient}>
+        <NodeListActions nodeName="default.hard_hat" />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  const initializeMockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        deactivate: jest.fn(),
+      },
+    };
+  };
+
+  it('deletes a node when clicked', async () => {
+    global.confirm = () => true;
+    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);
+
+  it('skips a node deletion during confirm', async () => {
+    global.confirm = () => false;
+    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).not.toBeCalled();
+    });
+  }, 60000);
+
+  it('fail deleting a node when clicked', async () => {
+    global.confirm = () => true;
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.deactivate.mockReturnValue({
+      status: 777,
+      json: { message: '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('source.warehouse.schema.some_table'),
+    ).toBeInTheDocument();
+  }, 60000);
+});

package/src/app/icons/CommitIcon.jsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+const CommitIcon = props => (
+  <svg
+    width="2em"
+    height="2em"
+    viewBox="0 0 256 256"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect fill="none" height="256" width="256" />
+    <circle
+      cx="128"
+      cy="128"
+      fill="none"
+      r="52"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+    <line
+      fill="none"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+      x1="8"
+      x2="76"
+      y1="128"
+      y2="128"
+    />
+    <line
+      fill="none"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+      x1="180"
+      x2="248"
+      y1="128"
+      y2="128"
+    />
+  </svg>
+);
+export default CommitIcon;

package/src/app/icons/DiffIcon.jsx

@@ -0,0 +1,63 @@
+const DiffIcon = props => (
+  <svg
+    width="2em"
+    height="2em"
+    viewBox="0 0 256 256"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect fill="none" height="256" width="256" />
+    <circle
+      cx="196"
+      cy="188"
+      fill="none"
+      r="28"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+    <path
+      d="M196,160V119.9a48.2,48.2,0,0,0-14.1-34L144,48"
+      fill="none"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+    <polyline
+      fill="none"
+      points="144 88 144 48 184 48"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+    <circle
+      cx="60"
+      cy="68"
+      fill="none"
+      r="28"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+    <path
+      d="M60,96v40.1a48.2,48.2,0,0,0,14.1,34L112,208"
+      fill="none"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+    <polyline
+      fill="none"
+      points="112 168 112 208 72 208"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+  </svg>
+);
+export default DiffIcon;

package/src/app/index.tsx

@@ -9,6 +9,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 import { NamespacePage } from './pages/NamespacePage/Loadable';
 import { NodePage } from './pages/NodePage/Loadable';
+import RevisionDiff from './pages/NodePage/RevisionDiff';
 import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
 import { CubeBuilderPage } from './pages/CubeBuilderPage/Loadable';
 import { TagPage } from './pages/TagPage/Loadable';
@@ -58,6 +59,10 @@ export function App() {
                           key="edit-cube"
                           element={<CubeBuilderPage />}
                         />
+                        <Route
+                          path=":name/revisions/:revision"
+                          element={<RevisionDiff />}
+                        />
                         <Route path=":name/:tab" element={<NodePage />} />
                       </Route>
 

package/src/app/pages/AddEditNodePage/QueryTesterSection.jsx

@@ -0,0 +1,62 @@
+/**
+ * Query tester component
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+import QueryBuilder from 'react-querybuilder';
+
+export const QueryTesterSection = ({}) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const [fields, setFields] = useState([]);
+  const [filters, setFilters] = useState({
+    combinator: 'and',
+    rules: [],
+  });
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // Select options, i.e., the available dimensions
+  const [selectOptions, setSelectOptions] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (values.query) {
+        const data = await djClient.node(values.upstream_node);
+        setSelectOptions(
+          data.columns.map(col => {
+            return {
+              value: col.name,
+              label: col.name,
+            };
+          }),
+        );
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, values.upstream_node]);
+
+  return (
+    <>
+      <h4>Test Query</h4>
+      <label>Add Filters</label>
+      <QueryBuilder
+        fields={fields}
+        query={filters}
+        onQueryChange={q => setFilters(q)}
+      />
+      <span
+        className="button-3 execute-button"
+        // onClick={getData}
+        role="button"
+        aria-label="RunQuery"
+        aria-hidden="false"
+      >
+        {'Run Query'}
+      </span>
+    </>
+  );
+};

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

@@ -4,8 +4,7 @@ import { useContext, useEffect, useState } from 'react';
 import NodeStatus from '../NodePage/NodeStatus';
 import DJClientContext from '../../providers/djclient';
 import Explorer from '../NamespacePage/Explorer';
-import EditIcon from '../../icons/EditIcon';
-import DeleteNode from '../../components/DeleteNode';
+import NodeListActions from '../../components/NodeListActions';
 import AddNamespacePopover from './AddNamespacePopover';
 
 export function NamespacePage() {
@@ -106,10 +105,7 @@ export function NamespacePage() {
         </span>
       </td>
       <td>
-        <a href={`/nodes/${node?.name}/edit`} style={{ marginLeft: '0.5rem' }}>
-          <EditIcon />
-        </a>
-        <DeleteNode nodeName={node?.name} />
+        <NodeListActions nodeName={node?.name} />
       </td>
     </tr>
   ));