From 50ff78b4e37d7600a254e3ee19274d9e8a71a726 Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Tue, 30 Apr 2024 10:42:56 -0400 Subject: [PATCH] [RHOAIENG-6322] Use constants for colors on images in AI Flows --- .../images/UI_icon-Red_Hat-Branch-Color.svg | 4 --- .../images/UI_icon-Red_Hat-Chart-Color.svg | 6 ---- .../images/UI_icon-Red_Hat-Folder-Color.svg | 4 --- .../src/pages/home/aiFlows/AIFlowCard.tsx | 10 ++----- .../home/aiFlows/flowImages/BranchImage.tsx | 12 ++++++++ .../home/aiFlows/flowImages/ChartImage.tsx | 20 +++++++++++++ .../home/aiFlows/flowImages/ProjectImage.tsx | 12 ++++++++ .../src/pages/home/aiFlows/useAIFlows.tsx | 29 ++++++++++++------- 8 files changed, 66 insertions(+), 31 deletions(-) delete mode 100644 frontend/src/images/UI_icon-Red_Hat-Branch-Color.svg delete mode 100644 frontend/src/images/UI_icon-Red_Hat-Chart-Color.svg delete mode 100644 frontend/src/images/UI_icon-Red_Hat-Folder-Color.svg create mode 100644 frontend/src/pages/home/aiFlows/flowImages/BranchImage.tsx create mode 100644 frontend/src/pages/home/aiFlows/flowImages/ChartImage.tsx create mode 100644 frontend/src/pages/home/aiFlows/flowImages/ProjectImage.tsx diff --git a/frontend/src/images/UI_icon-Red_Hat-Branch-Color.svg b/frontend/src/images/UI_icon-Red_Hat-Branch-Color.svg deleted file mode 100644 index b5c4c99de5..0000000000 --- a/frontend/src/images/UI_icon-Red_Hat-Branch-Color.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/src/images/UI_icon-Red_Hat-Chart-Color.svg b/frontend/src/images/UI_icon-Red_Hat-Chart-Color.svg deleted file mode 100644 index 0ea53d0830..0000000000 --- a/frontend/src/images/UI_icon-Red_Hat-Chart-Color.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/frontend/src/images/UI_icon-Red_Hat-Folder-Color.svg b/frontend/src/images/UI_icon-Red_Hat-Folder-Color.svg deleted file mode 100644 index 01e3e0f95b..0000000000 --- a/frontend/src/images/UI_icon-Red_Hat-Folder-Color.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/src/pages/home/aiFlows/AIFlowCard.tsx b/frontend/src/pages/home/aiFlows/AIFlowCard.tsx index 7940efe564..3933955961 100644 --- a/frontend/src/pages/home/aiFlows/AIFlowCard.tsx +++ b/frontend/src/pages/home/aiFlows/AIFlowCard.tsx @@ -5,8 +5,7 @@ import { SectionType } from '~/concepts/design/utils'; type AIFlowCardProps = { title: string; - imgSrc: string; - imgAlt: string; + image: React.ReactNode; sectionType: SectionType; selected: boolean; onSelect: () => void; @@ -14,8 +13,7 @@ type AIFlowCardProps = { const AIFlowCard: React.FC = ({ title, - imgSrc, - imgAlt, + image, sectionType, selected, onSelect, @@ -38,9 +36,7 @@ const AIFlowCard: React.FC = ({ > - - {imgAlt} - + {image} diff --git a/frontend/src/pages/home/aiFlows/flowImages/BranchImage.tsx b/frontend/src/pages/home/aiFlows/flowImages/BranchImage.tsx new file mode 100644 index 0000000000..e0862c6e03 --- /dev/null +++ b/frontend/src/pages/home/aiFlows/flowImages/BranchImage.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +const BranchImage: React.FC> = ({ ...props }) => ( + + + +); + +export default BranchImage; diff --git a/frontend/src/pages/home/aiFlows/flowImages/ChartImage.tsx b/frontend/src/pages/home/aiFlows/flowImages/ChartImage.tsx new file mode 100644 index 0000000000..85ac061c31 --- /dev/null +++ b/frontend/src/pages/home/aiFlows/flowImages/ChartImage.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; + +const ChartImage: React.FC> = ({ ...props }) => ( + + + + + +); + +export default ChartImage; diff --git a/frontend/src/pages/home/aiFlows/flowImages/ProjectImage.tsx b/frontend/src/pages/home/aiFlows/flowImages/ProjectImage.tsx new file mode 100644 index 0000000000..ec3b33122f --- /dev/null +++ b/frontend/src/pages/home/aiFlows/flowImages/ProjectImage.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +const ProjectImage: React.FC> = ({ ...props }) => ( + + + +); + +export default ProjectImage; diff --git a/frontend/src/pages/home/aiFlows/useAIFlows.tsx b/frontend/src/pages/home/aiFlows/useAIFlows.tsx index 495f27bcc4..71693e8366 100644 --- a/frontend/src/pages/home/aiFlows/useAIFlows.tsx +++ b/frontend/src/pages/home/aiFlows/useAIFlows.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { PageSection, Stack, Text, TextContent } from '@patternfly/react-core'; -import projectIcon from '~/images/UI_icon-Red_Hat-Folder-Color.svg'; -import pipelineIcon from '~/images/UI_icon-Red_Hat-Branch-Color.svg'; -import chartIcon from '~/images/UI_icon-Red_Hat-Chart-Color.svg'; -import { SectionType } from '~/concepts/design/utils'; +import { SectionType, sectionTypeBorderColor } from '~/concepts/design/utils'; import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable'; import { SupportedArea } from '~/concepts/areas'; import EvenlySpacedGallery from '~/components/EvenlySpacedGallery'; +import ProjectImage from './flowImages/ProjectImage'; +import BranchImage from './flowImages/BranchImage'; +import ChartImage from './flowImages/ChartImage'; import ProjectsGallery from './ProjectsGallery'; import CreateAndTrainGallery from './CreateAndTrainGallery'; import DeployAndMonitorGallery from './DeployAndMonitorGallery'; @@ -27,8 +27,11 @@ export const useAIFlows = (): React.ReactNode => { key="projects" data-testid="ai-flow-projects-card" title="Organize your work with projects" - imgSrc={projectIcon} - imgAlt="organizing your work" + image={ + + } sectionType={SectionType.organize} selected={selected === 'organize'} onSelect={() => setSelected((prev) => (prev === 'organize' ? undefined : 'organize'))} @@ -41,8 +44,11 @@ export const useAIFlows = (): React.ReactNode => { key="train" data-testid="ai-flow-train-card" title="Create and train models" - imgSrc={pipelineIcon} - imgAlt="train your models" + image={ + + } sectionType={SectionType.training} selected={selected === 'train'} onSelect={() => setSelected((prev) => (prev === 'train' ? undefined : 'train'))} @@ -55,8 +61,11 @@ export const useAIFlows = (): React.ReactNode => { key="models" data-testid="ai-flow-models-card" title="Deploy and monitor models" - imgSrc={chartIcon} - imgAlt="deploy models" + image={ + + } sectionType={SectionType.serving} selected={selected === 'serving'} onSelect={() => setSelected((prev) => (prev === 'serving' ? undefined : 'serving'))}