From c1111b86cdb027fd83f7315d20751c46abde73bd Mon Sep 17 00:00:00 2001
From: yelias <yossi.elias@nokia.com>
Date: Wed, 27 Nov 2024 16:50:56 +0200
Subject: [PATCH 1/3] feat(ws): Notebooks 2.0 // Frontend // Namespace selector

Signed-off-by: yelias <yossi.elias@nokia.com>
---
 .../cypress/tests/e2e/NamespaceSelector.cy.ts | 41 +++++++++++++
 workspaces/frontend/src/app/App.tsx           | 25 +++++---
 workspaces/frontend/src/app/NavSidebar.tsx    |  5 +-
 .../app/context/NamespaceContextProvider.tsx  | 59 +++++++++++++++++++
 .../frontend/src/app/hooks/useMount.tsx       |  9 +++
 .../shared/components/NamespaceSelector.tsx   | 57 ++++++++++++++++++
 6 files changed, 186 insertions(+), 10 deletions(-)
 create mode 100644 workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/NamespaceSelector.cy.ts
 create mode 100644 workspaces/frontend/src/app/context/NamespaceContextProvider.tsx
 create mode 100644 workspaces/frontend/src/app/hooks/useMount.tsx
 create mode 100644 workspaces/frontend/src/shared/components/NamespaceSelector.tsx

diff --git a/workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/NamespaceSelector.cy.ts b/workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/NamespaceSelector.cy.ts
new file mode 100644
index 00000000..769e6a57
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/workspaces/frontend/src/app/App.tsx b/workspaces/frontend/src/app/App.tsx
index 3912b445..c934cf02 100644
--- a/workspaces/frontend/src/app/App.tsx
+++ b/workspaces/frontend/src/app/App.tsx
@@ -11,6 +11,8 @@ 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';
 import { NotebookContextProvider } from './context/NotebookContext';
