datajunction-ui 0.0.27 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.27",
+  "version": "0.0.30",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/__tests__/reportWebVitals.test.ts

@@ -0,0 +1,27 @@
+import reportWebVitals from '../reportWebVitals';
+
+describe('reportWebVitals', () => {
+  it('calls web vitals functions when handler is provided', async () => {
+    const mockHandler = jest.fn();
+
+    // Call reportWebVitals with a handler
+    reportWebVitals(mockHandler);
+
+    // Wait for dynamic import to resolve
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // The handler should have been called by web vitals
+    // (we just verify it doesn't throw)
+    expect(mockHandler).toBeDefined();
+  });
+
+  it('does nothing when no handler is provided', () => {
+    // Should not throw
+    expect(() => reportWebVitals()).not.toThrow();
+  });
+
+  it('does nothing when handler is not a function', () => {
+    // Should not throw
+    expect(() => reportWebVitals(undefined)).not.toThrow();
+  });
+});

package/src/app/components/NamespaceHeader.jsx

@@ -1,31 +1,90 @@
-import { Component } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import HorizontalHierarchyIcon from '../icons/HorizontalHierarchyIcon';
+import DJClientContext from '../providers/djclient';
+
+export default function NamespaceHeader({ namespace }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [sources, setSources] = useState(null);
+
+  useEffect(() => {
+    const fetchSources = async () => {
+      if (namespace) {
+        try {
+          const data = await djClient.namespaceSources(namespace);
+          setSources(data);
+        } catch (e) {
+          // Silently fail - badge just won't show
+        }
+      }
+    };
+    fetchSources();
+  }, [djClient, namespace]);
+
+  const namespaceParts = namespace ? namespace.split('.') : [];
+  const namespaceList = namespaceParts.map((piece, index) => {
+    return (
+      <li className="breadcrumb-item" key={index}>
+        <a
+          className="link-body-emphasis"
+          href={'/namespaces/' + namespaceParts.slice(0, index + 1).join('.')}
+        >
+          {piece}
+        </a>
+      </li>
+    );
+  });
+
+  // Render source badge
+  const renderSourceBadge = () => {
+    if (!sources || sources.total_deployments === 0) {
+      return null;
+    }
+
+    const isGit = sources.primary_source?.type === 'git';
 
-export default class NamespaceHeader extends Component {
-  render() {
-    const { namespace } = this.props;
-    const namespaceParts = namespace.split('.');
-    const namespaceList = namespaceParts.map((piece, index) => {
-      return (
-        <li className="breadcrumb-item" key={index}>
-          <a
-            className="link-body-emphasis"
-            href={'/namespaces/' + namespaceParts.slice(0, index + 1).join('.')}
-          >
-            {piece}
-          </a>
-        </li>
-      );
-    });
     return (
-      <ol className="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
-        <li className="breadcrumb-item">
-          <a href="/">
-            <HorizontalHierarchyIcon />
-          </a>
-        </li>
-        {namespaceList}
-      </ol>
+      <li
+        className="breadcrumb-item"
+        style={{ display: 'flex', alignItems: 'center' }}
+      >
+        <span
+          title={
+            isGit
+              ? `CI-managed: ${sources.primary_source.repository}${
+                  sources.primary_source.branch
+                    ? ` (${sources.primary_source.branch})`
+                    : ''
+                }`
+              : 'Local/adhoc deployment'
+          }
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '4px',
+            padding: '2px 8px',
+            fontSize: '11px',
+            borderRadius: '12px',
+            backgroundColor: isGit ? '#d4edda' : '#e2e3e5',
+            color: isGit ? '#155724' : '#383d41',
+            cursor: 'help',
+          }}
+        >
+          {isGit ? '🔗' : '📁'}
+          {isGit ? 'CI' : 'Local'}
+        </span>
+      </li>
     );
-  }
+  };
+
+  return (
+    <ol className="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
+      <li className="breadcrumb-item">
+        <a href="/">
+          <HorizontalHierarchyIcon />
+        </a>
+      </li>
+      {namespaceList}
+      {renderSourceBadge()}
+    </ol>
+  );
 }

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

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { createRenderer } from 'react-test-renderer/shallow';
+import { MemoryRouter } from 'react-router-dom';
 
 import NamespaceHeader from '../NamespaceHeader';
