datajunction-ui 0.0.18 → 0.0.19

package/src/app/utils/__tests__/date.test.js

@@ -0,0 +1,198 @@
+import { formatRelativeTime, getDateGroup, groupByDate } from '../date';
+
+describe('date utilities', () => {
+  describe('formatRelativeTime', () => {
+    it('returns "just now" for times less than 1 minute ago', () => {
+      const now = new Date();
+      expect(formatRelativeTime(now.toISOString())).toBe('just now');
+
+      const thirtySecondsAgo = new Date(Date.now() - 30000);
+      expect(formatRelativeTime(thirtySecondsAgo.toISOString())).toBe(
+        'just now',
+      );
+    });
+
+    it('returns minutes ago for times less than 1 hour ago', () => {
+      const fiveMinutesAgo = new Date(Date.now() - 5 * 60000);
+      expect(formatRelativeTime(fiveMinutesAgo.toISOString())).toBe('5m ago');
+
+      const thirtyMinutesAgo = new Date(Date.now() - 30 * 60000);
+      expect(formatRelativeTime(thirtyMinutesAgo.toISOString())).toBe(
+        '30m ago',
+      );
+
+      const fiftyNineMinutesAgo = new Date(Date.now() - 59 * 60000);
+      expect(formatRelativeTime(fiftyNineMinutesAgo.toISOString())).toBe(
+        '59m ago',
+      );
+    });
+
+    it('returns hours ago for times less than 24 hours ago', () => {
+      const oneHourAgo = new Date(Date.now() - 1 * 3600000);
+      expect(formatRelativeTime(oneHourAgo.toISOString())).toBe('1h ago');
+
+      const twelveHoursAgo = new Date(Date.now() - 12 * 3600000);
+      expect(formatRelativeTime(twelveHoursAgo.toISOString())).toBe('12h ago');
+
+      const twentyThreeHoursAgo = new Date(Date.now() - 23 * 3600000);
+      expect(formatRelativeTime(twentyThreeHoursAgo.toISOString())).toBe(
+        '23h ago',
+      );
+    });
+
+    it('returns days ago for times less than 7 days ago', () => {
+      const oneDayAgo = new Date(Date.now() - 1 * 86400000);
+      expect(formatRelativeTime(oneDayAgo.toISOString())).toBe('1d ago');
+
+      const threeDaysAgo = new Date(Date.now() - 3 * 86400000);
+      expect(formatRelativeTime(threeDaysAgo.toISOString())).toBe('3d ago');
+
+      const sixDaysAgo = new Date(Date.now() - 6 * 86400000);
+      expect(formatRelativeTime(sixDaysAgo.toISOString())).toBe('6d ago');
+    });
+
+    it('returns formatted date for times 7 or more days ago', () => {
+      const sevenDaysAgo = new Date(Date.now() - 7 * 86400000);
+      const result = formatRelativeTime(sevenDaysAgo.toISOString());
+      // Should return a locale date string, not "Xd ago"
+      expect(result).not.toContain('d ago');
+      expect(result).toMatch(/\d/); // Should contain numbers (date)
+    });
+  });
+
+  describe('getDateGroup', () => {
+    it('returns "Today" for dates from today', () => {
+      const now = new Date();
+      expect(getDateGroup(now.toISOString())).toBe('Today');
+
+      // Earlier today (midnight)
+      const midnight = new Date();
+      midnight.setHours(0, 0, 0, 0);
+      expect(getDateGroup(midnight.toISOString())).toBe('Today');
+    });
+
+    it('returns "Yesterday" for dates from yesterday', () => {
+      const yesterday = new Date();
+      yesterday.setDate(yesterday.getDate() - 1);
+      expect(getDateGroup(yesterday.toISOString())).toBe('Yesterday');
+    });
+
+    it('returns "This Week" for dates from this week (but not today or yesterday)', () => {
+      const now = new Date();
+      const dayOfWeek = now.getDay();
+
+      // Only test if we're not on Sunday (0) or Monday (1)
+      // because "This Week" starts on Sunday
+      if (dayOfWeek >= 2) {
+        const twoDaysAgo = new Date();
+        twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
+        expect(getDateGroup(twoDaysAgo.toISOString())).toBe('This Week');
+      }
+    });
+
+    it('returns "Last Week" for dates from last week', () => {
+      const now = new Date();
+      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+      const dayOfWeek = today.getDay();
+
+      // Calculate start of this week (Sunday)
+      const thisWeekStart = new Date(today);
+      thisWeekStart.setDate(thisWeekStart.getDate() - dayOfWeek);
+
+      // Last week is 1-7 days before this week's start
+      const lastWeekDate = new Date(thisWeekStart);
+      lastWeekDate.setDate(lastWeekDate.getDate() - 3); // Middle of last week
+
+      expect(getDateGroup(lastWeekDate.toISOString())).toBe('Last Week');
+    });
+
+    it('returns "Older" for dates older than last week', () => {
+      const threeWeeksAgo = new Date();
+      threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
+      expect(getDateGroup(threeWeeksAgo.toISOString())).toBe('Older');
+
+      const monthAgo = new Date();
+      monthAgo.setMonth(monthAgo.getMonth() - 1);
+      expect(getDateGroup(monthAgo.toISOString())).toBe('Older');
+    });
+  });
+
+  describe('groupByDate', () => {
+    it('groups items by their date', () => {
+      const now = new Date();
+      const yesterday = new Date();
+      yesterday.setDate(yesterday.getDate() - 1);
+      const lastMonth = new Date();
+      lastMonth.setMonth(lastMonth.getMonth() - 1);
+
+      const items = [
+        { id: 1, created_at: now.toISOString() },
+        { id: 2, created_at: now.toISOString() },
+        { id: 3, created_at: yesterday.toISOString() },
+        { id: 4, created_at: lastMonth.toISOString() },
+      ];
+
+      const result = groupByDate(items);
+
+      expect(result).toHaveLength(3); // Today, Yesterday, Older
+
+      const todayGroup = result.find(g => g.label === 'Today');
+      expect(todayGroup.items).toHaveLength(2);
+      expect(todayGroup.items.map(i => i.id)).toEqual([1, 2]);
+
+      const yesterdayGroup = result.find(g => g.label === 'Yesterday');
+      expect(yesterdayGroup.items).toHaveLength(1);
+      expect(yesterdayGroup.items[0].id).toBe(3);
+
+      const olderGroup = result.find(g => g.label === 'Older');
+      expect(olderGroup.items).toHaveLength(1);
+      expect(olderGroup.items[0].id).toBe(4);
+    });
+
+    it('returns groups in correct order', () => {
+      const now = new Date();
+      const yesterday = new Date();
+      yesterday.setDate(yesterday.getDate() - 1);
+      const lastMonth = new Date();
+      lastMonth.setMonth(lastMonth.getMonth() - 1);
+
+      // Items in random order
+      const items = [
+        { id: 1, created_at: lastMonth.toISOString() },
+        { id: 2, created_at: now.toISOString() },
+        { id: 3, created_at: yesterday.toISOString() },
+      ];
+
+      const result = groupByDate(items);
+      const labels = result.map(g => g.label);
+
+      // Should be in order: Today, Yesterday, Older
+      expect(labels).toEqual(['Today', 'Yesterday', 'Older']);
+    });
+
+    it('uses custom date field when specified', () => {
+      const now = new Date();
+      const items = [{ id: 1, updated_at: now.toISOString() }];
+
+      const result = groupByDate(items, 'updated_at');
+
+      expect(result).toHaveLength(1);
+      expect(result[0].label).toBe('Today');
+    });
+
+    it('returns empty array for empty input', () => {
+      const result = groupByDate([]);
+      expect(result).toEqual([]);
+    });
+
+    it('only includes groups that have items', () => {
+      const now = new Date();
+      const items = [{ id: 1, created_at: now.toISOString() }];
+
+      const result = groupByDate(items);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].label).toBe('Today');
+    });
+  });
+});

