From fca5cf859182cb83739b0161d84e0ac0ff17ce54 Mon Sep 17 00:00:00 2001
From: Montse Ortega <mortegag@redhat.com>
Date: Wed, 26 Feb 2025 12:06:37 +0100
Subject: [PATCH] Adding requirements and operators in bundle popover content

---
 .../operators/OpenShiftAIRequirements.tsx     | 14 --------
 .../OpenshiftAINvidiaRequirements.tsx         | 36 +++++++++++++++++++
 .../operators/VirtualizationRequirements.tsx  | 26 ++++++++++++++
 .../clusterWizard/OperatorsStep.tsx           | 18 +++++-----
 4 files changed, 70 insertions(+), 24 deletions(-)
 create mode 100644 libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OpenshiftAINvidiaRequirements.tsx
 create mode 100644 libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/VirtualizationRequirements.tsx

diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OpenShiftAIRequirements.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OpenShiftAIRequirements.tsx
index 3fe69d0627..9aaba33ead 100644
--- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OpenShiftAIRequirements.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OpenShiftAIRequirements.tsx
@@ -11,20 +11,6 @@ const OpenShiftAIRequirements = () => {
         <ListItem>
           Each worker node requires 32 additional GiB of memory and 8 additional CPUs.
         </ListItem>
-        <ListItem>At least one supported GPU. Currently only NVIDIA GPUs are supported.</ListItem>
-        <ListItem>
-          Nodes that have NVIDIA GPUs installed need to have secure boot disabled.
-        </ListItem>
-      </List>
-      Bundle operators:
-      <List>
-        <ListItem>OpenShift Data Foundation</ListItem>
-        <ListItem>Node Feature Discovery</ListItem>
-        <ListItem>NVIDIA GPU</ListItem>
-        <ListItem>Pipelines</ListItem>
-        <ListItem>Service Mesh</ListItem>
-        <ListItem>Serverless</ListItem>
-        <ListItem>Authorino</ListItem>
       </List>
       <a href={OPENSHIFT_AI_REQUIREMENTS_LINK} target="_blank" rel="noopener noreferrer">
         Learn more <ExternalLinkAltIcon />.
diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OpenshiftAINvidiaRequirements.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OpenshiftAINvidiaRequirements.tsx
new file mode 100644
index 0000000000..833e94a573
--- /dev/null
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OpenshiftAINvidiaRequirements.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { OPENSHIFT_AI_REQUIREMENTS_LINK } from '../../../../common';
+
+const OpenshiftAINvidiaRequirements = () => {
+  return (
+    <>
+      <List>
+        <ListItem>At least two worker nodes.</ListItem>
+        <ListItem>
+          Each worker node requires 32 additional GiB of memory and 8 additional CPUs.
+        </ListItem>
+        <ListItem>At least one supported GPU. Currently only NVIDIA GPUs are supported.</ListItem>
+        <ListItem>
+          Nodes that have NVIDIA GPUs installed need to have secure boot disabled.
+        </ListItem>
+      </List>
+      Bundle operators:
+      <List>
+        <ListItem>Openshift AI</ListItem>
+        <ListItem>OpenShift Data Foundation</ListItem>
+        <ListItem>NVIDIA GPU</ListItem>
+        <ListItem>Pipelines</ListItem>
+        <ListItem>Service Mesh</ListItem>
+        <ListItem>Serverless</ListItem>
+        <ListItem>Authorino</ListItem>
+      </List>
+      <a href={OPENSHIFT_AI_REQUIREMENTS_LINK} target="_blank" rel="noopener noreferrer">
+        Learn more <ExternalLinkAltIcon />.
+      </a>
+    </>
+  );
+};
+
+export default OpenshiftAINvidiaRequirements;
diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/VirtualizationRequirements.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/VirtualizationRequirements.tsx
new file mode 100644
index 0000000000..2936a20a98
--- /dev/null
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/VirtualizationRequirements.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+const VirtualizationRequirements = () => {
+  return (
+    <>
+      <List>
+        <ListItem>
+          Enabled CPU virtualization support in BIOS (Intel-VT / AMD-V) on all nodes.
+        </ListItem>
+        <ListItem>
+          Each control plane node requires an additional 1024 MiB of memory and 3 CPUs.
+        </ListItem>
+        <ListItem>Each worker node requires an additional 1024 MiB of memory and 5 CPUs.</ListItem>
+      </List>
+      Bundle operators:
+      <List>
+        <ListItem>OpenShift Virtualization</ListItem>
+        <ListItem>Migration Toolkit for Virtualization</ListItem>
+        <ListItem>Nmstate</ListItem>
+      </List>
+    </>
+  );
+};
+
+export default VirtualizationRequirements;
diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsStep.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsStep.tsx
index 1c8d563fa5..b8cb7ebedb 100644
--- a/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsStep.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsStep.tsx
@@ -48,6 +48,8 @@ import {
   getOdfIncompatibleWithLvmsReason,
   getOpenShiftAIIncompatibleWithLvmsReason,
 } from '../featureSupportLevels/featureStateUtils';
+import OpenshiftAINvidiaRequirements from '../clusterConfiguration/operators/OpenshiftAINvidiaRequirements';
+import VirtualizationRequirements from '../clusterConfiguration/operators/VirtualizationRequirements';
 
 const operatorsThatCanNotBeInstalledAlone = [
   'nvdia-gpu',
@@ -189,7 +191,7 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
     setBundleOperators(newBundleOperators);
   };
 
-  const getBundleLabel = (title: string | undefined, operators: string[] | undefined) => {
+  const getBundleLabel = (title: string | undefined) => {
     return (
       <>
         <span>{title} </span>
@@ -197,15 +199,11 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
           component={'a'}
           bodyContent={
             <>
-              <h3>{'Bundle operators'}</h3>
-              {operators && operators.length > 0 ? (
-                <ul>
-                  {operators.map((operator, index) => (
-                    <li key={index}>{operator}</li>
-                  ))}
-                </ul>
+              <span style={{ fontSize: '1.1em' }}>{'Requirements and dependencies'}</span>
+              {title === 'Virtualization' ? (
+                <VirtualizationRequirements />
               ) : (
-                <p>No operators available</p>
+                <OpenshiftAINvidiaRequirements />
               )}
             </>
           }
@@ -352,7 +350,7 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
                     }}
                   >
                     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      {getBundleLabel(bundle.title, bundle.operators)}
+                      {getBundleLabel(bundle.title)}
                     </div>
                     <Checkbox
                       id={`bundle-${bundle.id || ''}`}