AGENT-1388: Adding TechPreview Budge for Assisted installer and agent

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,13 +1,13 @@
 import * as React from 'react';
 import {
   ClusterWizardStep,
-  DeveloperPreview,
+  TechnologyPreview,
   ExternalLink,
   OCP_RELEASES_PAGE,
   StaticTextField,
   useTranslation,
 } from '../../../../common';
-import { Split, SplitItem, Grid, GridItem, Form, Content } from '@patternfly/react-core';
+import { Flex, Grid, GridItem, Form, Content } from '@patternfly/react-core';
 import OcmOpenShiftVersion from '../../clusterConfiguration/OcmOpenShiftVersion';
 import { useClusterWizardContext } from '../ClusterWizardContext';
 import ClusterWizardFooter from '../ClusterWizardFooter';
@@ -43,7 +43,7 @@ const BasicStep = () => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
         await ClustersService.registerDisconnected({
           name: 'disconnected-cluster',
-          openshiftVersion: '4.19',
+          openshiftVersion: '4.20',
         });
       disconnectedClusterId = disconnectedCluster.id;
       navigate(`${currentPath}/${disconnectedClusterId}`, {
@@ -85,21 +85,20 @@ const BasicStep = () => {
         <WithErrorBoundary title="Failed to load Basic step">
           <Grid hasGutter>
             <GridItem>
-              <Split>
-                <SplitItem>
-                  <Content component="h2">Basic information</Content>
-                </SplitItem>
-                <SplitItem>
-                  <DeveloperPreview />
-                </SplitItem>
-              </Split>
+              <Content component="h2">Basic information</Content>
             </GridItem>
             <GridItem>
-              <InstallDisconnectedSwitch />
+              <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
+                <TechnologyPreview />
+                <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/OptionalConfigurationsStep.tsx

@@ -3,7 +3,7 @@ import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
 import {
   ClusterWizardStep,
-  DeveloperPreview,
+  TechnologyPreview,
   getRichTextValidation,
   sshPublicKeyValidationSchema,
   pullSecretValidationSchema,
@@ -24,6 +24,7 @@ import { InfraEnvsAPI } from '../../../services/apis';
 import usePullSecret from '../../../hooks/usePullSecret';
 import { useParams } from 'react-router-dom-v5-compat';
 import ClustersService from '../../../services/ClustersService';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 type OptionalConfigurationsFormValues = {
   sshPublicKey?: string;
@@ -45,7 +46,7 @@ const PullSecretSync: React.FC<{ pullSecret?: string }> = ({ pullSecret }) => {
 const OptionalConfigurationsStep = () => {
   const pullSecret = usePullSecret() || '';
   const { clusterId } = useParams<{ clusterId: string }>();
-  const [cluster, setCluster] = React.useState<{ id: string } | null>(null);
+  const [cluster, setCluster] = React.useState<Cluster | null>(null);
 
   const { moveNext, moveBack, setDisconnectedInfraEnv, disconnectedInfraEnv } =
     useClusterWizardContext();
@@ -121,7 +122,7 @@ const OptionalConfigurationsStep = () => {
               name: `disconnected-cluster_infra-env`,
               pullSecret: values.pullSecret || pullSecret,
               clusterId: cluster.id,
-              openshiftVersion: '4.19',
+              openshiftVersion: cluster.openshiftVersion,
               cpuArchitecture: 'x86_64' as const,
               ...(values.sshPublicKey && { sshAuthorizedKey: values.sshPublicKey }),
             };
@@ -172,7 +173,7 @@ const OptionalConfigurationsStep = () => {
                       <Content component="h2">Optional configurations</Content>
                     </SplitItem>
                     <SplitItem>
-                      <DeveloperPreview />
+                      <TechnologyPreview />
                     </SplitItem>
                   </Split>
                 </GridItem>

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';
@@ -97,7 +97,7 @@ const ReviewStep = () => {
                 <Content component="h2">Review and download ISO</Content>
               </SplitItem>
               <SplitItem>
-                <DeveloperPreview />
+                <TechnologyPreview />
               </SplitItem>
             </Split>
             <Alert isInline variant="info" title="Discovery ISO boot instructions">
@@ -130,7 +130,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 { Content, Split, SplitItem } from '@patternfly/react-core';
 import {
   ASSISTED_INSTALLER_DOCUMENTATION_LINK,
-  DeveloperPreview,
+  TechnologyPreview,
   ExternalLink,
   isInOcm,
 } from '../../../common';
@@ -15,7 +15,7 @@ export const AssistedInstallerHeader = () => {
       <Content component="h1" className="pf-v6-u-display-inline">
         Install OpenShift with the Assisted Installer
       </Content>
-      {isSingleClusterFeatureEnabled && <DeveloperPreview />}
+      {isSingleClusterFeatureEnabled && <TechnologyPreview />}
       <Split hasGutter>
         <SplitItem>
           <ExternalLink href={ASSISTED_INSTALLER_DOCUMENTATION_LINK}>

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

@@ -23,6 +23,7 @@ import {
   NewFeatureSupportLevelData,
   useNewFeatureSupportLevel,
 } from '../../../common/components/newFeatureSupportLevels';
+import { useFeature } from '../../hooks/use-feature';
 
 const getFeatureReviewText = (featureId: FeatureId): string => {
   switch (featureId) {
@@ -127,6 +128,7 @@ export const getSupportLevelInfo = (
   featureSupportLevelData: NewFeatureSupportLevelData,
   isSupportedOpenShiftVersion: (version?: string) => boolean,
   t: TFunction,
+  isSingleClusterFeatureEnabled?: boolean,
 ) => {
   const limitedClusterFeatures = getLimitedFeatureSupportLevels(
     cluster,
@@ -137,19 +139,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) {
@@ -165,7 +184,7 @@ const SupportLevel = ({ cluster }: SupportLevelProps) => {
         ) : (
           <LimitedSupportedCluster
             clusterFeatureSupportLevels={limitedClusterFeatures}
-            showVersionWarning={!hasSupportedVersion}
+            showVersionWarning={!hasSupportedVersion || isSingleClusterFeatureEnabled}
           />
         )
       }