@openshift-assisted/ui-lib 2.17.4-cim → 2.18.1-cim

package/lib/common/components/clusterWizard/networkingSteps/StackTypeControlGroup.tsx

@@ -3,17 +3,17 @@ import { ButtonVariant, FormGroup, Split, SplitItem, Tooltip } from '@patternfly
 import { useFormikContext } from 'formik';
 import { Address4, Address6 } from 'ip-address';
 
-import { HostSubnets, NetworkConfigurationValues } from '../../../types';
-import { getFieldId } from '../../ui';
 import {
-  DUAL_STACK,
-  IPV4_STACK,
+  HostSubnets,
+  NetworkConfigurationValues,
   NETWORK_TYPE_OVN,
   NETWORK_TYPE_SDN,
-  NO_SUBNET_SET,
-} from '../../../config';
+} from '../../../types';
+import { getFieldId } from '../../ui';
+import { DUAL_STACK, NO_SUBNET_SET, SINGLE_STACK } from '../../../config';
 import { RadioField } from '../../ui/formik';
 import { ConfirmationModal, PopoverIcon } from '../../ui';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
 import { reorderNetworksByCurrentPrimary } from './reorderNetworks';
 import {
   Cluster,
@@ -37,6 +37,7 @@ export type StackTypeControlGroupProps = {
   hostSubnets: HostSubnets;
   defaultNetworkValues: StackTypeDefaultNetworkValues;
   isViewerMode?: boolean;
+  allowSingleStackIPv6?: boolean;
 };
 
 const hasDualStackConfigurationChanged = (
@@ -61,17 +62,21 @@ export const StackTypeControlGroup = ({
   hostSubnets,
   defaultNetworkValues,
   isViewerMode = false,
+  allowSingleStackIPv6 = false,
 }: StackTypeControlGroupProps) => {
+  const { t } = useTranslation();
   const { setFieldValue, values, validateForm } = useFormikContext<NetworkConfigurationValues>();
   const [openConfirmModal, setConfirmModal] = React.useState(false);
 
+  const singleStackLabel = allowSingleStackIPv6 ? t('ai:Single stack') : t('ai:IPv4');
+
   const IPv6Subnets = hostSubnets.filter((subnet) => Address6.isValid(subnet.subnet));
   const cidrIPv6 = IPv6Subnets.length >= 1 ? IPv6Subnets[0].subnet : NO_SUBNET_SET;
   const shouldSetSingleStack =
     !isViewerMode && !isDualStackSelectable && values.stackType === DUAL_STACK;
 
   const setSingleStack = React.useCallback(() => {
-    setFieldValue('stackType', IPV4_STACK);
+    setFieldValue('stackType', SINGLE_STACK);
 
     // Determine whether the first machine network is IPv4
     const firstNetwork = values.machineNetworks?.[0];
@@ -95,7 +100,8 @@ export const StackTypeControlGroup = ({
         }
       }
     }
-    // Ensure single-stack inputs are IPv4 after switching from dual-stack
+
+    // Set cluster/service to IPv4 defaults when switching to single-stack
     if (values.clusterNetworks && values.clusterNetworks.length >= 1) {
       const defaultCluster =
         defaultNetworkValues.clusterNetworksIpv4 && defaultNetworkValues.clusterNetworksIpv4[0];
@@ -197,28 +203,27 @@ export const StackTypeControlGroup = ({
       }
     }
     if (values.clusterNetworks && values.clusterNetworks?.length < 2) {
-      setFieldValue(
-        'clusterNetworks',
-        [
-          ...values.clusterNetworks,
-          defaultNetworkValues.clusterNetworksDualstack?.length
-            ? defaultNetworkValues.clusterNetworksDualstack[1]
-            : { cidr: '', hostPrefix: '', clusterId: clusterId },
-        ],
-        false,
-      );
+      const firstClusterCidr = values.clusterNetworks[0]?.cidr;
+      const isPrimaryIPv6 = firstClusterCidr && Address6.isValid(firstClusterCidr);
+      const missingFamilyNetworkDefault =
+        defaultNetworkValues.clusterNetworksDualstack?.[isPrimaryIPv6 ? 0 : 1];
+      const secondClusterNetwork = missingFamilyNetworkDefault ?? {
+        cidr: '',
+        hostPrefix: '',
+        clusterId: clusterId,
+      };
+      setFieldValue('clusterNetworks', [...values.clusterNetworks, secondClusterNetwork], false);
     }
     if (values.serviceNetworks && values.serviceNetworks?.length < 2) {
-      setFieldValue(
-        'serviceNetworks',
-        [
-          ...values.serviceNetworks,
-          defaultNetworkValues.serviceNetworksDualstack?.length
-            ? defaultNetworkValues.serviceNetworksDualstack[1]
-            : { cidr: '', clusterId: clusterId },
-        ],
-        false,
-      );
+      const firstServiceCidr = values.serviceNetworks[0]?.cidr;
+      const isPrimaryIPv6 = firstServiceCidr && Address6.isValid(firstServiceCidr);
+      const missingFamilyNetworkDefault =
+        defaultNetworkValues.serviceNetworksDualstack?.[isPrimaryIPv6 ? 0 : 1];
+      const secondServiceNetwork = missingFamilyNetworkDefault ?? {
+        cidr: '',
+        clusterId: clusterId,
+      };
+      setFieldValue('serviceNetworks', [...values.serviceNetworks, secondServiceNetwork], false);
     }
     // Initialize VIPs for dual-stack
     if (values.apiVips && values.apiVips.length < 2) {
@@ -291,14 +296,18 @@ export const StackTypeControlGroup = ({
           <SplitItem>
             <RadioField
               name={'stackType'}
-              value={IPV4_STACK}
+              value={SINGLE_STACK}
               isDisabled={!isDualStackSelectable || isViewerMode}
-              label="IPv4&nbsp;"
+              label={`${singleStackLabel}\u00A0`}
             />
           </SplitItem>
           <SplitItem>
             <PopoverIcon
-              bodyContent="Select this when your hosts are using only IPv4."
+              bodyContent={
+                allowSingleStackIPv6
+                  ? t('ai:Select a single address family (IPv4 or IPv6) for your machine network.')
+                  : t('ai:Select this when your hosts are using only IPv4.')
+              }
               buttonStyle={{ top: '-4px' }}
             />
           </SplitItem>

package/lib/common/components/clusterWizard/networkingSteps/VirtualIPControlGroup.tsx

@@ -9,8 +9,8 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { NetworkConfigurationValues, HostSubnets } from '../../../types';
-import { NETWORK_TYPE_SDN, DUAL_STACK } from '../../../config';
+import { NetworkConfigurationValues, HostSubnets, NETWORK_TYPE_SDN } from '../../../types';
+import { DUAL_STACK } from '../../../config';
 import { selectMachineNetworkCIDR, selectApiVip, selectIngressVip } from '../../../selectors';
 import { getVipValidationsById } from '../../clusterConfiguration';
 import { FormikStaticField, PopoverIcon } from '../../ui';

package/lib/common/components/clusters/PullSecret.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
+import { Alert, AlertVariant, Checkbox } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 import { ClusterCreateParams } from '@openshift-assisted/types/assisted-installer-service';
 import { PullSecretField, PullSecretInfo } from '../ui';
@@ -8,42 +8,54 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 export type PullSecretProps = {
   defaultPullSecret?: string;
   isOcm?: boolean;
+  isPullSecretSet?: boolean;
+  isSingleClusterFeatureEnabled?: boolean;
 };
 
-const PullSecret: React.FC<PullSecretProps> = ({ defaultPullSecret, isOcm = false }) => {
+const PullSecret: React.FC<PullSecretProps> = ({
+  defaultPullSecret,
+  isOcm = false,
+  isPullSecretSet = false,
+  isSingleClusterFeatureEnabled = false,
+}) => {
   // Fetched pull secret will never change - see LoadingState in NewCluster
   const [isExpanded, setExpanded] = React.useState(!defaultPullSecret);
   const { setFieldValue } = useFormikContext<ClusterCreateParams>();
   const { t } = useTranslation();
-  if (isOcm) {
-    const onCheckboxChange = () => {
-      if (isExpanded) {
-        // about to collapse, reset to original value
-        setFieldValue('pullSecret', defaultPullSecret);
-      }
-      setExpanded(!isExpanded);
-    };
+  const onCheckboxChange = () => {
+    if (isExpanded) {
+      // about to collapse, reset to original value
+      setFieldValue('pullSecret', defaultPullSecret);
+    }
+    setExpanded(!isExpanded);
+  };
 
-    return (
-      <>
-        <Checkbox
-          id="checkbox-pull-secret"
-          className="pf-v6-u-display-inline-flex"
-          aria-label={t('ai:edit pull secret')}
-          isChecked={isExpanded}
-          onChange={onCheckboxChange}
-          label={
-            <>
-              {t('ai:Edit pull secret')} <PullSecretInfo isOcm={isOcm} />
-            </>
-          }
-        />
-        {isExpanded && <PullSecretField isOcm={isOcm} />}
-      </>
-    );
+  if (!(isOcm || isSingleClusterFeatureEnabled)) {
+    return <PullSecretField isOcm={isOcm} />;
   }
 
-  return <PullSecretField isOcm={isOcm} />;
+  return (
+    <>
+      {isPullSecretSet && (
+        <Alert variant={AlertVariant.success} isInline title={t('ai:Pull secret configured')}>
+          {t('ai:A pull secret has already been set for this cluster. You can edit it below.')}
+        </Alert>
+      )}
+      <Checkbox
+        id="checkbox-pull-secret"
+        className="pf-v6-u-display-inline-flex"
+        aria-label={t('ai:edit pull secret')}
+        isChecked={isExpanded}
+        onChange={onCheckboxChange}
+        label={
+          <>
+            {t('ai:Edit pull secret')} <PullSecretInfo isOcm={isOcm} />
+          </>
+        }
+      />
+      {isExpanded && <PullSecretField isOcm={isOcm} />}
+    </>
+  );
 };
 
 export default PullSecret;

package/lib/common/components/hosts/AITable.tsx

@@ -226,7 +226,7 @@ const AITable = <R extends any>({
   }, [hostRows, columns, children]);
 
   const onCollapse = React.useCallback(
-    (_event, rowKey: number) => {
+    (_event: unknown, rowKey: number) => {
       const id = hostRows[rowKey].id as string;
       if (id) {
         setOpenRows(Object.assign({}, openRows, { [id]: !openRows[id] }));

package/lib/common/components/hosts/AdditionalNTPSourcesDialog.tsx

@@ -40,7 +40,7 @@ const AdditionalNTPSourcesForm = ({
 
   const getValidationSchema = (t: TFunction) =>
     Yup.object().shape({
-      additionalNtpSource: ntpSourceValidationSchema(t).required(t('ai:Required field')),
+      additionalNtpSource: ntpSourceValidationSchema(t, false),
     });
 
   const { t } = useTranslation();

package/lib/common/components/hosts/HostPropertyValidationPopover.tsx

@@ -13,7 +13,11 @@ type ValidationPopoverProps = {
   actions?: React.ReactNode[];
 };
 
-const ValidationPopover: React.FC<ValidationPopoverProps> = ({ validation, actions, children }) => {
+const ValidationPopover: React.FC<React.PropsWithChildren<ValidationPopoverProps>> = ({
+  validation,
+  actions,
+  children,
+}) => {
   const { t } = useTranslation();
   const failedValidationHint = hostValidationFailureHints(t)[validation.id];
 
@@ -45,7 +49,9 @@ type HostPropertyValidationPopoverProps = {
   showSuccess?: boolean;
 };
 
-const HostPropertyValidationPopover: React.FC<HostPropertyValidationPopoverProps> = ({
+const HostPropertyValidationPopover: React.FC<
+  React.PropsWithChildren<HostPropertyValidationPopoverProps>
+> = ({
   validation,
   failureActions,
   pendingActions,

package/lib/common/components/hosts/HostStatus.tsx

@@ -197,7 +197,9 @@ type WithHostStatusPopoverProps = AdditionNtpSourcePropsType &
     openshiftVersion?: string;
   };
 
-const WithHostStatusPopover: React.FC<WithHostStatusPopoverProps> = (props) => (
+const WithHostStatusPopover: React.FC<React.PropsWithChildren<WithHostStatusPopoverProps>> = (
+  props,
+) => (
   <Popover
     headerContent={<div>{props.title}</div>}
     bodyContent={
@@ -242,7 +244,7 @@ const getHostStatusIcon = (
   } else return icon;
 };
 
-const HostStatus: React.FC<HostStatusProps> = ({
+const HostStatus: React.FC<React.PropsWithChildren<HostStatusProps>> = ({
   host,
   validationsInfo,
   status,

package/lib/common/components/hosts/HostsTableDetailContext.tsx

@@ -12,12 +12,9 @@ const HostsTableDetailContext = React.createContext<HostsTableDetailContextValue
   undefined,
 );
 
-const HostsTableDetailContextProvider: React.FC<HostsTableDetailContextValue> = ({
-  canEditDisks,
-  onDiskRole,
-  updateDiskSkipFormatting,
-  children,
-}) => {
+const HostsTableDetailContextProvider: React.FC<
+  React.PropsWithChildren<HostsTableDetailContextValue>
+> = ({ canEditDisks, onDiskRole, updateDiskSkipFormatting, children }) => {
   const context = {
     canEditDisks,
     onDiskRole,

package/lib/common/components/hosts/MassChangeHostnameModal.tsx

@@ -55,8 +55,8 @@ const getNewHostnames = (
     const [changeEnabled, reason] = canChangeHostname(h);
     const hostnameRes = {
       newHostname: changeEnabled ? templateToHostname(index, values) : undefined,
+      oldHostname: getHostname(h),
       reason: changeEnabled ? undefined : reason,
-      oldHostname: h.requestedHostname,
     };
     if (changeEnabled) {
       index++;
@@ -176,6 +176,7 @@ const MassChangeHostnameForm = ({
 
   const newHostnames = getNewHostnames(values, selectedHosts, canChangeHostname);
   const { t } = useTranslation();
+
   return (
     <Form onSubmit={handleSubmit}>
       <ModalBody>
@@ -246,7 +247,9 @@ const MassChangeHostnameForm = ({
                         </Button>
                       </Popover>
                     ) : (
-                      host.newHostname || t('ai:New hostname will appear here...')
+                      <Content>
+                        {host.newHostname || t('ai:New hostname will appear here...')}
+                      </Content>
                     )}
                   </div>
                 ))}

package/lib/common/components/hosts/TableToolbar.tsx

@@ -35,7 +35,7 @@ type TableToolbarProps = {
   clearAllFilters?: ToolbarProps['clearAllFilters'];
 };
 
-const TableToolbar: React.FC<TableToolbarProps> = ({
+const TableToolbar: React.FC<React.PropsWithChildren<TableToolbarProps>> = ({
   itemIDs,
   selectedIDs,
   setSelectedIDs,

package/lib/common/components/storage/DisksTable.tsx

@@ -46,7 +46,9 @@ const diskColumns = (t: TFunction, showFormat: boolean) =>
       title: (
         <>
           WWN{' '}
-          <PopoverIcon bodyContent={t('ai:World Wide Name (WWN) is a unique disk identifier.')} />
+          <PopoverIcon
+            bodyContent={t<string>('ai:World Wide Name (WWN) is a unique disk identifier.')}
+          />
         </>
       ),
     },

package/lib/common/components/ui/CustomToolbarFilter.tsx

@@ -115,10 +115,12 @@ class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFil
       return (
         <React.Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-          {labelGroupContentRef &&
-            labelGroupContentRef.current !== null &&
-            labelGroupContentRef.current.firstElementChild !== null &&
-            ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
+          {labelGroupContentRef?.current?.firstElementChild
+            ? (ReactDOM.createPortal(
+                labelGroup,
+                labelGroupContentRef.current.firstElementChild,
+              ) as React.ReactElement)
+            : null}
         </React.Fragment>
       );
     }

package/lib/common/components/ui/GridGap.tsx

@@ -4,6 +4,8 @@ import React from 'react';
  * This component allows to maintain grid gap behaviour of PF Form by wrapping
  * FormGroup components which are inside of Grid
  */
-const GridGap: React.FC = (props) => <div {...props} className="pf-v6-c-form" />;
+const GridGap: React.FC<React.PropsWithChildren> = (props) => (
+  <div {...props} className="pf-v6-c-form" />
+);
 
 export default GridGap;

package/lib/common/components/ui/OpenShiftSelectWithSearch.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { SelectOptionProps } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { OpenshiftVersionOptionType } from '../../types';
 import { HelperTextType } from './OpenShiftVersionDropdown';
 import { useTranslation } from '../../hooks';
 import { SelectFieldWithSearch } from './formik';
 import { ClusterDetailsValues } from '../clusterWizard';
+import { getVersionLabel } from './utils';
 
 type OpenshiftSelectWithSearchProps = {
   versions: OpenshiftVersionOptionType[];
@@ -19,62 +19,41 @@ export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
   const { t } = useTranslation();
   const [{ value }] =
     useField<ClusterDetailsValues['customOpenshiftSelect']>('customOpenshiftSelect');
-  const initialSelectOptions = React.useMemo(
-    () =>
-      versions.map((version) => ({
-        children:
-          version.supportLevel === 'beta'
-            ? version.label + ' - ' + 'Developer preview release'
-            : version.label,
-        value: version.value,
-      })),
-    [versions],
-  );
 
   const [filterValue, setFilterValue] = React.useState<string>('');
-  const [selectOptions, setSelectOptions] =
-    React.useState<SelectOptionProps[]>(initialSelectOptions);
-
-  const helperText = getHelperText && getHelperText(value, true);
-
-  React.useEffect(() => {
-    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
-    // Filter menu items based on the text input value when one exists
-    if (filterValue) {
-      newSelectOptions = initialSelectOptions.filter((menuItem) =>
-        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase()),
+  const selectOptions = React.useMemo(() => {
+    const options = versions
+      .map((version) => ({
+        children: getVersionLabel(version, t),
+        value: version.value,
+      }))
+      .filter((v) =>
+        filterValue ? String(v.children).toLowerCase().includes(filterValue.toLowerCase()) : true,
       );
 
-      // When no options are found after filtering, display 'No results found'
-      if (!newSelectOptions.length) {
-        newSelectOptions = [
-          {
-            isDisabled: true,
-            children: t('ai:No results found for {{filter}}', { filter: filterValue }),
-            value: 'no_results',
-          },
-        ];
-      }
+    if (!options.length) {
+      return [
+        {
+          isDisabled: true,
+          children: t('ai:No results found for {{filter}}', { filter: filterValue }),
+          value: 'no_results',
+        },
+      ];
     }
-
-    const selectOptionsWithDividers = newSelectOptions.map((option, index) => {
-      const match = (option.value as string).match(/\d+\.(\d+)\.\d+/);
+    return options.map((option, index) => {
+      const match = option.value.match(/\d+\.(\d+)\.\d+/);
       const y = match ? match[1] : null;
 
       const previousY =
-        index > 0
-          ? ((newSelectOptions[index - 1].value as string).match(/\d+\.(\d+)\.\d+/) || [])[1]
-          : null;
+        index > 0 ? (options[index - 1].value.match(/\d+\.(\d+)\.\d+/) || [])[1] : null;
 
       return {
         ...option,
         showDivider: previousY !== null && y !== previousY,
       };
     });
-
-    setSelectOptions(selectOptionsWithDividers);
-  }, [filterValue, initialSelectOptions, t]);
+  }, [filterValue, versions, t]);
 
   return (
     <SelectFieldWithSearch
@@ -83,7 +62,7 @@ export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
       setFilterValue={setFilterValue}
       name={'customOpenshiftSelect'}
       helperText={
-        helperText ??
+        getHelperText?.(value, true) ??
         t(
           'ai:Select an OpenShift version from the list or use the type ahead to narrow down the list.',
         )