@openshift-assisted/ui-lib 2.48.6 → 2.50.0

package/lib/common/components/AlertsContextProvider.tsx

@@ -18,7 +18,7 @@ export type AlertsContextType = {
 
 const AlertsContext = React.createContext<AlertsContextType | null>(null);
 
-export const AlertsContextProvider: React.FC = ({ children }) => {
+export const AlertsContextProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
   const [alerts, dispatch] = React.useReducer(alertsReducer, []);
   const context = {
     alerts,

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

@@ -10,9 +10,10 @@ import {
 } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { getFieldId, StaticField } from '../..';
-import { useField } from 'formik';
 import toNumber from 'lodash-es/toNumber';
 import OcmTNADisclaimer from './OcmTNADisclaimer';
+import { ClusterDetailsValues } from '../clusterWizard';
+import { useField, useFormikContext } from 'formik';
 
 const isItemEnabled = (value: number, allowHighlyAvailable?: boolean, allowTNA?: boolean) => {
   switch (value) {
@@ -44,6 +45,7 @@ const ControlPlaneNodesDropdown = ({
 }) => {
   const { t } = useTranslation();
   const [{ name, value: selectedValue }, , { setValue }] = useField<number>('controlPlaneCount');
+  const { setFieldValue } = useFormikContext<ClusterDetailsValues>();
   const [controlPlanelOpen, setControlPlanelOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
 
@@ -85,6 +87,13 @@ const ControlPlaneNodesDropdown = ({
     e?: React.MouseEvent<Element, MouseEvent>,
     value?: string | number,
   ) => {
+    if (value === 1) {
+      setFieldValue('userManagedNetworking', true);
+      setFieldValue('platform', 'none');
+    } else {
+      setFieldValue('userManagedNetworking', false);
+      setFieldValue('platform', 'baremetal');
+    }
     setValue(toNumber(value));
     setControlPlanelOpen(false);
   };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as Yup from 'yup';
+import { TFunction } from 'i18next';
 import {
   Button,
   Form,
@@ -17,12 +18,12 @@ import {
   ImageType,
   Proxy,
 } from '@openshift-assisted/types/assisted-installer-service';
+import { AlertFormikError } from '../../../common/components/ui';
 import {
-  AlertFormikError,
   httpProxyValidationSchema,
   noProxyValidationSchema,
   sshPublicKeyValidationSchema,
-} from '../../../common/components/ui';
+} from '../../validationSchemas';
 import { ProxyFieldsType, StatusErrorType } from '../../types';
 import ProxyFields from './ProxyFields';
 import UploadSSH from './UploadSSH';
@@ -55,13 +56,13 @@ export const StaticIPInfo = ({ docVersion }: { docVersion?: string }) => {
 
 export type DiscoveryImageFormValues = ImageCreateParams & ProxyFieldsType;
 
-const getValidationSchema = (allowEmpty: boolean) =>
+const getValidationSchema = (allowEmpty: boolean, t: TFunction) =>
   Yup.lazy((values: DiscoveryImageFormValues) =>
     Yup.object<DiscoveryImageFormValues>().shape({
-      sshPublicKey: sshPublicKeyValidationSchema,
-      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', allowEmpty }),
-      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', allowEmpty }), // share the schema, httpS is currently not supported
-      noProxy: noProxyValidationSchema,
+      sshPublicKey: sshPublicKeyValidationSchema(t),
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', allowEmpty, t }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', allowEmpty, t }), // share the schema, httpS is currently not supported
+      noProxy: noProxyValidationSchema(t),
     }),
   );
 
@@ -108,7 +109,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
     <Formik
       initialValues={initialValues}
       initialStatus={{ error: null }}
-      validationSchema={getValidationSchema(!!allowEmpty)}
+      validationSchema={getValidationSchema(!!allowEmpty, t)}
       onSubmit={handleSubmit}
     >
       {({ submitForm, isSubmitting, status }) => {

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

@@ -32,7 +32,7 @@ const DiscoveryInstructions = ({
           <Trans
             t={t}
             count={+isSNO}
-            components={{ bold: <strong /> }}
+            components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
             i18nKey="ai:Keep the Discovery ISO media connected to the device throughout the installation process and set each host to boot <bold>only one time</bold> from this device. "
           />
         </Content>

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/DownloadIso.tsx

@@ -22,6 +22,7 @@ export type DownloadISOProps = {
   isSNO?: boolean;
   fileName?: string;
   downloadUrl: string;
+  ciscoUrl?: string;
   onClose: () => void;
   onReset?: () => void;
   docVersion?: string;
@@ -37,13 +38,14 @@ const DownloadIso = ({
   isSNO = false,
   docVersion,
   updateTagsForCiscoIntersight,
+  ciscoUrl,
 }: DownloadISOProps) => {
   const wgetCommand = `wget -O ${fileName} '${downloadUrl || ''}'`;
   const { t } = useTranslation();
 
   const openCiscoIntersightHostsLink = (downloadUrl: string) => {
     updateTagsForCiscoIntersight ? updateTagsForCiscoIntersight() : '';
-    window.open(getCiscoIntersightLink(downloadUrl), '_blank', 'noopener');
+    window.open(getCiscoIntersightLink(downloadUrl, ciscoUrl), '_blank', 'noopener');
   };
 
   return (

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

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { StaticField } from '../ui';
+import { useTranslation } from '../../hooks';
+import { TFunction } from 'i18next';
+import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
+import { Dropdown, DropdownItem, FormGroup, MenuToggle } from '@patternfly/react-core';
+import { useField, useFormikContext } from 'formik';
+import { ClusterDetailsValues } from '../clusterWizard';
+
+export const getPlatforms = (t: TFunction): { [key in PlatformType]: string } => ({
+  none: t('ai:No platform integration'),
+  baremetal: t('ai:No platform integration'),
+  nutanix: t('ai:Nutanix'),
+  vsphere: t('ai:vSphere'),
+  external: t('ai:External cloud provider'),
+});
+
+export const ExternalPlatformsDropdown = ({ isDisabled }: { isDisabled: boolean }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [{ value }, , { setValue }] = useField<PlatformType>('platform');
+  const { setFieldValue, values } = useFormikContext<ClusterDetailsValues>();
+  const { t } = useTranslation();
+
+  const platforms = getPlatforms(t);
+  const isSNO = values.controlPlaneCount === 1;
+  const options = Object.entries(platforms)
+    .filter(([key]) => {
+      if (isSNO) {
+        return key === 'none' || key === 'vsphere' || key === 'external';
+      } else {
+        return key !== 'none';
+      }
+    })
+    .map(([platform, label]) => (
+      <DropdownItem
+        key={platform}
+        id={platform}
+        value={platform}
+        selected={platform === value}
+        onClick={(e: React.MouseEvent) => e.preventDefault()}
+      >
+        {label}
+      </DropdownItem>
+    ));
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined,
+  ) => {
+    setValue(value as PlatformType);
+    setIsOpen(false);
+
+    if (value === 'external' || values.controlPlaneCount === 1) {
+      setFieldValue('userManagedNetworking', true);
+    } else {
+      setFieldValue('userManagedNetworking', false);
+    }
+  };
+
+  return isDisabled ? (
+    <StaticField
+      name={'platform'}
+      label={t('ai:Integrate with external partner platforms')}
+      isRequired
+    >
+      {platforms[value]}
+    </StaticField>
+  ) : (
+    <FormGroup
+      isInline
+      label={t('ai:Integrate with external partner platforms')}
+      isRequired
+      name={'platform'}
+    >
+      <Dropdown
+        isOpen={isOpen}
+        toggle={(toggleRef) => (
+          <MenuToggle ref={toggleRef} className="pf-v5-u-w-100" onClick={() => setIsOpen(!isOpen)}>
+            {value ? platforms[value] : t('ai:Integrate with external partner platforms')}
+          </MenuToggle>
+        )}
+        onSelect={onSelect}
+      >
+        {options}
+      </Dropdown>
+    </FormGroup>
+  );
+};

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/SecurityFields.tsx

@@ -11,14 +11,19 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 export const SshPublicKeyHelperText: React.FC<{
   fieldId?: string;
-}> = ({ fieldId = 'sshPublicKey' }) => {
+  allowMultipleKeys?: boolean;
+}> = ({ fieldId = 'sshPublicKey', allowMultipleKeys = false }) => {
   const { t } = useTranslation();
   return (
     <HelperText id={fieldId}>
-      <HelperTextItem data-testid="ssh-public-key-helper-text">
-        {t(
-          'ai:Paste the content of a public ssh key you want to use to connect to the hosts into this field.',
-        )}{' '}
+      <HelperTextItem>
+        {allowMultipleKeys
+          ? t(
+              'ai:Paste the content of public SSH keys you want to use to connect to the hosts into this field. Multiple keys can be separated by newlines.',
+            )
+          : t(
+              'ai:Paste the content of a public SSH key you want to use to connect to the hosts into this field.',
+            )}{' '}
         <ExternalLink href={SSH_GENERATION_DOC_LINK}>{t('ai:Learn more')}</ExternalLink>
       </HelperTextItem>
     </HelperText>
@@ -29,12 +34,14 @@ interface SecurityFieldsFieldsProps {
   clusterSshKey: Cluster['sshPublicKey'];
   imageSshKey?: Cluster['imageInfo']['sshPublicKey'];
   isDisabled?: boolean;
+  allowMultipleKeys?: boolean;
 }
 
 const SecurityFields = ({
   clusterSshKey,
   imageSshKey,
   isDisabled = false,
+  allowMultipleKeys = false,
 }: SecurityFieldsFieldsProps) => {
   //shareSshKey shouldn't response to changes. imageSshKey stays the same, there's a loading state while it's requested
   //clusterSshKey updating causes the textarea to disappear when the user clears it to edit it
@@ -77,7 +84,7 @@ const SecurityFields = ({
         <RenderIf condition={!shareSshKey}>
           <TextAreaField
             name="sshPublicKey"
-            helperText={<SshPublicKeyHelperText />}
+            helperText={<SshPublicKeyHelperText allowMultipleKeys={allowMultipleKeys} />}
             onBlur={handleSshKeyBlur}
             isDisabled={isDisabled}
           />

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

@@ -9,3 +9,4 @@ export { default as SecurityFields } from './SecurityFields';
 export * from './utils';
 export * from './DiscoveryTroubleshootingModal';
 export * from './DiscoveryImageConfigForm';
+export * from './ExternalPlatformsDropdown';

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,15 +7,28 @@ 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,
+  isValidFullClusterAddress,
   nameValidationSchema,
   pullSecretValidationSchema,
-} from '../ui';
+} from '../../validationSchemas';
 import { ClusterDetailsValues } from './types';
 
+const fullClusterAddressTest = (t: TFunction) => ({
+  name: 'full-cluster-address',
+  message: t(
+    'ai:The full cluster address [Cluster name].[Base domain] must be a valid DNS name (e.g. mycluster.example.com).',
+  ),
+  test: (values: { name?: string; baseDnsDomain?: string } | undefined) => {
+    const name = values?.name?.trim() ?? '';
+    const base = values?.baseDnsDomain?.trim() ?? '';
+    if (!name || !base) return true;
+    return isValidFullClusterAddress(`${name}.${base}`);
+  },
+});
+
 const emptyTangServers = (): TangServer[] => {
   return [
     {
@@ -98,22 +111,29 @@ export const getClusterDetailsValidationSchema = ({
   t: TFunction;
 }) =>
   Yup.lazy((values: { baseDnsDomain: string; isSNODevPreview: boolean }) => {
-    const validateName = () =>
-      nameValidationSchema(t, usedClusterNames, values.baseDnsDomain, validateUniqueName, isOcm);
+    const fullAddressTest = fullClusterAddressTest(t);
     if (pullSecretSet) {
       return Yup.object({
-        name: validateName(),
-        baseDnsDomain: isOcm
-          ? baseDomainValidationSchema.required('Required')
-          : dnsNameValidationSchema.required('Required'),
-      });
+        name: nameValidationSchema(
+          t,
+          usedClusterNames,
+          values.baseDnsDomain,
+          validateUniqueName,
+          isOcm,
+        ),
+        baseDnsDomain: baseDomainValidationSchema(t).required(t('ai:Required field')),
+      }).test(fullAddressTest.name, fullAddressTest.message, fullAddressTest.test);
     }
     return Yup.object({
-      name: validateName(),
-      baseDnsDomain: isOcm
-        ? baseDomainValidationSchema.required('Required')
-        : dnsNameValidationSchema.required('Required'),
-      pullSecret: pullSecretValidationSchema.required('Required.'),
+      name: nameValidationSchema(
+        t,
+        usedClusterNames,
+        values.baseDnsDomain,
+        validateUniqueName,
+        isOcm,
+      ),
+      baseDnsDomain: baseDomainValidationSchema(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';
@@ -125,10 +145,10 @@ export const getClusterDetailsValidationSchema = ({
                 .url(
                   t('ai:Tang Server URL must be a valid URL starting with "http://" or "https://"'),
                 )
-                .required(t('ai:Required.')),
-              thumbprint: Yup.string().required(t('ai:Required.')),
+                .required(t('ai:Required field')),
+              thumbprint: Yup.string().required(t('ai:Required field')),
             }),
           ),
       }),
-    });
+    }).test(fullAddressTest.name, fullAddressTest.message, fullAddressTest.test);
   });