datajunction-ui 0.0.21 → 0.0.23-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.21",
+  "version": "0.0.23-rc.0",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -180,14 +180,15 @@
     }
   },
   "resolutions": {
-    "@codemirror/state": "6.2.0",
-    "@codemirror/view": "6.2.0",
-    "@lezer/common": "^1.0.0"
+    "@lezer/common": "^1.2.0",
+    "glob": "^10.4.5"
   },
   "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>
       )}