[release-4.20] OCPBUGS-67017: ABI UI should have Tech Preview badge instead of Dev Preview

libs/ui-lib/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 { Grid, GridItem, Split, SplitItem } from '@patternfly/react-core';
+import { Flex, Grid, GridItem } 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,
-  DeveloperPreview,
+  TechnologyPreview,
 } from '../../../common';
 import { canNextClusterDetails } from './wizardTransition';
 import { OpenshiftVersionOptionType, getFormikErrorFields } from '../../../common';
@@ -167,14 +167,13 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
               </GridItem>
               {!isSingleClusterFeatureEnabled && (
                 <GridItem>
-                  <Split>
-                    <SplitItem>
-                      <InstallDisconnectedSwitch isDisabled={!!cluster} />
-                    </SplitItem>
-                    <SplitItem>
-                      <DeveloperPreview />
-                    </SplitItem>
-                  </Split>
+                  <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>
                 </GridItem>
               )}
               <GridItem span={12} lg={10} xl={9} xl2={7}>

libs/ui-lib/lib/ocm/components/clusterWizard/disconnected/BasicStep.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   ClusterWizardStep,
-  DeveloperPreview,
+  TechnologyPreview,
   ExternalLink,
   OCP_RELEASES_PAGE,
   StaticTextField,
@@ -16,6 +16,7 @@ import {
   Grid,
   GridItem,
   Form,
+  Flex,
 } from '@patternfly/react-core';
 import { Formik } from 'formik';
 import OcmOpenShiftVersion from '../../clusterConfiguration/OcmOpenShiftVersion';
