Make content updates for project UI screens

frontend/src/concepts/pipelines/NoPipelineServer.tsx

@@ -18,16 +18,20 @@ const NoPipelineServer: React.FC<NoPipelineServerProps> = ({
 
   return (
     <EmptyDetailsView
-      title="Start by creating a pipeline server"
-      description="Standardize and automate machine learning workflows to enable you to further enhance and deploy your data science models."
+      title={installed ? 'Start by importing a pipeline' : 'Enable pipelines'}
+      description={`Pipelines are platforms for building and deploying portable and scalable machine-learning (ML) workflows. You can import a pipeline or create one in a workbench.${
+        installed
+          ? ''
+          : ' Before you can work with pipelines, you must first configure a pipeline server in your project.'
+      }`}
       iconImage={typedEmptyImage(ProjectObjectType.pipeline)}
       imageAlt=""
       allowCreate={allowCreate}
       createButton={
         <CreatePipelineServerButton
           isInline
           variant={variant}
-          title={installed ? 'Create pipeline' : undefined}
+          title={installed ? 'Import pipeline' : undefined}
         />
       }
     />

frontend/src/pages/modelServing/screens/projects/EmptyMultiModelServingCard.tsx

@@ -61,8 +61,9 @@ const EmptyMultiModelServingCard: React.FC<DataConnectionCardProps> = ({ allowCr
           </TextContent>
         </CardTitle>
         <CardBody>
-          Multiple models can be deployed from a single model server. Choose this option when you
-          have a large number of small models to deploy that can share server resources.
+          Multiple models can be deployed on one shared model server. Choose this option when you
+          want to deploy a number of small or medium-sized models that can share the server
+          resources.
         </CardBody>
         {allowCreate ? (
           <CardFooter>

frontend/src/pages/modelServing/screens/projects/EmptySingleModelServingCard.tsx

@@ -67,8 +67,8 @@ const EmptySingleModelServingCard: React.FC<EmptySingleModelServingCardProps> =
           </TextContent>
         </CardTitle>
         <CardBody>
-          Each model is deployed from its own model server. Choose this option when you have a small
-          number of large models to deploy.
+          Each model is deployed on its own model server. Choose this option when you want to deploy
+          a large model such as a large language model (LLM).
         </CardBody>
         {allowCreate ? (
           <CardFooter>

frontend/src/pages/modelServing/screens/projects/ModelServingPlatform.tsx

@@ -92,14 +92,50 @@ const ModelServingPlatform: React.FC = () => {
     }
   };
 
+  const renderPlatformEmptyState = () => {
+    if (kServeEnabled || modelMeshEnabled) {
+      return (
+        <EmptyDetailsList
+          title={modelMeshEnabled ? 'Start by adding a model server' : 'Start by deploying a model'}
+          description={
+            modelMeshEnabled
+              ? 'Model servers are used to deploy models and to allow apps to send requests to your models. Configuring a model server includes specifying the number of replicas being deployed, the server size, the token authorization, the serving runtime, and how the project that the model server belongs to is accessed.'
+              : 'Each model is deployed on its own model server.'
+          }
+          actions={
+            <ModelServingPlatformButtonAction
+              isProjectModelMesh={isProjectModelMesh}
+              testId={`${isProjectModelMesh ? 'add-server' : 'deploy'}-button`}
+              emptyTemplates={emptyTemplates}
+              onClick={() => {
+                setPlatformSelected(
+                  isProjectModelMesh ? ServingRuntimePlatform.MULTI : ServingRuntimePlatform.SINGLE,
+                );
+              }}
+            />
+          }
+          icon={isProjectModelMesh ? PlusCircleIcon : undefined}
+        />
+      );
+    }
+
+    return (
+      <EmptyDetailsList
+        title="No model serving platform selected"
+        description="To enable model serving, an administrator must first select a model serving platform in the cluster settings."
+        icon={PlusCircleIcon}
+      />
+    );
+  };
+
   return (
     <>
       <DetailsSection
         objectType={ProjectObjectType.deployedModels}
         id={ProjectSectionID.MODEL_SERVER}
         title={ProjectSectionTitles[ProjectSectionID.MODEL_SERVER]}
         actions={
-          shouldShowPlatformSelection || platformError
+          shouldShowPlatformSelection || platformError || emptyModelServer
             ? undefined
             : [
                 <ModelServingPlatformButtonAction
@@ -119,13 +155,13 @@ const ModelServingPlatform: React.FC = () => {
         }
         description={
           shouldShowPlatformSelection && emptyModelServer
-            ? 'Select the type of model serving platform to be used when deploying models in this project.'
+            ? 'Select the model serving type to be used when deploying models from this project.'
             : undefined
         }
         popover={
           <Popover
-            headerContent="About model serving"
-            bodyContent="Deploy a trained data science model to serve intelligent applications with an endpoint that allows apps to send requests to the model."
+            headerContent="About models"
+            bodyContent="Deploy models to test them and integrate them into applications. Deploying a model makes it accessible via an API, enabling you to return predictions based on data inputs."
           >
             <DashboardPopupIconButton
               icon={<OutlinedQuestionCircleIcon />}
@@ -137,7 +173,7 @@ const ModelServingPlatform: React.FC = () => {
         isEmpty={shouldShowPlatformSelection}
         loadError={platformError || servingRuntimeError || templateError}
         emptyState={
-          kServeEnabled || modelMeshEnabled ? (
+          kServeEnabled && modelMeshEnabled ? (
             <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapLg' }}>
               <FlexItem
                 flex={{ default: 'flex_1' }}
@@ -165,13 +201,8 @@ const ModelServingPlatform: React.FC = () => {
                   variant="info"
                   isInline
                   isPlain
-                  title="Your project can only support one platform"
-                >
-                  <p>
-                    Choose a platform that best fits your needs. Changes cannot be made once a model
-                    has deployed.
-                  </p>
-                </Alert>
+                  title="The model serving type can be changed until the first model is deployed from this project. After that, if you want to use a different model serving type, you must create a new project."
+                />
               </FlexItem>
             </Flex>
           ) : (
@@ -187,10 +218,7 @@ const ModelServingPlatform: React.FC = () => {
         }
       >
         {emptyModelServer ? (
-          <EmptyDetailsList
-            title={isProjectModelMesh ? 'No model servers' : 'No deployed models'}
-            icon={PlusCircleIcon}
-          />
+          renderPlatformEmptyState()
         ) : isProjectModelMesh ? (
           <ModelMeshServingRuntimeTable />
         ) : (

frontend/src/pages/modelServing/screens/projects/ModelServingPlatformSelect.tsx

@@ -31,7 +31,7 @@ const ModelServingPlatformSelect: React.FC<ModelServingPlatformSelectProps> = ({
   return (
     <Stack hasGutter>
       <StackItem>
-        Select the type of model serving platform to be used when deploying models in this project.
+        Select the model serving type to be used when deploying models from this project.
       </StackItem>
       <StackItem>
         <Gallery hasGutter maxWidths={{ default: '400px' }}>
@@ -47,7 +47,7 @@ const ModelServingPlatformSelect: React.FC<ModelServingPlatformSelectProps> = ({
                 />
               }
               title="Single-model serving platform"
-              description="Each model is deployed on its own model server. This platform works well for large models or models that need dedicated resources."
+              description="Each model is deployed on its own model server. Choose this option when you want to deploy a large model such as a large language model (LLM)."
             />
           </GalleryItem>
           <GalleryItem>
@@ -62,16 +62,16 @@ const ModelServingPlatformSelect: React.FC<ModelServingPlatformSelectProps> = ({
                 />
               }
               title="Multi-model serving platform"
-              description="Multiple models can be deployed on a single-model server. This platform works well for sharing resources amongst deployed models"
+              description="Multiple models can be deployed on one shared model server. Choose this option when you want to deploy a number of small or medium-sized models that can share the server resources."
             />
           </GalleryItem>
         </Gallery>
       </StackItem>
       {alertShown && (
         <StackItem>
           <Alert
-            variant="warning"
-            title="The model serving type can be changed until the first model is deployed on this project. After that, you will need to create a new project in order to use a different model serving type."
+            variant="info"
+            title="The model serving type can be changed until the first model is deployed from this project. After that, if you want to use a different model serving type, you must create a new project."
             isInline
             actionClose={<AlertActionCloseButton onClose={() => setAlertShown(false)} />}
           />

frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsList.tsx

@@ -38,7 +38,7 @@ const DataConnectionsList: React.FC = () => {
           !isDataConnectionsEmpty && (
             <Popover
               headerContent="About data connections"
-              bodyContent="Adding a data connection to your project allows you to connect data inputs to your workbenches."
+              bodyContent="You can add data connections to workbenches to connect your project to data inputs and object storage buckets. You can also use data connections to specify the location of your models during deployment."
             >
               <DashboardPopupIconButton
                 icon={<OutlinedQuestionCircleIcon />}
@@ -67,7 +67,7 @@ const DataConnectionsList: React.FC = () => {
         emptyState={
           <EmptyDetailsView
             title="Start by adding a data connection"
-            description="Adding a data connection to your project allows you to connect data inputs to your workbenches."
+            description="You can add data connections to workbenches to connect your project to data inputs and object storage buckets. You can also use data connections to specify the location of your models during deployment."
             iconImage={typedEmptyImage(ProjectObjectType.dataConnection)}
             imageAlt="add a data connection"
             allowCreate={rbacLoaded && allowCreate}

frontend/src/pages/projects/screens/detail/notebooks/NotebookList.tsx

@@ -44,7 +44,7 @@ const NotebookList: React.FC = () => {
         !isNotebooksEmpty && (
           <Popover
             headerContent="About workbenches"
-            bodyContent="Creating a workbench allows you to add a Jupyter notebook to your project."
+            bodyContent="A workbench is an isolated area where you can work with models in your preferred IDE, such as a Jupyter notebook. You can add accelerators and data connections, create pipelines, and add cluster storage in your workbench."
           >
             <DashboardPopupIconButton
               icon={<OutlinedQuestionCircleIcon />}
@@ -68,7 +68,7 @@ const NotebookList: React.FC = () => {
       emptyState={
         <EmptyDetailsView
           title="Start by creating a workbench"
-          description="Creating a workbench allows you to add a Jupyter notebook to your project."
+          description="A workbench is an isolated area where you can work with models in your preferred IDE, such as a Jupyter notebook. You can add accelerators and data connections, create pipelines, and add cluster storage in your workbench."
           iconImage={typedEmptyImage(ProjectObjectType.notebook)}
           imageAlt="create a workbench"
           allowCreate={rbacLoaded && allowCreate}

frontend/src/pages/projects/screens/detail/overview/configuration/ConfigurationSection.tsx

@@ -48,7 +48,7 @@ const ConfigurationSection: React.FC = () => {
           sectionType={SectionType.setup}
           imgSrc={typedObjectImage(ProjectObjectType.dataConnection)}
           title="Data connections"
-          description="For projects that use very large data sets, you can use data connections to link your project to an object storage bucket."
+          description="You can add data connections to workbenches to connect your project to data inputs and object storage buckets. You can also use data connections to specify the location of your models during deployment."
           isOpen={open}
           onClick={() =>
             navigate(

frontend/src/pages/projects/screens/detail/overview/serverModels/PlatformSelectSection.tsx

@@ -12,7 +12,7 @@ const PlatformSelectSection: React.FC = () => (
         style={{ paddingLeft: 'var(--pf-v5-global--spacer--md)' }}
       >
         <Text component="small">
-          Select the type of model serving platform to be used when deploying models in this
+          Select the type of model serving platform to be used when deploying models from this
           project.
         </Text>
       </TextContent>
@@ -26,7 +26,7 @@ const PlatformSelectSection: React.FC = () => (
       </Gallery>
       <Alert
         isInline
-        variant="warning"
+        variant="info"
         title="The model serving type can be changed until the first model is deployed from this project. After that, if you want to use a different model serving type, you must create a new project."
       />
     </Stack>

frontend/src/pages/projects/screens/detail/overview/trainModels/NotebooksCard.tsx

@@ -95,6 +95,8 @@ const NotebooksCard: React.FC = () => {
         objectType={ProjectObjectType.notebook}
         sectionType={SectionType.training}
         title="Workbenches"
+        popoverHeaderContent="About workbenches"
+        popoverBodyContent="A workbench is an isolated area where you can work with models in your preferred IDE, such as a Jupyter notebook. You can add accelerators and data connections, create pipelines, and add cluster storage in your workbench."
       >
         <CardBody>
           <Flex
@@ -142,7 +144,7 @@ const NotebooksCard: React.FC = () => {
       sectionType={SectionType.training}
       title="Workbenches"
       popoverHeaderContent="About workbenches"
-      popoverBodyContent="Creating a workbench allows you to add a Jupyter notebook to your project."
+      popoverBodyContent="A workbench is an isolated area where you can work with models in your preferred IDE, such as a Jupyter notebook. You can add accelerators and data connections, create pipelines, and add cluster storage in your workbench."
     >
       <MetricsContents
         title="Workbenches"

frontend/src/pages/projects/screens/detail/overview/trainModels/PipelinesCard.tsx

@@ -142,8 +142,10 @@ const PipelinesCard: React.FC = () => {
             <Stack hasGutter>
               <TextContent>
                 <Text component="small">
-                  Pipelines are machine-learning workflows that you can use to train your model. To
-                  create or import pipelines, you must first configure a pipeline server.
+                  Pipelines are platforms for building and deploying portable and scalable
+                  machine-learning (ML) workflows. You can import a pipeline or create one in a
+                  workbench. Before you can work with pipelines, you must first configure a pipeline
+                  server in your project.
                 </Text>
               </TextContent>
               {notebooksLoaded && !notebooksError && notebooks.length > 0 ? (
@@ -153,8 +155,8 @@ const PipelinesCard: React.FC = () => {
                   variant="warning"
                   title="Restart running workbenches after configuring the pipeline server"
                 >
-                  If you’ve already created pipelines in a workbench, restart the workbench after
-                  configuring the pipeline server to view your pipelines here.
+                  If you&apos;ve already created pipelines in a workbench, restart the workbench
+                  after configuring the pipeline server to view your pipelines here.
                 </Alert>
               ) : null}
             </Stack>
@@ -198,7 +200,9 @@ const PipelinesCard: React.FC = () => {
             <CardBody>
               <TextContent>
                 <Text component="small">
-                  Pipelines are machine-learning workflows that you can use to train your model.
+                  Pipelines are platforms for building and deploying portable and scalable
+                  machine-learning (ML) workflows. You can import a pipeline or create one in a
+                  workbench.
                 </Text>
               </TextContent>
             </CardBody>
@@ -221,8 +225,8 @@ const PipelinesCard: React.FC = () => {
       title="Pipelines"
       popoverHeaderContent={pipelinesCount ? 'About pipelines' : undefined}
       popoverBodyContent={
-        pipelinesCount
-          ? 'Standardize and automate machine learning workflows to enable you to further enhance and deploy your data science models.'
+        !pipelinesCount
+          ? 'Pipelines are platforms for building and deploying portable and scalable machine-learning (ML) workflows. You can import a pipeline or create one in a workbench.'
           : undefined
       }
       data-testid="section-pipelines"

frontend/src/pages/projects/screens/detail/pipelines/PipelinesSection.tsx

@@ -60,7 +60,7 @@ const PipelinesSection: React.FC = () => {
           installed ? (
             <Popover
               headerContent="About pipelines"
-              bodyContent="Standardize and automate machine learning workflows to enable you to further enhance and deploy your data science models."
+              bodyContent="Pipelines are platforms for building and deploying portable and scalable machine-learning (ML) workflows. You can import a pipeline or create one in a workbench."
             >
               <DashboardPopupIconButton
                 icon={<OutlinedQuestionCircleIcon />}

frontend/src/pages/projects/screens/detail/storage/StorageList.tsx

@@ -35,7 +35,7 @@ const StorageList: React.FC = () => {
         popover={
           <Popover
             headerContent="About cluster storage"
-            bodyContent="For data science projects that require data to be retained, you can add cluster storage to the project."
+            bodyContent="Cluster storage saves your project’s data on a selected cluster. You can optionally connect cluster storage to a workbench. "
           >
             <DashboardPopupIconButton
               icon={<OutlinedQuestionCircleIcon />}
@@ -58,7 +58,7 @@ const StorageList: React.FC = () => {
         emptyState={
           <EmptyDetailsView
             title="Start by adding cluster storage"
-            description="For data science projects that require data to be retained, you can add cluster storage to the project."
+            description="Cluster storage saves your project’s data on a selected cluster. You can optionally connect cluster storage to a workbench."
             iconImage={typedEmptyImage(ProjectObjectType.clusterStorage)}
             imageAlt="add cluster storage"
             allowCreate={rbacLoaded && allowCreate}