datajunction-ui 0.0.1-a45.dev5 → 0.0.1-a46

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

@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react';
-import ClientCodePopover from './ClientCodePopover';
 import TableIcon from '../../icons/TableIcon';
 import AddMaterializationPopover from './AddMaterializationPopover';
 import * as React from 'react';
 import AddBackfillPopover from './AddBackfillPopover';
+import { labelize } from '../../../utils/form';
+import NodeMaterializationDelete from '../../components/NodeMaterializationDelete';
 
 const cronstrue = require('cronstrue');
 
@@ -18,17 +19,6 @@ export default function NodeMaterializationTab({ node, djClient }) {
     };
     fetchData().catch(console.error);
   }, [djClient, node]);
-  //
-  // const rangePartition = partition => {
-  //   return (
-  //     <div>
-  //       <span className="badge partition_value">
-  //         <span className="badge partition_value">{partition.range[0]}</span>to
-  //         <span className="badge partition_value">{partition.range[1]}</span>
-  //       </span>
-  //     </div>
-  //   );
-  // };
 
   const partitionColumnsMap = node
     ? Object.fromEntries(
@@ -47,116 +37,195 @@ export default function NodeMaterializationTab({ node, djClient }) {
 
   const materializationRows = materializations => {
     return materializations.map(materialization => (
-      <tr key={materialization.name}>
-        <td className="text-start node_name">
-          <span className={`badge cron`}>{materialization.schedule}</span>
-          <div className={`cron-description`}>{cron(materialization)} </div>
-        </td>
-        <td>
-          {materialization.job?.replace('MaterializationJob', '').toUpperCase()}
-        </td>
-        <td>{materialization.strategy?.toUpperCase()}</td>
-        <td>
-          {node.columns
-            .filter(col => col.partition !== null)
-            .map(column => {
-              return (
-                <div className="partition__full" key={column.name}>
-                  <div className="partition__header">{column.display_name}</div>
-                  <div className="partition__body">
-                    <code>{column.name}</code>
-                    <span className="badge partition_value">
-                      {column.partition.type_}
-                    </span>
-                  </div>
-                </div>
-              );
-            })}
-        </td>
-        <td>
-          {materialization.output_tables.map(table => (
-            <div className={`table__full`} key={table}>
-              <div className="table__header">
-                <TableIcon />{' '}
-                <span className={`entity-info`}>
-                  {table.split('.')[0] + '.' + table.split('.')[1]}
-                </span>
-              </div>
-              <div className={`table__body upstream_tables`}>
-                {table.split('.')[2]}
-              </div>
+      <>
+        <div className="tr">
+          <div key={materialization.name} style={{ fontSize: 'large' }}>
+            <div
+              className="text-start node_name td"
+              style={{ fontWeight: '600' }}
+            >
+              {materialization.job
+                ?.replace('MaterializationJob', '')
+                .match(/[A-Z][a-z]+/g)
+                .join(' ')}
             </div>
-          ))}
-        </td>
-        {materializations[0].strategy === 'incremental_time' ? (
-          <td>
-            {materialization.backfills.map(backfill => (
-              <a href={backfill.urls[0]} className="partitionLink">
-                <div
-                  className="partition__full"
-                  key={backfill.spec.column_name}
-                >
-                  <div className="partition__header">
-                    {partitionColumnsMap[backfill.spec.column_name]}
-                  </div>
-                  <div className="partition__body">
-                    <span className="badge partition_value">
-                      {backfill.spec.range[0]}
-                    </span>
-                    to
-                    <span className="badge partition_value">
-                      {backfill.spec.range[1]}
-                    </span>
+            <div className="td">
+              <NodeMaterializationDelete
+                nodeName={node.name}
+                materializationName={materialization.name}
+              />
+            </div>
+            <div className="td">
+              <span className={`badge cron`}>{materialization.schedule}</span>
+              <div className={`cron-description`}>{cron(materialization)} </div>
+            </div>
+            <div className="td">
+              <span className={`badge strategy`}>
+                {labelize(materialization.strategy)}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div style={{ display: 'table-row' }}>
+          <div style={{ display: 'inline-flex' }}>
+            <ul className="backfills">
+              <li className="backfill">
+                <div className="backfills_header">Output Tables</div>{' '}
+                {materialization.output_tables.map(table => (
+                  <div className={`table__full`} key={table}>
+                    <div className="table__header">
+                      <TableIcon />{' '}
+                      <span className={`entity-info`}>
+                        {table.split('.')[0] + '.' + table.split('.')[1]}
+                      </span>
+                    </div>
+                    <div className={`table__body upstream_tables`}>
+                      {table.split('.')[2]}
+                    </div>
                   </div>
-                </div>
-              </a>
-            ))}
-            <AddBackfillPopover node={node} materialization={materialization} />
-          </td>
-        ) : (
-          <></>
-        )}
-        <td>
-          {materialization.urls.map((url, idx) => (
-            <a href={url} key={`url-${idx}`}>
-              [{idx + 1}]
-            </a>
-          ))}
-        </td>
-        <td>
-          <ClientCodePopover code={materialization.clientCode} />
-        </td>
-      </tr>
+                ))}
+              </li>
+            </ul>
+          </div>
+
+          <div style={{ display: 'inline-flex' }}>
+            <ul className="backfills">
+              <li>
+                <div className="backfills_header">Workflows</div>{' '}
+                <ul>
+                  {materialization.urls.map((url, idx) => (
+                    <li style={{ listStyle: 'none' }} key={idx}>
+                      <div
+                        className="partitionLink"
+                        style={{ fontSize: 'revert' }}
+                      >
+                        <a
+                          href={url}
+                          key={`url-${idx}`}
+                          className=""
+                          target="blank"
+                        >
+                          {idx === 0 ? 'main' : 'backfill'}
+                        </a>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </li>
+            </ul>
+          </div>
+
+          <div style={{ display: 'inline-flex' }}>
+            <ul className="backfills">
+              <li className="backfill">
+                <details open>
+                  <summary>
+                    <span className="backfills_header">Backfills</span>{' '}
+                  </summary>
+                  {materialization.strategy === 'incremental_time' ? (
+                    <ul>
+                      <li>
+                        <AddBackfillPopover
+                          node={node}
+                          materialization={materialization}
+                        />
+                      </li>
+                      {materialization.backfills.map(backfill => (
+                        <li className="backfill">
+                          <div className="partitionLink">
+                            <a href={backfill.urls[0]}>
+                              {backfill.spec.map(partition => {
+                                const partitionBody =
+                                  'range' in partition &&
+                                  partition['range'] !== null ? (
+                                    <>
+                                      <span className="badge partition_value">
+                                        {partition.range[0]}
+                                      </span>
+                                      to
+                                      <span className="badge partition_value">
+                                        {partition.range[1]}
+                                      </span>
+                                    </>
+                                  ) : (
+                                    <span className="badge partition_value">
+                                      {partition.values.join(', ')}
+                                    </span>
+                                  );
+                                return (
+                                  <>
+                                    <div>
+                                      {
+                                        partitionColumnsMap[
+                                          partition.column_name.replaceAll(
+                                            '_DOT_',
+                                            '.',
+                                          )
+                                        ]
+                                      }{' '}
+                                      {partitionBody}
+                                    </div>
+                                  </>
+                                );
+                              })}
+                            </a>
+                          </div>
+                        </li>
+                      ))}
+                    </ul>
+                  ) : (
+                    <ul>
+                      <li>N/A</li>
+                    </ul>
+                  )}
+                </details>
+              </li>
+            </ul>
+          </div>
+          <div className="td">
+            <ul className="backfills">
+              <li className="backfill">
+                <div className="backfills_header">Partitions</div>{' '}
+                <ul>
+                  {node.columns
+                    .filter(col => col.partition !== null)
+                    .map(column => {
+                      return (
+                        <li>
+                          <div className="partitionLink">
+                            {column.display_name}
+                            <span className="badge partition_value">
+                              {column.partition.type_}
+                            </span>
+                          </div>
+                        </li>
+                      );
+                    })}
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </>
     ));
   };
   return (
     <>
-      <div className="table-vertical">
+      <div
+        className="table-vertical"
+        role="table"
+        aria-label="Materializations"
+      >
         <div>
           <h2>Materializations</h2>
           {node ? <AddMaterializationPopover node={node} /> : <></>}
           {materializations.length > 0 ? (
-            <table
+            <div
               className="card-inner-table table"
               aria-label="Materializations"
               aria-hidden="false"
             >
-              <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-                <tr>
-                  <th className="text-start">Schedule</th>
-                  <th>Job Type</th>
-                  <th>Strategy</th>
-                  <th>Partitions</th>
-                  <th>Intended Output Tables</th>
-                  {materializations[0].strategy === 'incremental_time' ? (
-                    <th>Backfills</th>
-                  ) : (
-                    <></>
-                  )}
-                  <th>URLs</th>
-                </tr>
-              </thead>
-              <tbody>
+              <div style={{ display: 'table' }}>
                 {materializationRows(
                   materializations.filter(
                     materialization =>
@@ -166,8 +235,8 @@ export default function NodeMaterializationTab({ node, djClient }) {
                       ),
                   ),
                 )}
-              </tbody>
-            </table>
+              </div>
+            </div>
           ) : (
             <div className="message alert" style={{ marginTop: '10px' }}>
               No materialization workflows configured for this node.

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

@@ -1,28 +1,101 @@
-import { Component } from 'react';
+import { Component, useContext, useEffect, useRef, useState } from 'react';
 import ValidIcon from '../../icons/ValidIcon';
 import InvalidIcon from '../../icons/InvalidIcon';
+import DJClientContext from '../../providers/djclient';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import markdown from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown';
+import * as React from 'react';
+import { AlertMessage } from '../AddEditNodePage/AlertMessage';
+import AlertIcon from '../../icons/AlertIcon';
+import { labelize } from '../../../utils/form';
 
-export default class NodeStatus extends Component {
-  render() {
-    const { node } = this.props;
-    return (
+SyntaxHighlighter.registerLanguage('markdown', markdown);
+
+export default function NodeStatus({ node, revalidate = true }) {
+  const MAX_ERROR_LENGTH = 200;
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [validation, setValidation] = useState([]);
+
+  const [codeAnchor, setCodeAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (revalidate) {
+      const fetchData = async () => {
+        setValidation(await djClient.revalidate(node.name));
+      };
+      fetchData().catch(console.error);
+    }
+  }, [djClient, node, revalidate]);
+
+  const displayValidation =
+    revalidate && validation?.errors?.length > 0 ? (
       <>
-        {node?.status === 'valid' ? (
-          <span
-            className="status__valid status"
-            style={{ alignContent: 'center' }}
-          >
-            <ValidIcon />
-          </span>
-        ) : (
-          <span
-            className="status__invalid status"
-            style={{ alignContent: 'center' }}
-          >
-            <InvalidIcon />
-          </span>
-        )}
+        <button
+          className="badge"
+          style={{
+            backgroundColor: '#b34b00',
+            fontSize: '15px',
+            outline: '0',
+            border: '0',
+            cursor: 'pointer',
+          }}
+          onClick={() => setCodeAnchor(!codeAnchor)}
+        >
+          ⚠ {validation?.errors?.length} error
+          {validation?.errors?.length > 1 ? 's' : ''}
+        </button>
+        <div
+          className="popover"
+          ref={ref}
+          style={{
+            display: codeAnchor === false ? 'none' : 'block',
+            border: 'none',
+            paddingTop: '0px !important',
+            marginTop: '0px',
+            backgroundColor: 'transparent',
+          }}
+        >
+          {validation?.errors?.map((error, idx) => (
+            <div className="validation_error">
+              <b
+                style={{
+                  color: '#b34b00',
+                }}
+              >
+                {labelize(error.type.toLowerCase())}:
+              </b>{' '}
+              {error.message.length > MAX_ERROR_LENGTH
+                ? error.message.slice(0, MAX_ERROR_LENGTH - 1) + '...'
+                : error.message}
+            </div>
+          ))}
+        </div>
       </>
+    ) : (
+      <></>
     );
-  }
+
+  return (
+    <>
+      {revalidate && validation?.errors?.length > 0 ? (
+        displayValidation
+      ) : validation?.status === 'valid' || node?.status === 'valid' ? (
+        <span
+          className="status__valid status"
+          style={{ alignContent: 'center' }}
+        >
+          <ValidIcon />
+        </span>
+      ) : (
+        <span
+          className="status__invalid status"
+          style={{ alignContent: 'center' }}
+        >
+          <InvalidIcon />
+        </span>
+      )}
+    </>
+  );
 }

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Field } from 'formik';
+
+export default function PartitionValueForm({ col, materialization }) {
+  if (col.partition.type_ === 'temporal') {
+    return (
+      <>
+        <div
+          className="partition__full"
+          key={col.name}
+          style={{ width: '50%' }}
+        >
+          <div className="partition__header">{col.display_name}</div>
+          <div className="partition__body">
+            <span style={{ padding: '0.5rem' }}>From</span>{' '}
+            <Field
+              type="text"
+              name={`partitionValues.['${col.name}'].from`}
+              id={`${col.name}.from`}
+              placeholder="20230101"
+              default="20230101"
+              style={{ width: '7rem', paddingRight: '1rem' }}
+            />{' '}
+            <span style={{ padding: '0.5rem' }}>To</span>
+            <Field
+              type="text"
+              name={`partitionValues.['${col.name}'].to`}
+              id={`${col.name}.to`}
+              placeholder="20230102"
+              default="20230102"
+              style={{ width: '7rem' }}
+            />
+          </div>
+        </div>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <div
+          className="partition__full"
+          key={col.name}
+          style={{ width: '50%' }}
+        >
+          <div className="partition__header">{col.display_name}</div>
+          <div className="partition__body">
+            <Field
+              type="text"
+              name={`partitionValues.['${col.name}']`}
+              id={col.name}
+              placeholder=""
+              default=""
+              style={{ width: '7rem', paddingRight: '1rem' }}
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+}

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

@@ -149,7 +149,7 @@ export default function RevisionDiff() {
           </div>
           {Object.keys(diffObjects).map(field => {
             return (
-              <div className="diff">
+              <div className="diff" aria-label={'DiffView'} role={'gridcell'}>
                 <h4>
                   {labelize(field)}{' '}
                   <small className="no-change-banner">

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { render, fireEvent, waitFor, screen } from '@testing-library/react';
-import EditColumnPopover from '../EditColumnPopover';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import DJClientContext from '../../../providers/djclient';
 import AddBackfillPopover from '../AddBackfillPopover';
 import { mocks } from '../../../../mocks/mockNodes';
@@ -11,6 +10,17 @@ const mockDjClient = {
   },
 };
 
+let reloadMock = jest.fn();
+
+beforeEach(() => {
+  delete window.location;
+  window.location = { reload: reloadMock };
+});
+
+afterEach(() => {
+  reloadMock.mockClear();
+});
+
 describe('<AddBackfillPopover />', () => {
   it('renders correctly and handles form submission', async () => {
     // Mock onSubmit function
@@ -25,7 +35,7 @@ describe('<AddBackfillPopover />', () => {
     const { getByLabelText, getByText } = render(
       <DJClientContext.Provider value={mockDjClient}>
         <AddBackfillPopover
-          node={mocks.mockMetricNode}
+          node={mocks.mockTransformNode}
           materialization={mocks.nodeMaterializations}
           onSubmit={onSubmitMock}
         />

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

@@ -29,6 +29,7 @@ describe('<NodePage />', () => {
         history: jest.fn(),
         revisions: jest.fn(),
         materializations: jest.fn(),
+        materializationInfo: jest.fn(),
         sql: jest.fn(),
         cube: jest.fn(),
         compiledSql: jest.fn(),
@@ -88,6 +89,7 @@ describe('<NodePage />', () => {
       created_at: '2023-08-21T16:48:56.932162+00:00',
       tags: [{ name: 'purpose', display_name: 'Purpose' }],
       primary_key: [],
+      incompatible_druid_functions: ['IF'],
       createNodeClientCode:
         'dj = DJBuilder(DJ_URL)\n\navg_repair_price = dj.create_metric(\n    description="Average repair price",\n    display_name="Default: Avg Repair Price",\n    name="default.avg_repair_price",\n    primary_key=[],\n    query="""SELECT  avg(price) default_DOT_avg_repair_price \n FROM default.repair_order_details\n\n"""\n)',
       dimensions: [
@@ -603,13 +605,17 @@ describe('<NodePage />', () => {
 
   it('renders the NodeMaterialization tab with materializations correctly', async () => {
     const djClient = mockDJClient();
-    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
+    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockTransformNode);
+    // djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
     djClient.DataJunctionAPI.materializations.mockReturnValue(
       mocks.nodeMaterializations,
     );
 
+    djClient.DataJunctionAPI.materializationInfo.mockReturnValue(
+      mocks.materializationInfo,
+    );
+
     const element = (
       <DJClientContext.Provider value={djClient}>
         <NodePage />
@@ -617,7 +623,9 @@ describe('<NodePage />', () => {
     );
     render(
       <MemoryRouter
-        initialEntries={['/nodes/default.num_repair_orders/materializations']}
+        initialEntries={[
+          '/nodes/default.repair_order_transform/materializations',
+        ]}
       >
         <Routes>
           <Route path="nodes/:name/:tab" element={element} />
@@ -630,10 +638,10 @@ describe('<NodePage />', () => {
           screen.getByRole('button', { name: 'Materializations' }),
         );
         expect(djClient.DataJunctionAPI.node).toHaveBeenCalledWith(
-          mocks.mockMetricNode.name,
+          mocks.mockTransformNode.name,
         );
         expect(djClient.DataJunctionAPI.materializations).toHaveBeenCalledWith(
-          mocks.mockMetricNode.name,
+          mocks.mockTransformNode.name,
         );
 
         expect(