@openshift-assisted/ui-lib 2.14.5-cim → 2.15.0-cim

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

@@ -5,15 +5,13 @@ import {
   FormHelperText,
   HelperTextItem,
   Button,
-} from '@patternfly/react-core';
-import {
   DropdownItem,
-  DropdownToggle,
+  MenuToggle,
+  MenuToggleElement,
   Dropdown,
   DropdownGroup,
-  DropdownSeparator,
-} from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+  Divider,
+} from '@patternfly/react-core';
 
 import { OpenshiftVersionOptionType } from '../../types';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
@@ -22,7 +20,6 @@ import { getFieldId } from './formik';
 import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
 import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
-import './OpenShiftVersionDropdown.css';
 
 export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
 
@@ -77,13 +74,13 @@ export const OpenShiftVersionDropdown = ({
   let lastY: string | undefined = '';
   const dropdownItems = parsedVersionsForItems.parsedVersions.map(({ y, versions }) => {
     const items = versions.map(({ value, label }) => (
-      <DropdownItem key={value} id={value}>
+      <DropdownItem key={value} id={value} value={value}>
         {label}
       </DropdownItem>
     ));
 
     if (lastY !== null && y !== lastY) {
-      items.push(<DropdownSeparator key={`separator-${y || ''}`} />);
+      items.push(<Divider key={`separator-${y || ''}`} />);
     }
     lastY = y;
     return items;
@@ -93,28 +90,24 @@ export const OpenShiftVersionDropdown = ({
   let lastCustomY: string | undefined = '';
   const customDropdownItems = parsedVersionsForCustomItems.parsedVersions.map(({ y, versions }) => {
     const customItems = versions.map(({ value, label }) => (
-      <DropdownItem key={value} id={value}>
+      <DropdownItem key={value} id={value} value={value}>
         {label}
       </DropdownItem>
     ));
-
     if (lastCustomY !== null && y !== lastCustomY) {
-      customItems.push(<DropdownSeparator key={`separator-${y || ''}`} />);
+      customItems.push(<Divider key={`separator-${y || ''}`} />);
     }
     lastCustomY = y;
-
     return customItems;
   });
 
   const dropdownGroup = [
-    <DropdownGroup label="Latest releases" key="latest-releases">
-      {dropdownItems}
-    </DropdownGroup>,
-    <DropdownGroup
-      label="Custom releases"
-      key="custom-releases"
-      hidden={customDropdownItems.length === 0}
-    >
+    dropdownItems.length && (
+      <DropdownGroup label="Latest releases" key="latest-releases">
+        {dropdownItems}
+      </DropdownGroup>
+    ),
+    <DropdownGroup label="Custom releases" key="custom-releases">
       {customDropdownItems}
     </DropdownGroup>,
     <DropdownGroup key="all-available-versions">
@@ -132,9 +125,9 @@ export const OpenShiftVersionDropdown = ({
   ];
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const newLabel = event?.currentTarget.innerText;
-      const newValue = event?.currentTarget.id || '';
+    (event?: React.MouseEvent<Element, MouseEvent>, val?: string | number) => {
+      const newLabel = event?.currentTarget.textContent;
+      const newValue = (val as string) || '';
       if (newLabel && newValue !== 'all-versions') {
         setCurrent(newLabel);
         setValue(newValue);
@@ -144,19 +137,18 @@ export const OpenShiftVersionDropdown = ({
     [setValue],
   );
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(!isDisabled && val)}
-        toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
-        isText
-        className="pf-v5-u-w-100"
-      >
-        {current}
-      </DropdownToggle>
-    ),
-    [setOpen, current, isDisabled],
+  const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      className="pf-v5-u-w-100"
+      ref={toggleRef}
+      isFullWidth
+      onClick={() => setOpen(!isOpen)}
+      isDisabled={isDisabled}
+      isExpanded={isOpen}
+    >
+      {current}
+    </MenuToggle>
   );
 
   const helperText = getHelperText && getHelperText(field.value);
@@ -170,14 +162,16 @@ export const OpenShiftVersionDropdown = ({
     >
       <Dropdown
         {...field}
-        name={name}
-        id={fieldId}
-        onSelect={onSelect}
-        dropdownItems={dropdownGroup}
-        toggle={toggle}
+        id={`${fieldId}-dropdown`}
+        shouldFocusToggleOnSelect
         isOpen={isOpen}
-        className="pf-v5-u-w-100"
-      />
+        onSelect={onSelect}
+        onOpenChange={() => setOpen(!isOpen)}
+        toggle={dropdownToggle}
+      >
+        {dropdownGroup}
+      </Dropdown>
+
       {helperText && (
         <FormHelperText>
           <HelperText>

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import {
   DropdownItem,
-  DropdownToggle,
+  MenuToggle,
+  MenuToggleElement,
   Dropdown,
-  DropdownProps,
-} from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+  DropdownPopperProps,
+} from '@patternfly/react-core';
 import { HostRole } from '../../../common/types/hosts';
 import './SimpleDropdown.css';
 
@@ -16,7 +16,7 @@ type SimpleDropdownProps = {
   setValue: (value?: string) => void;
   isDisabled: boolean;
   idPrefix?: string;
-  menuAppendTo?: DropdownProps['menuAppendTo'];
+  menuAppendTo?: DropdownPopperProps['appendTo'];
 };
 
 export const SimpleDropdown = ({
@@ -36,37 +36,38 @@ export const SimpleDropdown = ({
   ));
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+    (event?: React.MouseEvent<Element, MouseEvent>) => {
       setValue(event?.currentTarget.id);
       setOpen(false);
     },
     [setValue, setOpen],
   );
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(!isDisabled && val)}
-        toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
-        id={idPrefix ? `${idPrefix}-dropdown-toggle-items` : undefined}
-        className="role-dropdown"
-      >
-        {current || defaultValue}
-      </DropdownToggle>
-    ),
-    [setOpen, current, isDisabled, defaultValue, idPrefix],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={idPrefix ? `${idPrefix}-dropdown-toggle-items` : undefined}
+      className="role-dropdown"
+      ref={toggleRef}
+      variant="plainText"
+      onClick={() => setOpen(!isOpen)}
+      isDisabled={isDisabled}
+      isExpanded={isOpen}
+    >
+      {current || defaultValue}
+    </MenuToggle>
   );
 
   return (
     <Dropdown
       onSelect={onSelect}
-      dropdownItems={dropdownItems}
+      onOpenChange={() => setOpen(!isOpen)}
       toggle={toggle}
       isOpen={isOpen}
       isPlain
       id={idPrefix ? `${idPrefix}-dropdown-toggle` : undefined}
-      menuAppendTo={menuAppendTo}
-    />
+      popperProps={{ appendTo: menuAppendTo }}
+    >
+      {dropdownItems}
+    </Dropdown>
   );
 };

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

@@ -20,11 +20,13 @@ export type WizardFooterGenericProps = {
   onNext?: () => void;
   onBack?: () => void;
   onCancel?: () => void;
+  onReset?: () => void;
   isNextDisabled?: boolean;
   isBackDisabled?: boolean;
   isSubmitting?: boolean;
   submittingText?: string;
   nextButtonText?: string;
+  isNextButtonLoading?: boolean;
 };
 
 type WizardFooterProps = WizardFooterGenericProps & {
@@ -41,6 +43,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
   onNext,
   onBack,
   onCancel,
+  onReset,
   isNextDisabled,
   isBackDisabled,
   leftExtraActions,
@@ -49,6 +52,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
   nextButtonText,
   cluster,
   onFetchEvents,
+  isNextButtonLoading,
 }) => {
   const { t } = useTranslation();
   submittingText = submittingText || t('ai:Saving changes...');
@@ -66,6 +70,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
                 name="next"
                 onClick={onNext}
                 isDisabled={isNextDisabled}
+                isLoading={isNextButtonLoading}
               >
                 {nextButtonText || t('ai:Next')}
               </Button>
@@ -83,16 +88,30 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
               </Button>
             </ActionListItem>
           )}
-          <ActionListItem>
-            <Button
-              variant={ButtonVariant.link}
-              name="cancel"
-              onClick={onCancel}
-              isDisabled={false}
-            >
-              {t('ai:Cancel')}
-            </Button>
-          </ActionListItem>
+          {onCancel && (
+            <ActionListItem>
+              <Button
+                variant={ButtonVariant.link}
+                name="cancel"
+                onClick={onCancel}
+                isDisabled={false}
+              >
+                {t('ai:Cancel')}
+              </Button>
+            </ActionListItem>
+          )}
+          {onReset && cluster && (
+            <ActionListItem>
+              <Button
+                variant={ButtonVariant.link}
+                name="reset"
+                onClick={onReset}
+                isDisabled={isSubmitting}
+              >
+                {t('ai:Reset')}
+              </Button>
+            </ActionListItem>
+          )}
           {isSubmitting && (
             <ActionListItem>
               <Text component={TextVariants.small}>

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

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core/deprecated';
+import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import UiIcon from './UiIcon';
 

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

@@ -1,19 +1,27 @@
 import React from 'react';
 import { useField } from 'formik';
-import Fuse from 'fuse.js';
-import { FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
 import {
-  Select,
-  SelectOption,
-  SelectOptionObject,
-  SelectOptionProps,
-  SelectProps,
-  SelectVariant,
-} from '@patternfly/react-core/deprecated';
-import { MultiSelectFieldProps, MultiSelectOption } from './types';
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+  LabelGroup,
+  Label,
+} from '@patternfly/react-core';
+import { MultiSelectFieldProps } from './types';
 import { getFieldId } from './utils';
-import { useTranslation } from '../../../hooks/use-translation-wrapper';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
 // Field value is a string[]
 const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
@@ -29,21 +37,24 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
   ...props
 }) => {
   const [isOpen, setOpen] = React.useState(false);
+  const [textValue, setTextValue] = React.useState('');
   const [field, { touched, error }, { setValue }] = useField<string[]>(props.name);
   const fieldId = getFieldId(props.name, 'multiinput', idPostfix);
   const isValid = !(touched && error);
   const errorMessage = !isValid ? error : '';
   const hText = getHelperText ? getHelperText(field.value?.join(',') || '') : helperText;
+  const { t } = useTranslation();
 
   const onToggle = (isOpen: boolean) => setOpen(isOpen);
   const onClearSelection = () => {
     // onChange && onChange(event);
     setValue([]);
+    setTextValue('');
     onChange && onChange([]);
     setOpen(false);
   };
 
-  const onSelect: SelectProps['onSelect'] = (event, selection) => {
+  const onSelect = (selection: string) => {
     // already selected
     const selected = field.value;
 
@@ -53,7 +64,7 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
         selection as {
           /* TypeScript hack, debug hint: created as part of "selections" array below */ value?: string;
         }
-      ).value || (selection as string);
+      ).value || selection;
 
     let newValue: string[];
     if (selected.includes(selectionValue)) {
@@ -65,61 +76,90 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
     onChange && onChange(newValue);
   };
 
-  // list of already selected options
-  const selections: (SelectOptionObject | string)[] = field.value.map((value: string) => {
-    const option = options.find((opt) => opt.value === value);
-    return option
-      ? {
-          value: option.value,
-          toString: () => option.displayName,
-          compareTo: (selectOption: { value: string }) => selectOption.value === value,
-        }
-      : value;
+  const deleteChip = (chip: string) => {
+    const newValue = field.value.filter((val) => val !== chip);
+    setValue(newValue);
+    setTextValue('');
+    onChange && onChange(newValue);
+  };
+
+  const filteredOptions = options.filter((option) => {
+    const value = option.value as string;
+    return (
+      option.displayName.toLowerCase().includes(textValue.toLowerCase()) &&
+      !(field.value || []).includes(value.toString())
+    );
   });
 
-  const children = options
-    .filter((option) => !(field.value || []).includes(option.value.toString()))
-    .map((option) => (
-      <SelectOption key={option.id} id={option.id} value={option.value}>
+  const children = filteredOptions.map((option) => {
+    const value = option.value as string;
+    return (
+      <DropdownItem key={option.id} id={option.id} value={value}>
         {option.displayName}
-      </SelectOption>
-    ));
-
-  const fuse = new Fuse(options, {
-    ignoreLocation: true,
-    keys: ['displayName'],
+      </DropdownItem>
+    );
   });
-  const { t } = useTranslation();
 
   return (
     <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
-      <Select
-        {...field}
-        {...props}
+      <Dropdown
         id={fieldId}
-        variant={SelectVariant.typeaheadMulti}
-        typeAheadAriaLabel={t('ai:Select a state')}
-        validated={isValid ? 'default' : 'error'}
-        aria-describedby={`${fieldId}-helper`}
-        isCreatable={false}
-        placeholderText={placeholderText}
         isOpen={isOpen}
-        onToggle={(_event, isOpen: boolean) => onToggle(isOpen)}
-        onSelect={onSelect}
-        onClear={onClearSelection}
-        selections={selections}
-        onFilter={(e, val) => {
-          if (!val || val === '') {
-            return children;
-          }
-          const results = fuse.search<MultiSelectOption>(val).map((result) => result.item.id);
-          return (
-            React.Children.toArray(children) as React.ReactElement<SelectOptionProps>[]
-          ).filter(({ props }) => results.includes(props.id as string));
-        }}
+        onSelect={(event, value) => onSelect(value as string)}
+        onOpenChange={onToggle}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            ref={toggleRef}
+            isFullWidth
+            onClick={() => onToggle(!isOpen)}
+            isExpanded={isOpen}
+            variant="typeahead"
+          >
+            <TextInputGroup>
+              <LabelGroup>
+                {field.value.map((currentChip) => (
+                  <Label
+                    key={currentChip}
+                    variant="outline"
+                    onClose={() => deleteChip(currentChip)}
+                  >
+                    {currentChip}
+                  </Label>
+                ))}
+              </LabelGroup>
+              <TextInputGroupMain
+                placeholder={placeholderText}
+                onClick={() => onToggle(!isOpen)}
+                value={textValue}
+                onChange={(event, value) => setTextValue(value)}
+              />
+              <TextInputGroupUtilities>
+                <Button
+                  variant="plain"
+                  onClick={onClearSelection}
+                  aria-label="Clear button and input"
+                  icon={<TimesIcon />}
+                />
+              </TextInputGroupUtilities>
+            </TextInputGroup>
+          </MenuToggle>
+        )}
+        shouldFocusToggleOnSelect
       >
-        {children}
-      </Select>
+        <DropdownList>
+          {children.length ? (
+            children
+          ) : (
+            <DropdownItem
+              key="No options available"
+              id="No options available"
+              value="No options available"
+            >
+              {t('ai:No options available')}
+            </DropdownItem>
+          )}
+        </DropdownList>
+      </Dropdown>
       {(errorMessage || hText) && (
         <FormHelperText>
           <HelperText>

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

@@ -7,7 +7,7 @@ import {
   FormSelectProps,
   DropEvent,
 } from '@patternfly/react-core';
-import { SelectOptionProps } from '@patternfly/react-core/deprecated';
+import { DropdownItemProps } from '@patternfly/react-core';
 import { FieldValidator, FieldHelperProps } from 'formik';
 import { DropzoneProps } from 'react-dropzone';
 import { CodeEditorProps } from '@patternfly/react-code-editor';
@@ -44,7 +44,7 @@ export interface SelectFieldProps extends FieldProps {
   // onBlur?: (event: React.FormEvent<HTMLSelectElement>) => void;
 }
 
-export type MultiSelectOption = SelectOptionProps & { id: string; displayName: string };
+export type MultiSelectOption = DropdownItemProps & { id: string; displayName: string };
 
 export interface MultiSelectFieldProps extends FieldProps {
   options: MultiSelectOption[];

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

@@ -14,7 +14,9 @@ export const getHumanizedTime = (dateTime?: string) => {
 };
 
 // TypesScript safe
-export const isSelectEventChecked = (event: React.MouseEvent | React.ChangeEvent): boolean => {
-  const target = event.target as { checked?: boolean };
+export const isSelectEventChecked = (
+  event: React.MouseEvent | React.ChangeEvent | undefined,
+): boolean => {
+  const target = event?.target as { checked?: boolean };
   return !!target?.checked;
 };