+import DJClientContext from '../../providers/djclient';
 
 const renderer = createRenderer();
 
@@ -11,4 +14,145 @@ describe('<NamespaceHeader />', () => {
     const renderedOutput = renderer.getRenderOutput();
     expect(renderedOutput).toMatchSnapshot();
   });
+
+  it('should render git source badge when source type is git with branch', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 5,
+        primary_source: {
+          type: 'git',
+          repository: 'github.com/test/repo',
+          branch: 'main',
+        },
+      }),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.namespaceSources).toHaveBeenCalledWith(
+        'test.namespace',
+      );
+    });
+
+    // Should render CI badge for git source
+    expect(screen.getByText(/CI/)).toBeInTheDocument();
+  });
+
+  it('should render git source badge when source type is git without branch', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 3,
+        primary_source: {
+          type: 'git',
+          repository: 'github.com/test/repo',
+          branch: null,
+        },
+      }),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.namespaceSources).toHaveBeenCalledWith(
+        'test.namespace',
+      );
+    });
+
+    // Should render CI badge for git source even without branch
+    expect(screen.getByText(/CI/)).toBeInTheDocument();
+  });
+
+  it('should render local source badge when source type is local', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 2,
+        primary_source: {
+          type: 'local',
+          hostname: 'localhost',
+        },
+      }),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.namespaceSources).toHaveBeenCalledWith(
+        'test.namespace',
+      );
+    });
+
+    // Should render Local badge for local source
+    expect(screen.getByText(/Local/)).toBeInTheDocument();
+  });
+
+  it('should not render badge when no deployments', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 0,
+        primary_source: null,
+      }),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.namespaceSources).toHaveBeenCalledWith(
+        'test.namespace',
+      );
+    });
+
+    // Should not render any source badge
+    expect(screen.queryByText(/CI/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Local/)).not.toBeInTheDocument();
+  });
+
+  it('should handle API error gracefully', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockRejectedValue(new Error('API Error')),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.namespaceSources).toHaveBeenCalledWith(
+        'test.namespace',
+      );
+    });
+
+    // Should still render breadcrumb without badge
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(screen.getByText('namespace')).toBeInTheDocument();
+    expect(screen.queryByText(/CI/)).not.toBeInTheDocument();
+  });
 });

package/src/app/components/__tests__/NotificationBell.test.tsx

@@ -310,4 +310,27 @@ describe('<NotificationBell />', () => {
     // onDropdownToggle should have been called with false
     expect(onDropdownToggle).toHaveBeenCalledWith(false);
   });
+
+  it('handles error when fetching notifications fails', async () => {
+    const consoleErrorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest
+        .fn()
+        .mockRejectedValue(new Error('Network error')),
+    });
+
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        'Error fetching notifications:',
+        expect.any(Error),
+      );
+    });
+
+    consoleErrorSpy.mockRestore();
+  });
 });

package/src/app/components/djgraph/__tests__/DJNode.test.tsx

@@ -21,4 +21,40 @@ describe('<DJNode />', () => {
     const renderedOutput = renderer.getRenderOutput();
     expect(renderedOutput).toMatchSnapshot();
   });
+
+  it('should render with is_current true and non-metric type (collapsed=false)', () => {
+    renderer.render(
+      <DJNode
+        id="2"
+        data={{
+          name: 'shared.dimensions.accounts',
+          column_names: ['a', 'b'],
+          type: 'dimension',
+          primary_key: ['id'],
+          is_current: true,
+          display_name: 'Accounts',
+        }}
+      />,
+    );
+    const renderedOutput = renderer.getRenderOutput();
+    expect(renderedOutput).toBeTruthy();
+  });
+
+  it('should render with metric type (collapsed=true)', () => {
+    renderer.render(
+      <DJNode
+        id="3"
+        data={{
+          name: 'default.revenue',
+          column_names: [],
+          type: 'metric',
+          primary_key: [],
+          is_current: true,
+          display_name: 'Revenue',
+        }}
+      />,
+    );
+    const renderedOutput = renderer.getRenderOutput();
+    expect(renderedOutput).toBeTruthy();
+  });
 });