@@ -50,16 +51,21 @@ const BasicStep = () => {
                   </TextContent>
                 </SplitItem>
                 <SplitItem>
-                  <DeveloperPreview />
+                  <TechnologyPreview />
                 </SplitItem>
               </Split>
             </GridItem>
             <GridItem>
-              <InstallDisconnectedSwitch />
+              <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
+                <InstallDisconnectedSwitch />
+                <span>
+                  {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
+                </span>
+              </Flex>
             </GridItem>
             <GridItem>
               <Form id="wizard-cluster-basic-info__form">
-                <OcmOpenShiftVersion openshiftVersion="4.19" withPreviewText withMultiText>
+                <OcmOpenShiftVersion openshiftVersion="4.20" withPreviewText withMultiText>
                   <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
                     <span data-ouia-id="openshift-releases-link">
                       {t('ai:Learn more about OpenShift releases')}

libs/ui-lib/lib/ocm/components/clusterWizard/disconnected/InstallDisconnectedSwitch.tsx

@@ -10,7 +10,6 @@ const InstallDisconnectedSwitch = ({ isDisabled }: { isDisabled?: boolean }) =>
   const switchBtn = (
     <Switch
       id="disconnected-install-switch"
-      label={t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
       isChecked={installDisconnected}
       onChange={(_, checked) => setInstallDisconnected(checked)}
       ouiaId="DisconnectedInstall"

libs/ui-lib/lib/ocm/components/clusterWizard/disconnected/ReviewStep.tsx

@@ -3,7 +3,7 @@ import ClusterWizardFooter from '../ClusterWizardFooter';
 import { useClusterWizardContext } from '../ClusterWizardContext';
 import {
   ClusterWizardStep,
-  DeveloperPreview,
+  TechnologyPreview,
   PULL_SECRET_INFO_LINK,
   singleClusterOperators,
 } from '../../../../common';
@@ -69,7 +69,7 @@ const ReviewStep = () => {
                 </TextContent>
               </SplitItem>
               <SplitItem>
-                <DeveloperPreview />
+                <TechnologyPreview />
               </SplitItem>
             </Split>
             <Alert isInline variant="info" title="Discovery ISO boot instructions">
@@ -102,7 +102,7 @@ const ReviewStep = () => {
             <DescriptionList isHorizontal>
               <DescriptionListGroup>
                 <DescriptionListTerm>OpenShift version</DescriptionListTerm>
-                <DescriptionListDescription>4.19</DescriptionListDescription>
+                <DescriptionListDescription>4.20</DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>CPU architecture</DescriptionListTerm>

libs/ui-lib/lib/ocm/components/clusters/AssistedInstallerHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { TextContent, Text, Split, SplitItem } from '@patternfly/react-core';
 import {
   ASSISTED_INSTALLER_DOCUMENTATION_LINK,
-  DeveloperPreview,
+  TechnologyPreview,
   ExternalLink,
   isInOcm,
 } from '../../../common';
@@ -15,7 +15,7 @@ export const AssistedInstallerHeader = () => {
       <Text component="h1" className="pf-v5-u-display-inline">
         Install OpenShift with the Assisted Installer
       </Text>
-      {isSingleClusterFeatureEnabled && <DeveloperPreview />}
+      {isSingleClusterFeatureEnabled && <TechnologyPreview />}
       <Split hasGutter>
         <SplitItem>
           <ExternalLink href={ASSISTED_INSTALLER_DOCUMENTATION_LINK}>

libs/ui-lib/lib/ocm/components/featureSupportLevels/ReviewClusterFeatureSupportLevels.tsx

@@ -22,6 +22,7 @@ import {
   NewFeatureSupportLevelData,
   useNewFeatureSupportLevel,
 } from '../../../common/components/newFeatureSupportLevels';
+import { useFeature } from '../../hooks/use-feature';
 
 const getFeatureReviewText = (featureId: FeatureId): string => {
   switch (featureId) {
@@ -124,6 +125,7 @@ export const getSupportLevelInfo = (
   featureSupportLevelData: NewFeatureSupportLevelData,
   isSupportedOpenShiftVersion: (version?: string) => boolean,
   t: TFunction,
+  isSingleClusterFeatureEnabled?: boolean,
 ) => {
   const limitedClusterFeatures = getLimitedFeatureSupportLevels(
     cluster,
@@ -134,19 +136,36 @@ export const getSupportLevelInfo = (
   return {
     limitedClusterFeatures,
     hasSupportedVersion,
-    isFullySupported: hasSupportedVersion && Object.keys(limitedClusterFeatures || {}).length === 0,
+    isFullySupported:
+      hasSupportedVersion &&
+      Object.keys(limitedClusterFeatures || {}).length === 0 &&
+      !isSingleClusterFeatureEnabled,
   };
 };
 
 const SupportLevel = ({ cluster }: SupportLevelProps) => {
   const { t } = useTranslation();
   const featureSupportLevelData = useNewFeatureSupportLevel();
   const { isSupportedOpenShiftVersion } = useOpenShiftVersionsContext();
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
 
   const { limitedClusterFeatures, hasSupportedVersion, isFullySupported } =
     React.useMemo<SupportLevelMemo>(
-      () => getSupportLevelInfo(cluster, featureSupportLevelData, isSupportedOpenShiftVersion, t),
-      [cluster, featureSupportLevelData, t, isSupportedOpenShiftVersion],
+      () =>
+        getSupportLevelInfo(
+          cluster,
+          featureSupportLevelData,
+          isSupportedOpenShiftVersion,
+          t,
+          isSingleClusterFeatureEnabled,
+        ),
+      [
+        cluster,
+        featureSupportLevelData,
+        t,
+        isSupportedOpenShiftVersion,
+        isSingleClusterFeatureEnabled,
+      ],
     );
 
   if (!limitedClusterFeatures) {
@@ -162,7 +181,7 @@ const SupportLevel = ({ cluster }: SupportLevelProps) => {
         ) : (
           <LimitedSupportedCluster
             clusterFeatureSupportLevels={limitedClusterFeatures}
-            showVersionWarning={!hasSupportedVersion}
+            showVersionWarning={!hasSupportedVersion || isSingleClusterFeatureEnabled}
           />
         )
       }