@openshift-assisted/ui-lib 2.48.6 → 2.49.0

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

@@ -21,7 +21,7 @@ import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
 import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
 
-export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
+export type HelperTextType = (value: string | null, inModal?: boolean) => JSX.Element | null;
 
 type OpenShiftVersionDropdownProps = {
   name: string;
@@ -30,7 +30,7 @@ type OpenShiftVersionDropdownProps = {
   getHelperText?: HelperTextType;
   showReleasesLink: boolean;
   showOpenshiftVersionModal: () => void;
-  customItems: ItemDropdown;
+  customItem?: OpenshiftVersionOptionType;
 };
 
 const getParsedVersions = (items: ItemDropdown) => {
@@ -49,7 +49,7 @@ export const OpenShiftVersionDropdown = ({
   getHelperText,
   showReleasesLink,
   showOpenshiftVersionModal,
-  customItems,
+  customItem,
 }: OpenShiftVersionDropdownProps) => {
   const [field, , { setValue }] = useField<string>(name);
   const [isOpen, setOpen] = React.useState(false);
@@ -61,9 +61,13 @@ export const OpenShiftVersionDropdown = ({
   const [current, setCurrent] = React.useState<string>();
 
   React.useEffect(() => {
-    const defaultVersion = customOpenshiftSelect
-      ? customOpenshiftSelect
-      : versions.find((item) => item.default);
+    let defaultVersion = versions.find((item) => item.default);
+    if (customOpenshiftSelect && customItem) {
+      defaultVersion = customItem;
+    } else if (customOpenshiftSelect) {
+      defaultVersion = versions.find((item) => item.value === customOpenshiftSelect);
+    }
+
     setCurrent(defaultVersion?.label || '');
     setValue(defaultVersion?.value || '');
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -85,30 +89,17 @@ export const OpenShiftVersionDropdown = ({
     return items;
   });
 
-  const parsedVersionsForCustomItems = getParsedVersions(customItems);
-  let lastCustomY: string | undefined = '';
-  const customDropdownItems = parsedVersionsForCustomItems.parsedVersions.map(({ y, versions }) => {
-    const customItems = versions.map(({ value, label }) => (
-      <DropdownItem key={value} id={value} value={value}>
-        {label}
-      </DropdownItem>
-    ));
-    if (lastCustomY !== null && y !== lastCustomY) {
-      customItems.push(<Divider key={`separator-${y || ''}`} />);
-    }
-    lastCustomY = y;
-    return customItems;
-  });
-
   const dropdownGroup = [
     dropdownItems.length && (
       <DropdownGroup label="Latest releases" key="latest-releases">
         {dropdownItems}
       </DropdownGroup>
     ),
-    customDropdownItems.length && (
+    customItem && (
       <DropdownGroup label="Custom releases" key="custom-releases">
-        {customDropdownItems}
+        <DropdownItem key={customItem.value} id={customItem.value} value={customItem.value}>
+          {customItem.label}
+        </DropdownItem>
       </DropdownGroup>
     ),
     <DropdownGroup key="all-available-versions">

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   Button,
   ButtonVariant,
@@ -27,21 +27,17 @@ export const OpenShiftVersionModal = ({
   getHelperText,
 }: OpenShiftVersionModalProps) => {
   const { setFieldValue } = useFormikContext<ClusterDetailsValues>();
-  const onClose = () => setOpenshiftVersionModalOpen(false);
-  const [customOpenshiftSelect, setCustomOpenshiftSelect] = useState<OpenshiftVersionOptionType>(); // Cambiar el tipo según lo que esperes aquí
 
-  const handleSelect = () => {
-    if (customOpenshiftSelect) {
-      setFieldValue('customOpenshiftSelect', customOpenshiftSelect);
-    }
-    onClose();
+  const onCancel = () => {
+    setFieldValue('customOpenshiftSelect', null);
+    setOpenshiftVersionModalOpen(false);
   };
 
   return (
     <Modal
       id="available-openshift-versions-modal"
       isOpen
-      onClose={onClose}
+      onClose={() => setOpenshiftVersionModalOpen(false)}
       variant={ModalVariant.small}
     >
       <ModalHeader title="Available OpenShift Versions" />
@@ -52,18 +48,18 @@ export const OpenShiftVersionModal = ({
           label={'OpenShift version'}
           isRequired
         >
-          <OpenShiftSelectWithSearch
-            versions={allVersions}
-            getHelperText={getHelperText}
-            setCustomOpenshiftSelect={setCustomOpenshiftSelect}
-          />
+          <OpenShiftSelectWithSearch versions={allVersions} getHelperText={getHelperText} />
         </FormGroup>
       </ModalBody>
       <ModalFooter>
-        <Button key="select-custom-ocp" variant={ButtonVariant.primary} onClick={handleSelect}>
+        <Button
+          key="select-custom-ocp"
+          variant={ButtonVariant.primary}
+          onClick={() => setOpenshiftVersionModalOpen(false)}
+        >
           Select
         </Button>
-        <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onClose}>
+        <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onCancel}>
           Cancel
         </Button>
       </ModalFooter>

package/lib/common/components/ui/formik/InputField.tsx

@@ -32,6 +32,7 @@ const InputField: React.FC<
       description,
       labelInfo,
       showErrorMessage = true,
+      type = 'text',
       ...props
     },
     ref: React.Ref<HTMLInputElement>,
@@ -80,6 +81,7 @@ const InputField: React.FC<
                   onChange && onChange(event);
                 }
               }}
+              type={type}
             />
           </SplitItem>
           <SplitItem>{children}</SplitItem>
@@ -87,18 +89,20 @@ const InputField: React.FC<
         {((showErrorMessage && !isValid) || helperText) && (
           <FormHelperText>
             <HelperText>
-              <HelperTextItem
-                icon={errorMessage && errorMessage.trim() !== '' ? <ExclamationCircleIcon /> : null}
-                variant={errorMessage && errorMessage.trim() !== '' ? 'error' : 'default'}
-                id={
-                  errorMessage && errorMessage.trim() !== ''
-                    ? `${fieldId}-helper-error`
-                    : `${fieldId}-helper`
-                }
-                data-testid={`input-field-${fieldId}-helper-text`}
-              >
-                {showErrorMessage ? errorMessage : helperText}
-              </HelperTextItem>
+              {showErrorMessage && !isValid && (
+                <HelperTextItem
+                  icon={<ExclamationCircleIcon />}
+                  variant={'error'}
+                  id={`${fieldId}-helper-error`}
+                >
+                  {errorMessage}
+                </HelperTextItem>
+              )}
+              {helperText && (
+                <HelperTextItem variant={'default'} id={`${fieldId}-helper`}>
+                  {helperText}
+                </HelperTextItem>
+              )}
             </HelperText>
           </FormHelperText>
         )}

package/lib/common/components/ui/formik/SelectFieldWithSearch.tsx

@@ -0,0 +1,278 @@
+import React from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectOptionProps,
+  MenuToggle,
+  MenuToggleElement,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+  FormGroup,
+  Bullseye,
+  Spinner,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Divider,
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import { useField } from 'formik';
+import { isEqual } from 'lodash-es';
+import { FieldProps } from './types';
+
+const NO_RESULTS = 'no_results';
+
+const createItemId = (val: string) => `select-multi-typeahead-${val.replace(' ', '-')}`;
+
+const SelectFieldWithSearch = ({
+  name,
+  label,
+  isRequired,
+  selectOptions,
+  filterValue,
+  setFilterValue,
+  isMultiSelect = false,
+  isLoading = false,
+  placeholder,
+  helperText,
+}: {
+  selectOptions: (SelectOptionProps & { showDivider?: boolean })[];
+  filterValue: string;
+  setFilterValue: (value: string) => void;
+  isMultiSelect?: boolean;
+  isLoading?: boolean;
+  placeholder?: string;
+  helperText?: React.ReactNode;
+} & FieldProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [{ value }, , { setValue }] = useField<unknown | unknown[]>(name);
+
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
+  const textInputRef = React.useRef<HTMLInputElement>();
+
+  const setActiveAndFocusedItem = (itemIndex: number) => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = selectOptions[itemIndex];
+    setActiveItemId(createItemId(focusedItem.value as string));
+  };
+
+  const resetActiveAndFocusedItem = () => {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
+  };
+
+  const closeMenu = () => {
+    setIsOpen(false);
+    resetActiveAndFocusedItem();
+  };
+
+  const onInputClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else if (!filterValue) {
+      closeMenu();
+    }
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus = 0;
+
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+
+    if (selectOptions.every((option) => option.isDisabled)) {
+      return;
+    }
+
+    if (key === 'ArrowUp') {
+      // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+      if (focusedItemIndex === null || focusedItemIndex === 0) {
+        indexToFocus = selectOptions.length - 1;
+      } else {
+        indexToFocus = focusedItemIndex - 1;
+      }
+
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus--;
+        if (indexToFocus === -1) {
+          indexToFocus = selectOptions.length - 1;
+        }
+      }
+    }
+
+    if (key === 'ArrowDown') {
+      // When no index is set or at the last index, focus to the first, otherwise increment focus index
+      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+        indexToFocus = 0;
+      } else {
+        indexToFocus = focusedItemIndex + 1;
+      }
+
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus++;
+        if (indexToFocus === selectOptions.length) {
+          indexToFocus = 0;
+        }
+      }
+    }
+
+    setActiveAndFocusedItem(indexToFocus);
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
+
+    switch (event.key) {
+      case 'Enter':
+        if (
+          isOpen &&
+          focusedItem &&
+          focusedItem.value !== NO_RESULTS &&
+          !focusedItem.isAriaDisabled
+        ) {
+          onSelect(focusedItem.value as string);
+        }
+
+        if (!isOpen) {
+          setIsOpen(true);
+        }
+
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+    textInputRef?.current?.focus();
+  };
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setFilterValue(value);
+    resetActiveAndFocusedItem();
+  };
+
+  const onSelect = React.useCallback(
+    (val) => {
+      if (val && val !== NO_RESULTS) {
+        if (isMultiSelect && Array.isArray(value)) {
+          setValue(
+            value.some((v) => isEqual(v, val))
+              ? value.filter((v) => !isEqual(v, val))
+              : [...(value as unknown[]), val],
+          );
+        } else {
+          setValue(val);
+          setFilterValue(selectOptions.find((option) => option.value === val)?.children as string);
+        }
+      }
+
+      textInputRef.current?.focus();
+    },
+    [isMultiSelect, setValue, setFilterValue, selectOptions, value],
+  );
+
+  const onClearButtonClick = () => {
+    setFilterValue('');
+    resetActiveAndFocusedItem();
+    textInputRef?.current?.focus();
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      variant="typeahead"
+      aria-label="Multi typeahead checkbox menu toggle"
+      onClick={onToggleClick}
+      innerRef={toggleRef}
+      isExpanded={isOpen}
+      isFullWidth
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          isExpanded={isOpen}
+          value={filterValue}
+          placeholder={placeholder}
+          onClick={onInputClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          innerRef={textInputRef}
+          autoComplete="off"
+          role="combobox"
+          id="typeahead-select-input"
+          aria-controls="typeahead-select-listbox"
+          {...(activeItemId && { 'aria-activedescendant': activeItemId })}
+        />
+        <TextInputGroupUtilities {...(!filterValue ? { style: { display: 'none' } } : {})}>
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
+            <TimesIcon aria-hidden />
+          </Button>
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  return (
+    <FormGroup label={label} isRequired={isRequired}>
+      <Select
+        role="menu"
+        id="typeahead-select"
+        isOpen={isOpen}
+        selected={value}
+        onSelect={(_event, selection) => onSelect(selection as string)}
+        onOpenChange={(isOpen) => {
+          !isOpen && closeMenu();
+        }}
+        toggle={toggle}
+        isScrollable
+      >
+        <SelectList isAriaMultiselectable id="select-typeahead-listbox">
+          {isLoading ? (
+            <SelectOption key={'loader'}>
+              <Bullseye>
+                <Spinner size="lg" />
+              </Bullseye>
+            </SelectOption>
+          ) : (
+            selectOptions.map((option, index) => (
+              <>
+                {option.showDivider && <Divider component="li" key={`divider-${index}`} />}
+                <SelectOption
+                  hasCheckbox={isMultiSelect && !option.isAriaDisabled}
+                  isSelected={
+                    isMultiSelect && Array.isArray(value)
+                      ? value.some((v) => isEqual(v, option.value))
+                      : value === option.value
+                  }
+                  key={`option-${index}`}
+                  isFocused={focusedItemIndex === index}
+                  ref={null}
+                  {...option}
+                />
+              </>
+            ))
+          )}
+        </SelectList>
+      </Select>
+      {helperText && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>{helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </FormGroup>
+  );
+};
+
+export default SelectFieldWithSearch;

package/lib/common/components/ui/formik/index.tsx

@@ -17,6 +17,7 @@ export { default as RemovableField } from './RemovableField';
 export { default as AddButton } from './AddButton';
 export { default as PencilEditField } from './PencilEditField';
 export { default as AlertFormikError } from './AlertFormikError';
+export { default as SelectFieldWithSearch } from './SelectFieldWithSearch';
 
 export * from './utils';
 export * from './PullSecretField';

package/lib/common/components/ui/formik/types.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {
-  TextInputTypes,
   FormSelectOptionProps,
   TooltipProps,
   RadioProps,
   FormSelectProps,
   DropEvent,
+  TextInputProps,
 } from '@patternfly/react-core';
 import { DropdownItemProps } from '@patternfly/react-core';
 import { FieldValidator, FieldHelperProps } from 'formik';
@@ -64,7 +64,7 @@ export interface SwitchFieldProps extends FieldProps {
 }
 
 export interface InputFieldProps extends FieldProps {
-  type?: TextInputTypes;
+  type?: TextInputProps['type'];
   placeholder?: string;
   noDefaultOnChange?: boolean;
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void;

package/lib/common/components/ui/formik/validationSchemas.ts

@@ -58,7 +58,7 @@ export const nameValidationSchema = (
 ) => {
   const clusterNameValidationMessagesList = clusterNameValidationMessages(t);
   return Yup.string()
-    .required('Required')
+    .required(t('ai:Required field'))
     .matches(CLUSTER_NAME_VALID_CHARS_REGEX, {
       message: clusterNameValidationMessagesList.INVALID_VALUE,
       excludeEmptyString: true,
@@ -123,14 +123,12 @@ export const sshPublicKeyListValidationSchema = Yup.string()
       if (!value) {
         return true;
       }
-      return !!trimSshPublicKey(value).match(SSH_PUBLIC_KEY_REGEX);
-
-      // disable until mutliple keys are supported (https://issues.redhat.com/browse/METAL-250)
-      // return (
-      //   trimSshPublicKey(value)
-      //     .split('\n')
-      //     .find((line: string) => !line.match(SSH_PUBLIC_KEY_REGEX)) === undefined
-      // );
+
+      return (
+        trimSshPublicKey(value)
+          .split('\n')
+          .find((line: string) => !line.match(SSH_PUBLIC_KEY_REGEX)) === undefined
+      );
     },
   )
   .test('ssh-public-keys-unique', 'SSH public keys must be unique.', (value?: string) => {

package/lib/common/config/docs_links.ts

@@ -47,12 +47,11 @@ export const getEncryptingDiskDuringInstallationDocsLink = (ocpVersion?: string)
 
 //Networking page
 export const getOpenShiftNetworkingDocsLink = (ocpVersion?: string) => {
-  const variant = isMajorMinorVersionEqualOrGreater(ocpVersion, '4.18')
+  const validOcpVersion = getDocsOpenshiftVersion(ocpVersion);
+  const variant = isMajorMinorVersionEqualOrGreater(validOcpVersion, '4.18')
     ? 'user-provisioned-infrastructure'
     : 'installing-bare-metal';
-  return `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
-    ocpVersion,
-  )}/html/installing_on_bare_metal/${variant}#installation-network-user-infra_installing-bare-metal`;
+  return `https://docs.redhat.com/en/documentation/openshift_container_platform/${validOcpVersion}/html/installing_on_bare_metal/${variant}#installation-network-user-infra_installing-bare-metal`;
 };
 
 export const SSH_GENERATION_DOC_LINK = 'https://www.redhat.com/sysadmin/configure-ssh-keygen';
@@ -148,8 +147,12 @@ export const FEEDBACK_FORM_LINK =
 export const CHANGE_ISO_PASSWORD_FILE_LINK =
   'https://raw.githubusercontent.com/openshift/assisted-service/master/docs/change-iso-password.sh';
 
-export const getCiscoIntersightLink = (downloadIsoUrl: string) =>
-  `https://www.intersight.com/an/workflow/workflow-definitions/execute/AddServersFromISO?_workflow_Version=1&IsoUrl=${downloadIsoUrl}`;
+export const getCiscoIntersightLink = (downloadIsoUrl: string, ciscoUrl?: string) => {
+  if (ciscoUrl) {
+    return `${ciscoUrl}?_workflow_Version=1&IsoUrl=${downloadIsoUrl}`;
+  }
+  return `https://www.intersight.com/an/workflow/workflow-definitions/execute/AddServersFromISO?_workflow_Version=1&IsoUrl=${downloadIsoUrl}`;
+};
 
 export const MTV_LINK =
   'https://docs.redhat.com/en/documentation/migration_toolkit_for_virtualization/2.7/';

package/lib/common/utils.ts

@@ -113,7 +113,7 @@ export const getMajorMinorVersion = (version = '') => {
 };
 
 // Converts an Openshift version to a comparable integer
-const getComparableVersionInt = (version: string): number => {
+export const getComparableVersionInt = (version: string): number => {
   const majorMinorParts = version.split('.').slice(0, 2).map(Number);
   if (majorMinorParts.length < 2 || majorMinorParts.some(isNaN)) {
     // If the version doesn't have the required format, returning 0 makes it be considered

package/lib/ocm/components/Routes.tsx

@@ -15,19 +15,21 @@ import { storeDay1 } from '../store';
 import { useFeatureDetection } from '../hooks/use-feature-detection';
 import './Routes.css';
 
+type UILibRoutesProps = {
+  allEnabledFeatures: FeatureListType;
+  children?: React.ReactNode;
+  history?: HistoryRouterProps['history'];
+  basename?: string;
+  additionalComponents?: React.ReactNode;
+};
+
 export const UILibRoutes = ({
   allEnabledFeatures,
   children,
   history,
   basename,
   additionalComponents,
-}: {
-  allEnabledFeatures: FeatureListType;
-  children?: React.ReactNode;
-  history?: HistoryRouterProps['history'];
-  basename?: string;
-  additionalComponents?: React.ReactNode;
-}) => {
+}: UILibRoutesProps) => {
   useFeatureDetection(allEnabledFeatures);
 
   const routes = (

package/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx

@@ -189,22 +189,23 @@ export const OcmClusterDetailsFormFields = ({
 
       {!isPullSecretSet && <PullSecret isOcm={isOcm} defaultPullSecret={defaultPullSecret} />}
 
-      {clusterExists ? (
-        <StaticTextField
-          name="platform"
-          label="Integrate with external partner platforms"
-          isRequired
-        >
-          {ExternalPlatformLabels[values.platform]}
-        </StaticTextField>
-      ) : (
-        <ExternalPlatformDropdown
-          onChange={handleExternalPartnerIntegrationsChange}
-          cpuArchitecture={values.cpuArchitecture as SupportedCpuArchitecture}
-          featureSupportLevelData={featureSupportLevelData}
-          isSNO={values.controlPlaneCount === 1}
-        />
-      )}
+      {!isSingleClusterFeatureEnabled &&
+        (clusterExists ? (
+          <StaticTextField
+            name="platform"
+            label="Integrate with external partner platforms"
+            isRequired
+          >
+            {ExternalPlatformLabels[values.platform]}
+          </StaticTextField>
+        ) : (
+          <ExternalPlatformDropdown
+            onChange={handleExternalPartnerIntegrationsChange}
+            cpuArchitecture={values.cpuArchitecture as SupportedCpuArchitecture}
+            featureSupportLevelData={featureSupportLevelData}
+            isSNO={values.controlPlaneCount === 1}
+          />
+        ))}
 
       {clusterExists ? (
         <StaticTextField name="controlPlaneCount" label={<ControlPlaneNodesLabel />}>

package/lib/ocm/components/clusterConfiguration/OcmDiscoveryImageConfigForm.tsx

@@ -23,7 +23,7 @@ import {
   AlertFormikError,
   httpProxyValidationSchema,
   noProxyValidationSchema,
-  sshPublicKeyListValidationSchema,
+  sshPublicKeyValidationSchema,
 } from '../../../common/components/ui';
 import {
   DiscoveryImageType,
@@ -56,7 +56,7 @@ export type OcmDiscoveryImageFormValues = OcmImageCreateParams &
 
 const validationSchema = Yup.lazy((values: OcmDiscoveryImageFormValues) =>
   Yup.object<OcmDiscoveryImageFormValues>().shape({
-    sshPublicKey: sshPublicKeyListValidationSchema,
+    sshPublicKey: sshPublicKeyValidationSchema,
     httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
     httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
     noProxy: noProxyValidationSchema,