add global no projects page

Author: katieperry4

frontend/packages/modelServing/extensions.ts

@@ -56,15 +56,15 @@ const extensions: (
     properties: {
       id: 'modelServing',
       title: 'Model deployments',
-      href: '/modelServing',
+      href: '/model-serving',
       section: 'models',
-      path: '/modelServing/:namespace?/*',
+      path: '/model-serving/:namespace?/*',
     },
   },
   {
     type: 'app.route',
     properties: {
-      path: '/modelServing/:namespace?/*',
+      path: '/model-serving/:namespace?/*',
       component: () => import('./src/GlobalModelsPage'),
     },
     flags: {

frontend/packages/modelServing/src/GlobalModelsPage.tsx

@@ -3,7 +3,9 @@ import { ProjectsContext } from '@odh-dashboard/internal/concepts/projects/Proje
 import { useExtensions, useResolvedExtensions } from '@odh-dashboard/plugin-core';
 import { Bullseye, Spinner } from '@patternfly/react-core';
 import { useNavigate, useParams } from 'react-router-dom';
+import ApplicationsPage from '@odh-dashboard/internal/pages/ApplicationsPage';
 import GlobalDeploymentsView from './components/global/GlobalDeploymentsView';
+import NoProjectsPage from './components/global/NoProjectsPage';
 import { ModelDeploymentsProvider } from './concepts/ModelDeploymentsContext';
 import { ModelServingPlatformProvider } from './concepts/ModelServingPlatformContext';
 import {
@@ -17,14 +19,20 @@ const GlobalModelsPage: React.FC = () => (
   </ModelServingPlatformProvider>
 );
 
+type ApplicationPageProps = React.ComponentProps<typeof ApplicationsPage>;
+type EmptyStateProps = 'emptyStatePage' | 'empty';
+type ApplicationPageRenderState = Pick<ApplicationPageProps, EmptyStateProps>;
+
 const GlobalModelsPageCoreLoader: React.FC = () => {
   const availablePlatforms = useExtensions(isModelServingPlatformExtension);
   const [deploymentWatchers] = useResolvedExtensions(isModelServingPlatformWatchDeployments);
+
   const {
     projects,
     loaded: projectsLoaded,
     preferredProject: currentProject,
   } = React.useContext(ProjectsContext);
+
   const selectedProject = currentProject
     ? projects.find((project) => project.metadata.name === currentProject.metadata.name)
     : null;
@@ -34,9 +42,12 @@ const GlobalModelsPageCoreLoader: React.FC = () => {
 
   React.useEffect(() => {
     if (!namespace && currentProject) {
-      navigate(`/modelServing/${currentProject.metadata.name}`, { replace: true });
+      navigate(`/model-serving/${currentProject.metadata.name}`, { replace: true });
     }
   }, [namespace, currentProject, navigate]);
+  let renderStateProps: ApplicationPageRenderState & { children?: React.ReactNode } = {
+    empty: false,
+  };
 
   if (!projectsLoaded) {
     return (
@@ -45,16 +56,21 @@ const GlobalModelsPageCoreLoader: React.FC = () => {
       </Bullseye>
     );
   }
+
   if (projects.length === 0) {
-    return <div>No projects found component</div>;
+    renderStateProps = {
+      empty: true,
+      emptyStatePage: <NoProjectsPage />,
+    };
   }
+
   return (
     <ModelDeploymentsProvider
       modelServingPlatforms={availablePlatforms}
       projects={projectsToShow}
       deploymentWatchers={deploymentWatchers}
     >
-      <GlobalDeploymentsView currentProject={selectedProject} />
+      <GlobalDeploymentsView {...renderStateProps} currentProject={selectedProject} />
     </ModelDeploymentsProvider>
   );
 };

frontend/packages/modelServing/src/components/global/GlobalDeploymentsView.tsx

@@ -9,25 +9,34 @@ import ModelServingProjectSelection from './ModelServingProjectSelection';
 import { ModelDeploymentsContext } from '../../concepts/ModelDeploymentsContext';
 
 type GlobalDeploymentsViewProps = {
+  empty?: boolean;
+  emptyStatePage?: React.ReactNode;
   currentProject?: ProjectKind | null;
 };
 
-const GlobalDeploymentsView: React.FC<GlobalDeploymentsViewProps> = ({ currentProject }) => {
+const GlobalDeploymentsView: React.FC<GlobalDeploymentsViewProps> = ({
+  empty,
+  emptyStatePage,
+  currentProject,
+}) => {
   const { deployments, loaded: deploymentsLoaded } = React.useContext(ModelDeploymentsContext);
   const hasDeployments = deployments && deployments.length > 0;
   const isLoading = !deploymentsLoaded;
+  const isEmpty = empty || (!isLoading && !hasDeployments);
 
   return (
     <ApplicationsPage
       loaded={!isLoading}
-      empty={!hasDeployments}
-      emptyStatePage={<GlobalNoModelsView project={currentProject ?? undefined} />}
+      empty={isEmpty}
+      emptyStatePage={
+        emptyStatePage ?? <GlobalNoModelsView project={currentProject ?? undefined} />
+      }
       description="Manage and view the health and performance of your deployed models."
       title={
         <TitleWithIcon title="Model deployments" objectType={ProjectObjectType.deployedModels} />
       }
       headerContent={
-        <ModelServingProjectSelection getRedirectPath={(ns: string) => `/modelServing/${ns}`} />
+        <ModelServingProjectSelection getRedirectPath={(ns: string) => `/model-serving/${ns}`} />
       }
     >
       <GlobalDeploymentsTable />

frontend/packages/modelServing/src/components/global/NoProjectsPage.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { EmptyState, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
+import { WrenchIcon } from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
+import { useNavigate } from 'react-router-dom';
+import NewProjectButton from '@odh-dashboard/internal/pages/projects/screens/projects/NewProjectButton';
+
+const NoProjectsPage: React.FC = () => {
+  const navigate = useNavigate();
+  return (
+    <EmptyState headingLevel="h4" icon={WrenchIcon} titleText="No data science projects">
+      <EmptyStateBody>To deploy a model, first create a data science project.</EmptyStateBody>
+      <EmptyStateFooter>
+        <NewProjectButton
+          closeOnCreate
+          onProjectCreated={(projectName) => navigate(`/model-serving/${projectName}`)}
+        />
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};
+
+export default NoProjectsPage;