datajunction-ui 0.0.27 → 0.0.30

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

@@ -2,197 +2,117 @@ import { formatRelativeTime, getDateGroup, groupByDate } from '../date';
 
 describe('date utilities', () => {
   describe('formatRelativeTime', () => {
-    it('returns "just now" for times less than 1 minute ago', () => {
+    it('returns "just now" for times less than a 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 minutes for times less than an hour ago', () => {
+      const date = new Date();
+      date.setMinutes(date.getMinutes() - 30);
+      expect(formatRelativeTime(date.toISOString())).toBe('30m 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 hours for times less than a day ago', () => {
+      const date = new Date();
+      date.setHours(date.getHours() - 5);
+      expect(formatRelativeTime(date.toISOString())).toBe('5h 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 days for times less than a week ago', () => {
+      const date = new Date();
+      date.setDate(date.getDate() - 3);
+      expect(formatRelativeTime(date.toISOString())).toBe('3d 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)
+    it('returns formatted date for times more than a week ago', () => {
+      const date = new Date();
+      date.setDate(date.getDate() - 10);
+      const result = formatRelativeTime(date.toISOString());
+      expect(result).toMatch(/\d{1,2}\/\d{1,2}\/\d{4}/);
     });
   });
 
   describe('getDateGroup', () => {
-    it('returns "Today" for dates from today', () => {
+    it('returns "Today" for today\'s date', () => {
       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', () => {
+    it('returns "Yesterday" for yesterday\'s date', () => {
       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)', () => {
+    it('returns "Last Week" for dates from last week', () => {
       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');
-      }
+      const lastWeek = new Date();
+      lastWeek.setDate(lastWeek.getDate() - dayOfWeek - 3); // Go to last week
+      expect(getDateGroup(lastWeek.toISOString())).toBe('Last 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);
+    it('returns "Older" for dates more than two weeks ago', () => {
+      const oldDate = new Date();
+      oldDate.setDate(oldDate.getDate() - 20);
+      expect(getDateGroup(oldDate.toISOString())).toBe('Older');
+    });
+  });
 
-      // 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
+  describe('getDateGroup with mocked time', () => {
+    // Test "This Week" branch with a fixed date (Wednesday, Jan 15, 2025)
+    beforeEach(() => {
+      jest.useFakeTimers();
+      jest.setSystemTime(new Date('2025-01-15T12:00:00Z'));
+    });
 
-      expect(getDateGroup(lastWeekDate.toISOString())).toBe('Last Week');
+    afterEach(() => {
+      jest.useRealTimers();
     });
 
-    it('returns "Older" for dates older than last week', () => {
-      const threeWeeksAgo = new Date();
-      threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
-      expect(getDateGroup(threeWeeksAgo.toISOString())).toBe('Older');
+    it('returns "This Week" for dates earlier this week', () => {
+      // Jan 15, 2025 is Wednesday. Week starts Sunday Jan 12.
+      // A date from Monday Jan 13 should be "This Week"
+      const thisWeekDate = new Date('2025-01-13T12:00:00Z');
+      expect(getDateGroup(thisWeekDate.toISOString())).toBe('This Week');
+    });
 
-      const monthAgo = new Date();
-      monthAgo.setMonth(monthAgo.getMonth() - 1);
-      expect(getDateGroup(monthAgo.toISOString())).toBe('Older');
+    it('returns "This Week" for Sunday of the current week', () => {
+      // Sunday Jan 12, 2025 is the start of this week
+      const sundayThisWeek = new Date('2025-01-12T12:00:00Z');
+      expect(getDateGroup(sundayThisWeek.toISOString())).toBe('This Week');
     });
   });
 
   describe('groupByDate', () => {
-    it('groups items by their date', () => {
+    it('groups items by 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() },
+        { id: 2, created_at: yesterday.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');
+      const groups = groupByDate(items);
+      expect(groups.length).toBeGreaterThan(0);
+      expect(groups[0].label).toBe('Today');
     });
 
     it('returns empty array for empty input', () => {
-      const result = groupByDate([]);
-      expect(result).toEqual([]);
+      const groups = groupByDate([]);
+      expect(groups).toEqual([]);
     });
 
-    it('only includes groups that have items', () => {
+    it('uses custom date field', () => {
       const now = new Date();
-      const items = [{ id: 1, created_at: now.toISOString() }];
-
-      const result = groupByDate(items);
+      const items = [{ id: 1, updated_at: now.toISOString() }];
 
-      expect(result).toHaveLength(1);
-      expect(result[0].label).toBe('Today');
+      const groups = groupByDate(items, 'updated_at');
+      expect(groups.length).toBe(1);
+      expect(groups[0].label).toBe('Today');
     });
   });
 });

package/src/styles/index.css

@@ -254,6 +254,45 @@ tr {
   border-color: #12263f;
 }
 
+.nodes-table-body tr:hover td {
+  background-color: rgba(59, 130, 246, 0.03);
+}
+
+/* Sortable table headers */
+button.sortable {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: color 0.15s ease;
+}
+
+button.sortable:hover {
+  color: #1e293b;
+}
+
+button.sortable::after {
+  content: '↕';
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+button.sortable.ascending::after {
+  content: '↑';
+  opacity: 1;
+  color: #3b82f6;
+}
+
+button.sortable.descending::after {
+  content: '↓';
+  opacity: 1;
+  color: #3b82f6;
+}
+
 .card {
   box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
   position: relative;
@@ -964,23 +1003,25 @@ pre {
 }
 
 .select-name {
-  margin-top: 5px;
-  padding: 7px 7px;
-  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+  font-size: 14px;
+  font-weight: 400;
+  color: #1e293b;
   border-radius: 4px;
-  cursor: default;
-  font-size: 0.9125rem;
-  color: #95aac9;
 }
 
 .select-name:hover {
-  background-color: #bdbaba3c;
+  background-color: #f1f5f9;
 }
 
 .select-name-highlight {
-  font-weight: 600;
-  background-color: #bdbaba3c;
-  border: 1px solid rgba(94, 94, 94, 0.24);
+  background-color: #eef1f6;
 }
 
 .inactive {