datajunction-ui 0.0.1-a112 → 0.0.1-a113.dev0

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

@@ -146,59 +146,60 @@ describe('NamespacePage', () => {
       </MemoryRouter>,
     );
 
-    await waitFor(
-      () => {
-        expect(mockDjClient.listNodesForLanding).toHaveBeenCalled();
-        expect(screen.getByText('Namespaces')).toBeInTheDocument();
+    // Wait for initial nodes to load
+    await waitFor(() => {
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalled();
+      expect(screen.getByText('Namespaces')).toBeInTheDocument();
+    });
+
+    // Check that it displays namespaces
+    expect(screen.getByText('common')).toBeInTheDocument();
+    expect(screen.getByText('one')).toBeInTheDocument();
+    expect(screen.getByText('fruits')).toBeInTheDocument();
+    expect(screen.getByText('vegetables')).toBeInTheDocument();
+
+    // Check that it renders nodes
+    expect(screen.getByText('Test Node')).toBeInTheDocument();
 
-        // check that it displays namespaces
-        expect(screen.getByText('common')).toBeInTheDocument();
-        expect(screen.getByText('one')).toBeInTheDocument();
-        expect(screen.getByText('fruits')).toBeInTheDocument();
-        expect(screen.getByText('vegetables')).toBeInTheDocument();
+    // --- Sorting ---
+
+    // sort by 'name'
+    fireEvent.click(screen.getByText('name'));
+    await waitFor(() => {
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalledTimes(2);
+    });
 
-        // check that it renders nodes
-        expect(screen.getByText('Test Node')).toBeInTheDocument();
+    // flip direction
+    fireEvent.click(screen.getByText('name'));
+    await waitFor(() => {
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalledTimes(3);
+    });
 
-        // check that it sorts nodes
-        fireEvent.click(screen.getByText('name'));
-        fireEvent.click(screen.getByText('name'));
-        fireEvent.click(screen.getByText('display Name'));
+    // sort by 'displayName'
+    fireEvent.click(screen.getByText('display Name'));
+    await waitFor(() => {
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalledTimes(4);
+    });
 
-        // paginate
-        const previousButton = screen.getByText('← Previous');
-        expect(previousButton).toBeDefined();
-        fireEvent.click(previousButton);
-        const nextButton = screen.getByText('Next →');
-        expect(nextButton).toBeDefined();
-        fireEvent.click(nextButton);
+    // --- Filters ---
 
-        // check that we can filter by node type
-        const selectNodeType = screen.getAllByTestId('select-node-type')[0];
-        expect(selectNodeType).toBeDefined();
-        expect(selectNodeType).not.toBeNull();
-        fireEvent.keyDown(selectNodeType.firstChild, { key: 'ArrowDown' });
-        fireEvent.click(screen.getByText('Source'));
+    // Node type
+    const selectNodeType = screen.getAllByTestId('select-node-type')[0];
+    fireEvent.keyDown(selectNodeType.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Source'));
 
-        // check that we can filter by tag
-        const selectTag = screen.getAllByTestId('select-tag')[0];
-        expect(selectTag).toBeDefined();
-        expect(selectTag).not.toBeNull();
-        fireEvent.keyDown(selectTag.firstChild, { key: 'ArrowDown' });
+    // Tag filter
+    const selectTag = screen.getAllByTestId('select-tag')[0];
+    fireEvent.keyDown(selectTag.firstChild, { key: 'ArrowDown' });
 
-        // check that we can filter by user
-        const selectUser = screen.getAllByTestId('select-user')[0];
-        expect(selectUser).toBeDefined();
-        expect(selectUser).not.toBeNull();
-        fireEvent.keyDown(selectUser.firstChild, { key: 'ArrowDown' });
+    // User filter
+    const selectUser = screen.getAllByTestId('select-user')[0];
+    fireEvent.keyDown(selectUser.firstChild, { key: 'ArrowDown' });
 
-        // click to open and close tab
-        fireEvent.click(screen.getByText('common'));
-        fireEvent.click(screen.getByText('common'));
-      },
-      { timeout: 3000 },
-    );
-  }, 60000);
+    // --- Expand/Collapse Namespace ---
+    fireEvent.click(screen.getByText('common'));
+    fireEvent.click(screen.getByText('common'));
+  });
 
   it('can add new namespace via add namespace popover', async () => {
     mockDjClient.addNamespace.mockReturnValue({

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

@@ -53,34 +53,14 @@ export function NamespacePage() {
   const [hasNextPage, setHasNextPage] = useState(true);
   const [hasPrevPage, setHasPrevPage] = useState(true);
 
-  const sortedNodes = React.useMemo(() => {
-    let sortableData = [...Object.values(state.nodes)];
-    if (sortConfig !== null) {
-      sortableData.sort((a, b) => {
-        if (
-          a[sortConfig.key] < b[sortConfig.key] ||
-          a.current[sortConfig.key] < b.current[sortConfig.key]
-        ) {
-          return sortConfig.direction === ASC ? -1 : 1;
-        }
-        if (
-          a[sortConfig.key] > b[sortConfig.key] ||
-          a.current[sortConfig.key] > b.current[sortConfig.key]
-        ) {
-          return sortConfig.direction === ASC ? 1 : -1;
-        }
-        return 0;
-      });
-    }
-    return sortableData;
-  }, [state.nodes, filters, sortConfig]);
-
   const requestSort = key => {
     let direction = ASC;
     if (sortConfig.key === key && sortConfig.direction === ASC) {
       direction = DESC;
     }
-    setSortConfig({ key, direction });
+    if (sortConfig.key !== key || sortConfig.direction !== direction) {
+      setSortConfig({ key, direction });
+    }
   };
 
   const getClassNamesFor = name => {
@@ -141,6 +121,7 @@ export function NamespacePage() {
         before,
         after,
         50,
+        sortConfig,
       );
 
       setState({
@@ -170,7 +151,8 @@ export function NamespacePage() {
       setRetrieved(true);
     };
     fetchData().catch(console.error);
-  }, [djClient, filters, before, after]);
+  }, [djClient, filters, before, after, sortConfig.key, sortConfig.direction]);
+
   const loadNext = () => {
     if (nextCursor) {
       setAfter(nextCursor);
@@ -185,8 +167,8 @@ export function NamespacePage() {
   };
 
   const nodesList = retrieved ? (
-    sortedNodes.length > 0 ? (
-      sortedNodes.map(node => (
+    state.nodes.length > 0 ? (
+      state.nodes.map(node => (
         <tr key={node.name}>
           <td>
             <a href={'/nodes/' + node.name} className="link-table">

package/src/app/pages/NodePage/AddMaterializationPopover.jsx

@@ -124,7 +124,7 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
           {function Render({ isSubmitting, status, setFieldValue }) {
             return (
               <Form>
-                <h2>Configure Materialization</h2>
+                <h2>Configure Materialization for the Latest Node Version</h2>
                 {displayMessageAfterSubmit(status)}
                 {node.type === 'cube' ? (
                   <span data-testid="job-type">
@@ -195,15 +195,23 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
                     'spark.memory.fraction': '0.3',
                   }}
                 />
-                <button
-                  className="add_node"
-                  type="submit"
-                  aria-label="SaveEditColumn"
-                  aria-hidden="false"
-                  disabled={isSubmitting}
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    marginTop: '20px',
+                  }}
                 >
-                  {isSubmitting ? <LoadingIcon /> : 'Save'}
-                </button>
+                  <button
+                    className="add_node"
+                    type="submit"
+                    aria-label="SaveEditColumn"
+                    aria-hidden="false"
+                    disabled={isSubmitting}
+                  >
+                    {isSubmitting ? <LoadingIcon /> : 'Save'}
+                  </button>
+                </div>
               </Form>
             );
           }}

package/src/app/pages/NodePage/AvailabilityStateBlock.jsx

@@ -0,0 +1,67 @@
+import TableIcon from '../../icons/TableIcon';
+
+export default function AvailabilityStateBlock({ availability }) {
+  return (
+    <table
+      className="card-inner-table table"
+      aria-label="Availability"
+      aria-hidden="false"
+      style={{ marginBottom: '20px' }}
+    >
+      <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+        <tr>
+          <th className="text-start">Output Dataset</th>
+          <th>Valid Through</th>
+          <th>Partitions</th>
+          <th>Links</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <div className={`table__full`} key={availability.table}>
+              <div className="table__header">
+                <TableIcon />{' '}
+                <span className={`entity-info`}>
+                  {availability.catalog + '.' + availability.schema_}
+                </span>
+              </div>
+              <div className={`table__body upstream_tables`}>
+                <a href={availability.url}>{availability.table}</a>
+              </div>
+            </div>
+          </td>
+          <td>{new Date(availability.valid_through_ts).toISOString()}</td>
+          <td>
+            <span
+              className={`badge partition_value`}
+              style={{ fontSize: '100%' }}
+            >
+              <span className={`badge partition_value_highlight`}>
+                {availability.min_temporal_partition?.join(', ') || 'N/A'}
+              </span>
+              to
+              <span className={`badge partition_value_highlight`}>
+                {availability.max_temporal_partition?.join(', ') || 'N/A'}
+              </span>
+            </span>
+          </td>
+          <td>
+            {availability.links &&
+            Object.keys(availability.links).length > 0 ? (
+              Object.entries(availability.links).map(([key, value]) => (
+                <div key={key}>
+                  <a href={value} target="_blank" rel="noreferrer">
+                    {key}
+                  </a>
+                </div>
+              ))
+            ) : (
+              <></>
+            )}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

package/src/app/pages/NodePage/LinkComplexDimensionPopover.jsx

@@ -0,0 +1,139 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Field, Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+import LoadingIcon from '../../icons/LoadingIcon';
+import { MetricQueryField } from '../AddEditNodePage/MetricQueryField';
+
+export default function LinkComplexDimensionPopover({ link, onSubmit }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setPopoverAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setPopoverAnchor]);
+
+  const handleSubmit = async (
+    { node, column, dimension },
+    { setSubmitting, setStatus },
+  ) => {
+    if (referencedDimensionNode && dimension === 'Remove') {
+      await unlinkDimension(
+        node,
+        column,
+        referencedDimensionNode,
+        setStatus,
+      ).then(_ => setSubmitting(false));
+    } else {
+      await linkDimension(node, column, dimension, setStatus).then(_ =>
+        setSubmitting(false),
+      );
+    }
+    onSubmit();
+  };
+
+  const linkDimension = async (node, column, dimension, setStatus) => {
+    const response = await djClient.linkDimension(node, column, dimension);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  const unlinkDimension = async (node, column, currentDimension, setStatus) => {
+    const response = await djClient.unlinkDimension(
+      node,
+      column,
+      currentDimension,
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Removed dimension link!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="LinkDimension"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="client-code"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+        ref={ref}
+      >
+        <Formik
+          initialValues={
+            {
+              // column: column.name,
+              // node: node.name,
+              // dimension: '',
+              // currentDimension: referencedDimensionNode,
+            }
+          }
+          onSubmit={handleSubmit}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="link-dimension">
+                  <label>Join Type</label>
+                  <FormikSelect
+                    selectOptions={[{ value: 'left', label: 'LEFT' }]}
+                    formikFieldName="join_type"
+                    placeholder="Select join type"
+                    className="join_type"
+                    defaultValue={link.join_type || ''}
+                    isMulti={false}
+                  />
+                  <label>Join On</label>
+                  <MetricQueryField
+                    djClient={djClient}
+                    value={link.join_sql ? link.join_sql : ''}
+                  />
+                </span>
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveComplexDimension"
+                  aria-hidden="false"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? <LoadingIcon /> : 'Save'}
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}