package/src/app/icons/__tests__/Icons.test.jsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import CommitIcon from '../CommitIcon';
+import InvalidIcon from '../InvalidIcon';
+
+describe('Icon components', () => {
+  it('should render CommitIcon with default props', () => {
+    render(<CommitIcon />);
+    expect(document.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('should render InvalidIcon with default props', () => {
+    render(<InvalidIcon />);
+    expect(screen.getByTestId('invalid-icon')).toBeInTheDocument();
+  });
+
+  it('should render InvalidIcon with custom props', () => {
+    render(<InvalidIcon width="50px" height="50px" style={{ color: 'red' }} />);
+    const icon = screen.getByTestId('invalid-icon');
+    expect(icon).toHaveAttribute('width', '50px');
+    expect(icon).toHaveAttribute('height', '50px');
+  });
+});

package/src/app/pages/NamespacePage/Explorer.jsx

@@ -4,7 +4,12 @@ import ExpandedIcon from '../../icons/ExpandedIcon';
 import AddItemIcon from '../../icons/AddItemIcon';
 import DJClientContext from '../../providers/djclient';
 
-const Explorer = ({ item = [], current, isTopLevel = false }) => {
+const Explorer = ({
+  item = [],
+  current,
+  isTopLevel = false,
+  namespaceSources = {},
+}) => {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [items, setItems] = useState([]);
   const [expand, setExpand] = useState(false);
@@ -106,13 +111,65 @@ const Explorer = ({ item = [], current, isTopLevel = false }) => {
           }}
         >
           {items.children && items.children.length > 0 ? (
-            <span style={{ marginRight: '4px' }}>
+            <span
+              style={{
+                fontSize: '10px',
+                color: '#94a3b8',
+                width: '12px',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
               {!expand ? <CollapsedIcon /> : <ExpandedIcon />}
             </span>
           ) : (
-            <span style={{ left: '-18px' }} />
+            <span style={{ width: '12px' }} />
           )}
           <a href={`/namespaces/${items.path}`}>{items.namespace}</a>
+          {/* Deployment source badge */}
+          {namespaceSources[items.path] &&
+            namespaceSources[items.path].total_deployments > 0 &&
+            namespaceSources[items.path].primary_source?.type === 'git' && (
+              <span
+                title={`Git: ${
+                  namespaceSources[items.path].primary_source.repository ||
+                  'unknown'
+                }${
+                  namespaceSources[items.path].primary_source.branch
+                    ? ` (${namespaceSources[items.path].primary_source.branch})`
+                    : ''
+                }`}
+                style={{
+                  marginLeft: '6px',
+                  fontSize: '9px',
+                  padding: '1px 4px',
+                  borderRadius: '3px',
+                  backgroundColor: '#d4edda',
+                  color: '#155724',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '2px',
+                }}
+              >
+                <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"
+                >
+                  <line x1="6" y1="3" x2="6" y2="15"></line>
+                  <circle cx="18" cy="6" r="3"></circle>
+                  <circle cx="6" cy="18" r="3"></circle>
+                  <path d="M18 9a9 9 0 0 1-9 9"></path>
+                </svg>
+                Git
+              </span>
+            )}
           <button
             className="namespace-add-button"
             onClick={e => {
@@ -144,10 +201,10 @@ const Explorer = ({ item = [], current, isTopLevel = false }) => {
           {isCreatingChild && (
             <div
               style={{
-                paddingLeft: '1.4rem',
-                marginLeft: '1rem',
-                borderLeft: '1px solid rgb(218 233 255)',
-                marginTop: '5px',
+                paddingLeft: '0.55rem',
+                marginLeft: '0.25rem',
+                borderLeft: '1px solid #e2e8f0',
+                marginTop: '2px',
               }}
             >
               <form
@@ -205,9 +262,9 @@ const Explorer = ({ item = [], current, isTopLevel = false }) => {
             items.children.map((item, index) => (
               <div
                 style={{
-                  paddingLeft: '1.4rem',
-                  marginLeft: '1rem',
-                  borderLeft: '1px solid rgb(218 233 255)',
+                  paddingLeft: '0.55rem',
+                  marginLeft: '0.25rem',
+                  borderLeft: '1px solid #e2e8f0',
                 }}
                 key={index}
               >
@@ -219,6 +276,7 @@ const Explorer = ({ item = [], current, isTopLevel = false }) => {
                     item={item}
                     current={highlight}
                     isTopLevel={false}
+                    namespaceSources={namespaceSources}
                   />
                 </div>
               </div>

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

@@ -14,6 +14,8 @@ const mockDjClient = {
   whoami: jest.fn(),
   users: jest.fn(),
   listTags: jest.fn(),
+  namespaceSources: jest.fn(),
+  namespaceSourcesBulk: jest.fn(),
 };
 
 const mockCurrentUser = { username: 'dj', email: 'dj@test.com' };
@@ -67,6 +69,10 @@ describe('NamespacePage', () => {
       { name: 'tag1' },
       { name: 'tag2' },
     ]);
+    mockDjClient.namespaceSources.mockResolvedValue({ sources: [] });
+    mockDjClient.namespaceSourcesBulk.mockResolvedValue({
+      namespace_sources: {},
+    });
     mockDjClient.namespaces.mockResolvedValue([
       {
         namespace: 'common.one',
@@ -280,13 +286,15 @@ describe('NamespacePage', () => {
 
     // Wait for namespaces to load
     await waitFor(() => {
-      expect(screen.getByText('default')).toBeInTheDocument();
+      expect(screen.getAllByText('default').length).toBeGreaterThan(0);
     });
 
-    // Find the namespace and hover to reveal add button
-    const defaultNamespace = screen
-      .getByText('default')
-      .closest('.select-name');
+    // Find the namespace in the sidebar by looking for the link with specific href
+    const allLinks = screen.getAllByRole('link');
+    const defaultNamespaceLink = allLinks.find(
+      link => link.getAttribute('href') === '/namespaces/default',
+    );
+    const defaultNamespace = defaultNamespaceLink.closest('.select-name');
     fireEvent.mouseEnter(defaultNamespace);
 
     // Find the add namespace button (it exists but is hidden, so use getAllByTitle)
@@ -340,13 +348,15 @@ describe('NamespacePage', () => {
 
     // Wait for namespaces to load
     await waitFor(() => {
-      expect(screen.getByText('default')).toBeInTheDocument();
+      expect(screen.getAllByText('default').length).toBeGreaterThan(0);
     });
 
-    // Find the namespace and hover to reveal add button
-    const defaultNamespace = screen
-      .getByText('default')
-      .closest('.select-name');
+    // Find the namespace in the sidebar by looking for the link with specific href
+    const allLinks = screen.getAllByRole('link');
+    const defaultNamespaceLink = allLinks.find(
+      link => link.getAttribute('href') === '/namespaces/default',
+    );
+    const defaultNamespace = defaultNamespaceLink.closest('.select-name');
     fireEvent.mouseEnter(defaultNamespace);
 
     // Find the add namespace button (it exists but is hidden, so use getAllByTitle)
@@ -384,7 +394,7 @@ describe('NamespacePage', () => {
       renderWithProviders(<NamespacePage />);
 
       await waitFor(() => {
-        expect(screen.getByText('Quick:')).toBeInTheDocument();
+        expect(screen.getByText('Quick')).toBeInTheDocument();
       });
 
       // Check that preset buttons are rendered