@openshift-assisted/ui-lib 2.16.4-cim → 2.16.6-cim

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

@@ -1,6 +1,14 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import { Stack, StackItem, Content, ButtonVariant, GridItem, Grid } from '@patternfly/react-core';
+import {
+  Stack,
+  StackItem,
+  TextContent,
+  Text,
+  ButtonVariant,
+  GridItem,
+  Grid,
+} from '@patternfly/react-core';
 import { ToolbarButton, Alerts, getEnabledHosts, selectOlmOperators, isSNO } from '../../../common';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import ClusterToolbar from '../clusters/ClusterToolbar';
@@ -54,7 +62,9 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
       <StackItem>
         <Grid hasGutter>
           <GridItem>
-            <Content component="h2">Installation progress</Content>
+            <TextContent>
+              <Text component="h2">Installation progress</Text>
+            </TextContent>
           </GridItem>
           <GridItem span={6}>
             <ClusterProgress

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Stack, StackItem } from '@patternfly/react-core';
+import { Alert } from '@patternfly/react-core';
 import {
   REDHAT_CONSOLE_OPENSHIFT,
   canDownloadKubeconfig,
@@ -43,49 +43,41 @@ 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={
-              <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>
+              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>
-      )}
-      {platformLink && (
-        <StackItem>
-          <PostInstallAlert link={platformLink} />
-        </StackItem>
+        )}
+      {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>
+          }
+        />
       )}
-    </Stack>
+      {platformLink && <PostInstallAlert link={platformLink} />}
+    </>
   );
 };
 

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

