datajunction-ui 0.0.75 → 0.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "description": "DataJunction UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/components/DashboardCard.jsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import LoadingIcon from '../icons/LoadingIcon';
+
+/**
+ * Reusable card component for dashboard sections
+ *
+ * @param {Object} props
+ * @param {string} props.title - Section title
+ * @param {string} [props.actionLink] - Optional link URL for "View All" or other action
+ * @param {string} [props.actionText] - Text for action link (defaults to "View All →")
+ * @param {boolean} [props.loading] - Show loading spinner
+ * @param {React.ReactNode} [props.emptyState] - Content to show when empty (if loading is false and no children)
+ * @param {React.ReactNode} props.children - Card content
+ * @param {Object} [props.cardStyle] - Additional styles for the card wrapper
+ * @param {Object} [props.contentStyle] - Additional styles for the content area
+ * @param {boolean} [props.showHeader] - Whether to show the header (defaults to true)
+ */
+export function DashboardCard({
+  title,
+  actionLink,
+  actionText = 'View All →',
+  loading = false,
+  emptyState = null,
+  children,
+  cardStyle = {},
+  contentStyle = {},
+  showHeader = true,
+}) {
+  // Check if children has actual content (not false, null, undefined)
+  const hasContent =
+    React.Children.toArray(children).filter(
+      child => child !== false && child !== null && child !== undefined,
+    ).length > 0;
+  const showEmptyState = !loading && !hasContent && emptyState;
+
+  return (
+    <section>
+      {showHeader && (
+        <div className="section-title-row">
+          <h2 className="settings-section-title">{title}</h2>
+          {actionLink && (
+            <Link to={actionLink} style={{ fontSize: '13px' }}>
+              {actionText}
+            </Link>
+          )}
+        </div>
+      )}
+      <div
+        className="settings-card"
+        style={{
+          padding: '0.75rem',
+          ...cardStyle,
+          ...contentStyle,
+        }}
+      >
+        {loading ? (
+          <div style={{ textAlign: 'center', padding: '2rem' }}>
+            <LoadingIcon />
+          </div>
+        ) : showEmptyState ? (
+          emptyState
+        ) : (
+          children
+        )}
+      </div>
+    </section>
+  );
+}
+
+/**
+ * Empty state component for dashboard cards
+ */
+export function DashboardCardEmpty({ icon, message, action }) {
+  return (
+    <div
+      style={{
+        padding: '2rem',
+        textAlign: 'center',
+        color: '#666',
+        fontSize: '12px',
+      }}
+    >
+      {icon && (
+        <div style={{ fontSize: '24px', marginBottom: '0.5rem' }}>{icon}</div>
+      )}
+      <p>{message}</p>
+      {action}
+    </div>
+  );
+}
+
+export default DashboardCard;

package/src/app/components/NodeComponents.jsx

