Keep project selection per page

opendatahub-io · Feb 3, 2025 · fe39c46 · fe39c46
1 parent 63f2839
commit fe39c46
Show file tree

Hide file tree

Showing 30 changed files with 147 additions and 56 deletions.
diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx
@@ -42,17 +42,20 @@ import './App.scss';
 
 type PocConfigType = {
   altNav?: boolean;
+  altPreferredProject?: boolean;
 };
 
 const FAVORITE_PROJECTS_KEY = 'odh-favorite-projects';
 const POC_SESSION_KEY = 'odh-poc-flags';
 const ALT_NAV_PARAM = 'altNav';
+const ALT_PROJECTS_PARAM = 'altProjects';
 
 const App: React.FC = () => {
   const [notificationsOpen, setNotificationsOpen] = React.useState(false);
   const { username, userError, isAllowed } = useUser();
   const [searchParams, setSearchParams] = useSearchParams();
   const [altNav, setAltNav] = React.useState<boolean>(false);
+  const [altPreferredProject, setAltPreferredProject] = React.useState<boolean>(false);
   const firstLoad = React.useRef(true);
   const [pocConfig, setPocConfig] = useBrowserStorage<PocConfigType | null>(
     POC_SESSION_KEY,
@@ -96,6 +99,15 @@ const App: React.FC = () => {
       searchParams.delete(ALT_NAV_PARAM);
       setSearchParams(searchParams, { replace: true });
     }
+    if (searchParams.has(ALT_PROJECTS_PARAM)) {
+      const updated = searchParams.get(ALT_PROJECTS_PARAM) === 'true';
+      setAltPreferredProject(updated);
+      setPocConfig({ altNav: updated });
+
+      // clean up query string
+      searchParams.delete(ALT_NAV_PARAM);
+      setSearchParams(searchParams, { replace: true });
+    }
     // do not react to changes to setters
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchParams]);
@@ -109,11 +121,20 @@ const App: React.FC = () => {
             storageClasses,
             isRHOAI: dashboardConfig.metadata?.namespace === 'redhat-ods-applications',
             altNav,
+            altPreferredProject,
             favoriteProjects,
             setFavoriteProjects,
           }
         : null,
-    [dashboardConfig, buildStatuses, storageClasses, altNav, favoriteProjects, setFavoriteProjects],
+    [
+      dashboardConfig,
+      buildStatuses,
+      storageClasses,
+      altNav,
+      altPreferredProject,
+      favoriteProjects,
+      setFavoriteProjects,
+    ],
   );
 
   const isUnauthorized = fetchConfigError?.request?.status === 403;

diff --git a/frontend/src/app/AppContext.ts b/frontend/src/app/AppContext.ts
@@ -8,6 +8,7 @@ type AppContextProps = {
   storageClasses: StorageClassKind[];
   isRHOAI: boolean;
   altNav?: boolean;
+  altPreferredProject?: boolean;
   favoriteProjects: string[];
   setFavoriteProjects: (projects: string[]) => void;
 };

