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

Signed-off-by: yelias <[email protected]>
kubeflow · Jan 7, 2025 · 60ee75b · 60ee75b
1 parent ca76781
commit 60ee75b
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 37 deletions.
diff --git 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
@@ -1,15 +1,16 @@
+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', () => {
@@ -38,4 +39,19 @@ describe('Namespace Selector Dropdown', () => {
     cy.get('[data-testid="nav-link-/notebookSettings"]').click();
     cy.get('[data-testid="namespace-toggle"]').should('contain', 'custom-namespace');
   });
+
+  it('should filter namespaces based on search input', () => {
+    cy.get('[data-testid="namespace-toggle"]').click();
+    cy.get('[data-testid="namespace-search-input"]').type('custom');
+    cy.get('[data-testid="namespace-search-input"] input').should('have.value', 'custom');
+    cy.get('[data-testid="namespace-search-button"]').click();
+    // Verify that only the matching namespace is displayed
+    namespaces.forEach((ns) => {
+      if (ns === 'custom-namespace') {
+        cy.get(`[data-testid="dropdown-item-${ns}"]`).should('exist').and('contain', ns);
+      } else {
+        cy.get(`[data-testid="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
@@ -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
@@ -40,7 +40,7 @@ const App: React.FC = () => {
   return (
     <NotebookContextProvider>
       <NamespaceProvider>
-      <Page
+        <Page
           mainContainerId="primary-app-container"
           masthead={masthead}
           isManagedSidebar

diff --git a/workspaces/frontend/src/app/context/NamespaceContextProvider.tsx b/workspaces/frontend/src/app/context/NamespaceContextProvider.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useContext, ReactNode, useMemo, useCallback } from 'react';
 import useMount from '~/app/hooks/useMount';
+import useNamespaces from '~/app/hooks/useNamespaces';
 
 interface NamespaceContextState {
   namespaces: string[];
@@ -24,21 +25,29 @@ interface NamespaceProviderProps {
 export const NamespaceProvider: React.FC<NamespaceProviderProps> = ({ 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
@@ -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/hooks/useMount.tsx b/workspaces/frontend/src/app/hooks/useMount.tsx
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 const useMount = (callback: () => void): void => {
   useEffect(() => {
     callback();
-  }, [callback]);
+  }, []);
 };
 
 export default useMount;
diff --git 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
@@ -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
@@ -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
@@ -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>