@openshift-assisted/ui-lib 2.39.4 → 2.40.0

package/lib/cim/components/InfraEnv/InfraTableToolbar.tsx

@@ -1,19 +1,18 @@
 import {
   Badge,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
   Grid,
   GridItem,
+  MenuToggle,
+  MenuToggleElement,
   SearchInput,
   Split,
   SplitItem,
   ToolbarFilter,
   ToolbarItem,
 } from '@patternfly/react-core';
-import {
-  Select,
-  SelectGroup,
-  SelectOption,
-  SelectVariant,
-} from '@patternfly/react-core/deprecated';
 import { FilterIcon } from '@patternfly/react-icons/dist/js/icons/filter-icon';
 import * as React from 'react';
 import { HostStatus, HostStatusDef } from '../../../common/components/hosts/types';
@@ -94,6 +93,19 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
   const filterStatuses = React.useMemo(() => getStatusesForFilter(agentStatuses), [agentStatuses]);
   const categoryLabels = getCategoryLabels(t);
 
+  const onStatusFilterToggle = () => setStatusFilterOpen(!statusFilterOpen);
+  const onStatusFilterSelect = (
+    e?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ) => {
+    if (!statusFilter?.includes(value as string)) {
+      const newItems = (statusFilter ? [...statusFilter, value] : [value]) as string[];
+      setStatusFilter(newItems);
+    } else {
+      setStatusFilter(statusFilter?.filter((f) => f !== value));
+    }
+  };
+
   return (
     <TableToolbar
       selectedIDs={selectedHostIDs || []}
@@ -118,34 +130,34 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
           deleteChipGroup={() => setStatusFilter([])}
           categoryName="Status"
         >
-          <Select
-            variant={SelectVariant.checkbox}
-            aria-label={t('ai:Status')}
-            onToggle={(_event, value) => setStatusFilterOpen(value)}
-            onSelect={(e, value) => {
-              // eslint-disable-next-line
-              if ((e.target as any).checked) {
-                const newItems = (statusFilter ? [...statusFilter, value] : [value]) as string[];
-                setStatusFilter(newItems);
-              } else {
-                setStatusFilter(statusFilter?.filter((f) => f !== value));
-              }
-            }}
-            selections={statusFilter}
+          <Dropdown
             isOpen={statusFilterOpen}
-            placeholderText={t('ai:Status')}
-            toggleIcon={<FilterIcon />}
+            onSelect={onStatusFilterSelect}
+            onOpenChange={onStatusFilterToggle}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                isFullWidth
+                onClick={onStatusFilterToggle}
+                isExpanded={statusFilterOpen}
+                icon={<FilterIcon />}
+              >
+                {t('ai:Status')}
+              </MenuToggle>
+            )}
+            shouldFocusToggleOnSelect
           >
             {[
               <Grid key="statuses" hasGutter className="table-toolbar__dropdown">
                 {Object.keys(filterStatuses).map((category) => (
                   <GridItem key={category} span={4}>
-                    <SelectGroup label={categoryLabels[category as HostStatusDef['category']]}>
+                    <DropdownGroup label={categoryLabels[category as HostStatusDef['category']]}>
                       {Object.keys(filterStatuses[category]).map((label) => (
-                        <SelectOption
+                        <DropdownItem
+                          hasCheckbox
                           key={label}
                           value={label}
-                          isChecked={statusFilter?.includes(label)}
+                          isSelected={statusFilter?.includes(label)}
                         >
                           <Split hasGutter>
                             <SplitItem>{label}</SplitItem>
@@ -153,14 +165,14 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
                               <Badge isRead>{statusCount[label] || 0}</Badge>
                             </SplitItem>
                           </Split>
-                        </SelectOption>
+                        </DropdownItem>
                       ))}
-                    </SelectGroup>
+                    </DropdownGroup>
                   </GridItem>
                 ))}
               </Grid>,
             ]}
-          </Select>
+          </Dropdown>
         </ToolbarFilter>
       </ToolbarItem>
     </TableToolbar>

