feat(ws): Notebooks 2.0 // Frontend // Namespace selector

Signed-off-by: yelias <[email protected]>

workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/NamespaceSelector.cy.ts

@@ -0,0 +1,41 @@
+const namespaces = ['default', 'kubeflow', 'custom-namespace'];
+const mockNamespaces = {
+  data: [{ name: 'default' }, { name: 'kubeflow' }, { name: 'custom-namespace' }],
+};
+
+describe('Namespace Selector Dropdown', () => {
+  beforeEach(() => {
+    // Mock the namespaces and selected namespace
+    cy.intercept('GET', '/api/v1/namespaces', {
+      body: mockNamespaces,
+    });
+    cy.visit('/');
+  });
+
+  it('should open the namespace dropdown and select a namespace', () => {
+    cy.get('[data-testid="namespace-toggle"]').click();
+    cy.get('[data-testid="namespace-dropdown"]').should('be.visible');
+    namespaces.forEach((ns) => {
+      cy.get(`[data-testid="dropdown-item-${ns}"]`).should('exist').and('contain', ns);
+    });
+
+    cy.get('[data-testid="dropdown-item-kubeflow"]').click();
+
+    // Assert the selected namespace is updated
+    cy.get('[data-testid="namespace-toggle"]').should('contain', 'kubeflow');
+  });
+
+  it('should display the default namespace initially', () => {
+    cy.get('[data-testid="namespace-toggle"]').should('contain', 'default');
+  });
+
+  it('should navigate to notebook settings and retain the namespace', () => {
+    cy.get('[data-testid="namespace-toggle"]').click();
+    cy.get('[data-testid="dropdown-item-custom-namespace"]').click();
+    cy.get('[data-testid="namespace-toggle"]').should('contain', 'custom-namespace');
+    // Click on navigation button
+    cy.get('#Settings').click();
+    cy.get('[data-testid="nav-link-/notebookSettings"]').click();
+    cy.get('[data-testid="namespace-toggle"]').should('contain', 'custom-namespace');
+  });
+});

workspaces/frontend/src/app/App.tsx

