datajunction-ui 0.0.106 → 0.0.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.106",
+  "version": "0.0.107",
   "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/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();
@@ -486,6 +494,7 @@ export function NamespacePage() {
             path: path,
           };
           currentLevel.push(existingNamespace);
+          currentLevel.sort((a, b) => a.namespace.localeCompare(b.namespace));
         }
 
         currentLevel = existingNamespace.children;
@@ -620,7 +629,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 +649,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 +696,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 +745,7 @@ export function NamespacePage() {
       ))
     ) : (
       <tr>
-        <td colSpan={7}>
+        <td colSpan={8}>
           <span
             style={{
               display: 'block',