@openshift-assisted/ui-lib 2.48.6 → 2.49.0

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/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/clusterWizard/clusterDetailsValidation.ts

@@ -104,16 +104,16 @@ export const getClusterDetailsValidationSchema = ({
       return Yup.object({
         name: validateName(),
         baseDnsDomain: isOcm
-          ? baseDomainValidationSchema.required('Required')
-          : dnsNameValidationSchema.required('Required'),
+          ? baseDomainValidationSchema.required(t('ai:Required field'))
+          : dnsNameValidationSchema.required(t('ai:Required field')),
       });
     }
     return Yup.object({
       name: validateName(),
       baseDnsDomain: isOcm
-        ? baseDomainValidationSchema.required('Required')
-        : dnsNameValidationSchema.required('Required'),
-      pullSecret: pullSecretValidationSchema.required('Required.'),
+        ? baseDomainValidationSchema.required(t('ai:Required field'))
+        : dnsNameValidationSchema.required(t('ai:Required field')),
+      pullSecret: pullSecretValidationSchema.required(t('ai:Required field')),
       diskEncryptionTangServers: Yup.array().when('diskEncryptionMode', {
         is: (diskEncryptionMode: DiskEncryption['mode']) => {
           return diskEncryptionMode === 'tang';
@@ -125,8 +125,8 @@ 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')),
             }),
           ),
       }),

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

@@ -15,7 +15,6 @@ import {
 } from '../../types/hosts';
 import { TangServer } from '../clusterConfiguration/DiskEncryptionFields/DiskEncryptionValues';
 import { WizardStepsValidationMap } from './validationsInfoUtils';
-import { OpenshiftVersionOptionType } from '../../types';
 
 export type ClusterDetailsValues = {
   name: string;
@@ -31,7 +30,7 @@ export type ClusterDetailsValues = {
   diskEncryption: DiskEncryption;
   cpuArchitecture: string;
   platform: PlatformType;
-  customOpenshiftSelect: OpenshiftVersionOptionType | null;
+  customOpenshiftSelect: string | null;
   userManagedNetworking: boolean;
   controlPlaneCount: number;
 };

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

@@ -8,7 +8,6 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/e
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { LinkIcon } from '@patternfly/react-icons/dist/js/icons/link-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { PlusIcon } from '@patternfly/react-icons/dist/js/icons/plus-icon';
 import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
 import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
@@ -95,7 +94,7 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'known-unbound',
       title: t('ai:Available'),
       category: 'Discovery related',
-      icon: <PlusIcon color={blueColor.value} />,
+      icon: <ConnectedIcon color={blueColor.value} />,
       details: t(
         'ai:This host meets the minimum hardware and networking requirements and can be included in the cluster.',
       ),

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
 import { Address4, Address6 } from 'ip-address';
 import type {
   Cluster,
@@ -20,6 +21,7 @@ import HostStatus from './HostStatus';
 import RoleCell from './RoleCell';
 import {
   areOnlySoftValidationsFailing,
+  getHostLabels,
   getHostname,
   getHostRole,
   getHostStatus,
@@ -279,6 +281,24 @@ export const disksColumn = (t: TFunction): TableRow<Host> => ({
   },
 });
 
+export const gpusColumn = (t: TFunction): TableRow<Host> => ({
+  header: {
+    title: t('ai:GPUs'),
+    props: {
+      id: 'col-header-gpus',
+    },
+    sort: true,
+  },
+  cell: (host) => {
+    const { gpus } = getInventory(host);
+    return {
+      title: <>{gpus?.length ?? '--'}</>,
+      props: { 'data-testid': 'host-gpus' },
+      sortableValue: gpus?.length ?? 0,
+    };
+  },
+});
+
 export const countColumn = (cluster: Cluster): TableRow<Host> => ({
   header: { title: <HostsCount cluster={cluster} inParenthesis /> },
 });
@@ -362,6 +382,34 @@ export const macAddressColumn = (cluster: Cluster): TableRow<Host> => ({
   },
 });
 
+export const labelsColumn = (t: TFunction): TableRow<Host> => ({
+  header: {
+    title: t('ai:Labels'),
+    props: {
+      id: 'col-header-labels',
+    },
+    sort: false,
+  },
+  cell: (host) => {
+    const labels = getHostLabels(host);
+    return {
+      title:
+        Object.entries(labels).length > 0 ? (
+          <LabelGroup>
+            {Object.entries(labels).map(([key, value], index) => (
+              <Label key={`${host.id}-host-label-${index}`} isCompact>
+                {key} = {value}
+              </Label>
+            ))}
+          </LabelGroup>
+        ) : (
+          '--'
+        ),
+      props: { 'data-testid': 'host-labels' },
+    };
+  },
+});
+
 const ActionTitle: React.FC<{ disabled: boolean; description?: string; title: string }> = ({
   title,
   description,

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

@@ -205,6 +205,10 @@ export const getInventory = (host: Host) => {
   return stringToJSON<Inventory>(inventoryString) || {};
 };
 
+export const getHostLabels = (host: Host) => {
+  return host.nodeLabels ? (JSON.parse(host.nodeLabels) as { [key: string]: string }) : {};
+};
+
 export const filterByHostname = (hosts: Host[], hostnameFilter: string | undefined) => {
   if (!hostnameFilter) {
     return { hosts, sorted: false };

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

@@ -1,36 +1,24 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import {
-  Select,
-  SelectOption,
-  SelectList,
-  SelectOptionProps,
-  MenuToggle,
-  MenuToggleElement,
-  TextInputGroup,
-  TextInputGroupMain,
-  TextInputGroupUtilities,
-  Button,
-  Divider,
-  FormHelperText,
-  HelperText,
-  HelperTextItem,
-} from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+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/use-translation-wrapper';
+import { useTranslation } from '../../hooks';
+import { SelectFieldWithSearch } from './formik';
+import { ClusterDetailsValues } from '../clusterWizard';
 
 type OpenshiftSelectWithSearchProps = {
   versions: OpenshiftVersionOptionType[];
   getHelperText?: HelperTextType;
-  setCustomOpenshiftSelect: Dispatch<SetStateAction<OpenshiftVersionOptionType | undefined>>;
 };
 
 export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectWithSearchProps> = ({
   versions,
   getHelperText,
-  setCustomOpenshiftSelect,
 }: OpenshiftSelectWithSearchProps) => {
+  const { t } = useTranslation();
+  const [{ value }] =
+    useField<ClusterDetailsValues['customOpenshiftSelect']>('customOpenshiftSelect');
   const initialSelectOptions = React.useMemo(
     () =>
       versions.map((version) => ({
@@ -43,22 +31,11 @@ export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
     [versions],
   );
 
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('');
-  const [inputValue, setInputValue] = React.useState<string>('');
   const [filterValue, setFilterValue] = React.useState<string>('');
   const [selectOptions, setSelectOptions] =
     React.useState<SelectOptionProps[]>(initialSelectOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItem, setActiveItem] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>();
-  const { t } = useTranslation();
 
-  React.useEffect(() => {
-    if (textInputRef.current) {
-      textInputRef.current.maxLength = 30;
-    }
-  }, []);
+  const helperText = getHelperText && getHelperText(value, true);
 
   React.useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
@@ -74,221 +51,43 @@ export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
         newSelectOptions = [
           {
             isDisabled: true,
-            children: `No results found for "${filterValue}"`,
-            value: 'no results',
+            children: t('ai:No results found for {{filter}}', { filter: filterValue }),
+            value: 'no_results',
           },
         ];
       }
-
-      // Open the menu when the input value changes and the new value is not empty
-      if (!isOpen) {
-        setIsOpen(true);
-      }
-    }
-
-    setSelectOptions(newSelectOptions);
-    setActiveItem(null);
-    setFocusedItemIndex(null);
-  }, [filterValue, initialSelectOptions, isOpen]);
-
-  const onToggleClick = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined,
-  ) => {
-    // Check if the specific value exists in newSelectOptions
-    const foundItem = selectOptions.find((menuItem) => String(menuItem.value) === String(value));
-    const newLabel = foundItem?.children;
-    if (value && value !== 'no results') {
-      setInputValue(newLabel as string);
-      setFilterValue('');
-      setSelected(value as string);
-      const filteredVersions = versions.filter((version) => version.value === value);
-      setCustomOpenshiftSelect({
-        label:
-          filteredVersions[0].supportLevel === 'beta'
-            ? filteredVersions[0].label + ' - ' + t('ai:Developer preview release')
-            : filteredVersions[0].label,
-        value: filteredVersions[0].value,
-        version: filteredVersions[0].version,
-        default: filteredVersions[0].default,
-        supportLevel: filteredVersions[0].supportLevel,
-      });
-    }
-    setIsOpen(false);
-    setFocusedItemIndex(null);
-    setActiveItem(null);
-  };
-
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setInputValue(value);
-    setFilterValue(value);
-  };
-
-  const handleMenuArrowKeys = (key: string) => {
-    let indexToFocus;
-
-    if (isOpen) {
-      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;
-        }
-      }
-
-      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;
-        }
-      }
-
-      setFocusedItemIndex(indexToFocus ?? 0);
-      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus ?? 0];
-      setActiveItem(`select-typeahead-${(focusedItem.value as string).replace(' ', '-')}`);
     }