@@ -11,14 +11,20 @@ import {
   Title,
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
+import { NamespaceProvider } from './context/NamespaceContextProvider';
+import NamespaceSelector from '../shared/components/NamespaceSelector';
 import AppRoutes from './AppRoutes';
 import NavSidebar from './NavSidebar';
 
 const App: React.FC = () => {
   const masthead = (
     <Masthead>
       <MastheadToggle>
-        <PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
+        <PageToggleButton
+          id="page-nav-toggle"
+          variant="plain"
+          aria-label="Dashboard navigation"
+        >
           <BarsIcon />
         </PageToggleButton>
       </MastheadToggle>
@@ -28,20 +34,23 @@ const App: React.FC = () => {
           <Title headingLevel="h2" size="3xl">
             Kubeflow Notebooks 2.0
           </Title>
+          <NamespaceSelector />
         </Flex>
       </MastheadContent>
     </Masthead>
   );
 
   return (
-    <Page
-      mainContainerId="primary-app-container"
-      masthead={masthead}
-      isManagedSidebar
-      sidebar={<NavSidebar />}
-    >
-      <AppRoutes />
-    </Page>
+    <NamespaceProvider>
+      <Page
+        mainContainerId="primary-app-container"
+        masthead={masthead}
+        isManagedSidebar
+        sidebar={<NavSidebar />}
+      >
+        <AppRoutes />
+      </Page>
+    </NamespaceProvider>
   );
 };
 

workspaces/frontend/src/app/NavSidebar.tsx

@@ -12,7 +12,9 @@ import { useNavData, isNavDataGroup, NavDataHref, NavDataGroup } from './AppRout
 
 const NavHref: React.FC<{ item: NavDataHref }> = ({ item }) => (
   <NavItem key={item.label} data-id={item.label} itemId={item.label}>
-    <NavLink to={item.path}>{item.label}</NavLink>
+    <NavLink to={item.path} data-testid={`nav-link-${item.path}`}>
+      {item.label}
+    </NavLink>
   </NavItem>
 );
 
@@ -40,7 +42,6 @@ const NavGroup: React.FC<{ item: NavDataGroup }> = ({ item }) => {
 
 const NavSidebar: React.FC = () => {
   const navData = useNavData();
-
   return (
     <PageSidebar>
       <PageSidebarBody>

workspaces/frontend/src/app/context/NamespaceContextProvider.tsx

@@ -0,0 +1,59 @@
+import React, {
+  useState,
+  useContext,
+  ReactNode,
+  useMemo,
+  useCallback,
+} from 'react';
+import useMount from '../hooks/useMount';
+
+interface NamespaceContextState {
+  namespaces: string[];
+  selectedNamespace: string;
+  setSelectedNamespace: (namespace: string) => void;
+}
+
+const NamespaceContext = React.createContext<NamespaceContextState | undefined>(
+  undefined
+);
+
+export const useNamespaceContext = () => {
+  const context = useContext(NamespaceContext);
+  if (!context) {
+    throw new Error(
+      "useNamespaceContext must be used within a NamespaceProvider"
+    );
+  }
+  return context;
+};
+
+interface NamespaceProviderProps {
+  children: ReactNode;
+}
+
+export const NamespaceProvider: React.FC<NamespaceProviderProps> = ({
+  children,
+}) => {
+  const [namespaces, setNamespaces] = useState<string[]>([]);
+  const [selectedNamespace, setSelectedNamespace] = useState<string>("");
+
+  // Todo: Need to replace with actual API call
+  const fetchNamespaces = useCallback(async () => {
+    const mockNamespaces = {
+      data: [{ name: 'default' }, { name: 'kubeflow' }, { name: 'custom-namespace' }],
+    };
+    const namespaceNames = mockNamespaces.data.map((ns) => ns.name);
+    setNamespaces(namespaceNames);
+    setSelectedNamespace(namespaceNames.length > 0 ? namespaceNames[0] : "");
+  }, []);
+  useMount(fetchNamespaces);
+  const namespacesContextValues = useMemo(
+    () => ({ namespaces, selectedNamespace, setSelectedNamespace }),
+    [namespaces, selectedNamespace]
+  );
+  return (
+    <NamespaceContext.Provider value={namespacesContextValues}>
+      {children}
+    </NamespaceContext.Provider>
+  );
+};

workspaces/frontend/src/app/hooks/useMount.tsx

@@ -0,0 +1,9 @@
+import { useEffect } from "react"
+
+const useMount = (callback:()=>void): void => {
+    useEffect(() => {  
+        callback();
+      }, []);
+}
+
+export default useMount;

workspaces/frontend/src/shared/components/NamespaceSelector.tsx

@@ -0,0 +1,57 @@
+import React, { FC, useMemo, useState } from 'react';
+import {
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  DropdownList,
+  DropdownProps,
+} from '@patternfly/react-core';
+import { useNamespaceContext } from '../../app/context/NamespaceContextProvider';
+
+const NamespaceSelector: FC = () => {
+  const { namespaces, selectedNamespace, setSelectedNamespace } = useNamespaceContext();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const onSelect: DropdownProps['onSelect'] = (_event, value) => {
+    setSelectedNamespace(value as string);
+    setIsOpen(false);
+  };
+
+  const dropdownItems = useMemo(
+    () =>
+      namespaces.map((ns) => (
+        <DropdownItem
+          key={ns}
+          itemId={ns}
+          className="namespace-list-items"
+          data-testid={`dropdown-item-${ns}`}
+        >
+          {ns}
+        </DropdownItem>
+      )),
+    [namespaces],
+  );
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => setIsOpen(!isOpen)}
+          isExpanded={isOpen}
+          className="namespace-select-toggle"
+          data-testid="namespace-toggle"
+        >
+          {selectedNamespace}
+        </MenuToggle>
+      )}
+      isOpen={isOpen}
+      data-testid="namespace-dropdown"
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
+  );
+};
+
+export default NamespaceSelector;