From 631235369ba3a845eb7b60299cba0909ed911518 Mon Sep 17 00:00:00 2001
From: Aviv Turgeman <aturgema@redhat.com>
Date: Sun, 28 Jul 2024 12:16:27 +0300
Subject: [PATCH] CNV-44514: Missing descriptive names inside the InstanceTypes
 tiles

Signed-off-by: Aviv Turgeman <aturgema@redhat.com>
---
 .../InstanceTypeDrilldownSelect/utils/constants.ts |  1 +
 .../InstanceTypeDrilldownSelect/utils/types.ts     |  1 +
 .../InstanceTypeDrilldownSelect/utils/utils.ts     |  9 ++++++++-
 .../RedHatSeriesMenuCard/RedHatSeriesMenuCard.scss | 11 +++++++----
 .../RedHatSeriesMenuCard/RedHatSeriesMenuCard.tsx  | 14 ++++++++------
 5 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/utils/components/AddBootableVolumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/constants.ts b/src/utils/components/AddBootableVolumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/constants.ts
index 7f12e57f0..0305e87fd 100644
--- a/src/utils/components/AddBootableVolumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/constants.ts
+++ b/src/utils/components/AddBootableVolumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/constants.ts
@@ -113,3 +113,4 @@ export const instanceTypeSeriesNameMapper: {
 export const REDHAT_COM = 'redhat.com';
 export const INSTANCETYPE_CLASS_ANNOTATION = 'instancetype.kubevirt.io/class';
 export const INSTANCETYPE_DESCRIPTION_ANNOTATION = 'instancetype.kubevirt.io/description';
+export const INSTANCETYPE_CLASS_DISPLAY_NAME = 'instancetype.kubevirt.io/displayName';
diff --git a/src/utils/components/AddBootableVolumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/types.ts b/src/utils/components/AddBootableVolumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/types.ts
index 6795add0b..70ee42bc1 100644
--- a/src/utils/components/AddBootableVolumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/types.ts
+++ b/src/utils/components/AddBootableVolumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/types.ts
@@ -8,6 +8,7 @@ export type InstanceTypeSize = {
 
 export type RedHatInstanceTypeSeries = {
   classAnnotation: string;
+  classDisplayNameAnnotation: string;
   descriptionAnnotation: string;
   seriesName: string;
   sizes: InstanceTypeSize[];
diff --git a/src/utils/components/AddBootableVolumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/utils.ts b/src/utils/components/AddBootableVolumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/utils.ts
index 014b939b4..6f233a758 100644
--- a/src/utils/components/AddBootableVolumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/utils.ts
+++ b/src/utils/components/AddBootableVolumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/utils.ts
@@ -13,6 +13,7 @@ import { isEmpty } from '@kubevirt-utils/utils/utils';
 import {
   initialMenuItems,
   INSTANCETYPE_CLASS_ANNOTATION,
+  INSTANCETYPE_CLASS_DISPLAY_NAME,
   INSTANCETYPE_DESCRIPTION_ANNOTATION,
   instanceTypeSeriesNameMapper,
   REDHAT_COM,
@@ -25,6 +26,7 @@ const getRedHatInstanceTypeSeriesAndSize = (
   const [seriesName, sizeLabel] = getName(instanceType).split('.');
   const cpus = instanceType?.spec?.cpu?.guest;
   const memory = readableSizeUnit(instanceType?.spec?.memory?.guest);
+  const classAnnotation = getAnnotation(instanceType, INSTANCETYPE_CLASS_ANNOTATION, seriesName);
 
   const size: InstanceTypeSize = {
     cpus,
@@ -34,7 +36,12 @@ const getRedHatInstanceTypeSeriesAndSize = (
 
   return {
     redHatITSeries: {
-      classAnnotation: getAnnotation(instanceType, INSTANCETYPE_CLASS_ANNOTATION, seriesName),
+      classAnnotation,
+      classDisplayNameAnnotation: getAnnotation(
+        instanceType,
+        INSTANCETYPE_CLASS_DISPLAY_NAME,
+        classAnnotation,
+      ),
       descriptionAnnotation: getAnnotation(instanceType, INSTANCETYPE_DESCRIPTION_ANNOTATION),
       seriesName,
       sizes: [size],
diff --git a/src/views/catalog/CreateFromInstanceTypes/components/SelectInstanceTypeSection/components/RedHatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.scss b/src/views/catalog/CreateFromInstanceTypes/components/SelectInstanceTypeSection/components/RedHatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.scss
index 5c28442d6..6bd8cbe91 100644
--- a/src/views/catalog/CreateFromInstanceTypes/components/SelectInstanceTypeSection/components/RedHatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.scss
+++ b/src/views/catalog/CreateFromInstanceTypes/components/SelectInstanceTypeSection/components/RedHatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.scss
@@ -10,14 +10,14 @@
   }
 
   &__toggle-card {
-    min-height: 305px;
+    min-height: 200px;
     box-shadow: none;
     color: var(--pf-global--Color--100);
   }
 
   &__card-icon {
     font-size: var(--pf-global--FontSize--3xl);
-    margin-top: var(--pf-global--spacer--md);
+    margin-top: var(--pf-global--spacer--sm);
   }
 
   &__card-title,
@@ -26,9 +26,12 @@
     font-size: var(--pf-global--FontSize--lg);
   }
 
+  &__card-footer {
+    margin-top: var(--pf-global--spacer--sm);
+  }
+
   &__card-title {
-    margin: var(--pf-global--spacer--sm) 0 var(--pf-global--spacer--md);
-    min-height: 65px;
+    margin: var(--pf-global--spacer--sm) 0;
   }
 
   &__card-toggle-text {
diff --git a/src/views/catalog/CreateFromInstanceTypes/components/SelectInstanceTypeSection/components/RedHatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.tsx b/src/views/catalog/CreateFromInstanceTypes/components/SelectInstanceTypeSection/components/RedHatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.tsx
index fca90909a..d9b1af306 100644
--- a/src/views/catalog/CreateFromInstanceTypes/components/SelectInstanceTypeSection/components/RedHatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.tsx
+++ b/src/views/catalog/CreateFromInstanceTypes/components/SelectInstanceTypeSection/components/RedHatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.tsx
@@ -10,7 +10,6 @@ import { readableSizeUnit } from '@kubevirt-utils/utils/units';
 import {
   Card,
   CardBody,
-  CardFooter,
   Menu,
   MenuContent,
   MenuList,
@@ -41,7 +40,8 @@ const RedHatSeriesMenuCard: FC<RedHatSeriesMenuCardProps> = ({
     instanceTypeVMState: { selectedInstanceType },
   } = useInstanceTypeVMStore();
 
-  const { classAnnotation, descriptionAnnotation, seriesName, sizes } = rhSeriesItem;
+  const { classAnnotation, classDisplayNameAnnotation, descriptionAnnotation, seriesName, sizes } =
+    rhSeriesItem;
 
   const { Icon, seriesLabel } = instanceTypeSeriesNameMapper[seriesName] || {};
 
@@ -68,14 +68,16 @@ const RedHatSeriesMenuCard: FC<RedHatSeriesMenuCardProps> = ({
     <Card className="instance-type-series-menu-card__toggle-card">
       <div className="instance-type-series-menu-card__card-icon">{Icon && <Icon />}</div>
       <CardBody>
-        <div className="instance-type-series-menu-card__card-title">{classAnnotation}</div>
+        <div className="instance-type-series-menu-card__card-title">
+          {classDisplayNameAnnotation}
+        </div>
         <div className="instance-type-series-menu-card__card-toggle-text">
           {seriesLabel || classAnnotation} <AngleDownIcon />
         </div>
+        <div className="instance-type-series-menu-card__card-footer">
+          {isSelectedMenu && selectedITLabel}
+        </div>
       </CardBody>
-      <CardFooter className="instance-type-series-menu-card__card-footer">
-        {isSelectedMenu && selectedITLabel}
-      </CardFooter>
     </Card>
   );
   return (