datajunction-ui 0.0.106 → 0.0.108

package/package.json

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

package/src/app/components/NamespaceHeader.jsx

@@ -45,6 +45,11 @@ export default function NamespaceHeader({
     setExistingPR(null);
 
     const fetchData = async () => {
+      if (!namespace) {
+        if (onGitConfigLoaded) onGitConfigLoaded(null);
+        setGitConfigLoading(false);
+        return;
+      }
       if (namespace) {
         // Fetch deployment sources
         try {

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

@@ -8,7 +8,7 @@ const Explorer = ({
   item = [],
   current,
   isTopLevel = false,
-  namespaceSources = {},
+  gitRoots = new Set(),
 }) => {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [items, setItems] = useState([]);
@@ -139,50 +139,41 @@ const Explorer = ({
           >
             {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',
-                }}
+          {/* Git root badge */}
+          {gitRoots.has(items.path) && (
+            <span
+              title="Git-backed namespace"
+              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"
               >
-                <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>
-            )}
+                <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 => {
@@ -289,7 +280,7 @@ const Explorer = ({
                     item={item}
                     current={highlight}
                     isTopLevel={false}
-                    namespaceSources={namespaceSources}
+                    gitRoots={gitRoots}
                   />
                 </div>
               </div>

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

@@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event';
 
 const mockDjClient = {
   namespaces: jest.fn(),
+  listNamespacesWithGit: jest.fn(),
   namespace: jest.fn(),
   listNodesForLanding: jest.fn(),
   addNamespace: jest.fn(),
@@ -81,40 +82,18 @@ describe('NamespacePage', () => {
     mockDjClient.getNamespaceBranches.mockResolvedValue([]);
     mockDjClient.listDeployments.mockResolvedValue([]);
     mockDjClient.getPullRequest.mockResolvedValue(null);
-    mockDjClient.namespaces.mockResolvedValue([
-      {
-        namespace: 'common.one',
-        num_nodes: 3,
-      },
-      {
-        namespace: 'common.one.a',
-        num_nodes: 6,
-      },
-      {
-        namespace: 'common.one.b',
-        num_nodes: 17,
-      },
-      {
-        namespace: 'common.one.c',
-        num_nodes: 64,
-      },
-      {
-        namespace: 'default',
-        num_nodes: 41,
-      },
-      {
-        namespace: 'default.fruits',
-        num_nodes: 1,
-      },
-      {
-        namespace: 'default.fruits.citrus.lemons',
-        num_nodes: 1,
-      },
-      {
-        namespace: 'default.vegetables',
-        num_nodes: 2,
-      },
-    ]);
+    const mockNamespaces = [
+      { namespace: 'common.one', numNodes: 3, git: null },
+      { namespace: 'common.one.a', numNodes: 6, git: null },
+      { namespace: 'common.one.b', numNodes: 17, git: null },
+      { namespace: 'common.one.c', numNodes: 64, git: null },
+      { namespace: 'default', numNodes: 41, git: null },
+      { namespace: 'default.fruits', numNodes: 1, git: null },
+      { namespace: 'default.fruits.citrus.lemons', numNodes: 1, git: null },
+      { namespace: 'default.vegetables', numNodes: 2, git: null },
+    ];
+    mockDjClient.namespaces.mockResolvedValue(mockNamespaces);
+    mockDjClient.listNamespacesWithGit.mockResolvedValue(mockNamespaces);
     mockDjClient.namespace.mockResolvedValue([
       {
         name: 'testNode',

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

@@ -219,7 +219,15 @@ export function NamespacePage() {
   const ASC = 'ascending';
   const DESC = 'descending';
 
-  const fields = ['name', 'displayName', 'type', 'status', 'mode', 'updatedAt'];
+  const fields = [
+    'name',
+    'displayName',
+    'type',
+    'status',
+    'mode',
+    'owners',
+    'updatedAt',
+  ];
 
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   const { currentUser } = useCurrentUser();
@@ -368,7 +376,7 @@ export function NamespacePage() {
   const [retrieved, setRetrieved] = useState(false);
 
   const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
-  const [namespaceSources, setNamespaceSources] = useState({});
+  const [gitRoots, setGitRoots] = useState(new Set());
   // Use undefined to indicate "not yet loaded", null means "loaded but no config"
   const [gitConfig, setGitConfig] = useState(undefined);
 
@@ -486,6 +494,7 @@ export function NamespacePage() {
             path: path,
           };
           currentLevel.push(existingNamespace);
+          currentLevel.sort((a, b) => a.namespace.localeCompare(b.namespace));
         }
 
         currentLevel = existingNamespace.children;
@@ -497,23 +506,19 @@ export function NamespacePage() {
 
   useEffect(() => {
     const fetchData = async () => {
-      const namespaces = await djClient.namespaces();
+      const namespaces = await djClient.listNamespacesWithGit();
       const hierarchy = createNamespaceHierarchy(namespaces);
       setNamespaceHierarchy(hierarchy);
 
-      // Fetch sources for all namespaces in bulk
-      const allNamespaceNames = namespaces.map(ns => ns.namespace);
-      if (allNamespaceNames.length > 0) {
-        const sourcesResponse = await djClient.namespaceSourcesBulk(
-          allNamespaceNames,
-        );
-        if (sourcesResponse && sourcesResponse.sources) {
-          setNamespaceSources(sourcesResponse.sources);
-        }
-      }
+      const roots = new Set(
+        namespaces
+          .filter(ns => ns.git?.__typename === 'GitRootConfig')
+          .map(ns => ns.namespace),
+      );
+      setGitRoots(roots);
     };
     fetchData().catch(console.error);
-  }, [djClient, djClient.namespaces]);
+  }, [djClient]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -620,7 +625,14 @@ export function NamespacePage() {
     state.nodes.length > 0 ? (
       state.nodes.map(node => (
         <tr key={node.name}>
-          <td>
+          <td
+            style={{
+              maxWidth: '300px',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+            }}
+          >
             <a href={'/nodes/' + node.name} className="link-table">
               {isBranchNamespace && node.name.startsWith(namespace + '.')
                 ? node.name.slice(namespace.length + 1)
@@ -633,7 +645,14 @@ export function NamespacePage() {
               {node.currentVersion}
             </span>
           </td>
-          <td>
+          <td
+            style={{
+              maxWidth: '250px',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+            }}
+          >
             <a href={'/nodes/' + node.name} className="link-table">
               {node.type !== 'source' ? node.current.displayName : ''}
             </a>
@@ -673,9 +692,44 @@ export function NamespacePage() {
               {node.current.mode === 'PUBLISHED' ? 'P' : 'D'}
             </span>
           </td>
+          <td>
+            {node.owners?.length > 0 && (
+              <div style={{ display: 'flex', gap: '2px' }}>
+                {node.owners.slice(0, 3).map(owner => {
+                  const initials = owner.username
+                    .split('@')[0]
+                    .slice(0, 2)
+                    .toUpperCase();
+                  const [bg, fg] =
+                    AVATAR_COLORS[avatarColorIndex(owner.username)];
+                  return (
+                    <span
+                      key={owner.username}
+                      title={owner.username}
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '24px',
+                        height: '24px',
+                        borderRadius: '50%',
+                        backgroundColor: bg,
+                        color: fg,
+                        fontSize: '9px',
+                        fontWeight: '600',
+                        flexShrink: 0,
+                      }}
+                    >
+                      {initials}
+                    </span>
+                  );
+                })}
+              </div>
+            )}
+          </td>
           <td>
             <span className="status">
-              {new Date(node.current.updatedAt).toLocaleString('en-us')}
+              {new Date(node.current.updatedAt).toLocaleDateString('en-us')}
             </span>
           </td>
           {showEditControls && (
@@ -687,7 +741,7 @@ export function NamespacePage() {
       ))
     ) : (
       <tr>
-        <td colSpan={7}>
+        <td colSpan={8}>
           <span
             style={{
               display: 'block',
@@ -1075,7 +1129,7 @@ export function NamespacePage() {
                       defaultExpand={true}
                       isTopLevel={true}
                       key={child.namespace}
-                      namespaceSources={namespaceSources}
+                      gitRoots={gitRoots}
                     />
                   ))
                 : null}

package/src/app/services/DJService.js

@@ -1123,6 +1123,44 @@ export const DataJunctionAPI = {
     ).json();
   },
 
+  listNamespacesWithGit: async function () {
+    const query = `
+      query ListNamespaces {
+        listNamespaces {
+          namespace
+          numNodes
+          git {
+            __typename
+            ... on GitRootConfig {
+              repo
+              path
+              defaultBranch
+            }
+            ... on GitBranchConfig {
+              branch
+              gitOnly
+              parentNamespace
+              root {
+                repo
+                path
+                defaultBranch
+              }
+            }
+          }
+        }
+      }
+    `;
+    const result = await (
+      await fetch(DJ_GQL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ query }),
+      })
+    ).json();
+    return result?.data?.listNamespaces || [];
+  },
+
   namespaceSources: async function (namespace) {
     return await (
       await fetch(`${DJ_URL}/namespaces/${namespace}/sources`, {