@openshift-assisted/ui-lib 2.49.0 → 2.50.1

package/lib/common/components/clusterConfiguration/DiscoveryTroubleshootingModal.tsx

@@ -16,7 +16,7 @@ import {
   ModalBody,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { PrismCode, SimpleAIPrismTheme, UiIcon } from '../ui';
+import { PrismCode, UiIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { saveAs } from 'file-saver';
@@ -70,7 +70,7 @@ export const DiscoveryTroubleshootingModalContent = () => {
             )}
           </HelperTextItem>
         </HelperText>
-        <PrismCode theme={SimpleAIPrismTheme} code="ssh -i <identity_file> core@<machine-ip>" />
+        <PrismCode code="ssh -i <identity_file> core@<machine-ip>" />
         <HelperText>
           <HelperTextItem data-testid="discovery-troubleshooting-ssh-auth-helper">
             {t(
@@ -106,7 +106,6 @@ export const DiscoveryTroubleshootingModalContent = () => {
           </HelperTextItem>
         </HelperText>
         <PrismCode
-          theme={SimpleAIPrismTheme}
           code={`chmod +x ./change-iso-password.sh
 ./change-iso-password.sh <path_to_your_iso_file>`}
         />
@@ -115,14 +114,13 @@ export const DiscoveryTroubleshootingModalContent = () => {
         <Content component="p">
           {t('ai:The discovery agent is running with the correct parameters')}
         </Content>
-        <PrismCode theme={SimpleAIPrismTheme} code={`ps -ef | grep agent`} />
+        <PrismCode code={`ps -ef | grep agent`} />
         <HelperText>
           <HelperTextItem data-testid="discovery-troubleshooting-agent-output-helper">
             {t('ai:The output displays the following:')}
           </HelperTextItem>
         </HelperText>
         <PrismCode
-          theme={SimpleAIPrismTheme}
           code={`root        1786       1  0 08:03 ?        00:00:00 /usr/local/bin/agent --url https://api.openshift.com --cluster-id e4c85fbe-77c7-411e-b107-5120f615c4fb --agent-version registry.redhat.io/openshift4/assisted-installer-agent-rhel8:v4.6.0-17 --insecure=false
 core        2362    2311  0 08:04 pts/0    00:00:00 grep --color=auto agent`}
         />
@@ -134,14 +132,14 @@ core        2362    2311  0 08:04 pts/0    00:00:00 grep --color=auto agent`}
             {t('ai:To verify that the agent ran successfully, check the logs:')}
           </HelperTextItem>
         </HelperText>
-        <PrismCode theme={SimpleAIPrismTheme} code="sudo journalctl -u agent.service" />
+        <PrismCode code="sudo journalctl -u agent.service" />
         <HelperText>
           <HelperTextItem data-testid="discovery-troubleshooting-network-error-helper">
             {t('ai:In the following example, the errors indicate there is a network issue:')}
           </HelperTextItem>
         </HelperText>
         <PrismCode
-          theme={{ ...SimpleAIPrismTheme, styles: [] }}
+          styles={[]}
           code={`Oct 15 11:26:35 localhost systemd[1]: agent.service: Service RestartSec=3s expired, scheduling restart.
 Oct 15 11:26:35 localhost systemd[1]: agent.service: Scheduled restart job, restart counter is at 9.
 Oct 15 11:26:35 localhost systemd[1]: Stopped agent.service.
@@ -170,12 +168,11 @@ Oct 15 11:26:35 localhost systemd[1]: Failed to start agent.service.`}
             {t('ai:To view detailed agent logs and communication use following command:')}
           </HelperTextItem>
         </HelperText>
-        <PrismCode theme={SimpleAIPrismTheme} code="sudo journalctl TAG=agent | less" />
+        <PrismCode code="sudo journalctl TAG=agent | less" />
       </ListItem>
       <ListItem>
         <Content component="p">{t('ai:Check assisted-installer logs')}</Content>
         <PrismCode
-          theme={SimpleAIPrismTheme}
           code={`sudo su
 podman ps -a | grep assisted-installer
 podman logs <container id>`}
@@ -183,7 +180,7 @@ podman logs <container id>`}
       </ListItem>
       <ListItem>
         <Content component="p">{t('ai:Check bootkube logs')}</Content>
-        <PrismCode theme={SimpleAIPrismTheme} code={`sudo journalctl -u bootkube`} />
+        <PrismCode code={`sudo journalctl -u bootkube`} />
       </ListItem>
     </List>
   );

package/lib/common/components/clusterConfiguration/ProxyFields.tsx

@@ -35,7 +35,7 @@ export const ProxyInputFields = () => {
           <div>
             <Trans
               t={t}
-              components={{ bold: <strong /> }}
+              components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
               i18nKey="ai:URL must start with <bold>http</bold>."
             />
           </div>
@@ -58,7 +58,7 @@ export const ProxyInputFields = () => {
           <div>
             <Trans
               t={t}
-              components={{ bold: <strong /> }}
+              components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
               i18nKey="ai:URL must start with <bold>http</bold> (https schemes are not currently supported)."
             />
           </div>
@@ -81,7 +81,7 @@ export const ProxyInputFields = () => {
           <div>
             <Trans
               t={t}
-              components={{ bold: <strong /> }}
+              components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
               i18nKey="ai:Use a comma to separate each listed domain. Preface a domain with <bold>.</bold> to include its subdomains. Use <bold>*</bold> to bypass the proxy for all destinations."
             />
           </div>

package/lib/common/components/clusterConfiguration/utils.ts

@@ -11,13 +11,7 @@ import {
 } from '@openshift-assisted/types/assisted-installer-service';
 import { NO_SUBNET_SET } from '../../config';
 import { isMajorMinorVersionEqualOrGreater } from '../../utils';
-import {
-  selectClusterNetworkCIDR,
-  selectClusterNetworkHostPrefix,
-  selectServiceNetworkCIDR,
-  selectSchedulableMasters,
-  isClusterPlatformTypeVM,
-} from '../../selectors';
+import { selectSchedulableMasters, isClusterPlatformTypeVM } from '../../selectors';
 import {
   ClusterCpuArchitecture,
   CpuArchitecture,
@@ -165,12 +159,28 @@ export const clusterNetworksEqual = (array1: ClusterNetwork[], array2: ClusterNe
     ),
   );
 
-export const isAdvNetworkConf = (cluster: Cluster, defaultNetworkSettings: ClusterDefaultConfig) =>
-  selectClusterNetworkCIDR(cluster) !== defaultNetworkSettings.clusterNetworkCidr ||
-  selectClusterNetworkHostPrefix(cluster) !== defaultNetworkSettings.clusterNetworkHostPrefix ||
-  selectServiceNetworkCIDR(cluster) !== defaultNetworkSettings.serviceNetworkCidr;
+export const isAdvNetworkConf = (
+  cluster: Cluster,
+  defaultNetworkValues: Pick<
+    ClusterDefaultConfig,
+    | 'clusterNetworksIpv4'
+    | 'clusterNetworksDualstack'
+    | 'serviceNetworksIpv4'
+    | 'serviceNetworksDualstack'
+  >,
+) =>
+  !(
+    serviceNetworksEqual(
+      cluster.serviceNetworks || [],
+      defaultNetworkValues.serviceNetworksIpv4 || [],
+    ) &&
+    clusterNetworksEqual(
+      cluster.clusterNetworks || [],
+      defaultNetworkValues.clusterNetworksIpv4 || [],
+    )
+  );
 
-export const canSelectNetworkTypeSDN = (isSNO: boolean, isIPv6 = false) => {
+export const canSelectNetworkTypeSDN = (isSNO: boolean, isIPv6: boolean) => {
   return !(isSNO || isIPv6);
 };
 

package/lib/common/components/clusterWizard/ClusterWizardStepHeader.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Content } from '@patternfly/react-core';
 
-const ClusterWizardStepHeader: React.FC = ({ children }) => (
-  <Content component="h2">{children}</Content>
+const ClusterWizardStepHeader: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <Content data-testid="step-header" component="h2">
+    {children}
+  </Content>
 );
 
 export default ClusterWizardStepHeader;

package/lib/common/components/clusterWizard/clusterDetailsValidation.ts

@@ -7,13 +7,13 @@ import {
 } from '@openshift-assisted/types/assisted-installer-service';
 import { getDefaultCpuArchitecture, OpenshiftVersionOptionType } from '../../types';
 import { TangServer } from '../clusterConfiguration/DiskEncryptionFields/DiskEncryptionValues';
+import { getDefaultOpenShiftVersion } from '../ui';
 import {
   baseDomainValidationSchema,
   dnsNameValidationSchema,
-  getDefaultOpenShiftVersion,
   nameValidationSchema,
   pullSecretValidationSchema,
-} from '../ui';
+} from '../../validationSchemas';
 import { ClusterDetailsValues } from './types';
 
 const emptyTangServers = (): TangServer[] => {
@@ -98,22 +98,32 @@ export const getClusterDetailsValidationSchema = ({
   t: TFunction;
 }) =>
   Yup.lazy((values: { baseDnsDomain: string; isSNODevPreview: boolean }) => {
-    const validateName = () =>
-      nameValidationSchema(t, usedClusterNames, values.baseDnsDomain, validateUniqueName, isOcm);
     if (pullSecretSet) {
       return Yup.object({
-        name: validateName(),
+        name: nameValidationSchema(
+          t,
+          usedClusterNames,
+          values.baseDnsDomain,
+          validateUniqueName,
+          isOcm,
+        ),
         baseDnsDomain: isOcm
-          ? baseDomainValidationSchema.required(t('ai:Required field'))
-          : dnsNameValidationSchema.required(t('ai:Required field')),
+          ? baseDomainValidationSchema(t).required(t('ai:Required field'))
+          : dnsNameValidationSchema(t).required(t('ai:Required field')),
       });
     }
     return Yup.object({
-      name: validateName(),
+      name: nameValidationSchema(
+        t,
+        usedClusterNames,
+        values.baseDnsDomain,
+        validateUniqueName,
+        isOcm,
+      ),
       baseDnsDomain: isOcm
-        ? baseDomainValidationSchema.required(t('ai:Required field'))
-        : dnsNameValidationSchema.required(t('ai:Required field')),
-      pullSecret: pullSecretValidationSchema.required(t('ai:Required field')),
+        ? baseDomainValidationSchema(t).required(t('ai:Required field'))
+        : dnsNameValidationSchema(t).required(t('ai:Required field')),
+      pullSecret: pullSecretValidationSchema(t).required(t('ai:Required field')),
       diskEncryptionTangServers: Yup.array().when('diskEncryptionMode', {
         is: (diskEncryptionMode: DiskEncryption['mode']) => {
           return diskEncryptionMode === 'tang';

package/lib/{ocm/components/clusterConfiguration/networkConfiguration → common/components/clusterWizard/networkingSteps}/AdvancedNetworkFields.tsx

@@ -8,31 +8,19 @@ import {
   Grid,
 } from '@patternfly/react-core';
 import { FieldArray, useFormikContext } from 'formik';
-import {
-  DUAL_STACK,
-  PREFIX_MAX_RESTRICTION,
-  NetworkConfigurationValues,
-  PopoverIcon,
-} from '../../../../common';
-import { OcmInputField } from '../../ui/OcmFormFields';
-
-const IPv4PrefixPopoverText =
-  'For example, if Cluster Network Host Prefix is set to 23, then each node is assigned a /23 subnet out of the given cidr (clusterNetworkCIDR), which allows for 510 (2^(32 - 23) - 2) pod IPs addresses.';
-
-const IPv6PrefixPopoverText =
-  'For example, if Cluster Network Host Prefix is set to 116, then each node is assigned a /116 subnet out of the given cidr (clusterNetworkCIDR), which allows for 4,094 (2^(128 - 116) - 2) pod IPs addresses.';
-
-const ClusterPrefixHelperText =
-  'Defines how big the subnets for each individual node are out of the given CIDR. Must enter a whole number.';
-
-const clusterCidrHelperText =
-  'The block must not overlap with existing physical networks. To access the Pods from an external network, configure load balancers and routers to manage the traffic.';
+import { NetworkConfigurationValues } from '../../../types';
+import { DUAL_STACK, PREFIX_MAX_RESTRICTION } from '../../../config';
+import { PopoverIcon } from '../../ui';
+import { InputField } from '../../ui/formik';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
-const serviceCidrHelperText =
-  'Enter only 1 IP address pool. If you need to access the services from an external network, configure load balancers and routers to manage the traffic.';
+export type AdvancedNetworkFieldsProps = {
+  isDisabled?: boolean;
+};
 
-const AdvancedNetworkFields = () => {
+const AdvancedNetworkFields = ({ isDisabled = false }: AdvancedNetworkFieldsProps) => {
   const { values, errors } = useFormikContext<NetworkConfigurationValues>();
+  const { t } = useTranslation();
 
   const isDualStack = values.stackType === DUAL_STACK;
 
@@ -43,15 +31,36 @@ const AdvancedNetworkFields = () => {
 
   const isSubnetIPv6 = (index: number) => (isDualStack ? !!index : false);
 
+  const IPv4PrefixPopoverText = t(
+    'ai:For example, if Cluster Network Host Prefix is set to 23, then each node is assigned a /23 subnet out of the given cidr (clusterNetworkCIDR), which allows for 510 (2^(32 - 23) - 2) pod IPs addresses.',
+  );
+
+  const IPv6PrefixPopoverText = t(
+    'ai:For example, if Cluster Network Host Prefix is set to 116, then each node is assigned a /116 subnet out of the given cidr (clusterNetworkCIDR), which allows for 4,094 (2^(128 - 116) - 2) pod IPs addresses.',
+  );
+
+  const clusterPrefixHelperText = t(
+    'ai:Defines how big the subnets for each individual node are out of the given CIDR. Must enter a whole number.',
+  );
+
+  const clusterCidrHelperText = t(
+    'ai:The block must not overlap with existing physical networks. To access the Pods from an external network, configure load balancers and routers to manage the traffic.',
+  );
+
+  const serviceCidrHelperText = t(
+    'ai:Enter only 1 IP address pool. If you need to access the services from an external network, configure load balancers and routers to manage the traffic.',
+  );
+
   const clusterNetworkHostPrefixPopoverText = (index: number) => (
     <>
       <p>
-        The subnet prefix length to assign to each individual node.{' '}
+        {t('ai:The subnet prefix length to assign to each individual node.')}{' '}
         {isSubnetIPv6(index) ? IPv6PrefixPopoverText : IPv4PrefixPopoverText}
       </p>
       <p>
-        If you are required to provide access to nodes from an external network, configure load
-        balancers and routers to manage the traffic.
+        {t(
+          'ai:If you are required to provide access to nodes from an external network, configure load balancers and routers to manage the traffic.',
+        )}
       </p>
     </>
   );
@@ -60,32 +69,37 @@ const AdvancedNetworkFields = () => {
     <Grid className="pf-v6-u-ml-lg">
       <FieldArray name="clusterNetworks">
         {() => (
-          <FormGroup fieldId="clusterNetworks" labelInfo={isDualStack && 'Primary'}>
+          <FormGroup fieldId="clusterNetworks" labelInfo={isDualStack && t('ai:Primary')}>
             {values.clusterNetworks?.map((_, index) => {
               return (
                 <Grid key={index} className="pf-v6-u-pb-md">
                   <GridItem className={'network-field-group'}>
-                    <OcmInputField
+                    <InputField
                       name={`clusterNetworks.${index}.cidr`}
                       label={
                         <>
-                          <span>Cluster network CIDR </span>
+                          <span>{t('ai:Cluster network CIDR')} </span>
                           <PopoverIcon
-                            bodyContent={'IP address blocks from which Pod IPs are allocated.'}
+                            bodyContent={t(
+                              'ai:IP address blocks from which Pod IPs are allocated.',
+                            )}
                           />
                         </>
                       }
                       helperText={clusterCidrHelperText}
                       isRequired
-                      labelInfo={isDualStack ? (index === 0 ? 'Primary' : 'Secondary') : ''}
+                      isDisabled={isDisabled}
+                      labelInfo={
+                        isDualStack ? (index === 0 ? t('ai:Primary') : t('ai:Secondary')) : ''
+                      }
                     />
                   </GridItem>
                   <GridItem className={'network-field-group'}>
-                    <OcmInputField
+                    <InputField
                       name={`clusterNetworks.${index}.hostPrefix`}
                       label={
                         <>
-                          <span>Cluster network host prefix </span>
+                          <span>{t('ai:Cluster network host prefix')} </span>
                           <PopoverIcon
                             bodyContent={clusterNetworkHostPrefixPopoverText(index)}
                             minWidth="30rem"
@@ -99,8 +113,9 @@ const AdvancedNetworkFields = () => {
                           ? PREFIX_MAX_RESTRICTION.IPv6
                           : PREFIX_MAX_RESTRICTION.IPv4
                       }
-                      helperText={ClusterPrefixHelperText}
+                      helperText={clusterPrefixHelperText}
                       isRequired
+                      isDisabled={isDisabled}
                     />
                   </GridItem>
                 </Grid>
@@ -116,22 +131,23 @@ const AdvancedNetworkFields = () => {
 
       <FieldArray name="serviceNetworks">
         {() => (
-          <FormGroup fieldId="serviceNetworks" labelInfo={isDualStack && 'Primary'}>
+          <FormGroup fieldId="serviceNetworks" labelInfo={isDualStack && t('ai:Primary')}>
             {values.serviceNetworks?.map((_, index) => (
               <GridItem key={index} className={'network-field-group'}>
-                <OcmInputField
+                <InputField
                   name={`serviceNetworks.${index}.cidr`}
                   label={
                     <>
-                      <span>Service network CIDR </span>
+                      <span>{t('ai:Service network CIDR')} </span>
                       <PopoverIcon
-                        bodyContent={'The IP address pool used for service IP addresses.'}
+                        bodyContent={t('ai:The IP address pool used for service IP addresses.')}
                       />
                     </>
                   }
                   helperText={serviceCidrHelperText}
                   isRequired
-                  labelInfo={isDualStack ? (index === 0 ? 'Primary' : 'Secondary') : ''}
+                  isDisabled={isDisabled}
+                  labelInfo={isDualStack ? (index === 0 ? t('ai:Primary') : t('ai:Secondary')) : ''}
                 />
               </GridItem>
             ))}