@@ -0,0 +1,173 @@
+import * as React from 'react';
+
+/**
+ * Reusable node type badge component
+ *
+ * @param {Object} props
+ * @param {string} props.type - Node type (e.g., "METRIC", "DIMENSION")
+ * @param {('small'|'medium'|'large')} [props.size='medium'] - Badge size
+ * @param {boolean} [props.abbreviated=false] - Show only first character
+ * @param {Object} [props.style] - Additional styles
+ */
+export function NodeBadge({
+  type,
+  size = 'medium',
+  abbreviated = false,
+  style = {},
+}) {
+  if (!type) return null;
+
+  const sizeMap = {
+    small: { fontSize: '7px', padding: '0.44em' },
+    medium: { fontSize: '9px', padding: '0.44em' },
+    large: { fontSize: '11px', padding: '0.44em' },
+  };
+
+  const sizeStyles = sizeMap[size] || sizeMap.medium;
+  const displayText = abbreviated ? type.charAt(0) : type;
+
+  return (
+    <span
+      className={`node_type__${type.toLowerCase()} badge node_type`}
+      style={{
+        ...sizeStyles,
+        flexShrink: 0,
+        ...style,
+      }}
+    >
+      {displayText}
+    </span>
+  );
+}
+
+/**
+ * Reusable node link component
+ *
+ * @param {Object} props
+ * @param {Object} props.node - Node object with name and current.displayName
+ * @param {('small'|'medium'|'large')} [props.size='medium'] - Link size
+ * @param {boolean} [props.showFullName=false] - Show full node name instead of display name
+ * @param {boolean} [props.ellipsis=false] - Enable text overflow ellipsis
+ * @param {Object} [props.style] - Additional styles
+ */
+export function NodeLink({
+  node,
+  size = 'medium',
+  showFullName = false,
+  ellipsis = false,
+  style = {},
+}) {
+  if (!node?.name) return null;
+
+  const sizeMap = {
+    small: { fontSize: '10px', fontWeight: '500' },
+    medium: { fontSize: '12px', fontWeight: '500' },
+    large: { fontSize: '13px', fontWeight: '500' },
+  };
+
+  const sizeStyles = sizeMap[size] || sizeMap.medium;
+  const displayName = showFullName
+    ? node.name
+    : node.current?.displayName || node.name.split('.').pop();
+
+  const ellipsisStyles = ellipsis
+    ? {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      }
+    : {};
+
+  return (
+    <a
+      href={`/nodes/${node.name}`}
+      style={{
+        ...sizeStyles,
+        textDecoration: 'none',
+        ...ellipsisStyles,
+        ...style,
+      }}
+    >
+      {displayName}
+    </a>
+  );
+}
+
+/**
+ * Combined node display with link and badge
+ *
+ * @param {Object} props
+ * @param {Object} props.node - Node object
+ * @param {('small'|'medium'|'large')} [props.size='medium'] - Overall size
+ * @param {boolean} [props.showBadge=true] - Show type badge
+ * @param {boolean} [props.abbreviatedBadge=false] - Show abbreviated badge
+ * @param {boolean} [props.ellipsis=false] - Enable text overflow ellipsis
+ * @param {string} [props.gap='6px'] - Gap between link and badge
+ * @param {Object} [props.containerStyle] - Additional container styles
+ */
+export function NodeDisplay({
+  node,
+  size = 'medium',
+  showBadge = true,
+  abbreviatedBadge = false,
+  ellipsis = false,
+  gap = '6px',
+  containerStyle = {},
+}) {
+  if (!node) return null;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap,
+        ...containerStyle,
+      }}
+    >
+      <NodeLink node={node} size={size} ellipsis={ellipsis} />
+      {showBadge && node.type && (
+        <NodeBadge
+          type={node.type}
+          size={size}
+          abbreviated={abbreviatedBadge}
+        />
+      )}
+    </div>
+  );
+}
+
+/**
+ * Node chip component - compact display with border
+ * Used in NeedsAttentionSection
+ *
+ * @param {Object} props
+ * @param {Object} props.node - Node object
+ * @param {boolean} [props.abbreviatedBadge=true] - Show abbreviated badge
+ */
+export function NodeChip({ node }) {
+  if (!node) return null;
+
+  return (
+    <a
+      href={`/nodes/${node.name}`}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '3px',
+        padding: '2px 6px',
+        fontSize: '10px',
+        border: '1px solid var(--border-color, #ddd)',
+        borderRadius: '3px',
+        textDecoration: 'none',
+        color: 'inherit',
+        backgroundColor: 'var(--card-bg, #f8f9fa)',
+        whiteSpace: 'nowrap',
+        flexShrink: 0,
+      }}
+    >
+      <NodeBadge type={node.type} size="small" abbreviated={true} />
+      {node.current?.displayName || node.name.split('.').pop()}
+    </a>
+  );
+}

package/src/app/components/NodeListActions.jsx

