feat(ws): Persist last used namespace across refreshes and tabs (#341)

Signed-off-by: Charles Thao <cthao@redhat.com>

Author: thaorell

workspaces/frontend/src/app/App.tsx

@@ -23,6 +23,7 @@ import AppRoutes from './AppRoutes';
 import NavSidebar from './NavSidebar';
 import { NotebookContextProvider } from './context/NotebookContext';
 import { isMUITheme, Theme } from './const';
+import { BrowserStorageContextProvider } from './context/BrowserStorageContext';
 
 const App: React.FC = () => {
   React.useEffect(() => {
@@ -66,17 +67,19 @@ const App: React.FC = () => {
   return (
     <ErrorBoundary>
       <NotebookContextProvider>
-        <NamespaceContextProvider>
-          <Page
-            mainContainerId="primary-app-container"
-            masthead={masthead}
-            isContentFilled
-            isManagedSidebar
-            sidebar={<NavSidebar />}
-          >
-            <AppRoutes />
-          </Page>
-        </NamespaceContextProvider>
+        <BrowserStorageContextProvider>
+          <NamespaceContextProvider>
+            <Page
+              mainContainerId="primary-app-container"
+              masthead={masthead}
+              isContentFilled
+              isManagedSidebar
+              sidebar={<NavSidebar />}
+            >
+              <AppRoutes />
+            </Page>
+          </NamespaceContextProvider>
+        </BrowserStorageContextProvider>
       </NotebookContextProvider>
     </ErrorBoundary>
   );

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

@@ -0,0 +1,67 @@
+import React, { createContext, useCallback, useContext, useEffect } from 'react';
+
+export interface BrowserStorageContextType {
+  getValue: (key: string) => unknown;
+  setValue: (key: string, value: string) => void;
+}
+
+export interface BrowserStorageContextProviderProps {
+  children: React.ReactNode;
+}
+
+const BrowserStorageContext = createContext<BrowserStorageContextType>({
+  getValue: () => null,
+  setValue: () => undefined,
+});
+
+export const BrowserStorageContextProvider: React.FC<BrowserStorageContextProviderProps> = ({
+  children,
+}) => {
+  const [values, setValues] = React.useState<{ [key: string]: unknown }>({});
+  const valuesRef = React.useRef(values);
+  useEffect(() => {
+    valuesRef.current = values;
+  }, [values]);
+
+  const storageEventCb = useCallback(() => {
+    const keys = Object.keys(values);
+    setValues(Object.fromEntries(keys.map((k) => [k, localStorage.getItem(k)])));
+  }, [values, setValues]);
+
+  useEffect(() => {
+    window.addEventListener('storage', storageEventCb);
+    return () => {
+      window.removeEventListener('storage', storageEventCb);
+    };
+  }, [storageEventCb]);
+
+  const getValue = useCallback<BrowserStorageContextType['getValue']>(
+    (key: string) => localStorage.getItem(key),
+    [],
+  );
+
+  const setValue = useCallback<BrowserStorageContextType['setValue']>(
+    (key: string, value: string) => {
+      localStorage.setItem(key, value);
+      setValues((prev) => ({ ...prev, [key]: value }));
+    },
+    [],
+  );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const contextValue = React.useMemo(() => ({ getValue, setValue }), [getValue, setValue, values]);
+
+  return (
+    <BrowserStorageContext.Provider value={contextValue}>{children}</BrowserStorageContext.Provider>
+  );
+};
+
+export const useStorage = <T,>(
+  storageKey: string,
+  defaultValue: T,
+): [T, (key: string, value: string) => void] => {
+  const context = useContext(BrowserStorageContext);
+  const { getValue, setValue } = context;
+  const value = (getValue(storageKey) as T) ?? defaultValue;
+  return [value, setValue];
+};

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

@@ -1,11 +1,16 @@
 import React, { useState, useContext, ReactNode, useMemo, useCallback } from 'react';
 import useMount from '~/app/hooks/useMount';
 import useNamespaces from '~/app/hooks/useNamespaces';
+import { useStorage } from './BrowserStorageContext';
+
+const storageKey = 'kubeflow.notebooks.namespace.lastUsed';
 
 interface NamespaceContextType {
   namespaces: string[];
   selectedNamespace: string;
   setSelectedNamespace: (namespace: string) => void;
+  lastUsedNamespace: string;
+  updateLastUsedNamespace: (value: string) => void;
 }
 
 const NamespaceContext = React.createContext<NamespaceContextType | undefined>(undefined);
@@ -26,26 +31,41 @@ export const NamespaceContextProvider: React.FC<NamespaceContextProviderProps> =
   const [namespaces, setNamespaces] = useState<string[]>([]);
   const [selectedNamespace, setSelectedNamespace] = useState<string>('');
   const [namespacesData, loaded, loadError] = useNamespaces();
+  const [lastUsedNamespace, setLastUsedNamespace] = useStorage<string>(storageKey, '');
 
   const fetchNamespaces = useCallback(() => {
     if (loaded && namespacesData) {
       const namespaceNames = namespacesData.map((ns) => ns.name);
       setNamespaces(namespaceNames);
-      setSelectedNamespace(namespaceNames.length > 0 ? namespaceNames[0] : '');
+      setSelectedNamespace(lastUsedNamespace.length ? lastUsedNamespace : namespaceNames[0]);
+      if (!lastUsedNamespace.length) {
+        setLastUsedNamespace(storageKey, namespaceNames[0]);
+      }
     } else {
       if (loadError) {
         console.error('Error loading namespaces: ', loadError);
       }
       setNamespaces([]);
       setSelectedNamespace('');
     }
-  }, [loaded, namespacesData, loadError]);
+  }, [loaded, namespacesData, lastUsedNamespace, setLastUsedNamespace, loadError]);
+
+  const updateLastUsedNamespace = useCallback(
+    (value: string) => setLastUsedNamespace(storageKey, value),
+    [setLastUsedNamespace],
+  );
 
   useMount(fetchNamespaces);
 
   const namespacesContextValues = useMemo(
-    () => ({ namespaces, selectedNamespace, setSelectedNamespace }),
-    [namespaces, selectedNamespace],
+    () => ({
+      namespaces,
+      selectedNamespace,
+      setSelectedNamespace,
+      lastUsedNamespace,
+      updateLastUsedNamespace,
+    }),
+    [namespaces, selectedNamespace, lastUsedNamespace, updateLastUsedNamespace],
   );
 
   return (

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

@@ -18,7 +18,8 @@ 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 { namespaces, selectedNamespace, setSelectedNamespace, updateLastUsedNamespace } =
+    useNamespaceContext();
   const [isNamespaceDropdownOpen, setIsNamespaceDropdownOpen] = useState<boolean>(false);
   const [searchInputValue, setSearchInputValue] = useState<string>('');
   const [filteredNamespaces, setFilteredNamespaces] = useState<string[]>(namespaces);
@@ -54,6 +55,7 @@ const NamespaceSelector: FC = () => {
 
   const onSelect: DropdownProps['onSelect'] = (_event, value) => {
     setSelectedNamespace(value as string);
+    updateLastUsedNamespace(value as string);
     setIsNamespaceDropdownOpen(false);
   };