package/lib/cim/components/helpers/toAssisted.ts

@@ -76,10 +76,9 @@ export const getAIHosts = (
   const restBmhs =
     infraEnv && bmhs
       ? bmhs
-          ?.filter((h) =>
-            h.metadata?.namespace === infraEnv.metadata?.namespace &&
-            getInfraEnvNameOfAgent(h) === infraEnv.metadata?.name &&
-            h.metadata?.name
+          ?.filter((h) => h.metadata?.namespace === infraEnv.metadata?.namespace)
+          .filter((h) =>
+            getInfraEnvNameOfAgent(h) === infraEnv.metadata?.name && h.metadata?.name
               ? !bmhAgents.includes(h.metadata.name)
               : true,
           )

package/lib/cim/components/helpers/versions.ts

@@ -11,7 +11,7 @@ import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-s
 import { getMajorMinorVersion } from '../../../common/utils';
 
 export const getVersionFromReleaseImage = (releaseImage = '') => {
-  const match = /.+:(.*)/gm.exec(releaseImage);
+  const match = /.+:(\d+\.\d+(?:\.\d+)?(?:-\w+)?)/gm.exec(releaseImage);
   if (match && match.length > 1 && match[1]) {
     return match[1];
   }

package/lib/cim/index.ts

@@ -5,6 +5,7 @@ export * from './components';
 // re-export selected from common
 export * as Reducers from '../common/reducers';
 export * from '../common/api';
+export * from '../common/utils';
 export * from '../common/types';
 export * from '../common/features';
 

package/lib/common/api/assisted-service/ClustersAPI.ts

@@ -239,6 +239,12 @@ const ClustersAPI = {
       params,
     );
   },
+
+  updateInstallConfig(clusterId: Cluster['id'], config: string) {
+    return client.patch(`${ClustersAPI.makeBaseURI(clusterId)}/install-config`, config, {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  },
 };
 
 export default ClustersAPI;

package/lib/common/components/clusterDetail/ClusterCredentials.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { GridItem, ClipboardCopy, clipboardCopyFunc, Button, Alert } from '@patternfly/react-core';
+import {
+  GridItem,
+  ClipboardCopy,
+  clipboardCopyFunc,
+  Button,
+  Alert,
+  TextInput,
+} from '@patternfly/react-core';
 import { Credentials, Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { LoadingState, ErrorState } from '../../components/ui/uiState';
 import { DetailList, DetailItem } from '../../components/ui/DetailList';
@@ -98,7 +105,10 @@ const ClusterCredentials: React.FC<ClusterCredentialsProps> = ({
         )}
         {credentials.username && (
           <>
-            <DetailItem title="Username" value={credentials.username} />
+            <DetailItem
+              title={t('ai:Username')}
+              value={<TextInput value={credentials.username} readOnlyVariant="default" />}
+            />
             <DetailItem
               title={t('ai:Password')}
               value={

package/lib/common/components/clusterWizard/ClusterWizardStep.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WizardBody, WizardBodyProps } from '@patternfly/react-core/deprecated';
+import { WizardBody } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 
 import './ClusterWizardStep.css';
@@ -14,13 +14,11 @@ export const ClusterWizardStep = ({
   footer,
   children,
 }: React.PropsWithChildren<ClusterWizardStepProps>) => {
-  // activeStep is required, but we're not passing it. Using the cast to avoid TS error
-  const activeStep = undefined as unknown as WizardBodyProps['activeStep'];
   return (
     <div className={css('pf-v5-c-wizard__outer-wrap', 'cluster-wizard-step')}>
       <div className={css('pf-v5-c-wizard__inner-wrap')}>
         {navigation}
-        <WizardBody aria-labelledby="step-id" hasNoBodyPadding={false} activeStep={activeStep}>
+        <WizardBody aria-labelledby="step-id" hasNoPadding={false}>
           {children}
         </WizardBody>
       </div>

package/lib/common/components/operators/operatorSpecs.tsx

@@ -30,6 +30,7 @@ import {
   AUTHORINO_OPERATOR_LINK,
   CNV_LINK,
   FENCE_AGENTS_REMEDIATION_LINK,
+  getKubeDeschedulerLink,
   getLsoLink,
   getLvmsDocsLink,
   getMceDocsLink,
@@ -154,10 +155,10 @@ export const getOperatorSpecs = (useLVMS?: boolean): { [key: string]: OperatorSp
     [OPERATOR_NAME_KUBE_DESCHEDULER]: {
       title: 'Kube Descheduler',
       featureId: 'KUBE_DESCHEDULER',
-      Description: () => (
+      Description: ({ openshiftVersion }) => (
         <>
           Evicts pods to reschedule them onto more suitable nodes.{' '}
-          <ExternalLink href={NODE_HEALTHCHECK_LINK}>Learn more</ExternalLink>
+          <ExternalLink href={getKubeDeschedulerLink(openshiftVersion)}>Learn more</ExternalLink>
         </>
       ),
       notStandalone: true,

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

@@ -16,8 +16,12 @@ import {
   Badge,
   TextInputTypes,
   InputGroupItem,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
 } from '@patternfly/react-core';
-import { Select, SelectOption, SelectProps } from '@patternfly/react-core/deprecated';
 import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { FilterIcon } from '@patternfly/react-icons/dist/js/icons/filter-icon';
 import type { ClusterEventsFiltersType } from '../../types';
@@ -137,7 +141,7 @@ const ClusterEventsToolbar = ({
     setFilters(nextFilters);
   };
 
-  const onHostToggle: SelectProps['onToggle'] = () => setHostExpanded(!isHostExpanded);
+  const onHostToggle = () => setHostExpanded(!isHostExpanded);
   const onHostSelect = (value: string, isChecked: boolean) => {
     switch (value) {
       case DELETED_HOSTS:
@@ -157,7 +161,7 @@ const ClusterEventsToolbar = ({
     }
   };
 
-  const onSeverityToggle: SelectProps['onToggle'] = () => setSeverityExpanded(!isSeverityExpanded);
+  const onSeverityToggle = () => setSeverityExpanded(!isSeverityExpanded);
   const onSeveritySelect = (value: string, isChecked: boolean) => {
     onSelect('severities', isChecked, value);
   };
@@ -227,41 +231,56 @@ const ClusterEventsToolbar = ({
             }
             deleteChipGroup={onDeleteChipGroup}
           >
-            <Select
-              variant="checkbox"
-              aria-label="hosts"
-              toggleId="cluster-events-hosts-dropdown-button"
-              onToggle={onHostToggle}
-              onSelect={(e, value) => onHostSelect(value as string, isSelectEventChecked(e))}
-              selections={getSelections()}
-              customBadgeText={hostChips.length}
+            <Dropdown
               isOpen={isHostExpanded}
-              placeholderText={<Placeholder text="Hosts" />}
-              maxHeight={280}
-              zIndex={600}
+              onSelect={(e, value) => onHostSelect(value as string, isSelectEventChecked(e))}
+              onOpenChange={onHostToggle}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  id="cluster-events-hosts-dropdown-button"
+                  ref={toggleRef}
+                  isFullWidth
+                  onClick={onHostToggle}
+                  isExpanded={isHostExpanded}
+                  badge={hostChips.length && <Badge isRead>{hostChips.length}</Badge>}
+                >
+                  <Placeholder text="Hosts" />
+                </MenuToggle>
+              )}
+              shouldFocusToggleOnSelect
             >
-              {[
-                <SelectOption
-                  inputId={`checkbox-${CLUSTER_LEVEL}`}
+              <DropdownList>
+                <DropdownItem
+                  id={`checkbox-${CLUSTER_LEVEL}`}
+                  hasCheckbox
+                  isSelected={getSelections().includes(CLUSTER_LEVEL)}
                   key={CLUSTER_LEVEL}
                   value={CLUSTER_LEVEL}
                 >
                   {t('ai:Cluster-level events')}
-                </SelectOption>,
-                <SelectOption
-                  inputId={`checkbox-${DELETED_HOSTS}`}
+                </DropdownItem>
+                <DropdownItem
+                  id={`checkbox-${DELETED_HOSTS}`}
+                  hasCheckbox
+                  isSelected={getSelections().includes(DELETED_HOSTS)}
                   key={DELETED_HOSTS}
                   value={DELETED_HOSTS}
                 >
                   {t('ai:Deleted hosts')}
-                </SelectOption>,
-                ...sortedHosts.map((host) => (
-                  <SelectOption inputId={`checkbox-${host.id}`} key={host.id} value={host.id}>
+                </DropdownItem>
+                {...sortedHosts.map((host) => (
+                  <DropdownItem
+                    id={`checkbox-${host.id}`}
+                    hasCheckbox
+                    isSelected={getSelections().includes(host.id)}
+                    key={host.id}
+                    value={host.id}
+                  >
                     {host.hostname}
-                  </SelectOption>
-                )),
-              ]}
-            </Select>
+                  </DropdownItem>
+                ))}
+              </DropdownList>
+            </Dropdown>
           </CustomToolbarFilter>
         )}
 
@@ -278,28 +297,42 @@ const ClusterEventsToolbar = ({
           deleteChipGroup={onDeleteChipGroup}
           categoryName="Severity"
         >
-          <Select
-            variant="checkbox"
-            aria-label="Severity"
-            toggleId="cluster-events-severity-dropdown-button"
-            onToggle={onSeverityToggle}
+          <Dropdown
+            isOpen={isSeverityExpanded}
             onSelect={(event, value) =>
               onSeveritySelect(value as string, isSelectEventChecked(event))
             }
-            selections={filters.severities}
-            isOpen={isSeverityExpanded}
-            placeholderText={<Placeholder text="Severity" />}
-          >
-            {EVENT_SEVERITIES.map((severity) => (
-              <SelectOption
-                data-testid={`${severity}-filter-option`}
-                key={severity}
-                value={severity}
+            onOpenChange={onSeverityToggle}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                id="cluster-events-severity-dropdown-button"
+                ref={toggleRef}
+                isFullWidth
+                onClick={onSeverityToggle}
+                isExpanded={isSeverityExpanded}
+                badge={
+                  filters.severities?.length && <Badge isRead>{filters.severities.length}</Badge>
+                }
               >
-                {capitalize(severity)} <Badge isRead>{severityCounts[severity]}</Badge>
-              </SelectOption>
-            ))}
-          </Select>
+                <Placeholder text="Severity" />
+              </MenuToggle>
+            )}
+            shouldFocusToggleOnSelect
+          >
+            <DropdownList>
+              {EVENT_SEVERITIES.map((severity) => (
+                <DropdownItem
+                  data-testid={`${severity}-filter-option`}
+                  hasCheckbox
+                  isSelected={filters.severities?.includes(severity)}
+                  key={severity}
+                  value={severity}
+                >
+                  {capitalize(severity)} <Badge isRead>{severityCounts[severity]}</Badge>
+                </DropdownItem>
+              ))}
+            </DropdownList>
+          </Dropdown>
         </ToolbarFilter>
 
         <ToolbarItem>

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

@@ -26,6 +26,7 @@ export type WizardFooterGenericProps = {
   isSubmitting?: boolean;
   submittingText?: string;
   nextButtonText?: string;
+  isNextButtonLoading?: boolean;
 };
 
 type WizardFooterProps = WizardFooterGenericProps & {
@@ -51,6 +52,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
   nextButtonText,
   cluster,
   onFetchEvents,
+  isNextButtonLoading,
 }) => {
   const { t } = useTranslation();
   submittingText = submittingText || t('ai:Saving changes...');
@@ -68,6 +70,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
                 name="next"
                 onClick={onNext}
                 isDisabled={isNextDisabled}
+                isLoading={isNextButtonLoading}
               >
                 {nextButtonText || t('ai:Next')}
               </Button>

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[];