model catalog page svg and desc, details tag icon update

Signed-off-by: gitdallas <[email protected]>
opendatahub-io · Feb 26, 2025 · f9c7edb · f9c7edb
1 parent 084bc8a
commit f9c7edb
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 7 deletions.
diff --git a/frontend/src/concepts/design/TypedObjectIcon.tsx b/frontend/src/concepts/design/TypedObjectIcon.tsx
@@ -31,6 +31,7 @@ import {
   PermissionsIcon,
   ExperimentIcon,
   ResourcesIcon,
+  ModelCatalogIcon,
 } from '~/images/icons';
 
 type TypedObjectIconProps = SVGIconProps & {
@@ -91,6 +92,9 @@ const TypedObjectIcon: React.FC<TypedObjectIconProps> = ({
     case ProjectObjectType.multiModel:
       Icon = MultiModelIcon;
       break;
+    case ProjectObjectType.modelCatalog:
+      Icon = ModelCatalogIcon;
+      break;
     case ProjectObjectType.modelServer:
       Icon = ModelServerIcon;
       break;

diff --git a/frontend/src/concepts/design/utils.ts b/frontend/src/concepts/design/utils.ts
@@ -49,6 +49,7 @@ export enum ProjectObjectType {
   singleModel = 'single-model',
   multiModel = 'multi-model',
   modelServer = 'model-server',
+  modelCatalog = 'model-catalog',
   registeredModels = 'registered-models',
   deployedModels = 'deployed-models',
   deployingModels = 'deploying-models',
@@ -83,6 +84,7 @@ export const typedIconColor = (objectType: ProjectObjectType): string => {
     case ProjectObjectType.pipelineExperiment:
     case ProjectObjectType.pipelineExecution:
     case ProjectObjectType.pipelineArtifact:
+    case ProjectObjectType.modelCatalog:
       return 'var(--ai-pipeline--IconColor)';
     case ProjectObjectType.pipelineSetup:
       return 'var(--ai-set-up--IconColor)';
@@ -140,6 +142,7 @@ export const typedBackgroundColor = (objectType: ProjectObjectType): string => {
     case ProjectObjectType.pipelineExperiment:
     case ProjectObjectType.pipelineExecution:
     case ProjectObjectType.pipelineArtifact:
+    case ProjectObjectType.modelCatalog:
       return 'var(--ai-pipeline--BackgroundColor)';
     case ProjectObjectType.pipelineSetup:
       return 'var(--ai-set-up--BackgroundColor)';
@@ -197,6 +200,7 @@ export const typedColor = (objectType: ProjectObjectType): string => {
     case ProjectObjectType.pipelineRun:
     case ProjectObjectType.pipelineExecution:
     case ProjectObjectType.pipelineArtifact:
+    case ProjectObjectType.modelCatalog:
       return 'var(--ai-pipeline--Color)';
     case ProjectObjectType.pipelineSetup:
       return 'var(--ai-set-up--Color)';

diff --git a/frontend/src/images/icons/ModelCatalogIcon.ts b/frontend/src/images/icons/ModelCatalogIcon.ts
@@ -0,0 +1,13 @@
+import { createIcon } from '@patternfly/react-icons/dist/esm/createIcon';
+
+const ModelCatalogIcon = createIcon({
+  name: 'ModelCatalogIcon',
+  width: 36,
+  height: 36,
+  svgPath:
+    'M20,16.625h2c.8228,0,1.6152.2998,2.2319.8438c.1191.1045.2666.1562.4136.1562.1729,0,.3452-.0713.4688-.2119.2285-.2588.2036-.6533-.0552-.8818-.6765-.5964-1.5097-.9667-2.3925-1.0956.5895-.6449.9584-1.495.9584-2.4356,0-.3447-.2798-.625-.625-.625s-.625.2803-.625.625c0,1.3096-1.0654,2.375-2.375,2.375h-2.375V5.3434c.524-.4573,1.1764-.7184,1.875-.7184,1.071,0,2.0551.6156,2.5464,1.5724-.4208.7167-1.1953,1.1776-2.0464,1.1776-.3452,0-.625.2803-.625.625s.2798.625.625.625c1.3695,0,2.6091-.7805,3.2228-1.9775,1.7554.1171,3.1522,1.5674,3.1522,3.3525,0,.4141-.0815.8301-.2427,1.2363-.1235.3125.0215.667.3291.8027,1.77.7793,2.9136,2.5312,2.9136,4.4609,0,.7812-.1792,1.5264-.5332,2.2148-.1577.3066-.0366.6836.2705.8408.3066.1572.6841.0371.8418-.2705.439-.8545.6709-1.8174.6709-2.7852,0-2.2344-1.2192-4.2783-3.1499-5.3516.0996-.3789.1499-.7637.1499-1.1484,0-2.542-2.061-4.6113-4.5996-4.625-.7417-1.2275-2.0811-2-3.5254-2-.9155,0-1.7842.2969-2.5.8467-.7158-.5498-1.5845-.8467-2.5-.8467-1.4443,0-2.7837.7725-3.5254,2-2.5386.0137-4.5996,2.083-4.5996,4.625,0,.3848.0503.7695.1499,1.1484-1.7631.9801-2.9211,2.7722-3.1109,4.777-.0032.0256-.0151.0481-.0151.0745,0,.0131.0067.0241.0075.037-.0118.1541-.0314.3067-.0314.463,0,1.917.8857,3.6943,2.3936,4.8516-.2612.6904-.3936,1.4102-.3936,2.1484,0,2.7324,1.7812,5.0967,4.373,5.8643.7661,1.9639,2.6343,3.2607,4.752,3.2607.8804,0,1.7368-.2246,2.5-.6523.7632.4277,1.6196.6523,2.5.6523.3452,0,.625-.2803.625-.625s-.2798-.625-.625-.625c-.6616,0-1.3007-.1774-1.875-.4969v-14.2531h2.375ZM10.8525,28.7285v-2.7285c0-.7578.6167-1.375,1.375-1.375.3452,0,.625-.2803.625-.625s-.2798-.625-.625-.625c-1.4473,0-2.625,1.1777-2.625,2.625v1.985c-1.7863-.7483-2.9775-2.4927-2.9775-4.485,0-.7266.1616-1.4326.4805-2.0986.1367-.2842.0391-.626-.2266-.7959-1.3754-.8805-2.2047-2.3625-2.246-3.9805h2.3671c1.3096,0,2.375,1.0654,2.375,2.375,0,.3447.2798.625.625.625s.625-.2803.625-.625c0-.9425-.3702-1.7943-.9618-2.4396,1.694-.3038,2.9857-1.7803,2.9857-3.5604,0-.3447-.2798-.625-.625-.625s-.625.2803-.625.625c0,1.3096-1.0654,2.375-2.375,2.375h-4.2544c.3491-1.462,1.3525-2.7123,2.769-3.3359.3076-.1357.4526-.4902.3291-.8027-.1611-.4062-.2427-.8223-.2427-1.2363,0-1.8613,1.5142-3.375,3.375-3.375.0405,0,.0791.0068.1182.0127l.1641.0186c.2646.0156.5063-.123.6162-.3594.4717-1.0156,1.4927-1.6719,2.6016-1.6719.6986,0,1.351.2612,1.875.7184v4.9375c-1.0052-.2764-1.75-1.1891-1.75-2.2809,0-.3447-.2798-.625-.625-.625s-.625.2803-.625.625c0,1.785,1.2992,3.2637,3,3.5618v19.3163c-.5743.3195-1.2134.4969-1.875.4969-1.6603,0-3.1138-1.0615-3.6475-2.6465Z M32,25.375h-9c-.3452,0-.625.2803-.625.625v5c0,.3447.2798.625.625.625h9c.3452,0,.625-.2803.625-.625v-5c0-.3447-.2798-.625-.625-.625ZM31.375,30.375h-7.75v-3.75h7.75v3.75Z M23.375,24c0,.3447.2798.625.625.625h7c.3452,0,.625-.2803.625-.625s-.2798-.625-.625-.625h-7c-.3452,0-.625.2803-.625.625Z M30,22.625c.3452,0,.625-.2803.625-.625s-.2798-.625-.625-.625h-5c-.3452,0-.625.2803-.625.625s.2798.625.625.625h5Z',
+  xOffset: 0,
+  yOffset: 0,
+});
+
+export default ModelCatalogIcon;
diff --git a/frontend/src/images/icons/index.ts b/frontend/src/images/icons/index.ts
@@ -12,6 +12,7 @@ export { default as ExperimentIcon } from './ExperimentIcon';
 export { default as ExploreApplicationsIcon } from './ExploreApplicationsIcon';
 export { default as GroupIcon } from './GroupIcon';
 export { default as ModelIcon } from './ModelIcon';
+export { default as ModelCatalogIcon } from './ModelCatalogIcon';
 export { default as ModelRegistryIcon } from './ModelRegistryIcon';
 export { default as ModelServerIcon } from './ModelServerIcon';
 export { default as MultiModelIcon } from './MultiModelIcon';

diff --git a/frontend/src/pages/modelCatalog/screens/ModelCatalog.tsx b/frontend/src/pages/modelCatalog/screens/ModelCatalog.tsx
@@ -17,9 +17,8 @@ const ModelCatalog: React.FC = conditionalArea(
 
   return (
     <ApplicationsPage
-      title={
-        <TitleWithIcon title="Model Catalog" objectType={ProjectObjectType.registeredModels} />
-      }
+      title={<TitleWithIcon title="Model Catalog" objectType={ProjectObjectType.modelCatalog} />}
+      description="Discover models provided by Red Hat and our partners that are available for your organization to register, deploy, and customize."
       empty={modelCatalogSources.data.length === 0}
       emptyStatePage={
         <EmptyModelCatalogState

diff --git a/frontend/src/pages/modelCatalog/screens/ModelDetailsPage.tsx b/frontend/src/pages/modelCatalog/screens/ModelDetailsPage.tsx
@@ -12,7 +12,6 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
-import { TagIcon } from '@patternfly/react-icons';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import { ProjectObjectType, typedEmptyImage } from '~/concepts/design/utils';
 import { conditionalArea, SupportedArea } from '~/concepts/areas';
@@ -26,6 +25,7 @@ import {
 } from '~/pages/modelCatalog/utils';
 import { ModelDetailsRouteParams } from '~/pages/modelCatalog/const';
 import BrandImage from '~/components/BrandImage';
+import { RhUiTagIcon } from '~/images/icons';
 import ModelDetailsView from './ModelDetailsView';
 
 const ModelDetailsPage: React.FC = conditionalArea(
@@ -74,7 +74,7 @@ const ModelDetailsPage: React.FC = conditionalArea(
                 >
                   <FlexItem>{decodedParams.modelName}</FlexItem>
                   {model && (
-                    <Label variant="outline" icon={<TagIcon />}>
+                    <Label variant="outline" icon={<RhUiTagIcon />}>
                       {getTagFromModel(model)}
                     </Label>
                   )}

diff --git a/frontend/src/pages/modelCatalog/screens/ModelDetailsView.tsx b/frontend/src/pages/modelCatalog/screens/ModelDetailsView.tsx
@@ -9,14 +9,14 @@ import {
   SidebarContent,
   SidebarPanel,
 } from '@patternfly/react-core';
-import { TagIcon } from '@patternfly/react-icons';
 import InlineTruncatedClipboardCopy from '~/components/InlineTruncatedClipboardCopy';
 import DashboardDescriptionListGroup from '~/components/DashboardDescriptionListGroup';
 import { CatalogModel } from '~/concepts/modelCatalog/types';
 import ModelTimestamp from '~/pages/modelRegistry/screens/components/ModelTimestamp';
 import { getTagFromModel } from '~/pages/modelCatalog/utils';
 import ExternalLink from '~/components/ExternalLink';
 import MarkdownView from '~/components/MarkdownView';
+import { RhUiTagIcon } from '~/images/icons';
 
 type ModelDetailsViewProps = {
   model: CatalogModel;
@@ -40,7 +40,7 @@ const ModelDetailsView: React.FC<ModelDetailsViewProps> = ({ model }) => (
         <DescriptionList isFillColumns>
           <DashboardDescriptionListGroup title="Version" groupTestId="model-version">
             <Icon isInline>
-              <TagIcon />
+              <RhUiTagIcon />
             </Icon>{' '}
             {getTagFromModel(model)}
           </DashboardDescriptionListGroup>