@@ -19,7 +21,11 @@ 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>
@@ -29,6 +35,7 @@ const App: React.FC = () => {
           <Title headingLevel="h2" size="3xl">
             Kubeflow Notebooks 2.0
           </Title>
+          <NamespaceSelector />
         </Flex>
       </MastheadContent>
     </Masthead>
@@ -36,14 +43,16 @@ const App: React.FC = () => {
 
   return (
     <NotebookContextProvider>
+      <NamespaceProvider>
       <Page
-        mainContainerId="primary-app-container"
-        masthead={masthead}
-        isManagedSidebar
-        sidebar={<NavSidebar />}
-      >
-        <AppRoutes />
-      </Page>
+          mainContainerId="primary-app-container"
+          masthead={masthead}
+          isManagedSidebar
+          sidebar={<NavSidebar />}
+        >
+          <AppRoutes />
+        </Page>
+      </NamespaceProvider>
     </NotebookContextProvider>
   );
 };
diff --git a/workspaces/frontend/src/app/NavSidebar.tsx b/workspaces/frontend/src/app/NavSidebar.tsx
index bfa9ab1a..651c5d40 100644
--- a/workspaces/frontend/src/app/NavSidebar.tsx
+++ b/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>
diff --git a/workspaces/frontend/src/app/context/NamespaceContextProvider.tsx b/workspaces/frontend/src/app/context/NamespaceContextProvider.tsx
new file mode 100644
index 00000000..201e6d44
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/workspaces/frontend/src/app/hooks/useMount.tsx b/workspaces/frontend/src/app/hooks/useMount.tsx
new file mode 100644
index 00000000..1760bc0f
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/workspaces/frontend/src/shared/components/NamespaceSelector.tsx b/workspaces/frontend/src/shared/components/NamespaceSelector.tsx
new file mode 100644
index 00000000..ebc54213
--- /dev/null
+++ b/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;

From ca76781f3b11450ebc9cbeee68a1ee020dd50d22 Mon Sep 17 00:00:00 2001
From: yelias <yossi.elias@nokia.com>
Date: Sun, 22 Dec 2024 13:28:47 +0200
Subject: [PATCH 2/3] add MenuSearch

Signed-off-by: yelias <yossi.elias@nokia.com>
---
 workspaces/frontend/src/app/App.tsx           |  8 +-
 .../app/context/NamespaceContextProvider.tsx  | 30 ++-----
 .../frontend/src/app/hooks/useMount.tsx       | 14 ++--
 .../shared/components/NamespaceSelector.tsx   | 83 +++++++++++++++++--
 4 files changed, 96 insertions(+), 39 deletions(-)

diff --git a/workspaces/frontend/src/app/App.tsx b/workspaces/frontend/src/app/App.tsx
index c934cf02..be71d9a4 100644
--- a/workspaces/frontend/src/app/App.tsx
+++ b/workspaces/frontend/src/app/App.tsx
@@ -11,8 +11,8 @@ import {
   Title,
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
+import NamespaceSelector from '~/shared/components/NamespaceSelector';
 import { NamespaceProvider } from './context/NamespaceContextProvider';
-import NamespaceSelector from '../shared/components/NamespaceSelector';
 import AppRoutes from './AppRoutes';
 import NavSidebar from './NavSidebar';
 import { NotebookContextProvider } from './context/NotebookContext';
@@ -21,11 +21,7 @@ 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>
diff --git a/workspaces/frontend/src/app/context/NamespaceContextProvider.tsx b/workspaces/frontend/src/app/context/NamespaceContextProvider.tsx
index 201e6d44..16d6ba14 100644
--- a/workspaces/frontend/src/app/context/NamespaceContextProvider.tsx
+++ b/workspaces/frontend/src/app/context/NamespaceContextProvider.tsx
@@ -1,11 +1,5 @@
-import React, {
-  useState,
-  useContext,
-  ReactNode,
-  useMemo,
-  useCallback,
-} from 'react';
-import useMount from '../hooks/useMount';
+import React, { useState, useContext, ReactNode, useMemo, useCallback } from 'react';
+import useMount from '~/app/hooks/useMount';
 
 interface NamespaceContextState {
   namespaces: string[];
@@ -13,16 +7,12 @@ interface NamespaceContextState {
   setSelectedNamespace: (namespace: string) => void;
 }
 
-const NamespaceContext = React.createContext<NamespaceContextState | undefined>(
-  undefined
-);
+const NamespaceContext = React.createContext<NamespaceContextState | undefined>(undefined);
 
-export const useNamespaceContext = () => {
+export const useNamespaceContext = (): NamespaceContextState => {
   const context = useContext(NamespaceContext);
   if (!context) {
-    throw new Error(
-      "useNamespaceContext must be used within a NamespaceProvider"
-    );
+    throw new Error('useNamespaceContext must be used within a NamespaceProvider');
   }
   return context;
 };
@@ -31,11 +21,9 @@ interface NamespaceProviderProps {
   children: ReactNode;
 }
 
-export const NamespaceProvider: React.FC<NamespaceProviderProps> = ({
-  children,
-}) => {
+export const NamespaceProvider: React.FC<NamespaceProviderProps> = ({ children }) => {
   const [namespaces, setNamespaces] = useState<string[]>([]);
-  const [selectedNamespace, setSelectedNamespace] = useState<string>("");
+  const [selectedNamespace, setSelectedNamespace] = useState<string>('');
 
   // Todo: Need to replace with actual API call
   const fetchNamespaces = useCallback(async () => {
@@ -44,12 +32,12 @@ export const NamespaceProvider: React.FC<NamespaceProviderProps> = ({
     };
     const namespaceNames = mockNamespaces.data.map((ns) => ns.name);
     setNamespaces(namespaceNames);
-    setSelectedNamespace(namespaceNames.length > 0 ? namespaceNames[0] : "");
+    setSelectedNamespace(namespaceNames.length > 0 ? namespaceNames[0] : '');
   }, []);
   useMount(fetchNamespaces);
   const namespacesContextValues = useMemo(
     () => ({ namespaces, selectedNamespace, setSelectedNamespace }),
-    [namespaces, selectedNamespace]
+    [namespaces, selectedNamespace],
   );
   return (
     <NamespaceContext.Provider value={namespacesContextValues}>
diff --git a/workspaces/frontend/src/app/hooks/useMount.tsx b/workspaces/frontend/src/app/hooks/useMount.tsx
index 1760bc0f..283bfd1c 100644
--- a/workspaces/frontend/src/app/hooks/useMount.tsx
+++ b/workspaces/frontend/src/app/hooks/useMount.tsx
@@ -1,9 +1,9 @@
-import { useEffect } from "react"
+import { useEffect } from 'react';
 
-const useMount = (callback:()=>void): void => {
-    useEffect(() => {  
-        callback();
-      }, []);
-}
+const useMount = (callback: () => void): void => {
+  useEffect(() => {
+    callback();
+  }, [callback]);
+};
 
-export default useMount;
\ No newline at end of file
+export default useMount;
diff --git a/workspaces/frontend/src/shared/components/NamespaceSelector.tsx b/workspaces/frontend/src/shared/components/NamespaceSelector.tsx
index ebc54213..1c510aa0 100644
--- a/workspaces/frontend/src/shared/components/NamespaceSelector.tsx
+++ b/workspaces/frontend/src/shared/components/NamespaceSelector.tsx
@@ -1,25 +1,70 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { FC, useMemo, useState, useEffect } from 'react';
 import {
   Dropdown,
   DropdownItem,
   MenuToggle,
   DropdownList,
   DropdownProps,
+  MenuSearch,
+  MenuSearchInput,
+  InputGroup,
+  InputGroupItem,
+  SearchInput,
+  Button,
+  ButtonVariant,
+  Divider,
 } from '@patternfly/react-core';
-import { useNamespaceContext } from '../../app/context/NamespaceContextProvider';
+import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import { useNamespaceContext } from '~/app/context/NamespaceContextProvider';
 
 const NamespaceSelector: FC = () => {
   const { namespaces, selectedNamespace, setSelectedNamespace } = useNamespaceContext();
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [searchInputValue, setSearchInputValue] = useState<string>('');
+  const [filteredNamespaces, setFilteredNamespaces] = useState<string[]>(namespaces);
+
+  useEffect(() => {
+    setFilteredNamespaces(namespaces);
+  }, [namespaces]);
+
+  const onToggleClick = () => {
+    if (!isOpen) {
+      onClearSearch();
+    }
+    setIsOpen(!isOpen);
+  };
+
+  const onSearchInputChange = (value: string) => {
+    setSearchInputValue(value);
+  };
+
+  const onSearchButtonClick = () => {
+    const filtered =
+      searchInputValue === ''
+        ? namespaces
+        : namespaces.filter((ns) => ns.toLowerCase().includes(searchInputValue.toLowerCase()));
+    setFilteredNamespaces(filtered);
+  };
+
+  const onEnterPressed = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      onSearchButtonClick();
+    }
+  };
 
   const onSelect: DropdownProps['onSelect'] = (_event, value) => {
     setSelectedNamespace(value as string);
     setIsOpen(false);
   };
 
+  const onClearSearch = () => {
+    setSearchInputValue('');
+    setFilteredNamespaces(namespaces);
+  };
+
   const dropdownItems = useMemo(
     () =>
-      namespaces.map((ns) => (
+      filteredNamespaces.map((ns) => (
         <DropdownItem
           key={ns}
           itemId={ns}
@@ -29,7 +74,7 @@ const NamespaceSelector: FC = () => {
           {ns}
         </DropdownItem>
       )),
-    [namespaces],
+    [filteredNamespaces],
   );
 
   return (
@@ -38,7 +83,7 @@ const NamespaceSelector: FC = () => {
       toggle={(toggleRef) => (
         <MenuToggle
           ref={toggleRef}
-          onClick={() => setIsOpen(!isOpen)}
+          onClick={onToggleClick}
           isExpanded={isOpen}
           className="namespace-select-toggle"
           data-testid="namespace-toggle"
@@ -47,8 +92,36 @@ const NamespaceSelector: FC = () => {
         </MenuToggle>
       )}
       isOpen={isOpen}
+      isScrollable
       data-testid="namespace-dropdown"
     >
+      <MenuSearch>
+        <MenuSearchInput>
+          <InputGroup>
+            <InputGroupItem isFill>
+              <SearchInput
+                value={searchInputValue}
+                placeholder="Search Namespace"
+                onChange={(_event, value) => onSearchInputChange(value)}
+                onKeyDown={onEnterPressed}
+                onClear={onClearSearch}
+                // resetButtonLabel="Clear search"
+                aria-labelledby="namespace-search-button"
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button
+                variant={ButtonVariant.control}
+                aria-label="Search namespace"
+                id="namespace-search-button"
+                onClick={onSearchButtonClick}
+                icon={<SearchIcon aria-hidden="true" />}
+              />
+            </InputGroupItem>
+          </InputGroup>
+        </MenuSearchInput>
+      </MenuSearch>
+      <Divider />
       <DropdownList>{dropdownItems}</DropdownList>
     </Dropdown>
   );

From 8552a96d8810b0e6d26fa3239db74d798ecf2178 Mon Sep 17 00:00:00 2001
From: yelias <yossi.elias@nokia.com>
Date: Sun, 29 Dec 2024 13:39:09 +0200
Subject: [PATCH 3/3] feat(ws): Notebooks 2.0 // Frontend // Namespace selector

Signed-off-by: yelias <yossi.elias@nokia.com>
---
 .../frontend/src/__mocks__/mockNamespaces.ts  |  8 +--
 .../cypress/tests/e2e/NamespaceSelector.cy.ts | 50 ++++++++++++-------
 .../cypress/tests/mocked/application.cy.ts    | 11 ++++
 workspaces/frontend/src/app/App.tsx           |  8 +--
 .../app/context/NamespaceContextProvider.tsx  | 39 +++++++++------
 .../src/app/context/NotebookContext.tsx       |  2 +-
 workspaces/frontend/src/app/types.ts          |  4 +-
 .../api/__tests__/notebookService.spec.ts     |  6 +--
 .../src/shared/api/notebookService.ts         |  2 +-
 .../shared/components/NamespaceSelector.tsx   | 23 +++++----
 10 files changed, 97 insertions(+), 56 deletions(-)

diff --git a/workspaces/frontend/src/__mocks__/mockNamespaces.ts b/workspaces/frontend/src/__mocks__/mockNamespaces.ts
index 66b1d61a..6b6761fb 100644
--- a/workspaces/frontend/src/__mocks__/mockNamespaces.ts
+++ b/workspaces/frontend/src/__mocks__/mockNamespaces.ts
@@ -1,5 +1,7 @@
 import { NamespacesList } from '~/app/types';
 
-export const mockNamespaces = (): NamespacesList => ({
-  data: [{ name: 'default' }, { name: 'kubeflow' }, { name: 'custom-namespace' }],
-});
+export const mockNamespaces: NamespacesList = [
+  { name: 'default' },
+  { name: 'kubeflow' },
+  { name: 'custom-namespace' },
+];
diff --git a/workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/NamespaceSelector.cy.ts b/workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/NamespaceSelector.cy.ts
index 769e6a57..4a9cfdca 100644
--- a/workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/NamespaceSelector.cy.ts
+++ b/workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/NamespaceSelector.cy.ts
@@ -1,41 +1,57 @@
+import { mockNamespaces } from '~/__mocks__/mockNamespaces';
+import { mockBFFResponse } from '~/__mocks__/utils';
+
 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
+    // Mock the namespaces API response
     cy.intercept('GET', '/api/v1/namespaces', {
-      body: mockNamespaces,
-    });
+      body: mockBFFResponse(mockNamespaces),
+    }).as('getNamespaces');
     cy.visit('/');
+    cy.wait('@getNamespaces');
   });
 
   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');
+    cy.findByTestId('namespace-toggle').click();
+    cy.findByTestId('namespace-dropdown').should('be.visible');
     namespaces.forEach((ns) => {
-      cy.get(`[data-testid="dropdown-item-${ns}"]`).should('exist').and('contain', ns);
+      cy.findByTestId(`dropdown-item-${ns}`).should('exist').and('contain', ns);
     });
 
-    cy.get('[data-testid="dropdown-item-kubeflow"]').click();
+    cy.findByTestId('dropdown-item-kubeflow').click();
 
     // Assert the selected namespace is updated
-    cy.get('[data-testid="namespace-toggle"]').should('contain', 'kubeflow');
+    cy.findByTestId('namespace-toggle').should('contain', 'kubeflow');
   });
 
   it('should display the default namespace initially', () => {
-    cy.get('[data-testid="namespace-toggle"]').should('contain', 'default');
+    cy.findByTestId('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');
+    cy.findByTestId('namespace-toggle').click();
+    cy.findByTestId('dropdown-item-custom-namespace').click();
+    cy.findByTestId('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');
+    cy.findByTestId('nav-link-/notebookSettings').click();
+    cy.findByTestId('namespace-toggle').should('contain', 'custom-namespace');
+  });
+
+  it('should filter namespaces based on search input', () => {
+    cy.findByTestId('namespace-toggle').click();
+    cy.findByTestId('namespace-search-input').type('custom');
+    cy.findByTestId('namespace-search-input').find('input').should('have.value', 'custom');
+    cy.findByTestId('namespace-search-button').click();
+    // Verify that only the matching namespace is displayed
+    namespaces.forEach((ns) => {
+      if (ns === 'custom-namespace') {
+        cy.findByTestId(`dropdown-item-${ns}`).should('exist').and('contain', ns);
+      } else {
+        cy.findByTestId(`dropdown-item-${ns}`).should('not.exist');
+      }
+    });
   });
 });
diff --git a/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/application.cy.ts b/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/application.cy.ts
index 80404940..b784a2e2 100644
--- a/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/application.cy.ts
+++ b/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/application.cy.ts
@@ -1,7 +1,18 @@
 import { pageNotfound } from '~/__tests__/cypress/cypress/pages/pageNotFound';
 import { home } from '~/__tests__/cypress/cypress/pages/home';
+import { mockNamespaces } from '~/__mocks__/mockNamespaces';
+import { mockBFFResponse } from '~/__mocks__/utils';
 
 describe('Application', () => {
+  beforeEach(() => {
+    // Mock the namespaces API response
+    cy.intercept('GET', '/api/v1/namespaces', {
+      body: mockBFFResponse(mockNamespaces),
+    }).as('getNamespaces');
+    cy.visit('/');
+    cy.wait('@getNamespaces');
+  });
+
   it('Page not found should render', () => {
     pageNotfound.visit();
   });
diff --git a/workspaces/frontend/src/app/App.tsx b/workspaces/frontend/src/app/App.tsx
index be71d9a4..dabd3b3e 100644
--- a/workspaces/frontend/src/app/App.tsx
+++ b/workspaces/frontend/src/app/App.tsx
@@ -12,7 +12,7 @@ import {
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
 import NamespaceSelector from '~/shared/components/NamespaceSelector';
-import { NamespaceProvider } from './context/NamespaceContextProvider';
+import { NamespaceContextProvider } from './context/NamespaceContextProvider';
 import AppRoutes from './AppRoutes';
 import NavSidebar from './NavSidebar';
 import { NotebookContextProvider } from './context/NotebookContext';
@@ -39,8 +39,8 @@ const App: React.FC = () => {
 
   return (
     <NotebookContextProvider>
-      <NamespaceProvider>
-      <Page
+      <NamespaceContextProvider>
+        <Page
           mainContainerId="primary-app-container"
           masthead={masthead}
           isManagedSidebar
@@ -48,7 +48,7 @@ const App: React.FC = () => {
         >
           <AppRoutes />
         </Page>
-      </NamespaceProvider>
+      </NamespaceContextProvider>
     </NotebookContextProvider>
   );
 };
diff --git a/workspaces/frontend/src/app/context/NamespaceContextProvider.tsx b/workspaces/frontend/src/app/context/NamespaceContextProvider.tsx
index 16d6ba14..b91d5453 100644
--- a/workspaces/frontend/src/app/context/NamespaceContextProvider.tsx
+++ b/workspaces/frontend/src/app/context/NamespaceContextProvider.tsx
@@ -1,44 +1,53 @@
 import React, { useState, useContext, ReactNode, useMemo, useCallback } from 'react';
 import useMount from '~/app/hooks/useMount';
+import useNamespaces from '~/app/hooks/useNamespaces';
 
-interface NamespaceContextState {
+interface NamespaceContextType {
   namespaces: string[];
   selectedNamespace: string;
   setSelectedNamespace: (namespace: string) => void;
 }
 
-const NamespaceContext = React.createContext<NamespaceContextState | undefined>(undefined);
+const NamespaceContext = React.createContext<NamespaceContextType | undefined>(undefined);
 
-export const useNamespaceContext = (): NamespaceContextState => {
+export const useNamespaceContext = (): NamespaceContextType => {
   const context = useContext(NamespaceContext);
   if (!context) {
-    throw new Error('useNamespaceContext must be used within a NamespaceProvider');
+    throw new Error('useNamespaceContext must be used within a NamespaceContextProvider');
   }
   return context;
 };
 
-interface NamespaceProviderProps {
+interface NamespaceContextProviderProps {
   children: ReactNode;
 }
 
-export const NamespaceProvider: React.FC<NamespaceProviderProps> = ({ children }) => {
+export const NamespaceContextProvider: React.FC<NamespaceContextProviderProps> = ({ children }) => {
   const [namespaces, setNamespaces] = useState<string[]>([]);
   const [selectedNamespace, setSelectedNamespace] = useState<string>('');
+  const [namespacesData, loaded, loadError] = useNamespaces();
+
+  const fetchNamespaces = useCallback(() => {
+    if (loaded && namespacesData) {
+      const namespaceNames = namespacesData.map((ns) => ns.name);
+      setNamespaces(namespaceNames);
+      setSelectedNamespace(namespaceNames.length > 0 ? namespaceNames[0] : '');
+    } else {
+      if (loadError) {
+        console.error('Error loading namespaces: ', loadError);
+      }
+      setNamespaces([]);
+      setSelectedNamespace('');
+    }
+  }, [loaded, namespacesData, loadError]);
 
-  // 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}
diff --git a/workspaces/frontend/src/app/context/NotebookContext.tsx b/workspaces/frontend/src/app/context/NotebookContext.tsx
index a9eecfd1..f187489f 100644
--- a/workspaces/frontend/src/app/context/NotebookContext.tsx
+++ b/workspaces/frontend/src/app/context/NotebookContext.tsx
@@ -14,7 +14,7 @@ export const NotebookContext = React.createContext<NotebookContextType>({
 });
 
 export const NotebookContextProvider: React.FC = ({ children }) => {
-  const hostPath = `/api/${BFF_API_VERSION}/`;
+  const hostPath = `/api/${BFF_API_VERSION}`;
 
   const [apiState, refreshAPIState] = useNotebookAPIState(hostPath);
 
diff --git a/workspaces/frontend/src/app/types.ts b/workspaces/frontend/src/app/types.ts
index fe4e8bd4..ca80e9cd 100644
--- a/workspaces/frontend/src/app/types.ts
+++ b/workspaces/frontend/src/app/types.ts
@@ -60,9 +60,7 @@ export type Namespace = {
   name: string;
 };
 
-export type NamespacesList = {
-  data: Namespace[];
-};
+export type NamespacesList = Namespace[];
 
 export type GetNamespaces = (opts: APIOptions) => Promise<NamespacesList>;
 
diff --git a/workspaces/frontend/src/shared/api/__tests__/notebookService.spec.ts b/workspaces/frontend/src/shared/api/__tests__/notebookService.spec.ts
index 041f0d4f..50f12a9e 100644
--- a/workspaces/frontend/src/shared/api/__tests__/notebookService.spec.ts
+++ b/workspaces/frontend/src/shared/api/__tests__/notebookService.spec.ts
@@ -23,12 +23,12 @@ const APIOptionsMock = {};
 
 describe('getNamespaces', () => {
   it('should call restGET and handleRestFailures to fetch namespaces', async () => {
-    const response = await getNamespaces(`/api/${BFF_API_VERSION}/namespaces/`)(APIOptionsMock);
+    const response = await getNamespaces(`/api/${BFF_API_VERSION}/namespaces`)(APIOptionsMock);
     expect(response).toEqual(mockRestResponse);
     expect(restGETMock).toHaveBeenCalledTimes(1);
     expect(restGETMock).toHaveBeenCalledWith(
-      `/api/${BFF_API_VERSION}/namespaces/`,
-      `/namespaces/`,
+      `/api/${BFF_API_VERSION}/namespaces`,
+      `/namespaces`,
       {},
       APIOptionsMock,
     );
diff --git a/workspaces/frontend/src/shared/api/notebookService.ts b/workspaces/frontend/src/shared/api/notebookService.ts
index e28a9945..5f38a5cc 100644
--- a/workspaces/frontend/src/shared/api/notebookService.ts
+++ b/workspaces/frontend/src/shared/api/notebookService.ts
@@ -6,7 +6,7 @@ import { handleRestFailures } from '~/shared/api/errorUtils';
 export const getNamespaces =
   (hostPath: string) =>
   (opts: APIOptions): Promise<NamespacesList> =>
-    handleRestFailures(restGET(hostPath, `/namespaces/`, {}, opts)).then((response) => {
+    handleRestFailures(restGET(hostPath, `/namespaces`, {}, opts)).then((response) => {
       if (isNotebookResponse<NamespacesList>(response)) {
         return response.data;
       }
diff --git a/workspaces/frontend/src/shared/components/NamespaceSelector.tsx b/workspaces/frontend/src/shared/components/NamespaceSelector.tsx
index 1c510aa0..ee4ebd2d 100644
--- a/workspaces/frontend/src/shared/components/NamespaceSelector.tsx
+++ b/workspaces/frontend/src/shared/components/NamespaceSelector.tsx
@@ -19,7 +19,7 @@ import { useNamespaceContext } from '~/app/context/NamespaceContextProvider';
 
 const NamespaceSelector: FC = () => {
   const { namespaces, selectedNamespace, setSelectedNamespace } = useNamespaceContext();
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isNamespaceDropdownOpen, setIsNamespaceDropdownOpen] = useState<boolean>(false);
   const [searchInputValue, setSearchInputValue] = useState<string>('');
   const [filteredNamespaces, setFilteredNamespaces] = useState<string[]>(namespaces);
 
@@ -28,10 +28,10 @@ const NamespaceSelector: FC = () => {
   }, [namespaces]);
 
   const onToggleClick = () => {
-    if (!isOpen) {
+    if (!isNamespaceDropdownOpen) {
       onClearSearch();
     }
-    setIsOpen(!isOpen);
+    setIsNamespaceDropdownOpen(!isNamespaceDropdownOpen);
   };
 
   const onSearchInputChange = (value: string) => {
@@ -54,10 +54,12 @@ const NamespaceSelector: FC = () => {
 
   const onSelect: DropdownProps['onSelect'] = (_event, value) => {
     setSelectedNamespace(value as string);
-    setIsOpen(false);
+    setIsNamespaceDropdownOpen(false);
   };
 
-  const onClearSearch = () => {
+  const onClearSearch = (event?: React.MouseEvent | React.ChangeEvent | React.FormEvent) => {
+    // Prevent the event from bubbling up and triggering dropdown close
+    event?.stopPropagation();
     setSearchInputValue('');
     setFilteredNamespaces(namespaces);
   };
@@ -84,14 +86,16 @@ const NamespaceSelector: FC = () => {
         <MenuToggle
           ref={toggleRef}
           onClick={onToggleClick}
-          isExpanded={isOpen}
+          isExpanded={isNamespaceDropdownOpen}
           className="namespace-select-toggle"
           data-testid="namespace-toggle"
         >
           {selectedNamespace}
         </MenuToggle>
       )}
-      isOpen={isOpen}
+      isOpen={isNamespaceDropdownOpen}
+      onOpenChange={(isOpen) => setIsNamespaceDropdownOpen(isOpen)}
+      onOpenChangeKeys={['Escape']}
       isScrollable
       data-testid="namespace-dropdown"
     >
@@ -104,9 +108,9 @@ const NamespaceSelector: FC = () => {
                 placeholder="Search Namespace"
                 onChange={(_event, value) => onSearchInputChange(value)}
                 onKeyDown={onEnterPressed}
-                onClear={onClearSearch}
-                // resetButtonLabel="Clear search"
+                onClear={(event) => onClearSearch(event)}
                 aria-labelledby="namespace-search-button"
+                data-testid="namespace-search-input"
               />
             </InputGroupItem>
             <InputGroupItem>
@@ -116,6 +120,7 @@ const NamespaceSelector: FC = () => {
                 id="namespace-search-button"
                 onClick={onSearchButtonClick}
                 icon={<SearchIcon aria-hidden="true" />}
+                data-testid="namespace-search-button"
               />
             </InputGroupItem>
           </InputGroup>