@openshift-assisted/ui-lib 2.46.1 → 2.46.3

package/lib/ocm/components/clusterDetail/CancelInstallationModal.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Button, ButtonVariant, Content } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Content,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { getApiErrorMessage, handleApiError } from '../../../common/api';
 import { updateCluster } from '../../store/slices/current-cluster/slice';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
@@ -43,20 +51,17 @@ const CancelInstallationModal: React.FC = () => {
       return <ErrorState title={error.title} content={error.message} />;
     }
     return (
-      <Content>
-        <Content component="p">
-          This will abort cluster installation. Are you sure you want to proceed?
-        </Content>
+      <Content component="p">
+        This will abort cluster installation. Are you sure you want to proceed?
       </Content>
     );
   };
 
   return (
-    <Modal
-      title="Abort Cluster Installation"
-      isOpen={isOpen}
-      variant={ModalVariant.small}
-      actions={[
+    <Modal isOpen={isOpen} variant={ModalVariant.small} onClose={onClose}>
+      <ModalHeader title="Abort Cluster Installation" />
+      <ModalBody>{getModalContent()}</ModalBody>
+      <ModalFooter>
         <Button
           key="submit"
           variant={ButtonVariant.danger}
@@ -66,7 +71,7 @@ const CancelInstallationModal: React.FC = () => {
           isDisabled={isSubmitting}
         >
           Abort installation
-        </Button>,
+        </Button>
         <Button
           key="cancel"
           variant={ButtonVariant.link}
@@ -74,11 +79,8 @@ const CancelInstallationModal: React.FC = () => {
           isDisabled={isSubmitting}
         >
           Cancel
-        </Button>,
-      ]}
-      onClose={onClose}
-    >
-      {getModalContent()}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/ocm/components/clusterDetail/ClusterDetail.tsx

@@ -54,9 +54,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
       <StackItem>
         <Grid hasGutter>
           <GridItem>
-            <Content>
-              <Content component="h2">Installation progress</Content>
-            </Content>
+            <Content component="h2">Installation progress</Content>
           </GridItem>
           <GridItem span={6}>
             <ClusterProgress

package/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert } from '@patternfly/react-core';
+import { Alert, Stack, StackItem } from '@patternfly/react-core';
 import {
   REDHAT_CONSOLE_OPENSHIFT,
   canDownloadKubeconfig,
@@ -43,41 +43,49 @@ const ClusterDetailStatusMessages = ({
     : '';
 
   return (
-    <>
+    <Stack hasGutter>
       {!isSingleClusterFeatureEnabled &&
         typeof inactiveDeletionHours === 'number' &&
         canDownloadKubeconfig(cluster.status) && (
+          <StackItem>
+            <Alert
+              variant="info"
+              isInline
+              title={
+                dateDifference > 0
+                  ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
+                    `deleted from Assisted Installer's service in ${dateDifference} days.`
+                  : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
+              }
+            />
+          </StackItem>
+        )}
+      {showAddHostsAlert && (
+        <StackItem>
           <Alert
             variant="info"
             isInline
+            data-testid="alert-add-hosts"
             title={
-              dateDifference > 0
-                ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
-                  `deleted from Assisted Installer's service in ${dateDifference} days.`
-                : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
+              <p>
+                {isClusterPlatformTypeVM(cluster)
+                  ? 'Add new hosts by using the platform auto-scale feature or manually generating a new Discovery ISO under the "Add hosts" tab on '
+                  : 'Add new hosts by generating a new Discovery ISO under your cluster\'s "Add hosts" tab on '}
+                <a href={REDHAT_CONSOLE_OPENSHIFT} target="_blank" rel="noopener noreferrer">
+                  console.redhat.com/openshift <ExternalLinkAltIcon />
+                </a>
+                .
+              </p>
             }
           />
-        )}
-      {showAddHostsAlert && (
-        <Alert
-          variant="info"
-          isInline
-          data-testid="alert-add-hosts"
-          title={
-            <p>
-              {isClusterPlatformTypeVM(cluster)
-                ? 'Add new hosts by using the platform auto-scale feature or manually generating a new Discovery ISO under the "Add hosts" tab on '
-                : 'Add new hosts by generating a new Discovery ISO under your cluster\'s "Add hosts" tab on '}
-              <a href={REDHAT_CONSOLE_OPENSHIFT} target="_blank" rel="noopener noreferrer">
-                console.redhat.com/openshift <ExternalLinkAltIcon />
-              </a>
-              .
-            </p>
-          }
-        />
+        </StackItem>
+      )}
+      {platformLink && (
+        <StackItem>
+          <PostInstallAlert link={platformLink} />
+        </StackItem>
       )}
-      {platformLink && <PostInstallAlert link={platformLink} />}
-    </>
+    </Stack>
   );
 };
 

package/lib/ocm/components/clusterDetail/ClusterInstallationError.tsx

@@ -51,13 +51,11 @@ const ClusterInstallationError: React.FC<ClusterInstallationErrorProps> = ({
         }
         isInline
       >
-        <Content>
-          <Content component="p">
-            {toSentence(cluster.statusInfo)}
-            <br />
-            Reset the installation process to return to the configuration and try again. Some hosts
-            may need to be re-registered by rebooting into the Discovery ISO.
-          </Content>
+        <Content component="p">
+          {toSentence(cluster.statusInfo)}
+          <br />
+          Reset the installation process to return to the configuration and try again. Some hosts
+          may need to be re-registered by rebooting into the Discovery ISO.
         </Content>
       </Alert>
     </GridItem>

package/lib/ocm/components/clusterDetail/ClusterPollingErrorModal.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
-import { Button, ButtonVariant } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 const defaultTitle = 'Unable to fetch the latest data';
 
@@ -15,23 +22,18 @@ const ClusterPollingErrorModal = ({
   content?: string;
 }) => {
   return (
-    <Modal
-      title={title}
-      isOpen
-      variant={ModalVariant.small}
-      showClose={false}
-      titleIconVariant="danger"
-      actions={[
+    <Modal isOpen variant={ModalVariant.small} onClose={undefined}>
+      <ModalHeader title={title} titleIconVariant="danger" />
+      <ModalBody>{content}</ModalBody>
+      <ModalFooter>
         <Button
           key="refresh"
           variant={ButtonVariant.primary}
           onClick={() => window.location.reload()}
         >
           Refresh page
-        </Button>,
-      ]}
-    >
-      {content}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/ocm/components/clusterDetail/ClusterProperties.tsx

@@ -78,9 +78,7 @@ const ClusterProperties = ({ cluster, externalMode = false }: ClusterPropertiesP
     <>
       {!externalMode && (
         <GridItem>
-          <Content>
-            <Content component="h2">{t('ai:Cluster Details')}</Content>
-          </Content>
+          <Content component="h2">{t('ai:Cluster Details')}</Content>
         </GridItem>
       )}
       <GridItem md={6} data-testid="cluster-details">

package/lib/ocm/components/clusterDetail/ClusterUpdateErrorModal.tsx

@@ -1,25 +1,29 @@
 import React from 'react';
-import { Button, ButtonVariant } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 const ClusterUpdateErrorModal = () => (
-  <Modal
-    title="Unable to update cluster"
-    isOpen
-    variant={ModalVariant.small}
-    showClose={false}
-    titleIconVariant="danger"
-    actions={[
+  <Modal isOpen variant={ModalVariant.small} onClose={undefined}>
+    <ModalHeader title="Unable to update cluster" titleIconVariant="danger" />
+    <ModalBody>
+      The service is down, undergoing maintenance, or experiencing another issue.
+    </ModalBody>
+    <ModalFooter>
       <Button
         key="refresh"
         variant={ButtonVariant.primary}
         onClick={() => window.location.reload()}
       >
         Refresh page
-      </Button>,
-    ]}
-  >
-    The service is down, undergoing maintenance, or experiencing another issue.
+      </Button>
+    </ModalFooter>
   </Modal>
 );
 

package/lib/ocm/components/clusterDetail/OpenShiftVersionDetail.tsx

@@ -10,10 +10,8 @@ const UnsupportedVersion = ({ version }: { version: string }) => {
   const { t } = useTranslation();
 
   const hint = (
-    <Content>
-      <Content component={ContentVariants.p}>
-        {t('ai:Please note that this version is not production-ready.')}
-      </Content>
+    <Content component={ContentVariants.p}>
+      {t('ai:Please note that this version is not production-ready.')}
     </Content>
   );
   return (

package/lib/ocm/components/clusterDetail/ProgressBarAlerts.tsx

@@ -124,13 +124,11 @@ export const HostsInstallationFailed = ({
   } else {
     title = 'Initialization failed';
     message = (
-      <Content>
-        <Content component="p">
-          {toSentence(cluster.statusInfo)}
-          <br />
-          Reset the installation process to return to the configuration and try again. Some hosts
-          may need to be re-registered by rebooting into the Discovery ISO.
-        </Content>
+      <Content component="p">
+        {toSentence(cluster.statusInfo)}
+        <br />
+        Reset the installation process to return to the configuration and try again. Some hosts may
+        need to be re-registered by rebooting into the Discovery ISO.
       </Content>
     );
   }

package/lib/ocm/components/clusterDetail/ResetClusterModal.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Button, ButtonVariant, Content } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Content,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 
 import { getApiErrorMessage, handleApiError } from '../../../common/api';
@@ -64,7 +72,7 @@ const ResetClusterModal: React.FC = () => {
     }
 
     return (
-      <Content>
+      <>
         <Content component="p">
           This will reset the installation and return to the cluster configuration. Some hosts may
           need to be re-registered by rebooting into the Discovery ISO.
@@ -83,7 +91,7 @@ const ResetClusterModal: React.FC = () => {
         </Content>
 
         <Content component="p">Are you sure you want to reset the cluster?</Content>
-      </Content>
+      </>
     );
   };
 
@@ -110,14 +118,10 @@ const ResetClusterModal: React.FC = () => {
   );
 
   return (
-    <Modal
-      title="Reset Cluster Installation"
-      isOpen={isOpen}
-      variant={ModalVariant.small}
-      actions={actions}
-      onClose={handleClose}
-    >
-      {getModalContent()}
+    <Modal isOpen={isOpen} variant={ModalVariant.small} onClose={handleClose}>
+      <ModalHeader title="Reset Cluster Installation" />
+      <ModalBody>{getModalContent()}</ModalBody>
+      <ModalFooter>{actions}</ModalFooter>
     </Modal>
   );
 };

package/lib/ocm/components/clusterWizard/ClusterDetails.tsx

@@ -24,6 +24,7 @@ import {
   UISettingService,
 } from '../../services';
 import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
+import BundleService from '../../services/BundleService';
 
 type ClusterDetailsProps = {
   cluster?: Cluster;
@@ -81,9 +82,17 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
       try {
         const searchParams = new URLSearchParams(location.search);
         const isAssistedMigration = searchParams.get('source') === 'assisted_migration';
-        //For Assisted Migration we need to LVMs operator
+        //For Assisted Migration we need the LVMs operator and also the virtualization bundle operators
         if (isAssistedMigration) {
           params.olmOperators = [{ name: 'lvm' }];
+          const selectedBundle = (await BundleService.listBundles()).find(
+            (b) => b.id === 'virtualization',
+          );
+          const virtOperators = selectedBundle?.operators;
+          params.olmOperators = [
+            ...params.olmOperators,
+            ...(virtOperators ? virtOperators.map((op) => ({ name: op })) : []),
+          ];
         }
         const cluster = await ClustersService.create(params, isAssistedMigration);
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });

package/lib/ocm/components/clusterWizard/disconnected/BasicStep.tsx

@@ -36,9 +36,7 @@ const BasicStep = () => {
             <GridItem>
               <Split>
                 <SplitItem>
-                  <Content>
-                    <Content component="h2">Basic information</Content>
-                  </Content>
+                  <Content component="h2">Basic information</Content>
                 </SplitItem>
                 <SplitItem>
                   <DeveloperPreview />

package/lib/ocm/components/clusterWizard/disconnected/ReviewStep.tsx

@@ -62,9 +62,7 @@ const ReviewStep = () => {
           <Grid hasGutter>
             <Split>
               <SplitItem>
-                <Content>
-                  <Content component="h2">Review and download ISO</Content>
-                </Content>
+                <Content component="h2">Review and download ISO</Content>
               </SplitItem>
               <SplitItem>
                 <DeveloperPreview />

package/lib/ocm/components/clusters/AssistedInstallerHeader.tsx

@@ -11,7 +11,7 @@ import { useFeature } from '../../hooks/use-feature';
 export const AssistedInstallerHeader = () => {
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   return (
-    <Content>
+    <>
       <Content component="h1" className="pf-v6-u-display-inline">
         Install OpenShift with the Assisted Installer
       </Content>
@@ -30,6 +30,6 @@ export const AssistedInstallerHeader = () => {
           </SplitItem>
         )}
       </Split>
-    </Content>
+    </>
   );
 };

package/lib/ocm/components/clusters/ClusterPage.tsx

@@ -91,9 +91,7 @@ const ClusterPageGeneric = ({
         <>
           {showBreadcrumbs && <ClusterBreadcrumbs clusterName={cluster.name} />}
           <PageSection hasBodyWrapper={false}>
-            <Content>
-              <Content component="h1">{cluster.name}</Content>
-            </Content>
+            <Content component="h1">{cluster.name}</Content>
           </PageSection>
           <PageSection hasBodyWrapper={false} isFilled>
             <ClusterDetail cluster={cluster} />

package/lib/ocm/components/clusters/Clusters.tsx

@@ -108,9 +108,7 @@ const Clusters = () => {
           <>
             <ClusterBreadcrumbs />
             <PageSection hasBodyWrapper={false}>
-              <Content>
-                <Content component="h1">Assisted Clusters</Content>
-              </Content>
+              <Content component="h1">Assisted Clusters</Content>
             </PageSection>
             <PageSection hasBodyWrapper={false} isFilled>
               <Alerts />

package/lib/ocm/components/clusters/DeleteClusterModal.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react';
-import { Button } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 type DeleteClusterModalProps = {
   name: string;
@@ -18,12 +24,13 @@ const DeleteClusterModal: React.FC<DeleteClusterModalProps> = ({
   isOpen,
 }) => (
   <Modal
-    title="Delete cluster"
     isOpen={isOpen}
-    onClose={onClose}
+    onClose={isDeleteInProgress ? undefined : () => onClose()}
     variant={ModalVariant.small}
-    showClose={!isDeleteInProgress}
-    actions={[
+  >
+    <ModalHeader title="Delete cluster" />
+    <ModalBody>Are you sure you want to delete cluster {name} ?</ModalBody>
+    <ModalFooter>
       <Button
         data-testid="delete-cluster-submit"
         key="confirm"
@@ -33,13 +40,11 @@ const DeleteClusterModal: React.FC<DeleteClusterModalProps> = ({
         isLoading={isDeleteInProgress}
       >
         Delete
-      </Button>,
+      </Button>
       <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleteInProgress}>
         Cancel
-      </Button>,
-    ]}
-  >
-    Are you sure you want to delete cluster {name} ?
+      </Button>
+    </ModalFooter>
   </Modal>
 );
 

package/lib/ocm/components/featureSupportLevels/ReviewClusterFeatureSupportLevels.tsx

@@ -86,7 +86,7 @@ export const LimitedSupportedCluster = ({
   clusterFeatureSupportLevels: FeatureIdToSupportLevel;
   showVersionWarning: boolean;
 }) => (
-  <Content>
+  <>
     {showVersionWarning && (
       <Content component="p">
         <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.var} />} />
@@ -100,7 +100,7 @@ export const LimitedSupportedCluster = ({
         <Content component="ul">{getPreviewFeatureList(clusterFeatureSupportLevels)}</Content>
       </>
     )}
-  </Content>
+  </>
 );
 
 export const FullySupportedCluster = () => (

package/lib/ocm/components/hosts/DeleteHostModal.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
-import { Button, ButtonVariant } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 type DeleteHostModalProps = {
@@ -18,8 +25,12 @@ const DeleteHostModal = ({ isOpen, hostname, onClose, onDelete }: DeleteHostModa
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      titleIconVariant="warning"
-      actions={[
+    >
+      <ModalHeader title={t('ai:Remove host?')} titleIconVariant="warning" />
+      <ModalBody>
+        {t('ai:Host {{hostname}} will be removed', { hostname: hostname || '' })}
+      </ModalBody>
+      <ModalFooter>
         <Button
           data-testid="delete-host-submit"
           key="confirm"
@@ -27,13 +38,11 @@ const DeleteHostModal = ({ isOpen, hostname, onClose, onDelete }: DeleteHostModa
           onClick={onDelete}
         >
           {t('ai:Remove host')}
-        </Button>,
+        </Button>
         <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
           {t('ai:Cancel')}
-        </Button>,
-      ]}
-    >
-      {t('ai:Host {{hostname}} will be removed', { hostname: hostname || '' })}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/ocm/components/hosts/HostRequirementsContent.tsx

@@ -41,11 +41,9 @@ const HostRequirementsContent = ({
 
   if (isAddingHosts) {
     return (
-      <Content>
-        <Content
-          component={'p'}
-        >{`Worker hosts must have at least ${contentForWorkerNodes}`}</Content>
-      </Content>
+      <Content
+        component={'p'}
+      >{`Worker hosts must have at least ${contentForWorkerNodes}`}</Content>
     );
   }
 

package/lib/ocm/components/hosts/ResetHostModal.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
-import { Button, ButtonVariant } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 type ResetHostModalProps = {
   hostname?: string;
@@ -10,12 +17,10 @@ type ResetHostModalProps = {
 };
 
 const ResetHostModal: React.FC<ResetHostModalProps> = ({ isOpen, hostname, onClose, onReset }) => (
-  <Modal
-    title="Reset Host"
-    isOpen={isOpen}
-    onClose={onClose}
-    variant={ModalVariant.small}
-    actions={[
+  <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.small}>
+    <ModalHeader title="Reset Host" />
+    <ModalBody>Are you sure you want to reset host{` ${hostname || ''}`} ?</ModalBody>
+    <ModalFooter>
       <Button
         data-testid="reset-host-submit"
         key="confirm"
@@ -23,13 +28,11 @@ const ResetHostModal: React.FC<ResetHostModalProps> = ({ isOpen, hostname, onClo
         onClick={onReset}
       >
         Reset
-      </Button>,
+      </Button>
       <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
         Cancel
-      </Button>,
-    ]}
-  >
-    Are you sure you want to reset host{` ${hostname || ''}`} ?
+      </Button>
+    </ModalFooter>
   </Modal>
 );