add no projects page

Author: katieperry4

frontend/packages/modelServing/src/GlobalModelsPage.tsx

@@ -3,7 +3,9 @@ import { ProjectsContext } from '@odh-dashboard/internal/concepts/projects/Proje
 import { useParams } from 'react-router-dom';
 import { useExtensions, useResolvedExtensions } from '@odh-dashboard/plugin-core';
 import { Bullseye, Spinner } from '@patternfly/react-core';
+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,32 +19,48 @@ 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 { namespace } = useParams();
+
   const { projects, loaded: projectsLoaded } = React.useContext(ProjectsContext);
+
   const selectedProject = namespace
     ? projects.find((project) => project.metadata.name === namespace)
     : null;
   const projectsToShow = selectedProject ? [selectedProject] : projects;
+
+  let renderStateProps: ApplicationPageRenderState & { children?: React.ReactNode } = {
+    empty: false,
+  };
+
   if (!projectsLoaded) {
     return (
       <Bullseye>
         <Spinner />
       </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 />
+      <GlobalDeploymentsView {...renderStateProps} />
     </ModelDeploymentsProvider>
   );
 };

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

@@ -8,17 +8,25 @@ import GlobalDeploymentsTable from './GlobalDeploymentsTable';
 import ModelServingProjectSelection from './ModelServingProjectSelection';
 import { ModelDeploymentsContext } from '../../concepts/ModelDeploymentsContext';
 
-const GlobalDeploymentsView: React.FC = () => {
+type GlobalDeploymentsViewProps = {
+  empty?: boolean;
+  emptyStatePage?: React.ReactNode;
+};
+
+const GlobalDeploymentsView: React.FC<GlobalDeploymentsViewProps> = ({ empty, emptyStatePage }) => {
   const { deployments, loaded: deploymentsLoaded } = React.useContext(ModelDeploymentsContext);
   const { preferredProject: currentProject } = React.useContext(ProjectsContext);
   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} />

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(`/modelServing/${projectName}`)}
+        />
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};
+
+export default NoProjectsPage;