datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

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

@@ -0,0 +1,151 @@
+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, labelize } from '../../../utils/form';
+
+export default function PartitionColumnPopover({ column, node, 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 savePartition = async (
+    { node, column, partition_type, format, granularity },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    const response = await djClient.setPartition(
+      node,
+      column,
+      partition_type,
+      format,
+      granularity,
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    onSubmit();
+    // window.location.reload();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="PartitionColumn"
+        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,
+            partition_type: '',
+            format: 'yyyyMMdd',
+            granularity: 'day',
+          }}
+          onSubmit={savePartition}
+        >
+          {function Render({ values, isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="edit-partition">
+                  <label htmlFor="partitionType">Partition Type</label>
+                  <Field
+                    as="select"
+                    name="partition_type"
+                    id="partitionType"
+                    placeholder="Partition Type"
+                  >
+                    <option value=""></option>
+                    <option value="temporal">Temporal</option>
+                    <option value="categorical">Categorical</option>
+                  </Field>
+                </span>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <br />
+                <br />
+                {values.partition_type === 'temporal' ? (
+                  <>
+                    <label htmlFor="partitionFormat">Partition Format</label>
+                    <Field
+                      type="text"
+                      name="format"
+                      id="partitionFormat"
+                      placeholder="Optional temporal partition format (ex: yyyyMMdd)"
+                    />
+                    <br />
+                    <br />
+                    <label htmlFor="partitionGranularity">
+                      Partition Granularity
+                    </label>
+                    <Field
+                      as="select"
+                      name="granularity"
+                      id="partitionGranularity"
+                      placeholder="Granularity"
+                    >
+                      <option value="day">Day</option>
+                      <option value="hour">Hour</option>
+                    </Field>
+                  </>
+                ) : (
+                  ''
+                )}
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveEditColumn"
+                  aria-hidden="false"
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,209 @@
+import { useContext, useEffect, useState } from 'react';
+import * as React from 'react';
+import { diffLines, formatLines } from 'unidiff';
+import { parseDiff, Diff, Hunk } from 'react-diff-view';
+
+import { useParams } from 'react-router-dom';
+import DJClientContext from '../../providers/djclient';
+import NamespaceHeader from '../../components/NamespaceHeader';
+import { labelize } from '../../../utils/form';
+import DiffIcon from '../../icons/DiffIcon';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
+
+SyntaxHighlighter.registerLanguage('sql', sql);
+foundation.hljs['padding'] = '2rem';
+
+export default function RevisionDiff() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [revisions, setRevisions] = useState([]);
+
+  const { name, revision } = useParams();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const revisions = await djClient.revisions(name);
+      setRevisions(revisions);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, name]);
+
+  const thisRevision = revisions
+    .map((rev, idx) => [idx, rev])
+    .filter((rev, idx) => {
+      return rev[1].version === revision;
+    });
+  const prevRevision = revisions.filter(
+    (rev, idx) => idx + 1 === thisRevision[0][0],
+  );
+
+  const EMPTY_HUNKS = [];
+
+  const revisionDiff = (older, newer) => {
+    const diffObj = {};
+    const fields = [
+      'display_name',
+      'version',
+      'query',
+      'mode',
+      'status',
+      'description',
+      'columns',
+      // 'catalog',
+      'schema',
+      'table',
+      'updated_at',
+    ];
+    if (older) {
+      for (const key of fields) {
+        if (older[key] && (key !== 'columns' || older.type === 'cube')) {
+          diffObj[key] = {};
+          diffObj[key].diffText = formatLines(
+            diffLines(
+              older
+                ? key === 'columns'
+                  ? older[key].map(col => col.name).join('\n')
+                  : older[key].toString()
+                : '',
+              newer
+                ? key === 'columns'
+                  ? newer[key].map(col => col.name).join('\n')
+                  : newer[key].toString()
+                : '',
+            ),
+            {
+              context: 5000,
+            },
+          );
+          const [diff] = parseDiff(diffObj[key].diffText, {
+            nearbySequences: 'zip',
+          });
+          diffObj[key].diff = diff;
+        }
+      }
+    }
+    return diffObj;
+  };
+
+  const diffObjects = revisionDiff(
+    prevRevision[0],
+    thisRevision[0] ? thisRevision[0][1] : thisRevision[0],
+  );
+
+  return (
+    <div className="node__header">
+      <NamespaceHeader
+        namespace={(prevRevision[0] ? prevRevision[0].name : '')
+          .split('.')
+          .slice(0, -1)
+          .join('.')}
+      />
+      <div className="card">
+        <div className="card-header">
+          <h3
+            className="card-title align-items-start flex-column"
+            style={{ display: 'inline-block' }}
+          >
+            <span
+              className="card-label fw-bold text-gray-800"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="DisplayName"
+            >
+              <a
+                href={'/nodes/' + prevRevision[0]?.name}
+                className=""
+                role="dialog"
+                aria-hidden="false"
+                aria-label="NodeName"
+              >
+                {prevRevision[0]?.name}
+              </a>{' '}
+              <span
+                className={
+                  'node_type__' + prevRevision[0]?.type + ' badge node_type'
+                }
+                role="dialog"
+                aria-hidden="false"
+                aria-label="NodeType"
+              >
+                {prevRevision[0]?.type}
+              </span>
+            </span>
+          </h3>
+          <div>
+            <span
+              className="rounded-pill badge version"
+              style={{ marginLeft: '0.5rem', fontSize: '16px' }}
+            >
+              {prevRevision[0]?.version}
+            </span>
+            <DiffIcon />
+            <span
+              className="rounded-pill badge version"
+              style={{ marginLeft: '0.3rem', fontSize: '16px' }}
+            >
+              {thisRevision[0] ? thisRevision[0][1].version : ''}
+            </span>{' '}
+          </div>
+          {Object.keys(diffObjects).map(field => {
+            return (
+              <div className="diff" aria-label={'DiffView'} role={'gridcell'}>
+                <h4>
+                  {labelize(field)}{' '}
+                  <small className="no-change-banner">
+                    {diffObjects[field]?.diff.hunks.length > 0
+                      ? ''
+                      : 'no change'}
+                  </small>
+                </h4>
+                {diffObjects[field]?.diff.hunks.length > 0 ? (
+                  <Diff
+                    viewType="split"
+                    diffType=""
+                    hunks={diffObjects[field]?.diff.hunks || EMPTY_HUNKS}
+                    tokens={diffObjects[field]?.tokens}
+                  >
+                    {hunks =>
+                      hunks.map(hunk => <Hunk key={hunk.content} hunk={hunk} />)
+                    }
+                  </Diff>
+                ) : (
+                  <div className="no-change">
+                    {prevRevision[0] ? (
+                      field === 'query' ? (
+                        <>
+                          <SyntaxHighlighter
+                            language="sql"
+                            style={foundation}
+                            wrapLongLines={true}
+                          >
+                            {prevRevision[0].query}
+                          </SyntaxHighlighter>
+                        </>
+                      ) : field === 'columns' ? (
+                        <div>
+                          {prevRevision[0][field].map(col => (
+                            <>
+                              {col.name}
+                              <br />
+                            </>
+                          ))}
+                        </div>
+                      ) : (
+                        prevRevision[0][field].toString()
+                      )
+                    ) : (
+                      ''
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,226 @@
+import { useContext, useState, useRef, useEffect } from 'react';
+import DJClientContext from '../../providers/djclient';
+import EyeIcon from '../../icons/EyeIcon';
+import ExpandedIcon from '../../icons/ExpandedIcon';
+import CollapsedIcon from '../../icons/CollapsedIcon';
+
+const EVENT_TYPES = ['delete', 'update'];
+
+export default function WatchButton({ node }) {
+  if (!node || !node.name || !node.type) {
+    return null;
+  }
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [selectedEvents, setSelectedEvents] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef();
+
+  // Load existing preferences
+  useEffect(() => {
+    const loadPreferences = async () => {
+      try {
+        const preferences = await djClient.getNotificationPreferences({
+          entity_name: node.name,
+        });
+
+        const matched = preferences.find(item =>
+          item.alert_types.includes('web'),
+        );
+
+        if (matched) {
+          setSelectedEvents(matched.activity_types);
+        }
+      } catch (err) {
+        console.error('Failed to load notification preferences', err);
+      }
+    };
+
+    loadPreferences();
+  }, [djClient, node.name, node.type]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+  const toggleEvent = async event => {
+    const isSelected = selectedEvents.includes(event);
+
+    try {
+      setLoading(true);
+      let updatedEvents;
+
+      if (!isSelected) {
+        updatedEvents = Array.from(new Set([...selectedEvents, event]));
+      } else {
+        updatedEvents = selectedEvents.filter(e => e !== event);
+      }
+
+      if (updatedEvents.length === 0) {
+        await djClient.unsubscribeFromNotifications({
+          entity_type: 'node',
+          entity_name: node.name,
+        });
+      } else {
+        await djClient.subscribeToNotifications({
+          entity_type: 'node',
+          entity_name: node.name,
+          activity_types: updatedEvents,
+          alert_types: ['web'],
+        });
+      }
+
+      setSelectedEvents(updatedEvents);
+    } catch (err) {
+      console.error('Failed to update preference', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleWatchClick = async () => {
+    try {
+      setLoading(true);
+      if (selectedEvents.length === 0) {
+        await djClient.subscribeToNotifications({
+          entity_type: 'node',
+          entity_name: node.name,
+          activity_types: EVENT_TYPES,
+          alert_types: ['web'],
+        });
+        setSelectedEvents(EVENT_TYPES);
+      } else {
+        await djClient.unsubscribeFromNotifications({
+          entity_type: 'node',
+          entity_name: node.name,
+        });
+        setSelectedEvents([]);
+      }
+    } catch (err) {
+      console.error('Watch toggle failed', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      className="btn-group"
+      ref={dropdownRef}
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        verticalAlign: 'middle',
+      }}
+    >
+      <button
+        className="button-3"
+        onClick={handleWatchClick}
+        disabled={loading}
+        style={{
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+          marginRight: 0,
+          height: '2.5rem',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+        }}
+      >
+        <EyeIcon />
+        Watch
+        {selectedEvents.length > 0 && (
+          <span
+            style={{
+              backgroundColor: '#e2e6ed',
+              color: '#333',
+              padding: '2px 6px',
+              borderRadius: '999px',
+              fontSize: '0.75rem',
+              fontWeight: 500,
+              lineHeight: 1,
+            }}
+          >
+            {selectedEvents.length}
+          </span>
+        )}
+      </button>
+
+      <button
+        className="button-3"
+        onClick={() => setDropdownOpen(prev => !prev)}
+        disabled={loading}
+        style={{
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          marginLeft: 0,
+          height: '2.5rem',
+        }}
+        aria-label="Toggle dropdown"
+      >
+        {dropdownOpen ? <ExpandedIcon /> : <CollapsedIcon />}
+      </button>
+
+      {dropdownOpen && (
+        <ul
+          className="p-2"
+          style={{
+            display: 'block',
+            minWidth: '220px',
+            position: 'absolute',
+            top: '100%',
+            right: 0,
+            zIndex: 9999,
+            backgroundColor: '#fff',
+            border: '1px solid #ccc',
+            borderRadius: '0.5rem',
+            marginTop: '0.25rem',
+            boxShadow: '0px 6px 16px rgba(0, 0, 0, 0.1)',
+            padding: '0.5rem 0',
+          }}
+        >
+          {EVENT_TYPES.map(event => {
+            const isSelected = selectedEvents.includes(event);
+            return (
+              <li
+                key={event}
+                onClick={() => toggleEvent(event)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  padding: '0.5rem 1rem',
+                  cursor: 'pointer',
+                  backgroundColor: isSelected ? '#f0f4f8' : 'transparent',
+                  fontWeight: isSelected ? '600' : '400',
+                  fontSize: '0.9rem',
+                  color: '#333',
+                  borderLeft: isSelected
+                    ? '4px solid #7983ff'
+                    : '4px solid transparent',
+                  transition: 'background 0.2s',
+                }}
+              >
+                <input
+                  className="form-check-input"
+                  type="checkbox"
+                  checked={isSelected}
+                  readOnly
+                  style={{ marginRight: '0.75rem' }}
+                />
+                {event}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import AddBackfillPopover from '../AddBackfillPopover';
+import { mocks } from '../../../../mocks/mockNodes';
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    runBackfill: jest.fn(),
+  },
+};
+
+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
+    const onSubmitMock = jest.fn();
+
+    mockDjClient.DataJunctionAPI.runBackfill.mockReturnValue({
+      status: 201,
+      json: { message: '' },
+    });
+
+    // Render the component
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddBackfillPopover
+          node={mocks.mockTransformNode}
+          materialization={mocks.nodeMaterializations}
+          onSubmit={onSubmitMock}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    // Open the popover
+    fireEvent.click(getByLabelText('AddBackfill'));
+
+    fireEvent.click(getByText('Save'));
+
+    // Expect setAttributes to be called
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.runBackfill).toHaveBeenCalled();
+      expect(getByText('Saved!')).toBeInTheDocument();
+    });
+  });
+});