Add images to the select provider in create provider form

packages/forklift-console-plugin/src/modules/Providers/utils/components/Galerry/SelectableCard.tsx

@@ -1,16 +1,22 @@
 import React, { ReactNode } from 'react';
 
-import { Card, CardBody, CardTitle } from '@patternfly/react-core';
+import { Card, CardBody, CardTitle, Level, LevelItem } from '@patternfly/react-core';
 
 interface SelectableCardProps {
-  /** The title of the card */
+  /** The title of the card. It can be any element - a string, a React component, etc. */
   title: ReactNode;
-  /** The content of the card */
-  content: ReactNode;
-  /** Handler function to be called when the card is clicked */
+  /** Optional: A logo or symbol to be displayed along with the title. It can be any element - a string, a React component, etc. */
+  titleLogo?: ReactNode;
+  /** Optional: The content of the card. It can be any element - a string, a React component, etc. */
+  content?: ReactNode;
+  /** A function that will be called when the card is clicked. It receives a single argument, `isSelected`, which is a boolean indicating the selected state of the card. */
   onChange: (isSelected: boolean) => void;
-  /** The selected state of the card */
+  /** A boolean indicating whether the card is currently selected. */
   isSelected: boolean;
+  /** Optional: A boolean indicating whether the card should be displayed in a compact form. This may affect things like the card's padding and margin. */
+  isCompact?: boolean;
+  /** Optional: A string representing a CSS class name. This class will be applied to the card's top-level DOM element, allowing you to style the card with custom CSS. */
+  className?: string;
 }
 
 /**
@@ -19,9 +25,12 @@ interface SelectableCardProps {
  */
 export const SelectableCard: React.FC<SelectableCardProps> = ({
   title,
+  titleLogo,
   content,
   onChange,
   isSelected,
+  isCompact,
+  className,
 }) => {
   // Handler function to toggle selection and call onChange
   const handleClick = () => {
@@ -31,16 +40,27 @@ export const SelectableCard: React.FC<SelectableCardProps> = ({
 
   return (
     <Card
-      className="forklift-selectable-gallery-card"
+      className={`forklift-selectable-gallery-card ${className}`}
       id="selectable-card"
       onKeyDown={handleClick}
       onClick={handleClick}
       onSelectableInputChange={handleClick}
       isSelectable
+      isCompact={isCompact}
       isSelected={isSelected}
     >
-      <CardTitle>{title}</CardTitle>
-      <CardBody>{content}</CardBody>
+      {titleLogo ? (
+        <CardTitle>
+          <Level className="forklift--create-provider-edit-card-title">
+            <LevelItem>{titleLogo}</LevelItem>
+            <LevelItem>{title}</LevelItem>
+          </Level>
+        </CardTitle>
+      ) : (
+        <CardTitle>{title}</CardTitle>
+      )}
+
+      {content && <CardBody>{content}</CardBody>}
     </Card>
   );
 };

packages/forklift-console-plugin/src/modules/Providers/utils/components/Galerry/SelectableGallery.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 
 import { Gallery, GalleryItem } from '@patternfly/react-core';
 
@@ -9,6 +9,8 @@ import './SelectableGallery.style.css';
 export interface SelectableGalleryItem {
   /** The title of the item */
   title: string;
+  /** The logo of the item */
+  logo?: ReactNode;
   /** The content of the item */
   content: string;
 }
@@ -58,6 +60,7 @@ export const SelectableGallery: FC<SelectableGalleryProps> = ({
         <GalleryItem key={id}>
           <SelectableCard
             title={item.title}
+            titleLogo={item.logo}
             content={item.content}
             isSelected={id === selectedCardId}
             onChange={(isSelected) => handleCardChange(isSelected, id)}

packages/forklift-console-plugin/src/modules/Providers/views/create/ProvidersCreatePage.style.css

@@ -1,3 +1,15 @@
 .forklift-create-provider-edit-section {
   padding-top: var(--pf-global--spacer--md);
-}
+}
+
+.forklift--create-provider-edit-card-selected {
+  min-width: 25%;
+}
+
+.forklift--create-provider-edit-card-title {
+  justify-content: normal;
+}
+
+.forklift--create-provider-edit-card-title-logo {
+  margin-right: var(--pf-global--spacer--sm);
+}

packages/forklift-console-plugin/src/modules/Providers/views/create/components/ProviderCreateForm.tsx

@@ -10,7 +10,6 @@ import { Flex, FlexItem, Form, FormGroup, TextInput } from '@patternfly/react-co
 
 import { EditProvider } from './EditProvider';
 import { providerCardItems } from './providerCardItems';
-
 export interface ProvidersCreateFormProps {
   newProvider: V1beta1Provider;
   newSecret: V1Secret;
@@ -101,12 +100,13 @@ export const ProvidersCreateForm: React.FC<ProvidersCreateFormProps> = ({
           <FormGroup label={t('Select provider type')} isRequired fieldId="type">
             {newProvider?.spec?.type ? (
               <Flex>
-                <FlexItem>
+                <FlexItem className="forklift--create-provider-edit-card-selected">
                   <SelectableCard
                     title={providerCardItems[newProvider?.spec?.type]?.title}
-                    content={providerCardItems[newProvider?.spec?.type]?.content}
+                    titleLogo={providerCardItems[newProvider?.spec?.type]?.logo}
                     onChange={() => handleTypeChange(null)}
-                    isSelected={true}
+                    isSelected
+                    isCompact
                   />
                 </FlexItem>
               </Flex>

packages/forklift-console-plugin/src/modules/Providers/views/create/components/providerCardItems.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { SelectableGalleryItem } from 'src/modules/Providers/utils/components/Galerry/SelectableGallery';
+
+import openshiftImg from '../images/openshift.svg';
+import openstackImg from '../images/openstack.svg';
+import redhatImg from '../images/redhat.svg';
+import vmImg from '../images/vm.svg';
+
+const openshiftLogo = (
+  <img
+    className="forklift--create-provider-edit-card-title-logo"
+    src={openshiftImg}
+    alt="PatternFly logo"
+    width="27px"
+  />
+);
+
+const openstackLogo = (
+  <img
+    className="forklift--create-provider-edit-card-title-logo"
+    src={openstackImg}
+    alt="PatternFly logo"
+    width="27px"
+  />
+);
+
+const vmLogo = (
+  <img
+    className="forklift--create-provider-edit-card-title-logo"
+    src={vmImg}
+    alt="PatternFly logo"
+    width="27px"
+  />
+);
+
+const redhatLogo = (
+  <img
+    className="forklift--create-provider-edit-card-title-logo"
+    src={redhatImg}
+    alt="PatternFly logo"
+    width="27px"
+  />
+);
+
+export const providerCardItems: Record<string, SelectableGalleryItem> = {
+  openshift: {
+    title: 'OpenShift Virtualization',
+    logo: openshiftLogo,
+    content: 'OpenShift Virtualization run and manage virtual machine in Openshift.',
+  },
+  openstack: {
+    title: 'OpenStack',
+    logo: openstackLogo,
+    content: 'OpenStack is a cloud computing platform that controls large pools of resources.',
+  },
+  ovirt: {
+    title: 'Red Hat Virtualization',
+    logo: redhatLogo,
+    content: 'Red Hat Virtualization (RHV) is a virtualization platform from Red Hat.',
+  },
+  vsphere: {
+    title: 'vSphere',
+    logo: vmLogo,
+    content: "vSphere is VMware's cloud computing virtualization platform.",
+  },
+};