@@ -9,7 +9,7 @@ import {
 import { getClusterDetailId } from './utils';
 import { ClustersAPI } from '../../services/apis';
 import ClusterDetailStatusMessages from './ClusterDetailStatusMessages';
-import { Stack, StackItem } from '@patternfly/react-core';
+import { Grid } from '@patternfly/react-core';
 import { getErrorMessage } from '../../../common/utils';
 import {
   Cluster,
@@ -94,24 +94,20 @@ const ClusterDetailStatusVarieties = ({
     consoleOperator?.status === 'available' || (!consoleOperator && cluster.status === 'installed'); // Retain backwards compatibility with clusters which don't have monitored clusters
 
   return (
-    <Stack hasGutter>
+    <Grid hasGutter>
       {showClusterCredentials && (
-        <StackItem className="pf-v6-u-mt-lg">
-          <ClusterCredentials
-            cluster={cluster}
-            credentials={credentials}
-            error={!!credentialsError}
-            retry={fetchCredentials}
-            idPrefix={getClusterDetailId('cluster-creds')}
-            credentialsError={credentialsError}
-            isMceEnabled={hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_MCE)}
-          />
-        </StackItem>
+        <ClusterCredentials
+          cluster={cluster}
+          credentials={credentials}
+          error={!!credentialsError}
+          retry={fetchCredentials}
+          idPrefix={getClusterDetailId('cluster-creds')}
+          credentialsError={credentialsError}
+          isMceEnabled={hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_MCE)}
+        />
       )}
-      <StackItem className="pf-v6-u-mt-lg">
-        <ClusterDetailStatusMessages cluster={cluster} showAddHostsInfo={showAddHostsInfo} />
-      </StackItem>
-    </Stack>
+      <ClusterDetailStatusMessages cluster={cluster} showAddHostsInfo={showAddHostsInfo} />
+    </Grid>
   );
 };
 

package/lib/ocm/components/clusterDetail/ClusterDetailsButtonGroup.css

@@ -1,4 +1,4 @@
 .assisted-ui-vertical-margin {
-  margin-top: var(--pf-v6-global--spacer--lg);
-  margin-bottom: var(--pf-v6-global--spacer--lg);
+  margin-top: var(--pf-v5-global--spacer--lg);
+  margin-bottom: var(--pf-v5-global--spacer--lg);
 }

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

@@ -1,5 +1,12 @@
 import React from 'react';
-import { GridItem, Alert, AlertVariant, AlertActionLink, Content } from '@patternfly/react-core';
+import {
+  GridItem,
+  Alert,
+  AlertVariant,
+  AlertActionLink,
+  TextContent,
+  Text,
+} from '@patternfly/react-core';
 import { getReportIssueLink, canDownloadClusterLogs, useAlerts, toSentence } from '../../../common';
 import { downloadClusterInstallationLogs } from './utils';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
@@ -51,12 +58,14 @@ const ClusterInstallationError: React.FC<ClusterInstallationErrorProps> = ({
         }
         isInline
       >
-        <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>
+        <TextContent>
+          <Text 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.
+          </Text>
+        </TextContent>
       </Alert>
     </GridItem>
   );

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

@@ -5,8 +5,8 @@ import {
   CardBody,
   CardHeader,
   CardExpandableContent,
-  Stack,
-  StackItem,
+  Grid,
+  GridItem,
 } from '@patternfly/react-core';
 import { ClusterProgress } from '../../../common';
 import ClusterHostsTable from '../hosts/ClusterHostsTable';
@@ -36,44 +36,36 @@ const ClusterInstallationProgressCard: React.FC<{ cluster: Cluster }> = ({ clust
           Installation progress
         </Title>
         {!isCardExpanded && (
-          <div className="pf-v6-u-ml-md">
+          <div className="pf-v5-u-ml-md">
             <ClusterStatusIcon status={cluster.status} />
           </div>
         )}
       </CardHeader>
       <CardBody>
-        <Stack hasGutter>
-          <StackItem>
-            <ClusterProgress
-              cluster={cluster}
-              minimizedView={!isCardExpanded}
-              totalPercentage={cluster.progress?.totalPercentage || 0}
-            />
-          </StackItem>
-          <StackItem>
-            <ClusterDetailsButtonGroup
-              cluster={cluster}
-              credentials={clusterVarieties.credentials}
-              credentialsError={clusterVarieties.credentialsError}
-              showKubeConfig={false}
-            />
-          </StackItem>
-        </Stack>
+        <ClusterProgress
+          cluster={cluster}
+          minimizedView={!isCardExpanded}
+          totalPercentage={cluster.progress?.totalPercentage || 0}
+        />
+        <ClusterDetailsButtonGroup
+          cluster={cluster}
+          credentials={clusterVarieties.credentials}
+          credentialsError={clusterVarieties.credentialsError}
+          showKubeConfig={false}
+        />
       </CardBody>
       <CardExpandableContent>
         <CardBody>
-          <Stack hasGutter>
-            <StackItem className="pf-v6-u-mt-lg">
-              <ClusterDetailStatusVarieties
-                cluster={cluster}
-                clusterVarieties={clusterVarieties}
-                showAddHostsInfo={false}
-              />
-            </StackItem>
-            <StackItem className="pf-v6-u-mt-lg">
+          <Grid hasGutter>
+            <ClusterDetailStatusVarieties
+              cluster={cluster}
+              clusterVarieties={clusterVarieties}
+              showAddHostsInfo={false}
+            />
+            <GridItem>
               <ClusterHostsTable cluster={cluster} skipDisabled />
-            </StackItem>
-          </Stack>
+            </GridItem>
+          </Grid>
         </CardBody>
       </CardExpandableContent>
     </Card>

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridItem, Content } from '@patternfly/react-core';
+import { GridItem, Text, TextContent } from '@patternfly/react-core';
 import {
   DetailItem,
   DetailList,
@@ -78,7 +78,9 @@ const ClusterProperties = ({ cluster, externalMode = false }: ClusterPropertiesP
     <>
       {!externalMode && (
         <GridItem>
-          <Content component="h2">{t('ai:Cluster Details')}</Content>
+          <TextContent>
+            <Text component="h2">{t('ai:Cluster Details')}</Text>
+          </TextContent>
         </GridItem>
       )}
       <GridItem md={6} data-testid="cluster-details">

package/lib/ocm/components/clusterDetail/ClusterSummaryExpandable.css

@@ -1,4 +1,4 @@
-.cluster-summary-expandable .pf-v6-c-expandable-section__toggle {
+.cluster-summary-expandable .pf-v5-c-expandable-section__toggle {
   color: initial;
   font-weight: bold;
 }

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

@@ -19,7 +19,7 @@ const ClusterSummaryExpandable = ({ cluster }: ClusterSummaryExpandableProps) =>
       className="cluster-summary-expandable"
       id="cluster-summary-expandable"
     >
-      <div className="pf-v6-u-pl-md pf-v6-u-pt-md">
+      <div className="pf-v5-u-pl-md pf-v5-u-pt-md">
         <ClusterFeatureSupportLevelsDetailItem cluster={cluster} />
         <ReviewSummaryContent cluster={cluster} />
       </div>

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

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

package/lib/ocm/components/clusterDetail/HostInventoryExpandable.css

@@ -1,4 +1,4 @@
-.host-inventory-expandable .pf-v6-c-expandable-section__toggle {
+.host-inventory-expandable .pf-v5-c-expandable-section__toggle {
   color: initial;
   font-weight: bold;
 }

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

@@ -21,7 +21,7 @@ const ExpandableSectionTitle = ({
 }) => (
   <span>
     {`Host inventory ${hostsCount > 0 ? `(${hostsCount})` : ''}`}
-    {icon && <span className="pf-v6-u-ml-sm">{icon}</span>}
+    {icon && <span className="pf-v5-u-ml-sm">{icon}</span>}
   </span>
 );
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { UiIcon, getOpenshiftVersionText } from '../../../common';
 import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { Popover, Content, ContentVariants } from '@patternfly/react-core';
+import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
@@ -10,17 +10,19 @@ const UnsupportedVersion = ({ version }: { version: string }) => {
   const { t } = useTranslation();
 
   const hint = (
-    <Content component={ContentVariants.p}>
-      {t('ai:Please note that this version is not production-ready.')}
-    </Content>
+    <TextContent>
+      <Text component={TextVariants.p}>
+        {t('ai:Please note that this version is not production-ready.')}
+      </Text>
+    </TextContent>
   );
   return (
-    <Content component="p">
+    <Text component="p">
       {version} &nbsp;
       <Popover bodyContent={hint}>
         <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
       </Popover>
-    </Content>
+    </Text>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, AlertActionLink, Content } from '@patternfly/react-core';
+import { Alert, AlertActionLink, Text, TextContent } from '@patternfly/react-core';
 import { pluralize } from 'humanize-plus';
 import {
   RenderIf,
@@ -124,12 +124,14 @@ export const HostsInstallationFailed = ({
   } else {
     title = 'Initialization failed';
     message = (
-      <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>
+      <TextContent>
+        <Text 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.
+        </Text>
+      </TextContent>
     );
   }
 

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

@@ -2,13 +2,11 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import {
   Button,
-  ButtonVariant,
-  Content,
   Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
   ModalVariant,
+  ButtonVariant,
+  Text,
+  TextContent,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 
@@ -72,26 +70,26 @@ const ResetClusterModal: React.FC = () => {
     }
 
     return (
-      <>
-        <Content component="p">
+      <TextContent>
+        <Text 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.
-        </Content>
+        </Text>
 
-        <Content component="p">
+        <Text component="p">
           <strong>Download the installation logs</strong> to troubleshoot or report a bug.
           <br />
           Currently, {collectedLogsPercentage}% of the installation logs were collected and are
           ready for download.
-        </Content>
+        </Text>
 
-        <Content component="p">
+        <Text component="p">
           <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} /> Logs won't be
           available after the installation is reset.
-        </Content>
+        </Text>
 
-        <Content component="p">Are you sure you want to reset the cluster?</Content>
-      </>
+        <Text component="p">Are you sure you want to reset the cluster?</Text>
+      </TextContent>
     );
   };
 
@@ -118,10 +116,14 @@ const ResetClusterModal: React.FC = () => {
   );
 
   return (
-    <Modal isOpen={isOpen} variant={ModalVariant.small} onClose={handleClose}>
-      <ModalHeader title="Reset Cluster Installation" />
-      <ModalBody>{getModalContent()}</ModalBody>
-      <ModalFooter>{actions}</ModalFooter>
+    <Modal
+      title="Reset Cluster Installation"
+      isOpen={isOpen}
+      variant={ModalVariant.small}
+      actions={actions}
+      onClose={handleClose}
+    >
+      {getModalContent()}
     </Modal>
   );
 };

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

@@ -24,8 +24,6 @@ import {
   UISettingService,
 } from '../../services';
 import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
-import BundleService from '../../services/BundleService';
-import { useFeature } from '../../hooks/use-feature';
 
 type ClusterDetailsProps = {
   cluster?: Cluster;
@@ -46,7 +44,6 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
     latestVersions: versions,
   } = useOpenShiftVersionsContext();
   const location = useLocation();
-  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
 
   const handleClusterUpdate = React.useCallback(
     async (
@@ -84,27 +81,11 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
       try {
         const searchParams = new URLSearchParams(location.search);
         const isAssistedMigration = searchParams.get('source') === 'assisted_migration';
-        //For Assisted Migration we need the LVMs operator and also the virtualization bundle operators
+        //For Assisted Migration we need to LVMs operator
         if (isAssistedMigration) {
           params.olmOperators = [{ name: 'lvm' }];
-          const selectedBundle = (
-            await BundleService.listBundles(
-              params.openshiftVersion,
-              params.cpuArchitecture,
-              params.platform?.type,
-            )
-          ).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,
-          isSingleClusterFeatureEnabled,
-        );
+        const cluster = await ClustersService.create(params, isAssistedMigration);
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
 
         const uiPatch: UISettingsValues = { addCustomManifests };
@@ -124,15 +105,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         }
       }
     },
-    [
-      clearAlerts,
-      location.search,
-      isSingleClusterFeatureEnabled,
-      navigate,
-      clusterWizardContext,
-      addAlert,
-      dispatch,
-    ],
+    [clearAlerts, location.search, navigate, clusterWizardContext, addAlert, dispatch],
   );
 
   const navigation = <ClusterWizardNavigation cluster={cluster} />;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom-v5-compat';
-import { Flex, Grid, GridItem } from '@patternfly/react-core';
+import { Grid, GridItem, Split, SplitItem } from '@patternfly/react-core';
 import isUndefined from 'lodash-es/isUndefined.js';
 import { Formik, FormikHelpers } from 'formik';
 import {
@@ -11,7 +11,7 @@ import {
   getRichTextValidation,
   CpuArchitecture,
   useAlerts,
-  TechnologyPreview,
+  DeveloperPreview,
 } from '../../../common';
 import { canNextClusterDetails } from './wizardTransition';
 import { OpenshiftVersionOptionType, getFormikErrorFields } from '../../../common';
@@ -167,13 +167,14 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
               </GridItem>
               {!isSingleClusterFeatureEnabled && (
                 <GridItem>
-                  <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
-                    <TechnologyPreview />
-                    <InstallDisconnectedSwitch isDisabled={!!cluster} />
-                    <span>
-                      {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
-                    </span>
-                  </Flex>
+                  <Split>
+                    <SplitItem>
+                      <InstallDisconnectedSwitch isDisabled={!!cluster} />
+                    </SplitItem>
+                    <SplitItem>
+                      <DeveloperPreview />
+                    </SplitItem>
+                  </Split>
                 </GridItem>
               )}
               <GridItem span={12} lg={10} xl={9} xl2={7}>