CNV-40580: InstanceType form UI updates

Signed-off-by: Aviv Turgeman <aturgema@redhat.com>
kubevirt-ui · Aug 27, 2024 · f282773 · f282773
1 parent dc7d852
commit f282773
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/src/views/catalog/CreateFromInstanceTypes/CreateFromInstanceType.scss b/src/views/catalog/CreateFromInstanceTypes/CreateFromInstanceType.scss
@@ -47,4 +47,14 @@
   &__page-loader {
     height: 50vh;
   }
+
+  .pf-v5-c-table__tr.pf-m-clickable.pf-m-selected > td {
+    font-weight: var(--pf-v5-global--FontWeight--bold);
+  }
+
+  .pf-v5-c-table__tr.pf-m-clickable.pf-m-selected
+    .pf-v5-c-table__td.pf-v5-c-table__favorite::after {
+    border-inline-start: calc(var(--pf-global--BorderWidth--xl) * 2) solid
+      var(--pf-v5-c-table__expandable-row--after--BorderColor);
+  }
 }
diff --git a/...HatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.scss b/...HatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.scss
@@ -40,8 +40,9 @@
 }
 
 .selected {
-  border-bottom-color: var(--pf-global--link--Color);
-  border-bottom-width: var(--pf-global--BorderWidth--lg);
+  font-weight: var(--pf-v5-global--FontWeight--bold);
+  box-shadow: var(--pf-global--BoxShadow--md);
+  border-bottom: calc(var(--pf-global--BorderWidth--xl) * 2) solid var(--pf-global--link--Color);
 }
 
 @media screen and (min-width: 1200px) and (max-width: 1440px) {

diff --git a/...dHatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.tsx b/...dHatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 
 import { useInstanceTypeVMStore } from '@catalog/CreateFromInstanceTypes/state/useInstanceTypeVMStore';
@@ -36,6 +36,9 @@ const RedHatSeriesMenuCard: FC<RedHatSeriesMenuCardProps> = ({
 }) => {
   const { t } = useKubevirtTranslation();
 
+  const [distance, setDistance] = useState(0);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLDivElement>(null);
   const {
     instanceTypeVMState: { selectedInstanceType },
   } = useInstanceTypeVMStore();
@@ -64,14 +67,31 @@ const RedHatSeriesMenuCard: FC<RedHatSeriesMenuCardProps> = ({
     });
   }, [selectedInstanceType, seriesName, sizes, t]);
 
+  useEffect(() => {
+    const calculateDistance = () => {
+      if (cardRef.current && toggleRef.current) {
+        const cardRect = cardRef.current.getBoundingClientRect();
+        const toggleRect = toggleRef.current.getBoundingClientRect();
+        setDistance(toggleRect.bottom - cardRect.bottom + 4);
+      }
+    };
+
+    calculateDistance();
+    window.addEventListener('resize', calculateDistance);
+
+    return () => {
+      window.removeEventListener('resize', calculateDistance);
+    };
+  }, [cardRef.current, toggleRef.current]);
+
   const card = (
     <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">
           {classDisplayNameAnnotation}
         </div>
-        <div className="instance-type-series-menu-card__card-toggle-text">
+        <div className="instance-type-series-menu-card__card-toggle-text" ref={toggleRef}>
           {seriesLabel || classAnnotation} <AngleDownIcon />
         </div>
         <div className="instance-type-series-menu-card__card-footer">
@@ -104,12 +124,14 @@ const RedHatSeriesMenuCard: FC<RedHatSeriesMenuCardProps> = ({
           )}
           isExpanded={isMenuExpanded}
           onClick={(event) => onMenuToggle(event, seriesName)}
+          ref={cardRef}
           variant="plain"
         >
           {!isMenuExpanded ? <Tooltip content={descriptionAnnotation}>{card}</Tooltip> : card}
         </MenuToggle>
       }
       direction="down"
+      distance={distance}
       isVisible={isMenuExpanded}
     />
   );