datajunction-ui 0.0.103 → 0.0.104

package/package.json

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

package/src/app/components/NamespaceHeader.jsx

@@ -26,6 +26,11 @@ export default function NamespaceHeader({
   const [existingPR, setExistingPR] = useState(null);
   const [prLoading, setPrLoading] = useState(false);
 
+  // Branch switcher state
+  const [branches, setBranches] = useState([]);
+  const [branchDropdownOpen, setBranchDropdownOpen] = useState(false);
+  const branchDropdownRef = useRef(null);
+
   // Modal states
   const [showGitSettings, setShowGitSettings] = useState(false);
   const [showCreateBranch, setShowCreateBranch] = useState(false);
@@ -65,7 +70,7 @@ export default function NamespaceHeader({
             onGitConfigLoaded(config);
           }
 
-          // If this is a branch namespace, fetch parent's git config and check for existing PR
+          // If this is a branch namespace, fetch parent's git config, branches, and check for existing PR
           if (config?.parent_namespace) {
             try {
               const parentConfig = await djClient.getNamespaceGitConfig(
@@ -76,6 +81,15 @@ export default function NamespaceHeader({
               console.error('Failed to fetch parent git config:', e);
             }
 
+            try {
+              const branchList = await djClient.getNamespaceBranches(
+                config.parent_namespace,
+              );
+              setBranches(branchList || []);
+            } catch (e) {
+              console.error('Failed to fetch branches:', e);
+            }
+
             // Check for existing PR
             setPrLoading(true);
             try {
@@ -102,12 +116,18 @@ export default function NamespaceHeader({
     fetchData();
   }, [djClient, namespace]);
 
-  // Close dropdown when clicking outside
+  // Close dropdowns when clicking outside
   useEffect(() => {
     const handleClickOutside = event => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setDeploymentsDropdownOpen(false);
       }
+      if (
+        branchDropdownRef.current &&
+        !branchDropdownRef.current.contains(event.target)
+      ) {
+        setBranchDropdownOpen(false);
+      }
     };
     document.addEventListener('mousedown', handleClickOutside);
     return () => document.removeEventListener('mousedown', handleClickOutside);
@@ -243,88 +263,215 @@ export default function NamespaceHeader({
             />
           </svg>
           {namespace ? (
-            namespaceParts.map((part, index, arr) => (
-              <span
-                key={index}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px',
-                }}
-              >
-                <a
-                  href={`/namespaces/${arr.slice(0, index + 1).join('.')}`}
-                  style={{
-                    fontWeight: '400',
-                    color: '#1e293b',
-                    textDecoration: 'none',
-                  }}
+            namespaceParts.map((part, index, arr) => {
+              const isLast = index === arr.length - 1;
+              const href = `/namespaces/${arr.slice(0, index + 1).join('.')}`;
+              return (
+                <span
+                  key={index}
+                  style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                 >
-                  {part}
-                </a>
-                {index < arr.length - 1 && (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="12"
-                    height="12"
-                    fill="#94a3b8"
-                    viewBox="0 0 16 16"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-                    />
-                  </svg>
-                )}
-              </span>
-            ))
+                  {/* Last segment of a branch namespace becomes the branch switcher */}
+                  {isLast && isBranchNamespace ? (
+                    <div
+                      ref={branchDropdownRef}
+                      style={{ position: 'relative' }}
+                    >
+                      <button
+                        onClick={() => setBranchDropdownOpen(o => !o)}
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '4px',
+                          padding: '0',
+                          background: 'none',
+                          border: 'none',
+                          fontWeight: '400',
+                          fontSize: 'inherit',
+                          color: '#1e293b',
+                          cursor: 'pointer',
+                        }}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="12"
+                          height="12"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="#64748b"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        >
+                          <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>
+                        {part}
+                        <span style={{ fontSize: '8px', color: '#94a3b8' }}>
+                          {branchDropdownOpen ? '▲' : '▼'}
+                        </span>
+                      </button>
+
+                      {branchDropdownOpen && (
+                        <div
+                          style={{
+                            position: 'absolute',
+                            top: '100%',
+                            left: 0,
+                            marginTop: '4px',
+                            backgroundColor: 'white',
+                            border: '1px solid #e2e8f0',
+                            borderRadius: '8px',
+                            boxShadow: '0 4px 12px rgba(0,0,0,0.12)',
+                            zIndex: 1000,
+                            minWidth: '180px',
+                            overflow: 'hidden',
+                          }}
+                        >
+                          <div
+                            style={{
+                              padding: '8px 12px 6px',
+                              fontSize: '10px',
+                              fontWeight: 600,
+                              textTransform: 'uppercase',
+                              letterSpacing: '0.05em',
+                              color: '#94a3b8',
+                              borderBottom: '1px solid #f1f5f9',
+                            }}
+                          >
+                            <a
+                              href={`/namespaces/${gitConfig.parent_namespace}`}
+                              style={{
+                                color: '#94a3b8',
+                                textDecoration: 'none',
+                              }}
+                              onClick={() => setBranchDropdownOpen(false)}
+                            >
+                              {gitConfig.parent_namespace}
+                            </a>
+                          </div>
+                          {branches.length === 0 ? (
+                            <div
+                              style={{
+                                padding: '10px 12px',
+                                fontSize: '12px',
+                                color: '#94a3b8',
+                              }}
+                            >
+                              No branches found
+                            </div>
+                          ) : (
+                            branches.map(b => {
+                              const isCurrent = b.namespace === namespace;
+                              return (
+                                <a
+                                  key={b.namespace}
+                                  href={`/namespaces/${b.namespace}`}
+                                  onClick={() => setBranchDropdownOpen(false)}
+                                  style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    padding: '8px 12px',
+                                    fontSize: '13px',
+                                    color: isCurrent ? '#1e40af' : '#1e293b',
+                                    backgroundColor: isCurrent
+                                      ? '#eff6ff'
+                                      : 'white',
+                                    textDecoration: 'none',
+                                    borderBottom: '1px solid #f8fafc',
+                                  }}
+                                >
+                                  <span
+                                    style={{
+                                      display: 'flex',
+                                      alignItems: 'center',
+                                      gap: '6px',
+                                      minWidth: 0,
+                                    }}
+                                  >
+                                    {isCurrent && (
+                                      <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="10"
+                                        height="10"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        strokeWidth="3"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        style={{ flexShrink: 0 }}
+                                      >
+                                        <polyline points="20 6 9 17 4 12" />
+                                      </svg>
+                                    )}
+                                    <span
+                                      style={{
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        maxWidth: '180px',
+                                      }}
+                                      title={b.git_branch || b.namespace}
+                                    >
+                                      {b.git_branch || b.namespace}
+                                    </span>
+                                  </span>
+                                  <span
+                                    style={{
+                                      fontSize: '11px',
+                                      color: '#94a3b8',
+                                      flexShrink: 0,
+                                      marginLeft: '8px',
+                                    }}
+                                  >
+                                    {b.num_nodes} nodes
+                                  </span>
+                                </a>
+                              );
+                            })
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <a
+                      href={href}
+                      style={{
+                        fontWeight: '400',
+                        color: '#1e293b',
+                        textDecoration: 'none',
+                      }}
+                    >
+                      {part}
+                    </a>
+                  )}
+                  {!isLast && (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="12"
+                      height="12"
+                      fill="#94a3b8"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+                      />
+                    </svg>
+                  )}
+                </span>
+              );
+            })
           ) : (
             <span style={{ fontWeight: '600', color: '#1e293b' }}>
               All Namespaces
             </span>
           )}
 
-          {/* Branch indicator */}
-          {isBranchNamespace && (
-            <span
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '4px',
-                padding: '2px 8px',
-                backgroundColor: '#dbeafe',
-                borderRadius: '12px',
-                fontSize: '11px',
-                color: '#1e40af',
-                marginLeft: '4px',
-              }}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="12"
-                height="12"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <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>
-              Branch of{' '}
-              <a
-                href={`/namespaces/${gitConfig.parent_namespace}`}
-                style={{ color: '#1e40af', textDecoration: 'underline' }}
-              >
-                {gitConfig.parent_namespace}
-              </a>
-            </span>
-          )}
-
           {/* Git-only (read-only) indicator */}
           {gitConfig?.git_only && (
             <span

package/src/app/components/NodeComponents.jsx

@@ -33,6 +33,7 @@ export function NodeBadge({
         ...sizeStyles,
         flexShrink: 0,
         ...style,
+        marginRight: 0,
       }}
     >
       {displayText}
@@ -62,7 +63,7 @@ export function NodeLink({
   const sizeMap = {
     small: { fontSize: '10px', fontWeight: '500' },
     medium: { fontSize: '12px', fontWeight: '500' },
-    large: { fontSize: '13px', fontWeight: '500' },
+    large: { fontSize: '14px', fontWeight: '500' },
   };
 
   const sizeStyles = sizeMap[size] || sizeMap.medium;
@@ -160,7 +161,7 @@ export function NodeChip({ node }) {
         alignItems: 'center',
         gap: '3px',
         padding: '2px 6px',
-        fontSize: '10px',
+        fontSize: '12px',
         border: '1px solid var(--border-color, #ddd)',
         borderRadius: '3px',
         textDecoration: 'none',

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

@@ -127,7 +127,7 @@ describe('NodeComponents', () => {
     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' });
+      expect(link).toHaveStyle({ fontSize: '14px', fontWeight: '500' });
     });
 
     it('should use medium as default when invalid size provided', () => {
@@ -253,7 +253,7 @@ describe('NodeComponents', () => {
       const { container } = render(<NodeChip node={mockNode} />);
       const link = container.querySelector('a');
       expect(link).toHaveStyle({
-        fontSize: '10px',
+        fontSize: '12px',
         padding: '2px 6px',
         whiteSpace: 'nowrap',
       });

package/src/app/pages/NamespacePage/__tests__/index.test.jsx

@@ -16,6 +16,10 @@ const mockDjClient = {
   listTags: jest.fn(),
   namespaceSources: jest.fn(),
   namespaceSourcesBulk: jest.fn(),
+  getNamespaceGitConfig: jest.fn(),
+  getNamespaceBranches: jest.fn(),
+  listDeployments: jest.fn(),
+  getPullRequest: jest.fn(),
 };
 
 const mockCurrentUser = { username: 'dj', email: 'dj@test.com' };
@@ -73,6 +77,10 @@ describe('NamespacePage', () => {
     mockDjClient.namespaceSourcesBulk.mockResolvedValue({
       namespace_sources: {},
     });
+    mockDjClient.getNamespaceGitConfig.mockResolvedValue(null);
+    mockDjClient.getNamespaceBranches.mockResolvedValue([]);
+    mockDjClient.listDeployments.mockResolvedValue([]);
+    mockDjClient.getPullRequest.mockResolvedValue(null);
     mockDjClient.namespaces.mockResolvedValue([
       {
         namespace: 'common.one',
@@ -626,5 +634,209 @@ describe('NamespacePage', () => {
         expect(mockDjClient.listNodesForLanding).toHaveBeenCalled();
       });
     });
+
+    it('reads hasMaterialization filter from URL', async () => {
+      renderWithProviders(<NamespacePage />, {
+        route: '/namespaces/default?hasMaterialization=true',
+      });
+      await waitFor(() => {
+        expect(mockDjClient.listNodesForLanding).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Git-root namespace (branch landing page)', () => {
+    const gitRootConfig = {
+      github_repo_path: 'org/repo',
+      git_branch: 'main',
+      default_branch: 'main',
+      parent_namespace: null,
+      git_only: false,
+    };
+
+    const mockBranches = [
+      {
+        namespace: 'default.main',
+        git_branch: 'main',
+        num_nodes: 10,
+        invalid_node_count: 1,
+        last_deployed_at: '2024-10-18T12:00:00+00:00',
+      },
+      {
+        namespace: 'default.feature-xyz',
+        git_branch: 'feature-xyz',
+        num_nodes: 5,
+        invalid_node_count: 0,
+        last_deployed_at: null,
+      },
+    ];
+
+    beforeEach(() => {
+      mockDjClient.getNamespaceGitConfig.mockResolvedValue(gitRootConfig);
+      mockDjClient.getNamespaceBranches.mockResolvedValue(mockBranches);
+    });
+
+    it('shows Branches section for a git-root namespace', async () => {
+      renderWithProviders(<NamespacePage />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Branches')).toBeInTheDocument();
+        // cards show git_branch value; 'main' appears in both the card title
+        // and the default branch section header, so use getAllByText
+        expect(screen.getAllByText('main').length).toBeGreaterThan(0);
+        expect(screen.getByText('feature-xyz')).toBeInTheDocument();
+      });
+    });
+
+    it('shows branch count next to Branches header', async () => {
+      renderWithProviders(<NamespacePage />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Branches')).toBeInTheDocument();
+        // branch count (2)
+        expect(screen.getByText('2')).toBeInTheDocument();
+      });
+    });
+
+    it('shows node counts and invalid counts on branch cards', async () => {
+      renderWithProviders(<NamespacePage />);
+
+      await waitFor(() => {
+        expect(screen.getByText('10 nodes')).toBeInTheDocument();
+        expect(screen.getByText('1 invalid')).toBeInTheDocument();
+        expect(screen.getByText('5 nodes')).toBeInTheDocument();
+      });
+    });
+
+    it('shows default branch section header and View all link', async () => {
+      renderWithProviders(<NamespacePage />);
+
+      // The default branch header (name + "default" badge) and "View all" link
+      // appear as soon as gitConfig.default_branch is set and isGitRoot is true
+      await waitFor(
+        () => {
+          expect(screen.getByText('View all →')).toBeInTheDocument();
+          // default branch name shown as the section title
+          expect(screen.getAllByText('main').length).toBeGreaterThan(0);
+        },
+        { timeout: 3000 },
+      );
+    });
+
+    it('calls listNodesForLanding for the default branch namespace', async () => {
+      renderWithProviders(<NamespacePage />);
+
+      await waitFor(
+        () => {
+          // After isGitRoot is set, a second listNodesForLanding call for
+          // 'default.main' should be made
+          const calls = mockDjClient.listNodesForLanding.mock.calls;
+          const defaultBranchCall = calls.find(
+            args => args[0] === 'default.main',
+          );
+          expect(defaultBranchCall).toBeDefined();
+        },
+        { timeout: 3000 },
+      );
+    });
+
+    it('shows loading state while branches are loading', async () => {
+      let resolveBranches;
+      mockDjClient.getNamespaceBranches.mockReturnValue(
+        new Promise(resolve => {
+          resolveBranches = resolve;
+        }),
+      );
+
+      renderWithProviders(<NamespacePage />);
+
+      // While loading, Branches header should still show (branchesLoading=true triggers the section)
+      await waitFor(() => {
+        expect(screen.getByText('Branches')).toBeInTheDocument();
+      });
+
+      // Resolve to avoid act() warnings
+      resolveBranches([]);
+    });
+  });
+
+  describe('Quality filter checkboxes', () => {
+    it('toggles orphanedDimension filter', async () => {
+      renderWithProviders(<NamespacePage />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Quality')).toBeInTheDocument();
+      });
+
+      fireEvent.click(screen.getByText('Issues'));
+      await waitFor(() => {
+        expect(screen.getByText('Orphaned Dimensions')).toBeInTheDocument();
+      });
+
+      const checkbox = screen.getByLabelText('Orphaned Dimensions');
+      const callsBefore = mockDjClient.listNodesForLanding.mock.calls.length;
+      fireEvent.click(checkbox);
+
+      await waitFor(() => {
+        expect(
+          mockDjClient.listNodesForLanding.mock.calls.length,
+        ).toBeGreaterThan(callsBefore);
+      });
+    });
+
+    it('toggles hasMaterialization filter', async () => {
+      renderWithProviders(<NamespacePage />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Quality')).toBeInTheDocument();
+      });
+
+      fireEvent.click(screen.getByText('Issues'));
+      await waitFor(() => {
+        expect(screen.getByText('Has Materialization')).toBeInTheDocument();
+      });
+
+      const checkbox = screen.getByLabelText('Has Materialization');
+      const callsBefore = mockDjClient.listNodesForLanding.mock.calls.length;
+      fireEvent.click(checkbox);
+
+      await waitFor(() => {
+        expect(
+          mockDjClient.listNodesForLanding.mock.calls.length,
+        ).toBeGreaterThan(callsBefore);
+      });
+    });
+  });
+
+  describe('formatRelativeTime', () => {
+    it('shows last_deployed_at timestamp on branch cards', async () => {
+      mockDjClient.getNamespaceGitConfig.mockResolvedValue({
+        github_repo_path: 'org/repo',
+        git_branch: 'main',
+        default_branch: 'main',
+        parent_namespace: null,
+        git_only: false,
+      });
+      mockDjClient.getNamespaceBranches.mockResolvedValue([
+        {
+          namespace: 'default.main',
+          git_branch: 'main',
+          num_nodes: 3,
+          invalid_node_count: 0,
+          last_deployed_at: new Date(
+            Date.now() - 2 * 24 * 60 * 60 * 1000,
+          ).toISOString(),
+        },
+      ]);
+
+      renderWithProviders(<NamespacePage />);
+
+      await waitFor(() => {
+        // 'main' appears in both the card title and default branch section header
+        expect(screen.getAllByText('main').length).toBeGreaterThan(0);
+        // Should show relative time like "2d ago" (may appear on multiple elements)
+        expect(screen.getAllByText(/ago/).length).toBeGreaterThan(0);
+      });
+    });
   });
 });