datajunction-ui 0.0.22 → 0.0.23-dev2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.22",
+  "version": "0.0.23-dev2",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -180,14 +180,21 @@
     }
   },
   "resolutions": {
-    "@codemirror/state": "6.2.0",
-    "@codemirror/view": "6.2.0",
-    "@lezer/common": "^1.0.0"
+    "@lezer/common": "^1.2.0",
+    "test-exclude": "^7.0.1",
+    "string-width": "^4.2.3",
+    "string-width-cjs": "npm:string-width@^4.2.3",
+    "strip-ansi": "^6.0.1",
+    "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+    "wrap-ansi": "^7.0.0",
+    "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@testing-library/user-event": "14.4.3",
+    "@types/glob": "^8.1.0",
+    "@types/minimatch": "^5.1.2",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react-hooks": "4.6.0",

package/src/app/components/NotificationBell.tsx

@@ -1,5 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 import DJClientContext from '../providers/djclient';
+import { useCurrentUser } from '../providers/UserProvider';
 import NotificationIcon from '../icons/NotificationIcon';
 import SettingsIcon from '../icons/SettingsIcon';
 import LoadingIcon from '../icons/LoadingIcon';
@@ -68,6 +69,7 @@ export default function NotificationBell({
   forceClose,
 }: NotificationBellProps) {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const { currentUser, loading: userLoading } = useCurrentUser();
   const [showDropdown, setShowDropdown] = useState(false);
 
   // Close when forceClose becomes true
@@ -82,14 +84,15 @@ export default function NotificationBell({
   const [loading, setLoading] = useState(false);
   const [unreadCount, setUnreadCount] = useState(0);
 
-  // Fetch notifications on mount
+  // Fetch notifications when user data is available
   useEffect(() => {
+    if (userLoading) return;
+
     async function fetchNotifications() {
       setLoading(true);
       try {
-        const current = await djClient.whoami();
         const history: HistoryEntry[] =
-          (await djClient.getSubscribedHistory(10)) || [];
+          (await djClient.getSubscribedHistory(5)) || [];
 
         // Get unique entity names and fetch their info via GraphQL
         // (some may not be nodes, but GraphQL will just not return them)
@@ -101,7 +104,10 @@ export default function NotificationBell({
         const enriched = enrichWithNodeInfo(history, nodes);
         setNotifications(enriched);
         setUnreadCount(
-          calculateUnreadCount(history, current?.last_viewed_notifications_at),
+          calculateUnreadCount(
+            history,
+            currentUser?.last_viewed_notifications_at,
+          ),
         );
       } catch (error) {
         console.error('Error fetching notifications:', error);
@@ -110,7 +116,7 @@ export default function NotificationBell({
       }
     }
     fetchNotifications();
-  }, [djClient]);
+  }, [djClient, currentUser, userLoading]);
 
   // Close dropdown when clicking outside
   useEffect(() => {

package/src/app/components/UserMenu.tsx

@@ -1,5 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 import DJClientContext from '../providers/djclient';
+import { useCurrentUser } from '../providers/UserProvider';
 
 interface User {
   id: number;
@@ -32,7 +33,7 @@ export default function UserMenu({
   forceClose,
 }: UserMenuProps) {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const { currentUser } = useCurrentUser();
   const [showDropdown, setShowDropdown] = useState(false);
 
   // Close when forceClose becomes true
@@ -42,15 +43,6 @@ export default function UserMenu({
     }
   }, [forceClose, showDropdown]);
 
-  // Fetch current user on mount
-  useEffect(() => {
-    async function fetchUser() {
-      const user = await djClient.whoami();
-      setCurrentUser(user);
-    }
-    fetchUser();
-  }, [djClient]);
-
   // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -79,7 +71,7 @@ export default function UserMenu({
   return (
     <div className="nav-dropdown user-menu-dropdown">
       <button className="avatar-button" onClick={handleToggle}>
-        {getInitials(currentUser)}
+        {getInitials(currentUser as User | null)}
       </button>
       {showDropdown && (
         <div className="nav-dropdown-menu">

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import NotificationBell from '../NotificationBell';
 import DJClientContext from '../../providers/djclient';
+import { UserProvider } from '../../providers/UserProvider';
 
 describe('<NotificationBell />', () => {
   const mockNotifications = [
@@ -52,10 +53,12 @@ describe('<NotificationBell />', () => {
     ...overrides,
   });
 
-  const renderWithContext = (mockDjClient: any) => {
+  const renderWithContext = (mockDjClient: any, props = {}) => {
     return render(
       <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
-        <NotificationBell />
+        <UserProvider>
+          <NotificationBell {...props} />
+        </UserProvider>
       </DJClientContext.Provider>,
     );
   };
@@ -218,7 +221,9 @@ describe('<NotificationBell />', () => {
       <DJClientContext.Provider
         value={{ DataJunctionAPI: mockDjClient as any }}
       >
-        <NotificationBell onDropdownToggle={onDropdownToggle} />
+        <UserProvider>
+          <NotificationBell onDropdownToggle={onDropdownToggle} />
+        </UserProvider>
       </DJClientContext.Provider>,
     );
 
@@ -239,7 +244,9 @@ describe('<NotificationBell />', () => {
       <DJClientContext.Provider
         value={{ DataJunctionAPI: mockDjClient as any }}
       >
-        <NotificationBell forceClose={false} />
+        <UserProvider>
+          <NotificationBell forceClose={false} />
+        </UserProvider>
       </DJClientContext.Provider>,
     );
 
@@ -259,7 +266,9 @@ describe('<NotificationBell />', () => {
       <DJClientContext.Provider
         value={{ DataJunctionAPI: mockDjClient as any }}
       >
-        <NotificationBell forceClose={true} />
+        <UserProvider>
+          <NotificationBell forceClose={true} />
+        </UserProvider>
       </DJClientContext.Provider>,
     );
 
@@ -275,7 +284,9 @@ describe('<NotificationBell />', () => {
       <DJClientContext.Provider
         value={{ DataJunctionAPI: mockDjClient as any }}
       >
-        <NotificationBell onDropdownToggle={onDropdownToggle} />
+        <UserProvider>
+          <NotificationBell onDropdownToggle={onDropdownToggle} />
+        </UserProvider>
       </DJClientContext.Provider>,
     );
 

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import UserMenu from '../UserMenu';
 import DJClientContext from '../../providers/djclient';
+import { UserProvider } from '../../providers/UserProvider';
 
 describe('<UserMenu />', () => {
   const createMockDjClient = (overrides = {}) => ({
@@ -17,7 +18,9 @@ describe('<UserMenu />', () => {
   const renderWithContext = (mockDjClient: any, props = {}) => {
     return render(
       <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
-        <UserMenu {...props} />
+        <UserProvider>
+          <UserMenu {...props} />
+        </UserProvider>
       </DJClientContext.Provider>,
     );
   };
@@ -164,7 +167,9 @@ describe('<UserMenu />', () => {
       <DJClientContext.Provider
         value={{ DataJunctionAPI: mockDjClient as any }}
       >
-        <UserMenu forceClose={false} />
+        <UserProvider>
+          <UserMenu forceClose={false} />
+        </UserProvider>
       </DJClientContext.Provider>,
     );
 
@@ -184,7 +189,9 @@ describe('<UserMenu />', () => {
       <DJClientContext.Provider
         value={{ DataJunctionAPI: mockDjClient as any }}
       >
-        <UserMenu forceClose={true} />
+        <UserProvider>
+          <UserMenu forceClose={true} />
+        </UserProvider>
       </DJClientContext.Provider>,
     );
 

package/src/app/index.tsx

@@ -11,7 +11,7 @@ import { NamespacePage } from './pages/NamespacePage/Loadable';
 import { OverviewPage } from './pages/OverviewPage/Loadable';
 import { SettingsPage } from './pages/SettingsPage/Loadable';
 import { NotificationsPage } from './pages/NotificationsPage/Loadable';
-import { NodePage } from './pages/NodePage/Loadable';
+import { NodePage } from './pages/NodePage';
 import RevisionDiff from './pages/NodePage/RevisionDiff';
 import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
 import { CubeBuilderPage } from './pages/CubeBuilderPage/Loadable';
@@ -21,8 +21,9 @@ import { AddEditTagPage } from './pages/AddEditTagPage/Loadable';
 import { NotFoundPage } from './pages/NotFoundPage/Loadable';
 import { LoginPage } from './pages/LoginPage';
 import { RegisterTablePage } from './pages/RegisterTablePage';
-import { Root } from './pages/Root/Loadable';
+import { Root } from './pages/Root';
 import DJClientContext from './providers/djclient';
+import { UserProvider } from './providers/UserProvider';
 import { DataJunctionAPI } from './services/DJService';
 import { CookiesProvider, useCookies } from 'react-cookie';
 import * as Constants from './constants';
@@ -44,101 +45,107 @@ export function App() {
               />
             </Helmet>
             <DJClientContext.Provider value={{ DataJunctionAPI }}>
-              <Routes>
-                <Route
-                  path="/"
-                  element={<Root />}
-                  children={
-                    <>
-                      <Route path="nodes" key="nodes">
-                        <Route path=":name" element={<NodePage />} />
-                        <Route
-                          path=":name/edit"
-                          key="edit"
-                          element={<AddEditNodePage />}
-                        />
-                        <Route
-                          path=":name/edit-cube"
-                          key="edit-cube"
-                          element={<CubeBuilderPage />}
-                        />
-                        <Route
-                          path=":name/revisions/:revision"
-                          element={<RevisionDiff />}
-                        />
-                        <Route path=":name/:tab" element={<NodePage />} />
-                      </Route>
+              <UserProvider>
+                <Routes>
+                  <Route
+                    path="/"
+                    element={<Root />}
+                    children={
+                      <>
+                        <Route path="nodes" key="nodes">
+                          <Route path=":name" element={<NodePage />} />
+                          <Route
+                            path=":name/edit"
+                            key="edit"
+                            element={<AddEditNodePage />}
+                          />
+                          <Route
+                            path=":name/edit-cube"
+                            key="edit-cube"
+                            element={<CubeBuilderPage />}
+                          />
+                          <Route
+                            path=":name/revisions/:revision"
+                            element={<RevisionDiff />}
+                          />
+                          <Route path=":name/:tab" element={<NodePage />} />
+                        </Route>
 
-                      <Route path="/" element={<NamespacePage />} key="index" />
-                      <Route path="namespaces">
                         <Route
-                          path=":namespace"
+                          path="/"
                           element={<NamespacePage />}
-                          key="namespaces"
+                          key="index"
                         />
-                      </Route>
-                      <Route
-                        path="create/tag"
-                        key="createtag"
-                        element={<AddEditTagPage />}
-                      ></Route>
-                      <Route
-                        path="create/source"
-                        key="register"
-                        element={<RegisterTablePage />}
-                      ></Route>
-                      <Route path="/create/cube">
+                        <Route path="namespaces">
+                          <Route
+                            path=":namespace"
+                            element={<NamespacePage />}
+                            key="namespaces"
+                          />
+                        </Route>
+                        <Route
+                          path="create/tag"
+                          key="createtag"
+                          element={<AddEditTagPage />}
+                        ></Route>
+                        <Route
+                          path="create/source"
+                          key="register"
+                          element={<RegisterTablePage />}
+                        ></Route>
+                        <Route path="/create/cube">
+                          <Route
+                            path=":initialNamespace"
+                            key="create"
+                            element={<CubeBuilderPage />}
+                          />
+                          <Route
+                            path=""
+                            key="create"
+                            element={<CubeBuilderPage />}
+                          />
+                        </Route>
+                        <Route path="create/:nodeType">
+                          <Route
+                            path=":initialNamespace"
+                            key="create"
+                            element={<AddEditNodePage />}
+                          />
+                          <Route
+                            path=""
+                            key="create"
+                            element={<AddEditNodePage />}
+                          />
+                        </Route>
                         <Route
-                          path=":initialNamespace"
-                          key="create"
-                          element={<CubeBuilderPage />}
+                          path="sql"
+                          key="sql"
+                          element={<SQLBuilderPage />}
                         />
+                        <Route path="tags" key="tags">
+                          <Route path=":name" element={<TagPage />} />
+                        </Route>
                         <Route
-                          path=""
-                          key="create"
-                          element={<CubeBuilderPage />}
+                          path="overview"
+                          key="overview"
+                          element={<OverviewPage />}
                         />
-                      </Route>
-                      <Route path="create/:nodeType">
                         <Route
-                          path=":initialNamespace"
-                          key="create"
-                          element={<AddEditNodePage />}
+                          path="settings"
+                          key="settings"
+                          element={<SettingsPage />}
                         />
                         <Route
-                          path=""
-                          key="create"
-                          element={<AddEditNodePage />}
+                          path="notifications"
+                          key="notifications"
+                          element={<NotificationsPage />}
                         />
-                      </Route>
-                      <Route
-                        path="sql"
-                        key="sql"
-                        element={<SQLBuilderPage />}
-                      />
-                      <Route path="tags" key="tags">
-                        <Route path=":name" element={<TagPage />} />
-                      </Route>
-                      <Route
-                        path="overview"
-                        key="overview"
-                        element={<OverviewPage />}
-                      />
-                      <Route
-                        path="settings"
-                        key="settings"
-                        element={<SettingsPage />}
-                      />
-                      <Route
-                        path="notifications"
-                        key="notifications"
-                        element={<NotificationsPage />}
-                      />
-                    </>
-                  }
-                />
-                <Route path="*" element={<NotFoundPage />} />
-              </Routes>
+                      </>
+                    }
+                  />
+                  <Route path="*" element={<NotFoundPage />} />
+                </Routes>
+              </UserProvider>
             </DJClientContext.Provider>
           </>
         ) : (

package/src/app/pages/AddEditNodePage/OwnersField.jsx

@@ -4,13 +4,14 @@
 import { ErrorMessage } from 'formik';
 import { useContext, useEffect, useState } from 'react';
 import DJClientContext from '../../providers/djclient';
+import { useCurrentUser } from '../../providers/UserProvider';
 import { FormikSelect } from './FormikSelect';
 
 export const OwnersField = ({ defaultValue }) => {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const { currentUser } = useCurrentUser();
 
   const [availableUsers, setAvailableUsers] = useState([]);
-  const [currentUser, setCurrentUser] = useState(null);
 
   useEffect(() => {
     async function fetchData() {
@@ -23,8 +24,6 @@ export const OwnersField = ({ defaultValue }) => {
           };
         }),
       );
-      const current = await djClient.whoami();
-      setCurrentUser(current);
     }
     fetchData();
   }, [djClient]);

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

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 import { useContext, useEffect, useState } from 'react';
 import NodeStatus from '../NodePage/NodeStatus';
 import DJClientContext from '../../providers/djclient';
+import { useCurrentUser } from '../../providers/UserProvider';
 import Explorer from '../NamespacePage/Explorer';
 import AddNodeDropdown from '../../components/AddNodeDropdown';
 import NodeListActions from '../../components/NodeListActions';
@@ -24,6 +25,7 @@ export function NamespacePage() {
   const fields = ['name', 'displayName', 'type', 'status', 'mode', 'updatedAt'];
 
   const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const { currentUser } = useCurrentUser();
   var { namespace } = useParams();
 
   const [state, setState] = useState({
@@ -31,7 +33,6 @@ export function NamespacePage() {
     nodes: [],
   });
   const [retrieved, setRetrieved] = useState(false);
-  const [currentUser, setCurrentUser] = useState(null);
 
   const [filters, setFilters] = useState({
     tags: [],
@@ -105,9 +106,6 @@ export function NamespacePage() {
       const namespaces = await djClient.namespaces();
       const hierarchy = createNamespaceHierarchy(namespaces);
       setNamespaceHierarchy(hierarchy);
-      const currentUser = await djClient.whoami();
-      // setFilters({...filters, edited_by: currentUser?.username});
-      setCurrentUser(currentUser);
     };
     fetchData().catch(console.error);
   }, [djClient, djClient.namespaces]);

package/src/app/pages/NodePage/ClientCodePopover.jsx

@@ -1,11 +1,27 @@
+import DJClientContext from '../../providers/djclient';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useContext } from 'react';
 import { nightOwl } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import PythonIcon from '../../icons/PythonIcon';
+import LoadingIcon from 'app/icons/LoadingIcon';
 
-export default function ClientCodePopover({ code }) {
+export default function ClientCodePopover({ nodeName }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [showModal, setShowModal] = useState(false);
   const modalRef = useRef(null);
+  const [code, setCode] = useState(null);
+
+  useEffect(() => {
+    async function fetchCode() {
+      try {
+        const code = await djClient.clientCode(nodeName);
+        setCode(code);
+      } catch (err) {
+        console.log(err);
+      }
+    }
+    fetchCode();
+  }, [nodeName, djClient]);
 
   useEffect(() => {
     const handleClickOutside = event => {
@@ -83,9 +99,15 @@ export default function ClientCodePopover({ code }) {
               ×
             </button>
             <h2>Python Client Code</h2>
-            <SyntaxHighlighter language="python" style={nightOwl}>
-              {code}
-            </SyntaxHighlighter>
+            {code ? (
+              <SyntaxHighlighter language="python" style={nightOwl}>
+                {code}
+              </SyntaxHighlighter>
+            ) : (
+              <>
+                <LoadingIcon />
+              </>
+            )}
           </div>
         </div>
       )}

package/src/app/pages/NodePage/NodeInfoTab.jsx

@@ -11,9 +11,31 @@ import { labelize } from '../../../utils/form';
 SyntaxHighlighter.registerLanguage('sql', sql);
 foundation.hljs['padding'] = '2rem';
 
+// interface MetricInfo {
+//   name: string;
+//   current: MetricRevision;
+// }
+
+// interface MetricRevision {
+//   parents: array<string>;
+//   metricMetadata:
+// }
+
+// interface MetricMetadata {
+//   direction: string;
+//   unit: string;
+//   expression: string;
+//   significantDigits: string;
+//   incompatibleDruidFunctions: array<string>;
+// }
+
 export default function NodeInfoTab({ node }) {
   const [compiledSQL, setCompiledSQL] = useState('');
   const [checked, setChecked] = useState(false);
+
+  // For metrics
+  const [metricInfo, setMetricInfo] = useState(null);
+
   const nodeTags = node?.tags.map(tag => (
     <div className={'badge tag_value'}>
       <a href={`/tags/${tag.name}`}>{tag.display_name}</a>
@@ -36,17 +58,49 @@ export default function NodeInfoTab({ node }) {
     };
     fetchData().catch(console.error);
   }, [node, djClient, checked]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const metric = await djClient.getMetric(node.name);
+      setMetricInfo({
+        metric_metadata: metric.current.metricMetadata,
+        required_dimensions: metric.current.requiredDimensions,
+        upstream_node: metric.current.parents[0]?.name,
+        expression: metric.current.metricMetadata?.expression,
+        incompatible_druid_functions:
+          metric.current.metricMetadata?.incompatibleDruidFunctions || [],
+      });
+    };
+    if (node.type === 'metric') {
+      fetchData().catch(console.error);
+    }
+  }, [node, djClient]);
+
+  // For cubes
+  const [cubeElements, setCubeElements] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const cube = await djClient.cube(node.name);
+      setCubeElements(cube.cube_elements);
+    };
+    if (node.type === 'cube') {
+      fetchData().catch(console.error);
+    }
+  }, [node, djClient]);
+
   function toggle(value) {
     return !value;
   }
   const metricsWarning =
-    node?.type === 'metric' && node?.incompatible_druid_functions.length > 0 ? (
+    node?.type === 'metric' &&
+    metricInfo?.incompatible_druid_functions?.length > 0 ? (
       <div className="message warning" style={{ marginTop: '0.7rem' }}>
         ⚠{' '}
         <small>
           The following functions used in the metric definition may not be
           compatible with Druid SQL:{' '}
-          {node?.incompatible_druid_functions.map(func => (
+          {metricInfo?.incompatible_druid_functions.map(func => (
             <li
               style={{ listStyleType: 'none', margin: '0.7rem 0.7rem' }}
               key={func}
@@ -79,15 +133,15 @@ export default function NodeInfoTab({ node }) {
           <div style={{ marginBottom: '30px' }}>
             <h6 className="mb-0 w-100">Upstream Node</h6>
             <p>
-              <a href={`/nodes/${node?.upstream_node}`}>
-                {node?.upstream_node}
+              <a href={`/nodes/${metricInfo?.upstream_node}`}>
+                {metricInfo?.upstream_node}
               </a>
             </p>
           </div>
           <div>
             <h6 className="mb-0 w-100">Aggregate Expression</h6>
             <SyntaxHighlighter language="sql" style={foundation}>
-              {node?.expression}
+              {metricInfo?.expression}
             </SyntaxHighlighter>
           </div>
         </div>
@@ -163,8 +217,10 @@ export default function NodeInfoTab({ node }) {
               aria-hidden="false"
               aria-label="MetricDirection"
             >
-              {node?.metric_metadata?.direction
-                ? labelize(node?.metric_metadata?.direction?.toLowerCase())
+              {metricInfo?.metric_metadata?.direction
+                ? labelize(
+                    metricInfo?.metric_metadata?.direction?.toLowerCase(),
+                  )
                 : 'None'}
             </p>
           </div>
@@ -176,8 +232,10 @@ export default function NodeInfoTab({ node }) {
               aria-hidden="false"
               aria-label="MetricUnit"
             >
-              {node?.metric_metadata?.unit?.name
-                ? labelize(node?.metric_metadata?.unit?.name?.toLowerCase())
+              {metricInfo?.metric_metadata?.unit?.name
+                ? labelize(
+                    metricInfo?.metric_metadata?.unit?.name?.toLowerCase(),
+                  )
                 : 'None'}
             </p>
           </div>
@@ -189,7 +247,7 @@ export default function NodeInfoTab({ node }) {
               aria-hidden="false"
               aria-label="SignificantDigits"
             >
-              {node?.metric_metadata?.significantDigits || 'None'}
+              {metricInfo?.metric_metadata?.significantDigits || 'None'}
             </p>
           </div>
         </div>
@@ -218,7 +276,7 @@ export default function NodeInfoTab({ node }) {
       ''
     );
 
-  const cubeElementsDiv = node?.cube_elements ? (
+  const cubeElementsDiv = cubeElements ? (
     <div className="list-group-item d-flex">
       <div className="d-flex gap-2 w-100 justify-content-between py-3">
         <div
@@ -228,10 +286,10 @@ export default function NodeInfoTab({ node }) {
         >
           <h6 className="mb-0 w-100">Cube Elements</h6>
           <div className={`list-group-item`}>
-            {node.cube_elements.map(cubeElem =>
+            {cubeElements.map(cubeElem =>
               cubeElem.type === 'metric' ? displayCubeElement(cubeElem) : '',
             )}
-            {node.cube_elements.map(cubeElem =>
+            {cubeElements.map(cubeElem =>
               cubeElem.type !== 'metric' ? displayCubeElement(cubeElem) : '',
             )}
           </div>
@@ -375,8 +433,8 @@ export default function NodeInfoTab({ node }) {
         </div>
       </div>
       {metricMetadataDiv}
-      {node?.type !== 'cube' && node?.type !== 'metric' ? queryDiv : ''}
-      {node?.type === 'metric' ? metricQueryDiv : ''}
+      {node.type !== 'cube' && node.type !== 'metric' ? queryDiv : ''}
+      {node.type === 'metric' ? metricQueryDiv : ''}
       {customMetadataDiv}
       {cubeElementsDiv}
     </div>

package/src/app/pages/NodePage/__tests__/NodePage.test.jsx

@@ -26,7 +26,7 @@ describe('<NodePage />', () => {
         getMetric: jest.fn(),
         revalidate: jest.fn().mockReturnValue({ status: 'valid' }),
         node_dag: jest.fn().mockReturnValue(mocks.mockNodeDAG),
-        clientCode: jest.fn().mockReturnValue('dj_client = DJClient()'),
+        clientCode: jest.fn().mockResolvedValue('dj_client = DJClient()'),
         columns: jest.fn(),
         history: jest.fn(),
         revisions: jest.fn(),
@@ -298,7 +298,7 @@ describe('<NodePage />', () => {
   it('renders the NodeInfo tab correctly for a metric node', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     const element = (
@@ -351,17 +351,27 @@ describe('<NodePage />', () => {
       expect(
         screen.getByRole('dialog', { name: 'NodeType' }),
       ).toHaveTextContent('metric');
+    });
 
-      expect(
-        container.getElementsByClassName('language-sql'),
-      ).toMatchSnapshot();
+    // Wait separately for getMetric to be called and data to render
+    await waitFor(() => {
+      expect(djClient.DataJunctionAPI.getMetric).toHaveBeenCalledWith(
+        'default.num_repair_orders',
+      );
+    });
+
+    // Wait for metric expression to appear (SyntaxHighlighter may split text)
+    await waitFor(() => {
+      expect(screen.getByText(/count/)).toBeInTheDocument();
     });
+
+    expect(container.getElementsByClassName('language-sql')).toMatchSnapshot();
   }, 60000);
 
   it('renders the NodeInfo tab correctly for cube nodes', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockCubeNode);
-    djClient.DataJunctionAPI.cube.mockReturnValue(mocks.mockCubesCube);
+    djClient.DataJunctionAPI.cube.mockResolvedValue(mocks.mockCubesCube);
     const element = (
       <DJClientContext.Provider value={djClient}>
         <NodePage {...defaultProps} />
@@ -420,7 +430,7 @@ describe('<NodePage />', () => {
   it('renders the NodeColumns tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockResolvedValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     djClient.DataJunctionAPI.columns.mockResolvedValue(mocks.metricNodeColumns);
@@ -448,7 +458,7 @@ describe('<NodePage />', () => {
     );
     await waitFor(() => {
       expect(djClient.DataJunctionAPI.columns).toHaveBeenCalledWith(
-        mocks.mockMetricNode,
+        expect.objectContaining({ name: mocks.mockMetricNode.name }),
       );
       expect(
         screen.getByRole('columnheader', { name: 'ColumnName' }),
@@ -498,7 +508,7 @@ describe('<NodePage />', () => {
   it('renders the NodeHistory tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
@@ -600,7 +610,7 @@ describe('<NodePage />', () => {
   it('renders an empty NodeMaterialization tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
@@ -640,7 +650,7 @@ describe('<NodePage />', () => {
   it('renders the NodeMaterialization tab with materializations correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockTransformNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
@@ -795,7 +805,7 @@ describe('<NodePage />', () => {
   it('renders a NodeColumnLineage tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
@@ -828,7 +838,7 @@ describe('<NodePage />', () => {
   it('renders a NodeGraph tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);

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

@@ -17,6 +17,7 @@ import NodesWithDimension from './NodesWithDimension';
 import NodeColumnLineage from './NodeLineageTab';
 import EditIcon from '../../icons/EditIcon';
 import AlertIcon from '../../icons/AlertIcon';
+import LoadingIcon from '../../icons/LoadingIcon';
 import NodeDependenciesTab from './NodeDependenciesTab';
 import { useNavigate } from 'react-router-dom';
 
@@ -30,7 +31,7 @@ export function NodePage() {
     selectedTab: tab || 'info',
   });
 
-  const [node, setNode] = useState();
+  const [node, setNode] = useState(null);
 
   const onClickTab = id => () => {
     navigate(`/nodes/${name}/${id}`);
@@ -52,21 +53,12 @@ export function NodePage() {
   useEffect(() => {
     const fetchData = async () => {
       const data = await djClient.node(name);
-      data.createNodeClientCode = await djClient.clientCode(name);
-      if (data.type === 'metric') {
-        const metric = await djClient.getMetric(name);
-        data.metric_metadata = metric.current.metricMetadata;
-        data.required_dimensions = metric.current.requiredDimensions;
-        data.upstream_node = metric.current.parents[0].name;
-        data.expression = metric.current.metricMetadata.expression;
-        data.incompatible_druid_functions =
-          metric.current.metricMetadata.incompatibleDruidFunctions;
+      if (data.message !== undefined) {
+        // Error response
+        setNode(data);
+        return;
       }
-      if (data.type === 'cube') {
-        const cube = await djClient.cube(name);
-        data.cube_elements = cube.cube_elements;
-      }
-      setNode(data);
+      setNode({ ...data });
     };
     fetchData().catch(console.error);
   }, [djClient, name]);
@@ -124,8 +116,7 @@ export function NodePage() {
 
   switch (state.selectedTab) {
     case 'info':
-      tabToDisplay =
-        node && node.message === undefined ? <NodeInfoTab node={node} /> : '';
+      tabToDisplay = node ? <NodeInfoTab node={node} /> : '';
       break;
     case 'columns':
       tabToDisplay = <NodeColumnTab node={node} djClient={djClient} />;
@@ -168,7 +159,7 @@ export function NodePage() {
 
         <WatchButton node={node} />
 
-        <ClientCodePopover code={node?.createNodeClientCode} />
+        <ClientCodePopover nodeName={name} />
         {node?.type === 'cube' && <NotebookDownload node={node} />}
       </div>
     );
@@ -179,7 +170,11 @@ export function NodePage() {
     <div className="node__header">
       <NamespaceHeader namespace={name.split('.').slice(0, -1).join('.')} />
       <div className="card">
-        {node?.message === undefined ? (
+        {node === undefined ? (
+          <div style={{ padding: '2rem', textAlign: 'center' }}>
+            <LoadingIcon />
+          </div>
+        ) : node?.message === undefined ? (
           <div className="card-header" style={{}}>
             <div
               style={{

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { SettingsPage } from '../index';
 import DJClientContext from '../../../providers/djclient';
+import { UserProvider } from '../../../providers/UserProvider';
 
 describe('SettingsPage', () => {
   const mockDjClient = {
@@ -18,7 +19,9 @@ describe('SettingsPage', () => {
   const renderWithContext = () => {
     return render(
       <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
-        <SettingsPage />
+        <UserProvider>
+          <SettingsPage />
+        </UserProvider>
       </DJClientContext.Provider>,
     );
   };

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

@@ -1,5 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 import DJClientContext from '../../providers/djclient';
+import { useCurrentUser } from '../../providers/UserProvider';
 import LoadingIcon from '../../icons/LoadingIcon';
 import ProfileSection from './ProfileSection';
 import NotificationSubscriptionsSection from './NotificationSubscriptionsSection';
@@ -11,18 +12,17 @@ import '../../../styles/settings.css';
  */
 export function SettingsPage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const [currentUser, setCurrentUser] = useState(null);
+  const { currentUser, loading: userLoading } = useCurrentUser();
   const [subscriptions, setSubscriptions] = useState([]);
   const [serviceAccounts, setServiceAccounts] = useState([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    // Wait for user to be loaded from context
+    if (userLoading) return;
+
     async function fetchData() {
       try {
-        // Fetch user profile
-        const user = await djClient.whoami();
-        setCurrentUser(user);
-
         // Fetch notification subscriptions
         const prefs = await djClient.getNotificationPreferences();
 
@@ -69,7 +69,7 @@ export function SettingsPage() {
       }
     }
     fetchData();
-  }, [djClient]);
+  }, [djClient, userLoading]);
 
   // Subscription handlers
   const handleUpdateSubscription = async (sub, activityTypes) => {

package/src/app/providers/UserProvider.tsx

@@ -0,0 +1,78 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from 'react';
+import DJClientContext from './djclient';
+
+interface User {
+  id?: number;
+  username?: string;
+  email?: string;
+  name?: string;
+  last_viewed_notifications_at?: string | null;
+}
+
+interface UserContextType {
+  currentUser: User | null;
+  loading: boolean;
+  error: Error | null;
+  refetchUser: () => Promise<void>;
+}
+
+const UserContext = createContext<UserContextType>({
+  currentUser: null,
+  loading: true,
+  error: null,
+  refetchUser: async () => {},
+});
+
+export function UserProvider({ children }: { children: React.ReactNode }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchUser = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const user = await djClient.whoami();
+      setCurrentUser(user);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to fetch user'));
+      console.error('Error fetching user:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [djClient]);
+
+  useEffect(() => {
+    fetchUser();
+  }, [fetchUser]);
+
+  const value = useMemo(
+    () => ({
+      currentUser,
+      loading,
+      error,
+      refetchUser: fetchUser,
+    }),
+    [currentUser, loading, error, fetchUser],
+  );
+
+  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+}
+
+export function useCurrentUser() {
+  const context = useContext(UserContext);
+  if (context === undefined) {
+    throw new Error('useCurrentUser must be used within a UserProvider');
+  }
+  return context;
+}
+
+export default UserContext;