package/src/app/utils/date.js

@@ -0,0 +1,65 @@
+/**
+ * Format a date string as relative time (e.g., "2h ago", "3d ago")
+ */
+export const formatRelativeTime = dateString => {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+};
+
+/**
+ * Get a date group label for grouping items (Today, Yesterday, This Week, etc.)
+ */
+export const getDateGroup = dateString => {
+  const date = new Date(dateString);
+  const now = new Date();
+
+  // Reset times to compare dates only
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const thisWeekStart = new Date(today);
+  thisWeekStart.setDate(thisWeekStart.getDate() - today.getDay());
+  const lastWeekStart = new Date(thisWeekStart);
+  lastWeekStart.setDate(lastWeekStart.getDate() - 7);
+
+  const dateOnly = new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+  );
+
+  if (dateOnly >= today) return 'Today';
+  if (dateOnly >= yesterday) return 'Yesterday';
+  if (dateOnly >= thisWeekStart) return 'This Week';
+  if (dateOnly >= lastWeekStart) return 'Last Week';
+  return 'Older';
+};
+
+/**
+ * Group items by date using getDateGroup
+ */
+export const groupByDate = (items, dateField = 'created_at') => {
+  const groups = {};
+  const order = ['Today', 'Yesterday', 'This Week', 'Last Week', 'Older'];
+
+  items.forEach(item => {
+    const group = getDateGroup(item[dateField]);
+    if (!groups[group]) groups[group] = [];
+    groups[group].push(item);
+  });
+
+  // Return in order
+  return order
+    .filter(g => groups[g]?.length > 0)
+    .map(g => ({ label: g, items: groups[g] }));
+};

