Updates per review

frontend/src/concepts/design/TypedObjectIcon.tsx

@@ -27,6 +27,9 @@ import {
   ModelIcon,
   SingleModelIcon,
   MultiModelIcon,
+  PermissionsIcon,
+  ExperimentIcon,
+  ResourcesIcon,
 } from '~/images/icons';
 
 type TypedObjectIconProps = SVGIconProps & {
@@ -63,6 +66,9 @@ const TypedObjectIcon: React.FC<TypedObjectIconProps> = ({
     case ProjectObjectType.pipelineRun:
       Icon = PipelineRunIcon;
       break;
+    case ProjectObjectType.pipelineExperiment:
+      Icon = ExperimentIcon;
+      break;
     case ProjectObjectType.pipelineExecution:
       Icon = PipelineExecutionIcon;
       break;
@@ -85,6 +91,7 @@ const TypedObjectIcon: React.FC<TypedObjectIconProps> = ({
       Icon = ModelServerIcon;
       break;
     case ProjectObjectType.registeredModels:
+    case ProjectObjectType.modelRegistrySettings:
       Icon = RegisteredModelIcon;
       break;
     case ProjectObjectType.deployedModels:
@@ -107,6 +114,9 @@ const TypedObjectIcon: React.FC<TypedObjectIconProps> = ({
     case ProjectObjectType.acceleratorProfile:
       Icon = AcceleratorProfileIcon;
       break;
+    case ProjectObjectType.permissions:
+      Icon = PermissionsIcon;
+      break;
     case ProjectObjectType.user:
       Icon = UserIcon;
       break;
@@ -122,6 +132,9 @@ const TypedObjectIcon: React.FC<TypedObjectIconProps> = ({
     case ProjectObjectType.exploreApplications:
       Icon = ExploreApplicationsIcon;
       break;
+    case ProjectObjectType.resources:
+      Icon = ResourcesIcon;
+      break;
     default:
       return null;
   }

frontend/src/concepts/design/utils.ts

@@ -40,6 +40,7 @@ export enum ProjectObjectType {
   pipelineSetup = 'pipeline-setup',
   pipeline = 'pipeline',
   pipelineRun = 'pipeline-run',
+  pipelineExperiment = 'pipeline-experiment',
   pipelineExecution = 'pipeline-execution',
   pipelineArtifact = 'pipeline-artifact',
   clusterStorage = 'cluster-storage',
@@ -50,12 +51,14 @@ export enum ProjectObjectType {
   registeredModels = 'registered-models',
   deployedModels = 'deployed-models',
   deployingModels = 'deploying-models',
+  modelRegistrySettings = 'model-registry-settings',
   servingRuntime = 'serving-runtime',
   distributedWorkload = 'distributed-workload',
   dataConnection = 'data-connection',
   connections = 'connections',
   clusterSettings = 'cluster-settings',
   acceleratorProfile = 'accelerator-profile',
+  permissions = 'permissions',
   user = 'user',
   group = 'group',
   storageClasses = 'storageClasses',
@@ -71,10 +74,12 @@ export const typedBackgroundColor = (objectType: ProjectObjectType): string => {
     case ProjectObjectType.projectContext:
       return 'var(--ai-project-context--BackgroundColor)';
     case ProjectObjectType.notebook:
-    case ProjectObjectType.notebookImage:
       return 'var(--ai-notebook--BackgroundColor)';
+    case ProjectObjectType.notebookImage:
+      return 'var(--ai-set-up--BackgroundColor)';
     case ProjectObjectType.pipeline:
     case ProjectObjectType.pipelineRun:
+    case ProjectObjectType.pipelineExperiment:
     case ProjectObjectType.pipelineExecution:
     case ProjectObjectType.pipelineArtifact:
       return 'var(--ai-pipeline--BackgroundColor)';
@@ -91,15 +96,20 @@ export const typedBackgroundColor = (objectType: ProjectObjectType): string => {
     case ProjectObjectType.deployedModels:
     case ProjectObjectType.deployingModels:
       return 'var(--ai-model-server--BackgroundColor)';
+    case ProjectObjectType.modelRegistrySettings:
+      return 'var(--ai-set-up--BackgroundColor)';
     case ProjectObjectType.dataConnection:
     case ProjectObjectType.connections:
       return 'var(--ai-data-connection--BackgroundColor)';
     case ProjectObjectType.user:
       return 'var(--ai-user--BackgroundColor)';
     case ProjectObjectType.group:
       return 'var(--ai-group--BackgroundColor)';
+    case ProjectObjectType.permissions:
+      return 'var(--ai-set-up--BackgroundColor)';
     case ProjectObjectType.enabledApplications:
     case ProjectObjectType.exploreApplications:
+      return 'var(--ai-config--BackgroundColor)';
     case ProjectObjectType.resources:
       return 'var(--ai-general--BackgroundColor)';
     case ProjectObjectType.distributedWorkload:
@@ -108,7 +118,7 @@ export const typedBackgroundColor = (objectType: ProjectObjectType): string => {
     case ProjectObjectType.acceleratorProfile:
       return 'var(--ai-set-up--BackgroundColor)';
     case ProjectObjectType.servingRuntime:
-      return 'var(--ai-serving--BackgroundColor)';
+      return 'var(--ai-set-up--BackgroundColor)';
     default:
       return '';
   }
@@ -122,8 +132,9 @@ export const typedColor = (objectType: ProjectObjectType): string => {
       return 'var(--ai-project-context--Color)';
     case ProjectObjectType.notebook:
     case ProjectObjectType.notebookImage:
+      return 'var(--ai-training--BackgroundColor)';
     case ProjectObjectType.build:
-      return 'var(--ai-notebook--Color)';
+      return 'var(--ai-model-server--Color)';
     case ProjectObjectType.pipeline:
     case ProjectObjectType.pipelineRun:
     case ProjectObjectType.pipelineExecution:
@@ -138,6 +149,8 @@ export const typedColor = (objectType: ProjectObjectType): string => {
     case ProjectObjectType.deployedModels:
     case ProjectObjectType.deployingModels:
       return 'var(--ai-model-server--Color)';
+    case ProjectObjectType.modelRegistrySettings:
+      return 'var(--ai-set-up--Color)';
     case ProjectObjectType.dataConnection:
     case ProjectObjectType.connections:
       return 'var(--ai-data-connection--Color)';

frontend/src/concepts/projects/ProjectSelector.tsx

@@ -98,7 +98,7 @@ const ProjectSelector: React.FC<ProjectSelectorProps> = ({
 
   if (showTitle) {
     return (
-      <Flex spaceItems={{ default: 'spaceItemsNone' }} alignItems={{ default: 'alignItemsCenter' }}>
+      <Flex spaceItems={{ default: 'spaceItemsXs' }} alignItems={{ default: 'alignItemsCenter' }}>
         <img
           src={typedObjectImage(ProjectObjectType.project)}
           alt=""

frontend/src/pages/groupSettings/GroupSettings.tsx

@@ -67,7 +67,7 @@ const GroupSettings: React.FC = () => {
 
   return (
     <ApplicationsPage
-      title={<TitleWithIcon title="User management" objectType={ProjectObjectType.group} />}
+      title={<TitleWithIcon title="User management" objectType={ProjectObjectType.permissions} />}
       description="Define OpenShift group membership for Data Science administrators and users."
       loaded={loaded}
       empty={false}

frontend/src/pages/home/projects/CreateProjectCard.tsx

@@ -8,8 +8,9 @@ import {
   Text,
   TextContent,
 } from '@patternfly/react-core';
-import { ProjectObjectType, SectionType, typedObjectImage } from '~/concepts/design/utils';
+import { SectionType } from '~/concepts/design/utils';
 import TypeBorderedCard from '~/concepts/design/TypeBorderedCard';
+import { ProjectIcon } from '~/images/icons';
 
 interface CreateProjectCardProps {
   allowCreate: boolean;
@@ -25,11 +26,8 @@ const CreateProjectCard: React.FC<CreateProjectCardProps> = ({ allowCreate, onCr
       <Bullseye>
         <Flex direction={{ default: 'column' }} alignItems={{ default: 'alignItemsCenter' }}>
           <FlexItem>
-            <img
-              src={typedObjectImage(ProjectObjectType.project)}
-              alt="Add project"
-              width={54}
-              height={54}
+            <ProjectIcon
+              style={{ width: 54, height: 54, color: 'var(--pf-v5-global--palette--black-500)' }}
             />
           </FlexItem>
           {allowCreate ? (

frontend/src/pages/home/useEnableTeamSection.tsx

@@ -111,7 +111,7 @@ export const useEnableTeamSection = (): React.ReactNode => {
         isOpen={resourcesOpen}
         title="User management"
         onClick={() => trackAndNavigate('user-management', '/groupSettings')}
-        resourceType={ProjectObjectType.user}
+        resourceType={ProjectObjectType.permissions}
         sectionType={SectionType.setup}
         description={
           <TextContent>

frontend/src/pages/learningCenter/LearningCenter.tsx

@@ -127,7 +127,7 @@ const LearningCenter: React.FC = () => {
 
   return (
     <ApplicationsPage
-      title={<TitleWithIcon title="Resources" objectType={ProjectObjectType.enabledApplications} />}
+      title={<TitleWithIcon title="Resources" objectType={ProjectObjectType.resources} />}
       description={
         <>
           {description}

frontend/src/pages/modelRegistrySettings/ModelRegistrySettings.tsx

@@ -40,7 +40,7 @@ const ModelRegistrySettings: React.FC = () => {
         title={
           <TitleWithIcon
             title="Model Registry Settings"
-            objectType={ProjectObjectType.registeredModels}
+            objectType={ProjectObjectType.modelRegistrySettings}
           />
         }
         description="Manage model registry settings for all users in your organization."

frontend/src/pages/pipelines/global/experiments/GlobalExperiments.tsx

@@ -21,7 +21,10 @@ const GlobalExperiments: React.FC<GlobalExperimentsParams> = ({ tab }) => {
   return (
     <PipelineCoreApplicationPage
       title={
-        <TitleWithIcon title={experimentsPageTitle} objectType={ProjectObjectType.pipelineRun} />
+        <TitleWithIcon
+          title={experimentsPageTitle}
+          objectType={ProjectObjectType.pipelineExperiment}
+        />
       }
       description={experimentsPageDescription}
       headerAction={<PipelineServerActions isDisabled={!pipelinesAPI.pipelinesServer.installed} />}

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

@@ -114,7 +114,7 @@ const ConfigurationSection: React.FC = () => {
           <InfoGalleryItem
             sectionType={SectionType.setup}
             title="Permissions"
-            resourceType={ProjectObjectType.group}
+            resourceType={ProjectObjectType.permissions}
             description={
               <TextContent>
                 <Text component="small">Add users and groups to share access to your project.</Text>