diff --git a/frontend/src/concepts/distributedWorkloads/DistributedWorkloadsContext.tsx b/frontend/src/concepts/distributedWorkloads/DistributedWorkloadsContext.tsx
@@ -53,7 +53,7 @@ export const DistributedWorkloadsContextProvider =
   )(({ children, namespace }) => {
     const { projects } = React.useContext(ProjectsContext);
     const project = projects.find(byName(namespace)) ?? null;
-    useSyncPreferredProject(project);
+    useSyncPreferredProject('distributed-workloads', project);
 
     const { currentRefreshInterval } = React.useContext(MetricsCommonContext);
 

diff --git a/frontend/src/concepts/pipelines/context/PipelinesContext.tsx b/frontend/src/concepts/pipelines/context/PipelinesContext.tsx
@@ -79,7 +79,7 @@ export const PipelineContextProvider = conditionalArea<PipelineContextProviderPr
 )(({ children, namespace }) => {
   const { projects } = React.useContext(ProjectsContext);
   const project = projects.find(byName(namespace)) ?? null;
-  useSyncPreferredProject(project);
+  useSyncPreferredProject('pipelines', project);
 
   const state = usePipelineNamespaceCR(namespace);
   const [pipelineNamespaceCR, crLoaded, crLoadError, refreshCR] = state;

diff --git a/frontend/src/concepts/projects/InvalidProject.tsx b/frontend/src/concepts/projects/InvalidProject.tsx
@@ -3,17 +3,24 @@ import EmptyStateErrorMessage from '~/components/EmptyStateErrorMessage';
 import ProjectSelectorNavigator from '~/concepts/projects/ProjectSelectorNavigator';
 
 type InvalidProjectProps = {
+  page: string;
   title?: string;
   namespace?: string;
   getRedirectPath: (namespace: string) => string;
 };
 
-const InvalidProject: React.FC<InvalidProjectProps> = ({ namespace, title, getRedirectPath }) => (
+const InvalidProject: React.FC<InvalidProjectProps> = ({
+  page,
+  namespace,
+  title,
+  getRedirectPath,
+}) => (
   <EmptyStateErrorMessage
     title={title || 'Project not found'}
     bodyText={`${namespace ? `Project ${namespace}` : 'The Project'} was not found.`}
   >
     <ProjectSelectorNavigator
+      page={page}
       getRedirectPath={getRedirectPath}
       invalidDropdownPlaceholder="Select project"
       primary

diff --git a/frontend/src/concepts/projects/ProjectSelectorNavigator.tsx b/frontend/src/concepts/projects/ProjectSelectorNavigator.tsx
@@ -4,10 +4,12 @@ import { ProjectsContext } from '~/concepts/projects/ProjectsContext';
 import ProjectSelector from './ProjectSelector';
 
 type ProjectSelectorProps = {
+  page: string;
   getRedirectPath: (namespace: string) => string;
 } & Omit<React.ComponentProps<typeof ProjectSelector>, 'onSelection' | 'namespace'>;
 
 const ProjectSelectorNavigator: React.FC<ProjectSelectorProps> = ({
+  page,
   getRedirectPath,
   ...projectSelectorProps
 }) => {
@@ -19,9 +21,7 @@ const ProjectSelectorNavigator: React.FC<ProjectSelectorProps> = ({
     <ProjectSelector
       {...projectSelectorProps}
       onSelection={(projectName) => {
-        if (!projectName) {
-          updatePreferredProject(null);
-        }
+        updatePreferredProject(page, projectName || null);
         navigate(getRedirectPath(projectName));
       }}
       namespace={namespace ?? ''}

diff --git a/frontend/src/concepts/projects/ProjectsContext.tsx b/frontend/src/concepts/projects/ProjectsContext.tsx
@@ -4,6 +4,7 @@ import { FetchState } from '~/utilities/useFetchState';
 import { KnownLabels, ProjectKind } from '~/k8sTypes';
 import { useDashboardNamespace } from '~/redux/selectors';
 import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
+import { AppContext } from '~/app/AppContext';
 import { isAvailableProject } from './utils';
 
 const projectSorter = (projectA: ProjectKind, projectB: ProjectKind) =>
@@ -16,13 +17,13 @@ type ProjectsContextType = {
   /** eg. Terminating state, etc */
   nonActiveProjects: ProjectKind[];
 
-  /** Some component set this value, you should use this instead of projects[0] */
-  preferredProject: ProjectKind | null;
+  /** Get the project last used for the given page] */
+  getPreferredProject: (page: string) => ProjectKind | null;
   /**
    * Allows for navigation to be unimpeded by project selection
    * @see useSyncPreferredProject
    */
-  updatePreferredProject: (project: ProjectKind | null) => void;
+  updatePreferredProject: (page: string, projectName: string | null) => void;
   waitForProject: (projectName: string) => Promise<void>;
 
   // ...the rest of the state variables
@@ -34,8 +35,9 @@ export const ProjectsContext = React.createContext<ProjectsContextType>({
   projects: [],
   modelServingProjects: [],
   nonActiveProjects: [],
-  preferredProject: null,
-  updatePreferredProject: () => undefined,
+  getPreferredProject: () => null,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  updatePreferredProject: () => {},
   loaded: false,
   loadError: new Error('Not in project provider'),
   waitForProject: () => Promise.resolve(),
@@ -50,10 +52,26 @@ type ProjectsProviderProps = {
 };
 
 const ProjectsContextProvider: React.FC<ProjectsProviderProps> = ({ children }) => {
-  const [preferredProject, setPreferredProject] =
-    React.useState<ProjectsContextType['preferredProject']>(null);
   const [projectData, loaded, loadError] = useProjects();
   const { dashboardNamespace } = useDashboardNamespace();
+  const { altPreferredProject } = React.useContext(AppContext);
+  const [pageProjects, setPageProjects] = React.useState<{ [key: string]: ProjectKind | null }>({});
+
+  const getPreferredProject = React.useCallback(
+    (page: string) => pageProjects[!altPreferredProject ? page : '__preferredProject'] ?? null,
+    [altPreferredProject, pageProjects],
+  );
+  const updatePreferredProject = React.useCallback(
+    (page: string, projectName: string | null) => {
+      const project = projectData.find((p) => p.metadata.name === projectName);
+      setPageProjects((prev) => {
+        const projects = { ...prev };
+        projects[!altPreferredProject ? page : '__preferredProject'] = project || null;
+        return projects;
+      });
+    },
+    [altPreferredProject, projectData],
+  );
 
   const { projects, modelServingProjects, nonActiveProjects } = React.useMemo(
     () =>
@@ -121,8 +139,8 @@ const ProjectsContextProvider: React.FC<ProjectsProviderProps> = ({ children })
       projects: projects.toSorted(projectSorter),
       modelServingProjects: modelServingProjects.toSorted(projectSorter),
       nonActiveProjects: nonActiveProjects.toSorted(projectSorter),
-      preferredProject,
-      updatePreferredProject: setPreferredProject,
+      getPreferredProject,
+      updatePreferredProject,
       loaded,
       loadError,
       waitForProject,
@@ -131,8 +149,8 @@ const ProjectsContextProvider: React.FC<ProjectsProviderProps> = ({ children })
       projects,
       modelServingProjects,
       nonActiveProjects,
-      preferredProject,
-      setPreferredProject,
+      getPreferredProject,
+      updatePreferredProject,
       loaded,
       loadError,
       waitForProject,

diff --git a/frontend/src/concepts/projects/useSyncPreferredProject.tsx b/frontend/src/concepts/projects/useSyncPreferredProject.tsx
@@ -2,14 +2,15 @@ import * as React from 'react';
 import { ProjectsContext } from '~/concepts/projects/ProjectsContext';
 import { ProjectKind } from '~/k8sTypes';
 
-const useSyncPreferredProject = (newPreferredProject: ProjectKind | null): void => {
-  const { preferredProject, updatePreferredProject } = React.useContext(ProjectsContext);
+const useSyncPreferredProject = (page: string, newPreferredProject: ProjectKind | null): void => {
+  const { getPreferredProject, updatePreferredProject } = React.useContext(ProjectsContext);
+  const preferredProject = getPreferredProject(page);
 
   React.useEffect(() => {
     if (newPreferredProject?.metadata.name !== preferredProject?.metadata.name) {
-      updatePreferredProject(newPreferredProject);
+      updatePreferredProject(page, newPreferredProject?.metadata.name || null);
     }
-  }, [newPreferredProject, preferredProject, updatePreferredProject]);
+  }, [page, newPreferredProject, preferredProject, updatePreferredProject]);
 };
 
 export default useSyncPreferredProject;
diff --git a/frontend/src/pages/clusterStorage/GlobalClusterStoragePage.tsx b/frontend/src/pages/clusterStorage/GlobalClusterStoragePage.tsx
@@ -6,7 +6,8 @@ import { ProjectsContext } from '~/concepts/projects/ProjectsContext';
 import StorageList from '~/pages/projects/screens/detail/storage/StorageList';
 
 const GlobalClusterStoragePage: React.FC = () => {
-  const { projects, preferredProject, updatePreferredProject } = React.useContext(ProjectsContext);
+  const { getPreferredProject, updatePreferredProject } = React.useContext(ProjectsContext);
+  const preferredProject = getPreferredProject('cluster-storage');
   const navigate = useNavigate();
   return (
     <PageSection hasBodyWrapper={false}>
@@ -17,8 +18,7 @@ const GlobalClusterStoragePage: React.FC = () => {
             selectAllProjects
             invalidDropdownPlaceholder="All projects"
             onSelection={(projectName) => {
-              const project = projects.find((p) => p.metadata.name === projectName);
-              updatePreferredProject(project || null);
+              updatePreferredProject('cluster-storage', projectName);
               navigate('/clusterStorage');
             }}
             namespace={preferredProject?.metadata.name ?? 'all-projects'}

diff --git a/frontend/src/pages/connections/GlobalConnectionsPage.tsx b/frontend/src/pages/connections/GlobalConnectionsPage.tsx
@@ -6,7 +6,8 @@ import { ProjectsContext } from '~/concepts/projects/ProjectsContext';
 import ConnectionsList from '~/pages/projects/screens/detail/connections/ConnectionsList';
 
 const GlobalConnectionsPage: React.FC = () => {
-  const { projects, preferredProject, updatePreferredProject } = React.useContext(ProjectsContext);
+  const { getPreferredProject, updatePreferredProject } = React.useContext(ProjectsContext);
+  const preferredProject = getPreferredProject('connections');
   const navigate = useNavigate();
   return (
     <PageSection hasBodyWrapper={false}>
@@ -17,8 +18,7 @@ const GlobalConnectionsPage: React.FC = () => {
             selectAllProjects
             invalidDropdownPlaceholder="All projects"
             onSelection={(projectName) => {
-              const project = projects.find((p) => p.metadata.name === projectName);
-              updatePreferredProject(project || null);
+              updatePreferredProject('connections', projectName);
               navigate('/connections');
             }}
             namespace={preferredProject?.metadata.name ?? 'all-projects'}

diff --git a/frontend/src/pages/distributedWorkloads/global/GlobalDistributedWorkloads.tsx b/frontend/src/pages/distributedWorkloads/global/GlobalDistributedWorkloads.tsx
@@ -26,7 +26,8 @@ const GlobalDistributedWorkloads: React.FC<GlobalDistributedWorkloadsProps> = ({
   getInvalidRedirectPath,
 }) => {
   const { namespace } = useParams<{ namespace: string }>();
-  const { projects, preferredProject } = React.useContext(ProjectsContext);
+  const { projects, getPreferredProject } = React.useContext(ProjectsContext);
+  const preferredProject = getPreferredProject('distributed-workloads');
 
   if (projects.length === 0) {
     return (
@@ -52,7 +53,11 @@ const GlobalDistributedWorkloads: React.FC<GlobalDistributedWorkloadsProps> = ({
         loaded
         empty
         emptyStatePage={
-          <InvalidProject namespace={namespace} getRedirectPath={getInvalidRedirectPath} />
+          <InvalidProject
+            page="distributed-workloads"
+            namespace={namespace}
+            getRedirectPath={getInvalidRedirectPath}
+          />
         }
       />
     );
@@ -67,6 +72,7 @@ const GlobalDistributedWorkloads: React.FC<GlobalDistributedWorkloadsProps> = ({
       empty={false}
       headerContent={
         <ProjectSelectorNavigator
+          page="distributed-workloads"
           getRedirectPath={(ns: string) => `/distributedWorkloads/${activeTab.path}/${ns}`}
           showTitle
         />

diff --git a/frontend/src/pages/modelServing/ModelServingContext.tsx b/frontend/src/pages/modelServing/ModelServingContext.tsx
@@ -75,9 +75,10 @@ const ModelServingContextProvider = conditionalArea<ModelServingContextProviderP
 )(({ children, namespace, getErrorComponent }) => {
   const { dashboardNamespace } = useDashboardNamespace();
   const navigate = useNavigate();
-  const { projects, preferredProject } = React.useContext(ProjectsContext);
+  const { projects, getPreferredProject } = React.useContext(ProjectsContext);
+  const preferredProject = getPreferredProject('model-serving');
   const project = projects.find(byName(namespace)) ?? null;
-  useSyncPreferredProject(project);
+  useSyncPreferredProject('model-serving', project);
   const servingRuntimeTemplates = useTemplates(dashboardNamespace);
 
   const servingRuntimeTemplateOrder = useContextResourceData<string>(

diff --git a/frontend/src/pages/modelServing/screens/global/GlobalModelServingCoreLoader.tsx b/frontend/src/pages/modelServing/screens/global/GlobalModelServingCoreLoader.tsx
@@ -20,7 +20,8 @@ const GlobalModelServingCoreLoader: React.FC<GlobalModelServingCoreLoaderProps>
   getInvalidRedirectPath,
 }) => {
   const { namespace } = useParams<{ namespace: string }>();
-  const { projects, preferredProject } = React.useContext(ProjectsContext);
+  const { projects, getPreferredProject } = React.useContext(ProjectsContext);
+  const preferredProject = getPreferredProject('model-serving');
 
   let renderStateProps: ApplicationPageRenderState & { children?: React.ReactNode };
   if (projects.length === 0) {
@@ -43,7 +44,11 @@ const GlobalModelServingCoreLoader: React.FC<GlobalModelServingCoreLoaderProps>
     renderStateProps = {
       empty: true,
       emptyStatePage: (
-        <InvalidProject namespace={namespace} getRedirectPath={getInvalidRedirectPath} />
+        <InvalidProject
+          page="model-serving"
+          namespace={namespace}
+          getRedirectPath={getInvalidRedirectPath}
+        />
       ),
     };
   } else {

diff --git a/frontend/src/pages/modelServing/screens/global/ModelServingProjectSelection.tsx b/frontend/src/pages/modelServing/screens/global/ModelServingProjectSelection.tsx
@@ -9,6 +9,7 @@ const ModelServingProjectSelection: React.FC<ModelServingProjectSelectionProps>
   getRedirectPath,
 }) => (
   <ProjectSelectorNavigator
+    page="model-serving"
     getRedirectPath={getRedirectPath}
     invalidDropdownPlaceholder="All projects"
     selectAllProjects

diff --git a/frontend/src/pages/notebooks/GlobalNotebooksPage.tsx b/frontend/src/pages/notebooks/GlobalNotebooksPage.tsx
@@ -6,7 +6,8 @@ import { ProjectsContext } from '~/concepts/projects/ProjectsContext';
 import NotebookList from '~/pages/projects/screens/detail/notebooks/NotebookList';
 
 const GlobalNotebooksPage: React.FC = () => {
-  const { projects, preferredProject, updatePreferredProject } = React.useContext(ProjectsContext);
+  const { getPreferredProject, updatePreferredProject } = React.useContext(ProjectsContext);
+  const preferredProject = getPreferredProject('notebooks');
   const navigate = useNavigate();
   return (
     <PageSection hasBodyWrapper={false}>
@@ -18,8 +19,7 @@ const GlobalNotebooksPage: React.FC = () => {
             selectAllProjects
             invalidDropdownPlaceholder="All projects"
             onSelection={(projectName) => {
-              const project = projects.find((p) => p.metadata.name === projectName);
-              updatePreferredProject(project || null);
+              updatePreferredProject('notebooks', projectName);
               navigate('/workbenches');
             }}
             namespace={preferredProject?.metadata.name ?? 'all-projects'}