package/src/styles/index.css

@@ -701,7 +701,7 @@ pre {
 }
 
 .container {
-  max-width: 1320px;
+  max-width: --webkit-size-available;
   width: 100%;
   padding-left: 30px !important;
   padding-right: 30px !important;

package/src/styles/nav-bar.css

@@ -0,0 +1,274 @@
+/* Nav bar right section */
+.nav-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Icon button (notification bell) */
+.nav-icon-button {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: transparent;
+  border: 1px solid #e0e0e0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+  color: #666;
+}
+
+.nav-icon-button:hover {
+  background-color: #f5f5f5;
+  border-color: #ccc;
+}
+
+.nav-icon-button svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+/* Avatar button with initials */
+.avatar-button {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.avatar-button:hover {
+  transform: scale(1.05);
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+}
+
+/* Dropdown container */
+.nav-dropdown {
+  position: relative;
+}
+
+/* Dropdown menu - align to right edge */
+.nav-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: auto;
+  min-width: 200px;
+  margin-top: 0.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background: white;
+  z-index: 1000;
+}
+
+.nav-dropdown-menu .dropdown-header {
+  padding: 0.75rem 1rem 0.5rem;
+  font-size: 13px;
+  font-weight: 600;
+  color: #333;
+}
+
+.nav-dropdown-menu .dropdown-item {
+  display: block;
+  padding: 0.5rem 1rem;
+  font-size: 14px;
+  color: #444;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.nav-dropdown-menu .dropdown-item:hover {
+  background-color: #f5f5f5;
+  text-decoration: none;
+}
+
+.nav-dropdown-menu .dropdown-divider {
+  margin: 0.25rem 0;
+  border: none;
+  border-top: 1px solid #e0e0e0;
+}
+
+.nav-dropdown-menu .text-muted {
+  color: #999 !important;
+  font-size: 13px;
+  cursor: default;
+}
+
+.nav-dropdown-menu .text-muted:hover {
+  background-color: transparent;
+}
+
+/* Notification badge */
+.nav-icon-button {
+  position: relative;
+}
+
+.notification-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 11px;
+  font-weight: 600;
+  color: white;
+  background-color: #ef4444;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Notifications menu */
+.notifications-menu {
+  min-width: 240px;
+  max-width: 600px;
+  padding: 0;
+}
+
+.notifications-menu .dropdown-header {
+  padding: 0.5rem 0.75rem;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #888;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.notifications-menu .dropdown-header .header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.notifications-menu .dropdown-header .header-left svg {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: #888;
+  stroke-width: 1.5;
+}
+
+.notifications-menu .dropdown-header .header-settings {
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  border-radius: 4px;
+  color: #aaa;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.notifications-menu .dropdown-header .header-settings:hover {
+  color: #666;
+  background-color: #f0f0f0;
+}
+
+.notifications-menu .dropdown-header .header-settings svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.notification-group {
+  margin-bottom: 1.5rem;
+}
+
+.card-body {
+  margin: 0 2.5rem;
+}
+
+.notification-item {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 0.75rem;
+  text-decoration: none;
+  border-bottom: 1px solid #f5f5f5;
+  gap: 2px;
+}
+
+.notification-item:last-child {
+  border-bottom: none;
+}
+
+.notification-item:hover {
+  background-color: #f8f9fa;
+  text-decoration: none;
+}
+
+.notification-node {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  margin-bottom: 0.25rem;
+}
+
+.notification-title {
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.notification-entity {
+  font-size: 11px;
+}
+
+.notification-title .badge.version {
+  font-size: 10px;
+  padding: 3px 5px 2px 4px;
+  background-color: transparent;
+  color: #888;
+  border: 1px solid #ccc;
+  font-weight: 500;
+}
+
+.notification-meta {
+  font-size: 11px;
+  color: #999;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.notification-meta .badge.node_type {
+  font-size: 9px;
+  padding: 4px;
+  margin-right: 2px;
+}
+
+.notifications-menu .dropdown-divider {
+  margin: 0;
+}
+
+.notifications-menu .view-all {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  font-size: 12px;
+  color: #667eea;
+  text-align: center;
+  text-decoration: none;
+}
+
+.notifications-menu .view-all:hover {
+  background-color: #f8f9fa;
+}