datajunction-ui 0.0.75 → 0.0.76

package/src/app/pages/MyWorkspacePage/NeedsAttentionSection.jsx

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import LoadingIcon from '../../icons/LoadingIcon';
+import { NodeChip } from '../../components/NodeComponents';
+
+// Needs Attention Section with single-line categories
+export function NeedsAttentionSection({
+  nodesMissingDescription,
+  invalidNodes,
+  staleDrafts,
+  staleMaterializations,
+  orphanedDimensions,
+  username,
+  hasItems,
+  loading,
+  personalNamespace,
+  hasPersonalNamespace,
+  namespaceLoading,
+}) {
+  const categories = [
+    {
+      id: 'invalid',
+      icon: '❌',
+      label: 'Invalid',
+      nodes: invalidNodes,
+      viewAllLink: `/?ownedBy=${username}&statuses=INVALID`,
+    },
+    {
+      id: 'stale-drafts',
+      icon: '⏰',
+      label: 'Stale Drafts',
+      nodes: staleDrafts,
+      viewAllLink: `/?ownedBy=${username}&mode=DRAFT`,
+    },
+    {
+      id: 'stale-materializations',
+      icon: '📦',
+      label: 'Stale Materializations',
+      nodes: staleMaterializations,
+      viewAllLink: `/?ownedBy=${username}&hasMaterialization=true`,
+    },
+    {
+      id: 'no-description',
+      icon: '📝',
+      label: 'No Description',
+      nodes: nodesMissingDescription,
+      viewAllLink: `/?ownedBy=${username}&missingDescription=true`,
+    },
+    {
+      id: 'orphaned-dimensions',
+      icon: '🔗',
+      label: 'Orphaned Dimensions',
+      nodes: orphanedDimensions,
+      viewAllLink: `/?ownedBy=${username}&orphanedDimension=true`,
+    },
+  ];
+
+  const categoriesList = categories.map(cat => (
+    <div
+      key={cat.id}
+      className="settings-card"
+      style={{ padding: '0.5rem 0.75rem', minWidth: 0 }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '0.3rem',
+        }}
+      >
+        <span style={{ fontSize: '11px', fontWeight: '600', color: '#555' }}>
+          {cat.icon} {cat.label}
+          <span
+            style={{
+              color: cat.nodes.length > 0 ? '#dc3545' : '#666',
+              marginLeft: '4px',
+            }}
+          >
+            ({cat.nodes.length})
+          </span>
+        </span>
+        {cat.nodes.length > 0 && (
+          <Link to={cat.viewAllLink} style={{ fontSize: '10px' }}>
+            View all →
+          </Link>
+        )}
+      </div>
+      {cat.nodes.length > 0 ? (
+        <div style={{ display: 'flex', gap: '0.3rem', overflow: 'hidden' }}>
+          {cat.nodes.slice(0, 10).map(node => (
+            <NodeChip key={node.name} node={node} />
+          ))}
+        </div>
+      ) : (
+        <div style={{ fontSize: '10px', color: '#28a745' }}>✓ All good!</div>
+      )}
+    </div>
+  ));
+
+  return (
+    <section style={{ minWidth: 0, width: '100%' }}>
+      <h2 className="settings-section-title">Needs Attention</h2>
+      <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
+        {loading ? (
+          <div
+            className="settings-card"
+            style={{ textAlign: 'center', padding: '1rem' }}
+          >
+            <LoadingIcon />
+          </div>
+        ) : (
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              width: '100%',
+              gap: '0.5rem',
+            }}
+          >
+            {categoriesList}
+            {/* Personal namespace prompt if missing */}
+            {!namespaceLoading && !hasPersonalNamespace && (
+              <div
+                style={{
+                  padding: '0.75rem',
+                  backgroundColor: 'var(--card-bg, #f8f9fa)',
+                  border: '1px dashed var(--border-color, #dee2e6)',
+                  borderRadius: '6px',
+                  textAlign: 'center',
+                }}
+              >
+                <div style={{ fontSize: '16px', marginBottom: '0.25rem' }}>
+                  📁
+                </div>
+                <div
+                  style={{
+                    fontSize: '11px',
+                    fontWeight: '500',
+                    marginBottom: '0.25rem',
+                  }}
+                >
+                  Set up your namespace
+                </div>
+                <p
+                  style={{
+                    fontSize: '10px',
+                    color: '#666',
+                    marginBottom: '0.5rem',
+                  }}
+                >
+                  Create{' '}
+                  <code
+                    style={{
+                      backgroundColor: '#e9ecef',
+                      padding: '1px 4px',
+                      borderRadius: '3px',
+                      fontSize: '9px',
+                    }}
+                  >
+                    {personalNamespace}
+                  </code>
+                </p>
+                <Link
+                  to={`/namespaces/${personalNamespace}`}
+                  style={{
+                    display: 'inline-block',
+                    padding: '3px 8px',
+                    fontSize: '10px',
+                    backgroundColor: '#28a745',
+                    color: '#fff',
+                    borderRadius: '4px',
+                    textDecoration: 'none',
+                  }}
+                >
+                  Create →
+                </Link>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/app/pages/MyWorkspacePage/NodeList.jsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import NodeListActions from '../../components/NodeListActions';
+import { NodeDisplay } from '../../components/NodeComponents';
+
+// Node List Component
+export function NodeList({ nodes, showUpdatedAt }) {
+  const formatDateTime = dateStr => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div className="node-list">
+      {nodes.map(node => (
+        <div key={node.name} className="subscription-item node-list-item">
+          <div className="node-list-item-content">
+            <div className="node-list-item-display">
+              <NodeDisplay
+                node={node}
+                size="large"
+                ellipsis={true}
+                gap="0.5rem"
+              />
+            </div>
+            <div className="node-list-item-name">{node.name}</div>
+          </div>
+          <div className="node-list-item-actions">
+            {showUpdatedAt && node.current?.updatedAt && (
+              <span className="node-list-item-updated">
+                {formatDateTime(node.current.updatedAt)}
+              </span>
+            )}
+            <div className="node-list-item-actions-wrapper">
+              <NodeListActions nodeName={node.name} />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/app/pages/MyWorkspacePage/NotificationsSection.jsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { formatRelativeTime } from '../../utils/date';
+import DashboardCard, {
+  DashboardCardEmpty,
+} from '../../components/DashboardCard';
+import { NodeBadge } from '../../components/NodeComponents';
+
+// Notifications Section - matches NotificationBell dropdown styling
+export function NotificationsSection({ notifications, username, loading }) {
+  // Group notifications by node
+  const groupedByNode = {};
+  notifications.forEach(entry => {
+    if (!groupedByNode[entry.entity_name]) {
+      groupedByNode[entry.entity_name] = [];
+    }
+    groupedByNode[entry.entity_name].push(entry);
+  });
+
+  // Convert to array and sort by most recent activity
+  const grouped = Object.entries(groupedByNode)
+    .map(([nodeName, entries]) => ({
+      nodeName,
+      entries,
+      mostRecent: entries[0], // Assuming already sorted by date
+      count: entries.length,
+    }))
+    .slice(0, 15);
+
+  const notificationsList = grouped.map(
+    ({ nodeName, entries, mostRecent, count }) => {
+      const version = mostRecent.details?.version;
+      const href = version
+        ? `/nodes/${mostRecent.entity_name}/revisions/${version}`
+        : `/nodes/${mostRecent.entity_name}/history`;
+
+      // Get unique users who made updates
+      const allUsers = entries
+        .map(e => e.user)
+        .filter(u => u != null && u !== '');
+      const users = [...new Set(allUsers)];
+
+      // If no users found, fall back to mostRecent.user
+      const userText =
+        users.length === 0
+          ? mostRecent.user === username
+            ? 'you'
+            : mostRecent.user?.split('@')[0] || 'unknown'
+          : users.length === 1
+          ? users[0] === username
+            ? 'you'
+            : users[0]?.split('@')[0]
+          : users.includes(username)
+          ? `you + ${users.length - 1} other${users.length - 1 > 1 ? 's' : ''}`
+          : `${users.length} users`;
+
+      return (
+        <div
+          key={nodeName}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+            padding: '0.5rem 0',
+            borderBottom: '1px solid var(--border-color, #eee)',
+            fontSize: '12px',
+          }}
+        >
+          <a
+            href={href}
+            style={{
+              fontSize: '13px',
+              fontWeight: '500',
+              textDecoration: 'none',
+              flexShrink: 0,
+            }}
+          >
+            {mostRecent.display_name || mostRecent.entity_name.split('.').pop()}
+          </a>
+          {mostRecent.node_type && (
+            <NodeBadge
+              type={mostRecent.node_type.toUpperCase()}
+              size="medium"
+            />
+          )}
+          <span style={{ color: '#888', whiteSpace: 'nowrap' }}>
+            {count > 1
+              ? `${count} updates`
+              : mostRecent.activity_type?.charAt(0).toUpperCase() +
+                mostRecent.activity_type?.slice(1) +
+                'd'}{' '}
+            by {userText}
+            {' · '}
+            {formatRelativeTime(mostRecent.created_at)}
+          </span>
+        </div>
+      );
+    },
+  );
+
+  return (
+    <DashboardCard
+      title="Notifications"
+      actionLink="/notifications"
+      loading={loading}
+      cardStyle={{ padding: '0', maxHeight: '300px', overflowY: 'auto' }}
+      emptyState={
+        <DashboardCardEmpty
+          icon="🔔"
+          message="No notifications yet."
+          action={
+            <p style={{ fontSize: '11px', marginTop: '0.5rem' }}>
+              Watch nodes to get notified of changes.
+            </p>
+          }
+        />
+      }
+    >
+      {notifications.length > 0 && (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5rem',
+            padding: '0.5rem',
+          }}
+        >
+          {notificationsList}
+        </div>
+      )}
+    </DashboardCard>
+  );
+}

package/src/app/pages/MyWorkspacePage/TypeGroupGrid.jsx

@@ -0,0 +1,209 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { NodeBadge, NodeLink } from '../../components/NodeComponents';
+import NodeListActions from '../../components/NodeListActions';
+
+// Format timestamp to relative time
+function formatRelativeTime(dateStr) {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now - date;
+  const diffMins = Math.floor(diffMs / (1000 * 60));
+  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffMins < 60) return `${diffMins}m`;
+  if (diffHours < 24) return `${diffHours}h`;
+  if (diffDays < 30) return `${diffDays}d`;
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+// Capitalize first letter
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+// Type Card Component
+function TypeCard({ type, nodes, count, username, activeTab }) {
+  const maxDisplay = 10;
+  const displayNodes = nodes.slice(0, maxDisplay);
+  const remaining = count - maxDisplay;
+
+  // Build filter URL based on active tab and type
+  const getFilterUrl = () => {
+    const params = new URLSearchParams();
+
+    if (activeTab === 'owned') {
+      params.append('ownedBy', username);
+      params.append('type', type);
+    } else if (activeTab === 'watched') {
+      // For watched, we'd need a different filter - for now use type only
+      params.append('type', type);
+    } else if (activeTab === 'edited') {
+      params.append('updatedBy', username);
+      params.append('type', type);
+    }
+
+    return `/?${params.toString()}`;
+  };
+
+  return (
+    <div className="type-group-card">
+      <div className="type-group-header">
+        <span className="type-group-title">
+          {capitalize(type)}s ({count})
+        </span>
+      </div>
+
+      <div className="type-group-nodes">
+        {displayNodes.map(node => {
+          const isInvalid = node.status === 'invalid';
+          const isDraft = node.mode === 'draft';
+          const gitRepo = node.gitInfo?.repo;
+          const gitBranch = node.gitInfo?.branch;
+          const defaultBranch = node.gitInfo?.defaultBranch;
+          const isDefaultBranch = gitBranch && gitBranch === defaultBranch;
+          const hasGitInfo = gitRepo || gitBranch;
+
+          return (
+            <div key={node.name} className="type-group-node">
+              <NodeBadge type={node.type} size="small" abbreviated={true} />
+              {isInvalid && (
+                <span
+                  className="type-group-node-status-icon"
+                  title="Invalid node"
+                >
+                  ⚠️
+                </span>
+              )}
+              {isDraft && (
+                <span
+                  className="type-group-node-status-icon"
+                  title="Draft mode"
+                >
+                  📝
+                </span>
+              )}
+              <NodeLink
+                node={node}
+                size="small"
+                ellipsis={true}
+                style={{ flex: 1, minWidth: 0 }}
+              />
+              {hasGitInfo && (
+                <span
+                  className={`type-group-node-git-info ${
+                    isDefaultBranch ? 'type-group-node-git-info--default' : ''
+                  }`}
+                  title={`${gitRepo || ''}${gitRepo && gitBranch ? ' / ' : ''}${
+                    gitBranch || ''
+                  }${isDefaultBranch ? ' (default)' : ''}`}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px',
+                    maxWidth: '200px',
+                  }}
+                >
+                  {isDefaultBranch && (
+                    <span style={{ lineHeight: 1, flexShrink: 0 }}>⭐</span>
+                  )}
+                  {gitRepo && (
+                    <span
+                      style={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        minWidth: 0,
+                      }}
+                    >
+                      {gitRepo}
+                    </span>
+                  )}
+                  {gitRepo && gitBranch && (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="10"
+                      height="10"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      style={{ flexShrink: 0 }}
+                    >
+                      <line x1="6" y1="3" x2="6" y2="15" />
+                      <circle cx="18" cy="6" r="3" />
+                      <circle cx="6" cy="18" r="3" />
+                      <path d="M18 9a9 9 0 0 1-9 9" />
+                    </svg>
+                  )}
+                  {gitBranch && (
+                    <span
+                      style={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        minWidth: 0,
+                      }}
+                    >
+                      {gitBranch}
+                    </span>
+                  )}
+                </span>
+              )}
+              {node.current?.updatedAt && (
+                <span className="type-group-node-time">
+                  {formatRelativeTime(node.current.updatedAt)}
+                </span>
+              )}
+              <div className="type-group-node-actions">
+                <NodeListActions nodeName={node.name} />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {remaining > 0 && (
+        <Link to={getFilterUrl()} className="type-group-more">
+          +{remaining} more →
+        </Link>
+      )}
+    </div>
+  );
+}
+
+// Type Group Grid Component (2-column layout)
+export function TypeGroupGrid({ groupedData, username, activeTab }) {
+  if (!groupedData || groupedData.length === 0) {
+    return (
+      <div
+        style={{
+          padding: '1rem',
+          textAlign: 'center',
+          color: '#666',
+          fontSize: '12px',
+        }}
+      >
+        No nodes to display
+      </div>
+    );
+  }
+
+  return (
+    <div className="type-group-grid">
+      {groupedData.map(group => (
+        <TypeCard
+          key={group.type}
+          type={group.type}
+          nodes={group.nodes}
+          count={group.count}
+          username={username}
+          activeTab={activeTab}
+        />
+      ))}
+    </div>
+  );
+}