@@ -39,14 +39,19 @@ export default function NodeListActions({ nodeName, iconSize = 20 }) {
   }
 
   return (
-    <div>
-      <a href={`/nodes/${nodeName}/edit`} style={{ marginLeft: '0.5rem' }}>
+    <div
+      style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+    >
+      <a href={`/nodes/${nodeName}/edit`}>
         <EditIcon size={iconSize} />
       </a>
       <Formik initialValues={initialValues} onSubmit={deleteNode}>
         {function Render({ status, setFieldValue }) {
           return (
-            <Form className="deleteNode">
+            <Form
+              className="deleteNode"
+              style={{ display: 'flex', alignItems: 'flex-start' }}
+            >
               {displayMessageAfterSubmit(status)}
               {
                 <>

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

@@ -0,0 +1,262 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { NodeBadge, NodeLink, NodeDisplay, NodeChip } from '../NodeComponents';
+
+describe('NodeComponents', () => {
+  describe('<NodeBadge />', () => {
+    it('should render badge with node type', () => {
+      render(<NodeBadge type="METRIC" />);
+      expect(screen.getByText('METRIC')).toBeInTheDocument();
+    });
+
+    it('should return null when no type provided', () => {
+      const { container } = render(<NodeBadge />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('should render abbreviated badge', () => {
+      render(<NodeBadge type="METRIC" abbreviated={true} />);
+      expect(screen.getByText('M')).toBeInTheDocument();
+    });
+
+    it('should apply small size styles', () => {
+      render(<NodeBadge type="METRIC" size="small" />);
+      const badge = screen.getByText('METRIC');
+      expect(badge).toHaveStyle({ fontSize: '7px' });
+    });
+
+    it('should apply medium size styles', () => {
+      render(<NodeBadge type="METRIC" size="medium" />);
+      const badge = screen.getByText('METRIC');
+      expect(badge).toHaveStyle({ fontSize: '9px' });
+    });
+
+    it('should apply large size styles', () => {
+      render(<NodeBadge type="METRIC" size="large" />);
+      const badge = screen.getByText('METRIC');
+      expect(badge).toHaveStyle({ fontSize: '11px' });
+    });
+
+    it('should use medium as default when invalid size provided', () => {
+      render(<NodeBadge type="METRIC" size="invalid" />);
+      const badge = screen.getByText('METRIC');
+      expect(badge).toHaveStyle({ fontSize: '9px' });
+    });
+
+    it('should apply custom styles', () => {
+      render(<NodeBadge type="METRIC" style={{ color: 'red' }} />);
+      const badge = screen.getByText('METRIC');
+      expect(badge).toHaveStyle({ color: 'red' });
+    });
+
+    it('should have correct class name', () => {
+      render(<NodeBadge type="METRIC" />);
+      const badge = screen.getByText('METRIC');
+      expect(badge).toHaveClass('node_type__metric');
+      expect(badge).toHaveClass('badge');
+      expect(badge).toHaveClass('node_type');
+    });
+  });
+
+  describe('<NodeLink />', () => {
+    const mockNode = {
+      name: 'default.my_metric',
+      type: 'METRIC',
+      current: {
+        displayName: 'My Metric',
+      },
+    };
+
+    it('should render link with display name', () => {
+      render(<NodeLink node={mockNode} />);
+      expect(screen.getByText('My Metric')).toBeInTheDocument();
+    });
+
+    it('should return null when no node provided', () => {
+      const { container } = render(<NodeLink />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('should return null when node has no name', () => {
+      const { container } = render(<NodeLink node={{}} />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('should show full name when showFullName is true', () => {
+      render(<NodeLink node={mockNode} showFullName={true} />);
+      expect(screen.getByText('default.my_metric')).toBeInTheDocument();
+    });
+
+    it('should use last part of name when no display name', () => {
+      const nodeWithoutDisplayName = {
+        name: 'default.my_metric',
+        type: 'METRIC',
+      };
+      render(<NodeLink node={nodeWithoutDisplayName} />);
+      expect(screen.getByText('my_metric')).toBeInTheDocument();
+    });
+
+    it('should apply ellipsis styles when enabled', () => {
+      render(<NodeLink node={mockNode} ellipsis={true} />);
+      const link = screen.getByText('My Metric');
+      expect(link).toHaveStyle({
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      });
+    });
+
+    it('should not apply ellipsis styles when disabled', () => {
+      render(<NodeLink node={mockNode} ellipsis={false} />);
+      const link = screen.getByText('My Metric');
+      expect(link).not.toHaveStyle({ overflow: 'hidden' });
+    });
+
+    it('should apply small size styles', () => {
+      render(<NodeLink node={mockNode} size="small" />);
+      const link = screen.getByText('My Metric');
+      expect(link).toHaveStyle({ fontSize: '10px', fontWeight: '500' });
+    });
+
+    it('should apply medium size styles', () => {
+      render(<NodeLink node={mockNode} size="medium" />);
+      const link = screen.getByText('My Metric');
+      expect(link).toHaveStyle({ fontSize: '12px', fontWeight: '500' });
+    });
+
+    it('should apply large size styles', () => {
+      render(<NodeLink node={mockNode} size="large" />);
+      const link = screen.getByText('My Metric');
+      expect(link).toHaveStyle({ fontSize: '13px', fontWeight: '500' });
+    });
+
+    it('should use medium as default when invalid size provided', () => {
+      render(<NodeLink node={mockNode} size="invalid" />);
+      const link = screen.getByText('My Metric');
+      expect(link).toHaveStyle({ fontSize: '12px' });
+    });
+
+    it('should apply custom styles', () => {
+      render(<NodeLink node={mockNode} style={{ color: 'blue' }} />);
+      const link = screen.getByText('My Metric');
+      expect(link).toHaveStyle({ color: 'blue' });
+    });
+
+    it('should link to correct node page', () => {
+      render(<NodeLink node={mockNode} />);
+      const link = screen.getByText('My Metric');
+      expect(link).toHaveAttribute('href', '/nodes/default.my_metric');
+    });
+  });
+
+  describe('<NodeDisplay />', () => {
+    const mockNode = {
+      name: 'default.my_metric',
+      type: 'METRIC',
+      current: {
+        displayName: 'My Metric',
+      },
+    };
+
+    it('should render both link and badge', () => {
+      render(<NodeDisplay node={mockNode} />);
+      expect(screen.getByText('My Metric')).toBeInTheDocument();
+      expect(screen.getByText('METRIC')).toBeInTheDocument();
+    });
+
+    it('should return null when no node provided', () => {
+      const { container } = render(<NodeDisplay />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('should hide badge when showBadge is false', () => {
+      render(<NodeDisplay node={mockNode} showBadge={false} />);
+      expect(screen.getByText('My Metric')).toBeInTheDocument();
+      expect(screen.queryByText('METRIC')).not.toBeInTheDocument();
+    });
+
+    it('should show abbreviated badge', () => {
+      render(<NodeDisplay node={mockNode} abbreviatedBadge={true} />);
+      expect(screen.getByText('M')).toBeInTheDocument();
+    });
+
+    it('should apply ellipsis to link', () => {
+      render(<NodeDisplay node={mockNode} ellipsis={true} />);
+      const link = screen.getByText('My Metric');
+      expect(link).toHaveStyle({ overflow: 'hidden' });
+    });
+
+    it('should apply custom gap', () => {
+      const { container } = render(<NodeDisplay node={mockNode} gap="10px" />);
+      const wrapper = container.firstChild;
+      expect(wrapper).toHaveStyle({ gap: '10px' });
+    });
+
+    it('should apply custom container styles', () => {
+      const { container } = render(
+        <NodeDisplay
+          node={mockNode}
+          containerStyle={{ backgroundColor: 'red' }}
+        />,
+      );
+      const wrapper = container.firstChild;
+      expect(wrapper).toHaveStyle({ backgroundColor: 'red' });
+    });
+
+    it('should not show badge when node has no type', () => {
+      const nodeWithoutType = {
+        name: 'default.my_metric',
+        current: { displayName: 'My Metric' },
+      };
+      render(<NodeDisplay node={nodeWithoutType} />);
+      expect(screen.getByText('My Metric')).toBeInTheDocument();
+      expect(screen.queryByText('METRIC')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('<NodeChip />', () => {
+    const mockNode = {
+      name: 'default.my_metric',
+      type: 'METRIC',
+      current: {
+        displayName: 'My Metric',
+      },
+    };
+
+    it('should render chip with badge and name', () => {
+      render(<NodeChip node={mockNode} />);
+      expect(screen.getByText('M')).toBeInTheDocument(); // abbreviated badge
+      expect(screen.getByText('My Metric')).toBeInTheDocument();
+    });
+
+    it('should return null when no node provided', () => {
+      const { container } = render(<NodeChip />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('should use last part of name when no display name', () => {
+      const nodeWithoutDisplayName = {
+        name: 'default.my_metric',
+        type: 'METRIC',
+      };
+      render(<NodeChip node={nodeWithoutDisplayName} />);
+      expect(screen.getByText('my_metric')).toBeInTheDocument();
+    });
+
+    it('should link to correct node page', () => {
+      const { container } = render(<NodeChip node={mockNode} />);
+      const link = container.querySelector('a');
+      expect(link).toHaveAttribute('href', '/nodes/default.my_metric');
+    });
+
+    it('should have compact styling', () => {
+      const { container } = render(<NodeChip node={mockNode} />);
+      const link = container.querySelector('a');
+      expect(link).toHaveStyle({
+        fontSize: '10px',
+        padding: '2px 6px',
+        whiteSpace: 'nowrap',
+      });
+    });
+  });
+});