@openshift-assisted/ui-lib 2.16.3-cim → 2.16.4-cim

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

@@ -2,15 +2,16 @@
 // Once this issues is addressed in PatternFly, this component should be removed.
 
 import {
-  Chip,
-  ChipGroup,
+  Label,
+  LabelGroup,
   PickOptional,
-  ToolbarChip,
+  ToolbarLabel,
   ToolbarContentContext,
   ToolbarContext,
   ToolbarFilterProps,
   ToolbarItem,
 } from '@patternfly/react-core';
+
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
@@ -23,7 +24,7 @@ class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFil
   static contextType = ToolbarContext;
   context!: React.ContextType<typeof ToolbarContext>;
   static defaultProps: PickOptional<ToolbarFilterProps> = {
-    chips: [] as (string | ToolbarChip)[],
+    labels: [] as (string | ToolbarLabel)[],
     showToolbarItem: true,
   };
 
@@ -35,70 +36,78 @@ class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFil
   }
 
   componentDidMount() {
-    const { categoryName, chips } = this.props;
+    const { categoryName, labels } = this.props;
     this.context.updateNumberFilters(
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
         : categoryName.toString(),
-      chips ? chips.length : 0,
+      labels ? labels.length : 0,
     );
     this.setState({ isMounted: true });
   }
 
   componentDidUpdate() {
-    const { categoryName, chips } = this.props;
+    const { categoryName, labels } = this.props;
     this.context.updateNumberFilters(
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
         : categoryName.toString(),
-      chips ? chips.length : 0,
+      labels ? labels.length : 0,
     );
   }
 
   render() {
     const {
       children,
-      chips,
-      deleteChipGroup,
-      deleteChip,
-      chipGroupExpandedText,
-      chipGroupCollapsedText,
+      labels,
+      deleteLabelGroup,
+      deleteLabel,
+      labelGroupExpandedText,
+      labelGroupCollapsedText,
       categoryName,
       showToolbarItem,
       isExpanded,
-      expandableChipContainerRef,
+      expandableLabelContainerRef,
       ...props
     } = this.props;
-    const { isExpanded: managedIsExpanded, chipGroupContentRef } = this.context;
+    const { isExpanded: managedIsExpanded, labelGroupContentRef } = this.context;
     const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
     const categoryKey =
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
         : categoryName.toString();
 
-    const chipGroup =
-      chips !== undefined && chips.length ? (
-        <ToolbarItem variant="chip-group">
-          <ChipGroup
+    const labelGroup =
+      labels !== undefined && labels.length ? (
+        <ToolbarItem variant="label-group">
+          <LabelGroup
             key={categoryKey}
             categoryName={typeof categoryName === 'string' ? categoryName : categoryName.name}
-            isClosable={deleteChipGroup !== undefined}
-            onClick={() => deleteChipGroup && deleteChipGroup(categoryName)}
-            collapsedText={chipGroupCollapsedText}
-            expandedText={chipGroupExpandedText}
+            isClosable={deleteLabelGroup !== undefined}
+            onClick={() => deleteLabelGroup && deleteLabelGroup(categoryName)}
+            collapsedText={labelGroupCollapsedText}
+            expandedText={labelGroupExpandedText}
           >
-            {chips.map((chip) =>
-              typeof chip === 'string' ? (
-                <Chip key={chip} onClick={() => deleteChip && deleteChip(categoryKey, chip)}>
-                  {chip}
-                </Chip>
+            {labels.map((label) =>
+              typeof label === 'string' ? (
+                <Label
+                  variant="outline"
+                  key={label}
+                  onClose={() => deleteLabel && deleteLabel(categoryKey, label)}
+                >
+                  {label}
+                </Label>
               ) : (
-                <Chip key={chip.key} onClick={() => deleteChip && deleteChip(categoryKey, chip)}>
-                  {chip.node}
-                </Chip>
+                <Label
+                  variant="outline"
+                  key={label.key}
+                  onClose={() => deleteLabel && deleteLabel(categoryKey, label)}
+                >
+                  {label.node}
+                </Label>
               ),
             )}
-          </ChipGroup>
+          </LabelGroup>
         </ToolbarItem>
       ) : null;
 
@@ -106,24 +115,24 @@ class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFil
       return (
         <React.Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-          {chipGroupContentRef &&
-            chipGroupContentRef.current !== null &&
-            chipGroupContentRef.current.firstElementChild !== null &&
-            ReactDOM.createPortal(chipGroup, chipGroupContentRef.current.firstElementChild)}
+          {labelGroupContentRef &&
+            labelGroupContentRef.current !== null &&
+            labelGroupContentRef.current.firstElementChild !== null &&
+            ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
         </React.Fragment>
       );
     }
 
     return (
       <ToolbarContentContext.Consumer>
-        {({ chipContainerRef }) => (
+        {({ labelContainerRef }) => (
           <React.Fragment>
             {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-            {chipContainerRef.current &&
-              ReactDOM.createPortal(chipGroup, chipContainerRef.current as Element)}
-            {expandableChipContainerRef &&
-              expandableChipContainerRef.current &&
-              ReactDOM.createPortal(chipGroup, expandableChipContainerRef.current)}
+            {labelContainerRef.current &&
+              ReactDOM.createPortal(labelGroup, labelContainerRef.current as Element)}
+            {expandableLabelContainerRef &&
+              expandableLabelContainerRef.current &&
+              ReactDOM.createPortal(labelGroup, expandableLabelContainerRef.current)}
           </React.Fragment>
         )}
       </ToolbarContentContext.Consumer>

package/lib/common/components/ui/DetailList.css

@@ -3,10 +3,10 @@
 }
 
 .detail-list dd {
-  margin-bottom: var(--pf-v5-global--spacer--sm);
+  margin-bottom: var(--pf-v6-global--spacer--sm);
 }
 
 .detail-list ul ul,
 .detail-list ul li {
-  margin-top: var(--pf-v5-c-content--dt--sm--MarginTop);
+  margin-top: var(--pf-v6-c-content--dt--sm--MarginTop);
 }

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

@@ -1,13 +1,5 @@
 import React, { ReactChild, ReactNode } from 'react';
-import {
-  TextContent,
-  TextList,
-  TextListVariants,
-  TextListItem,
-  TextListItemVariants,
-  Text,
-  TextProps,
-} from '@patternfly/react-core';
+import { Content, ContentVariants, ContentProps } from '@patternfly/react-core';
 import { WithTestID } from '../../types';
 
 import './DetailList.css';
@@ -16,7 +8,7 @@ import { RenderIf } from './RenderIf';
 export type DetailListProps = {
   children: ReactChild | (ReactChild | undefined)[];
   title?: string;
-  titleComponent?: TextProps['component'];
+  titleComponent?: ContentProps['component'];
 };
 
 export type DetailItemList = {
@@ -37,12 +29,12 @@ export const DetailList: React.FC<DetailListProps> = ({
   title,
   titleComponent = 'h2',
 }) => (
-  <TextContent>
-    {title && <Text component={titleComponent}>{title}</Text>}
-    <TextList component={TextListVariants.dl} className="detail-list">
+  <Content>
+    {title && <Content component={titleComponent}>{title}</Content>}
+    <Content component={ContentVariants.dl} className="detail-list">
       {children}
-    </TextList>
-  </TextContent>
+    </Content>
+  </Content>
 );
 
 const hasDetailItemList = (data: DetailItemProps['value']): data is DetailItemList => {
@@ -60,42 +52,42 @@ export const DetailItem: React.FC<DetailItemProps & WithTestID> = ({
   isHidden ? null : (
     <>
       <RenderIf condition={title !== undefined}>
-        <TextListItem
-          component={TextListItemVariants.dt}
+        <Content
+          component={ContentVariants.dt}
           id={idPrefix ? `${idPrefix}-title` : undefined}
           data-testid={testId ? `${testId}-title` : undefined}
         >
           {title}
-        </TextListItem>
+        </Content>
       </RenderIf>
-      <TextListItem
-        component={TextListItemVariants.dd}
+      <Content
+        component={ContentVariants.dd}
         id={idPrefix ? `${idPrefix}-value` : undefined}
         data-testid={testId ? `${testId}-value` : undefined}
         className={classNameValue}
       >
         {hasDetailItemList(value) ? (
-          <TextList component={TextListVariants.dl}>
+          <Content component={ContentVariants.dl}>
             {value.map((item, idx) => [
-              <TextListItem
+              <Content
                 data-testid={testId ? `${testId}-title-${idx}` : undefined}
                 key={item.title}
-                component={TextListItemVariants.dt}
+                component={ContentVariants.dt}
               >
                 {item.title}
-              </TextListItem>,
-              <TextListItem
+              </Content>,
+              <Content
                 data-testid={testId ? `${testId}-value-${idx}` : undefined}
                 key={`dd-${item.title}`}
-                component={TextListItemVariants.dd}
+                component={ContentVariants.dd}
               >
                 {item.value}
-              </TextListItem>,
+              </Content>,
             ])}
-          </TextList>
+          </Content>
         ) : (
           value
         )}
-      </TextListItem>
+      </Content>
     </>
   );

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

@@ -1,5 +1,5 @@
 import React, { ReactNode, MouseEvent } from 'react';
-import { Text } from '@patternfly/react-core';
+import { Content } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 interface ExternalLinkProps {
@@ -16,9 +16,15 @@ const ExternalLink: React.FC<ExternalLinkProps> = ({ href, onClick, children })
   };
 
   return (
-    <Text component="a" href={href} onClick={handleClick} target="_blank" rel="noopener noreferrer">
+    <Content
+      component="a"
+      href={href}
+      onClick={handleClick}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {children ? children : href} <ExternalLinkAltIcon color="rgb(0, 123, 186)" />
-    </Text>
+    </Content>
   );
 };
 export default ExternalLink;

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

@@ -4,6 +4,6 @@ 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-v5-c-form" />;
+const GridGap: React.FC = (props) => <div {...props} className="pf-v6-c-form" />;
 
 export default GridGap;

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

@@ -1,12 +1,10 @@
 import React from 'react';
-import { EmptyState, EmptyStateBody, EmptyStateIcon, Title } from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, Title } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { global_disabled_color_100 as iconColor } from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
 
 const NoPermissionsError = () => (
-  <EmptyState id="not-found">
+  <EmptyState id="not-found" icon={ExclamationTriangleIcon}>
     <EmptyStateBody>
-      <EmptyStateIcon icon={ExclamationTriangleIcon} color={iconColor.value} />
       <Title headingLevel="h2">Access permissions needed</Title>
       <EmptyStateBody>
         To create a cluster using the Assisted Installer, ask your organization administrator to

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

@@ -1,24 +1,36 @@
-import React from 'react';
-import { SelectOptionProps } from '@patternfly/react-core';
-import { useField } from 'formik';
+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 { OpenshiftVersionOptionType } from '../../types';
 import { HelperTextType } from './OpenShiftVersionDropdown';
-import { useTranslation } from '../../hooks';
-import { SelectFieldWithSearch } from './formik';
-import { ClusterDetailsValues } from '../clusterWizard';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 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) => ({
@@ -31,11 +43,22 @@ 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();
 
-  const helperText = getHelperText && getHelperText(value, true);
+  React.useEffect(() => {
+    if (textInputRef.current) {
+      textInputRef.current.maxLength = 30;
+    }
+  }, []);
 
   React.useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
@@ -51,43 +74,221 @@ export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
         newSelectOptions = [
           {
             isDisabled: true,
-            children: t('ai:No results found for {{filter}}', { filter: filterValue }),
-            value: 'no_results',
+            children: `No results found for "${filterValue}"`,
+            value: 'no results',
           },
         ];
       }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isOpen) {
+        setIsOpen(true);
+      }
     }
 
-    const selectOptionsWithDividers = newSelectOptions.map((option, index) => {
-      const match = (option.value as string).match(/\d+\.(\d+)\.\d+/);
-      const y = match ? match[1] : null;
+    setSelectOptions(newSelectOptions);
+    setActiveItem(null);
+    setFocusedItemIndex(null);
+  }, [filterValue, initialSelectOptions, isOpen]);
 
-      const previousY =
-        index > 0
-          ? ((newSelectOptions[index - 1].value as string).match(/\d+\.(\d+)\.\d+/) || [])[1]
-          : null;
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
 
-      return {
-        ...option,
-        showDivider: previousY !== null && y !== previousY,
-      };
-    });
+  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);
+  };
 
-    setSelectOptions(selectOptionsWithDividers);
-  }, [filterValue, initialSelectOptions, t]);
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setInputValue(value);
+    setFilterValue(value);
+  };
 
-  return (
-    <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.',
-        )
+  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));
+        }
+
+        setIsOpen((prevIsOpen) => !prevIsOpen);
+        setFocusedItemIndex(null);
+        setActiveItem(null);
+
+        break;
+      case 'Tab':
+      case 'Escape':
+        setIsOpen(false);
+        setActiveItem(null);
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
+  };
+
+  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);
+
+  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>
+    </>
   );
 };