datajunction-ui 0.0.27-alpha.0 → 0.0.29

package/package.json

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

package/src/app/components/NamespaceHeader.jsx

@@ -1,31 +1,101 @@
-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';
+    const hasMultiple = sources.has_multiple_sources;
 
-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={
+            hasMultiple
+              ? `Warning: ${sources.sources.length} deployment sources`
+              : 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: hasMultiple
+              ? '#fff3cd'
+              : isGit
+              ? '#d4edda'
+              : '#e2e3e5',
+            color: hasMultiple ? '#856404' : isGit ? '#155724' : '#383d41',
+            cursor: 'help',
+          }}
+        >
+          {hasMultiple ? '⚠️' : isGit ? '🔗' : '📁'}
+          {hasMultiple
+            ? `${sources.sources.length} sources`
+            : 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,166 @@ describe('<NamespaceHeader />', () => {
     const renderedOutput = renderer.getRenderOutput();
     expect(renderedOutput).toMatchSnapshot();
   });
+
+  it('should render git source badge when source type is git', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 5,
+        has_multiple_sources: false,
+        primary_source: {
+          type: 'git',
+          repository: 'github.com/test/repo',
+          branch: 'main',
+        },
+        sources: [
+          {
+            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 local source badge when source type is local', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 2,
+        has_multiple_sources: false,
+        primary_source: {
+          type: 'local',
+          hostname: 'localhost',
+        },
+        sources: [
+          {
+            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 render warning badge when multiple sources exist', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 10,
+        has_multiple_sources: true,
+        primary_source: {
+          type: 'git',
+          repository: 'github.com/test/repo',
+        },
+        sources: [
+          { type: 'git', repository: 'github.com/test/repo' },
+          { 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 warning badge for multiple sources
+    expect(screen.getByText(/2 sources/)).toBeInTheDocument();
+  });
+
+  it('should not render badge when no deployments', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 0,
+        has_multiple_sources: false,
+        primary_source: null,
+        sources: [],
+      }),
+    };
+
+    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/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