datajunction-ui 0.0.92 → 0.0.94

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

@@ -11,7 +11,6 @@ export function NeedsAttentionSection({
   staleMaterializations,
   orphanedDimensions,
   username,
-  hasItems,
   loading,
   personalNamespace,
   hasPersonalNamespace,
@@ -55,129 +54,116 @@ export function NeedsAttentionSection({
     },
   ];
 
-  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' }}>
+      <div className="settings-card" style={{ padding: '0.25rem 0.75rem' }}>
         {loading ? (
-          <div
-            className="settings-card"
-            style={{ textAlign: 'center', padding: '1rem' }}
-          >
+          <div 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 && (
+          <>
+            {categories.map((cat, i) => (
               <div
+                key={cat.id}
                 style={{
-                  padding: '0.75rem',
-                  backgroundColor: 'var(--card-bg, #f8f9fa)',
-                  border: '1px dashed var(--border-color, #dee2e6)',
-                  borderRadius: '6px',
-                  textAlign: 'center',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.5rem',
+                  padding: '0.35rem 0',
+                  borderBottom:
+                    i < categories.length - 1
+                      ? '1px solid var(--border-color, #f0f0f0)'
+                      : 'none',
+                  minWidth: 0,
                 }}
               >
-                <div style={{ fontSize: '16px', marginBottom: '0.25rem' }}>
-                  📁
-                </div>
-                <div
+                {/* Label + count */}
+                <span
                   style={{
                     fontSize: '11px',
-                    fontWeight: '500',
-                    marginBottom: '0.25rem',
-                  }}
-                >
-                  Set up your namespace
-                </div>
-                <p
-                  style={{
-                    fontSize: '10px',
-                    color: '#666',
-                    marginBottom: '0.5rem',
+                    fontWeight: 600,
+                    color: '#555',
+                    whiteSpace: 'nowrap',
+                    flexShrink: 0,
                   }}
                 >
-                  Create{' '}
-                  <code
+                  {cat.label}{' '}
+                  <span
+                    style={{
+                      color: cat.nodes.length > 0 ? '#dc3545' : '#28a745',
+                      fontWeight: 500,
+                    }}
+                  >
+                    ({cat.nodes.length})
+                  </span>
+                </span>
+
+                {/* Chips with right-side fade */}
+                {cat.nodes.length > 0 ? (
+                  <div
                     style={{
-                      backgroundColor: '#e9ecef',
-                      padding: '1px 4px',
-                      borderRadius: '3px',
-                      fontSize: '9px',
+                      flex: 1,
+                      overflow: 'hidden',
+                      maskImage:
+                        'linear-gradient(to right, black 75%, transparent 100%)',
+                      WebkitMaskImage:
+                        'linear-gradient(to right, black 75%, transparent 100%)',
                     }}
                   >
-                    {personalNamespace}
-                  </code>
-                </p>
+                    <div
+                      style={{
+                        display: 'flex',
+                        gap: '0.25rem',
+                        flexWrap: 'nowrap',
+                      }}
+                    >
+                      {cat.nodes.slice(0, 20).map(node => (
+                        <NodeChip key={node.name} node={node} />
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                  <span style={{ fontSize: '10px', color: '#28a745', flex: 1 }}>
+                    All good
+                  </span>
+                )}
+
+                {/* Arrow link — always visible, outside the fade */}
+                {cat.nodes.length > 0 && (
+                  <Link
+                    to={cat.viewAllLink}
+                    style={{ fontSize: '11px', flexShrink: 0 }}
+                  >
+                    →
+                  </Link>
+                )}
+              </div>
+            ))}
+
+            {!namespaceLoading && !hasPersonalNamespace && (
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.5rem',
+                  padding: '0.35rem 0',
+                  fontSize: '11px',
+                }}
+              >
+                <span style={{ fontWeight: 600, color: '#555', flexShrink: 0 }}>
+                  Personal namespace
+                </span>
                 <Link
                   to={`/namespaces/${personalNamespace}`}
-                  style={{
-                    display: 'inline-block',
-                    padding: '3px 8px',
-                    fontSize: '10px',
-                    backgroundColor: '#28a745',
-                    color: '#fff',
-                    borderRadius: '4px',
-                    textDecoration: 'none',
-                  }}
+                  style={{ fontSize: '10px' }}
                 >
-                  Create →
+                  Create {personalNamespace} →
                 </Link>
               </div>
             )}
-          </div>
+          </>
         )}
       </div>
     </section>

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

@@ -24,10 +24,8 @@ function capitalize(str) {
 }
 
 // Type Card Component
-function TypeCard({ type, nodes, count, username, activeTab }) {
-  const maxDisplay = 10;
-  const displayNodes = nodes.slice(0, maxDisplay);
-  const remaining = count - maxDisplay;
+function TypeCard({ type, nodes, hasMore, username, activeTab }) {
+  const displayNodes = nodes;
 
   // Build filter URL based on active tab and type
   const getFilterUrl = () => {
@@ -50,9 +48,7 @@ function TypeCard({ type, nodes, count, username, activeTab }) {
   return (
     <div className="type-group-card">
       <div className="type-group-header">
-        <span className="type-group-title">
-          {capitalize(type)}s ({count})
-        </span>
+        <span className="type-group-title">{capitalize(type)}s</span>
       </div>
 
       <div className="type-group-nodes">
@@ -102,7 +98,7 @@ function TypeCard({ type, nodes, count, username, activeTab }) {
                     display: 'flex',
                     alignItems: 'center',
                     gap: '4px',
-                    maxWidth: '200px',
+                    maxWidth: '40%',
                   }}
                 >
                   {isDefaultBranch && (
@@ -166,9 +162,9 @@ function TypeCard({ type, nodes, count, username, activeTab }) {
         })}
       </div>
 
-      {remaining > 0 && (
+      {hasMore && (
         <Link to={getFilterUrl()} className="type-group-more">
-          +{remaining} more →
+          More →
         </Link>
       )}
     </div>
@@ -199,7 +195,7 @@ export function TypeGroupGrid({ groupedData, username, activeTab }) {
           key={group.type}
           type={group.type}
           nodes={group.nodes}
-          count={group.count}
+          hasMore={group.hasMore}
           username={username}
           activeTab={activeTab}
         />

package/src/app/pages/MyWorkspacePage/__tests__/ActiveBranchesSection.test.jsx

@@ -242,15 +242,87 @@ describe('<ActiveBranchesSection />', () => {
     });
   });
 
-  it('should handle API errors when fetching counts', async () => {
-    const consoleErrorSpy = jest
-      .spyOn(console, 'error')
-      .mockImplementation(() => {});
+  it('should show "+N more git namespaces" when more than 3 namespaces', async () => {
+    const manyNamespaces = Array.from({ length: 5 }, (_, i) => ({
+      name: `project${i}.main.node`,
+      gitInfo: {
+        repo: `org/repo${i}`,
+        branch: 'main',
+        defaultBranch: 'main',
+        parentNamespace: `project${i}`,
+      },
+      current: { updatedAt: `2024-01-0${i + 1}T10:00:00Z` },
+    }));
 
-    mockDjClient.listNodesForLanding.mockRejectedValueOnce(
-      new Error('API error'),
-    );
+    renderWithContext({
+      ownedNodes: manyNamespaces,
+      recentlyEdited: [],
+      loading: false,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('+2 more git namespaces')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle node with no dots in fullNamespace (dotIdx <= 0 fallback)', async () => {
+    // Node name "ns.node" → fullNamespace = "ns" → dotIdx = -1 → baseNamespace = "ns"
+    const singleSegmentNode = [
+      {
+        name: 'ns.node',
+        gitInfo: {
+          repo: 'myorg/myrepo',
+          branch: 'main',
+          defaultBranch: 'main',
+          // No parentNamespace — fallback to parsing
+        },
+        current: { updatedAt: '2024-01-01T10:00:00Z' },
+      },
+    ];
 
+    renderWithContext({
+      ownedNodes: singleSegmentNode,
+      recentlyEdited: [],
+      loading: false,
+    });
+
+    await waitFor(() => {
+      // fullNamespace = "ns", dotIdx = -1, baseNamespace = "ns"
+      expect(screen.getByText('ns')).toBeInTheDocument();
+    });
+  });
+
+  it('should sort branches with null lastActivity after those with activity', async () => {
+    // Creates two branches: one with activity, one without — sort should put active first
+    const nodesWithMixedActivity = [
+      {
+        name: 'myproject.feature.node1',
+        gitInfo: {
+          repo: 'myorg/myrepo',
+          branch: 'feature',
+          defaultBranch: 'main',
+          parentNamespace: 'myproject',
+          isDefaultBranch: false,
+        },
+        current: { updatedAt: '2024-01-01T10:00:00Z' },
+      },
+      // main branch will be added by the "ensure default branch present" logic with null activity
+    ];
+
+    renderWithContext({
+      ownedNodes: nodesWithMixedActivity,
+      recentlyEdited: [],
+      loading: false,
+    });
+
+    await waitFor(() => {
+      // Both branches should be present
+      expect(screen.getByText('feature')).toBeInTheDocument();
+      expect(screen.getAllByText('main').length).toBeGreaterThan(0);
+    });
+  });
+
+  it('should render without errors when given valid props', async () => {
     renderWithContext({
       ownedNodes: mockOwnedNodes,
       recentlyEdited: [],
@@ -260,10 +332,6 @@ describe('<ActiveBranchesSection />', () => {
     await waitFor(() => {
       expect(screen.getByText('myproject')).toBeInTheDocument();
     });
-
-    // Should still render despite API error
-    expect(consoleErrorSpy).toHaveBeenCalled();
-    consoleErrorSpy.mockRestore();
   });
 
   it('should show default branch even when user has no nodes on it', async () => {

package/src/app/pages/MyWorkspacePage/__tests__/CollectionsSection.test.jsx

@@ -201,6 +201,28 @@ describe('<CollectionsSection />', () => {
     });
   });
 
+  it('should log response when fetching all collections succeeds', async () => {
+    const consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+    mockDjClient.listAllCollections.mockResolvedValue({
+      data: { listCollections: mockCollections },
+    });
+
+    renderWithContext({
+      collections: [],
+      loading: false,
+      currentUser: mockCurrentUser,
+    });
+
+    await waitFor(() => {
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'All collections response:',
+        expect.anything(),
+      );
+    });
+
+    consoleSpy.mockRestore();
+  });
+
   it('should handle API errors gracefully', async () => {
     mockDjClient.listAllCollections.mockRejectedValue(new Error('API error'));
 

package/src/app/pages/MyWorkspacePage/__tests__/MaterializationsSection.test.jsx

@@ -190,6 +190,63 @@ describe('<MaterializationsSection />', () => {
     expect(screen.getByText('+5 more')).toBeInTheDocument();
   });
 
+  it('should sort nodes with null validThroughTs after those with timestamps', () => {
+    const pendingNode = createMockNode('pending_cube', null);
+    const freshNode = createMockNode('fresh_cube', 12);
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection
+          nodes={[pendingNode, freshNode]}
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    const allCubes = screen.getAllByText(/cube/);
+    // fresh (has timestamp) should appear before pending (null timestamp)
+    expect(allCubes[0]).toHaveTextContent('fresh_cube');
+    expect(allCubes[1]).toHaveTextContent('pending_cube');
+  });
+
+  it('should keep relative order when both nodes have null validThroughTs', () => {
+    const pending1 = createMockNode('pending_a', null);
+    const pending2 = createMockNode('pending_b', null);
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={[pending1, pending2]} loading={false} />
+      </MemoryRouter>,
+    );
+
+    // Both pending — neither crashes, both appear
+    expect(screen.getByText('pending_a')).toBeInTheDocument();
+    expect(screen.getByText('pending_b')).toBeInTheDocument();
+  });
+
+  it('should show "just now" for materializations updated less than 1 hour ago', () => {
+    const justNowTs = now - 5 * 60 * 1000; // 5 minutes ago
+    const justNowNode = {
+      name: 'just_now_cube',
+      type: 'CUBE',
+      current: {
+        displayName: 'just_now_cube',
+        availability: {
+          validThroughTs: justNowTs,
+        },
+        materializations: [{ name: 'mat1', schedule: '@hourly' }],
+      },
+    };
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={[justNowNode]} loading={false} />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('🟢 just now')).toBeInTheDocument();
+  });
+
   it('should handle undefined nodes gracefully', () => {
     render(
       <MemoryRouter>

package/src/app/pages/MyWorkspacePage/__tests__/MyNodesSection.test.jsx

@@ -18,7 +18,7 @@ jest.mock('../TypeGroupGrid', () => ({
     <div data-testid="type-group-grid">
       {groupedData.map(group => (
         <div key={group.type}>
-          {group.type}: {group.count} nodes
+          {group.type}: {group.nodes.length} nodes
         </div>
       ))}
     </div>
@@ -26,6 +26,11 @@ jest.mock('../TypeGroupGrid', () => ({
 }));
 
 describe('<MyNodesSection />', () => {
+  beforeEach(() => {
+    // Default to list view for most tests; Group by Type tests manage localStorage themselves
+    localStorage.setItem('workspace_groupByType', 'false');
+  });
+
   const mockOwnedNodes = [
     {
       name: 'default.owned_metric',
@@ -102,10 +107,10 @@ describe('<MyNodesSection />', () => {
       </MemoryRouter>,
     );
 
-    expect(screen.getByText('Owned (1)')).toBeInTheDocument();
+    expect(screen.getByText('Owned')).toBeInTheDocument();
     // Should only count watched nodes that aren't owned (1 watched-only)
     expect(screen.getByText('Watched (1)')).toBeInTheDocument();
-    expect(screen.getByText('Recent Edits (1)')).toBeInTheDocument();
+    expect(screen.getByText('Recent Edits')).toBeInTheDocument();
   });
 
   it('should show owned nodes by default', () => {
@@ -160,7 +165,7 @@ describe('<MyNodesSection />', () => {
       </MemoryRouter>,
     );
 
-    fireEvent.click(screen.getByText('Recent Edits (1)'));
+    fireEvent.click(screen.getByText('Recent Edits'));
 
     expect(screen.getByText('default.edited_metric')).toBeInTheDocument();
   });
@@ -183,7 +188,7 @@ describe('<MyNodesSection />', () => {
     expect(screen.getByText('No watched nodes')).toBeInTheDocument();
   });
 
-  it('should limit displayed nodes to 8', () => {
+  it('should limit displayed nodes to 8 in list view', () => {
     const manyNodes = Array.from({ length: 15 }, (_, i) => ({
       name: `default.metric_${i}`,
       type: 'METRIC',
@@ -227,6 +232,45 @@ describe('<MyNodesSection />', () => {
     );
   });
 
+  it('should auto-switch to edited tab when no owned nodes but has recently edited', async () => {
+    const { waitFor } = await import('@testing-library/react');
+
+    render(
+      <MemoryRouter>
+        <MyNodesSection
+          ownedNodes={[]}
+          watchedNodes={[]}
+          recentlyEdited={mockRecentlyEdited}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    // After effect fires, should auto-switch to edited tab
+    await waitFor(() => {
+      expect(screen.getByText('default.edited_metric')).toBeInTheDocument();
+    });
+  });
+
+  it('should show "No recent edits" when on edited tab with no recent edits', () => {
+    render(
+      <MemoryRouter>
+        <MyNodesSection
+          ownedNodes={mockOwnedNodes}
+          watchedNodes={[]}
+          recentlyEdited={[]}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    fireEvent.click(screen.getByText('Recent Edits'));
+
+    expect(screen.getByText('No recent edits')).toBeInTheDocument();
+  });
+
   it('should filter watched nodes to exclude owned nodes', () => {
     const ownedNodes = [
       { name: 'node1', type: 'METRIC', current: {} },
@@ -290,7 +334,7 @@ describe('<MyNodesSection />', () => {
       expect(screen.queryByLabelText('Group by Type')).not.toBeInTheDocument();
     });
 
-    it('should toggle between list and grouped view', () => {
+    it('should toggle between grouped and list view', () => {
       render(
         <MemoryRouter>
           <MyNodesSection
@@ -303,17 +347,17 @@ describe('<MyNodesSection />', () => {
         </MemoryRouter>,
       );
 
-      // Initially should show list view
-      expect(screen.getByTestId('node-list')).toBeInTheDocument();
-      expect(screen.queryByTestId('type-group-grid')).not.toBeInTheDocument();
+      // Initially should show grouped view (default is true)
+      expect(screen.getByTestId('type-group-grid')).toBeInTheDocument();
+      expect(screen.queryByTestId('node-list')).not.toBeInTheDocument();
 
-      // Click toggle
+      // Click toggle to switch to list view
       const toggle = screen.getByLabelText('Group by Type');
       fireEvent.click(toggle);
 
-      // Should now show grouped view
-      expect(screen.queryByTestId('node-list')).not.toBeInTheDocument();
-      expect(screen.getByTestId('type-group-grid')).toBeInTheDocument();
+      // Should now show list view
+      expect(screen.queryByTestId('type-group-grid')).not.toBeInTheDocument();
+      expect(screen.getByTestId('node-list')).toBeInTheDocument();
     });
 
     it('should persist toggle state to localStorage', () => {
@@ -332,10 +376,10 @@ describe('<MyNodesSection />', () => {
       const toggle = screen.getByLabelText('Group by Type');
       fireEvent.click(toggle);
 
-      expect(localStorage.getItem('workspace_groupByType')).toBe('true');
+      expect(localStorage.getItem('workspace_groupByType')).toBe('false');
 
       fireEvent.click(toggle);
-      expect(localStorage.getItem('workspace_groupByType')).toBe('false');
+      expect(localStorage.getItem('workspace_groupByType')).toBe('true');
     });
 
     it('should load toggle state from localStorage', () => {
@@ -378,9 +422,7 @@ describe('<MyNodesSection />', () => {
         </MemoryRouter>,
       );
 
-      const toggle = screen.getByLabelText('Group by Type');
-      fireEvent.click(toggle);
-
+      // Default is grouped view (localStorage cleared by beforeEach → null → true)
       expect(screen.getByText('metric: 2 nodes')).toBeInTheDocument();
       expect(screen.getByText('dimension: 1 nodes')).toBeInTheDocument();
       expect(screen.getByText('source: 1 nodes')).toBeInTheDocument();