-  };
-
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = selectOptions.filter((option) => !option.isDisabled);
-    const [firstMenuItem] = enabledMenuItems;
-    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
 
-    switch (event.key) {
-      // Select the first available option
-      case 'Enter':
-        if (isOpen && focusedItem.value !== 'no results') {
-          setInputValue(String(focusedItem.children));
-          setFilterValue('');
-          setSelected(String(focusedItem.children));
-        }
+    const selectOptionsWithDividers = newSelectOptions.map((option, index) => {
+      const match = (option.value as string).match(/\d+\.(\d+)\.\d+/);
+      const y = match ? match[1] : null;
 
-        setIsOpen((prevIsOpen) => !prevIsOpen);
-        setFocusedItemIndex(null);
-        setActiveItem(null);
+      const previousY =
+        index > 0
+          ? ((newSelectOptions[index - 1].value as string).match(/\d+\.(\d+)\.\d+/) || [])[1]
+          : null;
 
-        break;
-      case 'Tab':
-      case 'Escape':
-        setIsOpen(false);
-        setActiveItem(null);
-        break;
-      case 'ArrowUp':
-      case 'ArrowDown':
-        event.preventDefault();
-        handleMenuArrowKeys(event.key);
-        break;
-    }
-  };
+      return {
+        ...option,
+        showDivider: previousY !== null && y !== previousY,
+      };
+    });
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle
-      ref={toggleRef}
-      variant="typeahead"
-      onClick={onToggleClick}
-      isExpanded={isOpen}
-      isFullWidth
-      data-testid="openshift-version-dropdown-toggle"
-    >
-      <TextInputGroup isPlain>
-        <TextInputGroupMain
-          value={inputValue}
-          onClick={onToggleClick}
-          onChange={onTextInputChange}
-          onKeyDown={onInputKeyDown}
-          id="typeahead-select-input"
-          autoComplete="off"
-          innerRef={textInputRef}
-          placeholder=""
-          {...(activeItem && { 'aria-activedescendant': activeItem })}
-          role="combobox"
-          isExpanded={isOpen}
-          aria-controls="select-typeahead-listbox"
-        />
-
-        <TextInputGroupUtilities>
-          {!!inputValue && (
-            <Button
-              icon={<TimesIcon aria-hidden />}
-              variant="plain"
-              onClick={() => {
-                setSelected('');
-                setInputValue('');
-                setFilterValue('');
-                textInputRef?.current?.focus();
-              }}
-              aria-label="Clear input value"
-            />
-          )}
-        </TextInputGroupUtilities>
-      </TextInputGroup>
-    </MenuToggle>
-  );
-
-  const helperText = getHelperText && getHelperText(selected, true);
+    setSelectOptions(selectOptionsWithDividers);
+  }, [filterValue, initialSelectOptions, t]);
 
   return (
-    <>
-      <Select
-        id="customOpenshiftSelect"
-        isOpen={isOpen}
-        selected={selected}
-        onSelect={onSelect}
-        onOpenChange={() => {
-          setIsOpen(false);
-        }}
-        toggle={toggle}
-        isScrollable
-      >
-        <SelectList id="select-typeahead-listbox">
-          {selectOptions.reverse().map((option, index) => {
-            const match = (option.value as string).match(/\d+\.(\d+)\.\d+/);
-            const y = match ? match[1] : null;
-
-            const previousY =
-              index > 0
-                ? ((selectOptions[index - 1].value as string).match(/\d+\.(\d+)\.\d+/) || [])[1]
-                : null;
-
-            const showDivider = previousY !== null && y !== previousY;
-            return (
-              <React.Fragment key={index}>
-                {showDivider && (
-                  <Divider
-                    component="li"
-                    id={`divider-${option.value as string}`}
-                    key={`divider-${option.value as string}`}
-                  />
-                )}
-                <SelectOption
-                  key={option.value as string}
-                  isFocused={focusedItemIndex === index}
-                  className={option.className}
-                  onClick={() => setSelected(option.value as string)}
-                  id={`select-typeahead-${(option.value as string).replace(' ', '-')}`}
-                  {...option}
-                  ref={null}
-                />
-              </React.Fragment>
-            );
-          })}
-        </SelectList>
-      </Select>
-      <FormHelperText>
-        <HelperText>
-          <HelperTextItem variant="default" data-testid="openshift-select-with-search-helper-text">
-            {helperText ??
-              'Select an OpenShift version from the list or use the type ahead to narrow down the list.'}
-          </HelperTextItem>
-        </HelperText>
-      </FormHelperText>
-    </>
+    <SelectFieldWithSearch
+      selectOptions={selectOptions}
+      filterValue={filterValue}
+      setFilterValue={setFilterValue}
+      name={'customOpenshiftSelect'}
+      helperText={
+        helperText ??
+        t(
+          'ai:Select an OpenShift version from the list or use the type ahead to narrow down the list.',
+        )
+      }
+    />
   );
 };