@openshift-assisted/ui-lib 2.45.0 → 2.46.0

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

@@ -20,9 +20,9 @@ import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TimesIcon } from '@patternfly/react-icons/dist/js/icons/times-icon';
-import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+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_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
 
 import { InputFieldProps as BaseInputProps } from './types';
 import { getFieldId } from './utils';
@@ -50,19 +50,26 @@ type RichValidationProps = {
   value: any;
   error: string | undefined;
   richValidationMessages: { [key: string]: string };
+  fieldId: string;
 };
 
 export const RichValidation: React.FC<RichValidationProps> = ({
   value,
   error,
   richValidationMessages,
+  fieldId,
 }) => {
   return (
     <PFHelperText component="ul" className="rich-input__rules">
       {Object.keys(richValidationMessages).map((key) => {
         const variant = getHelperTextVariant(richValidationMessages[key], value, error);
         return (
-          <HelperTextItem key={key} isDynamic component="li" {...variant}>
+          <HelperTextItem
+            key={key}
+            component="li"
+            {...variant}
+            data-testid={`input-richinputvalidation-${fieldId}-helper-text`}
+          >
             {richValidationMessages[key]}
           </HelperTextItem>
         );
@@ -108,7 +115,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
         fieldId={fieldId}
         label={label}
         isRequired={isRequired}
-        labelIcon={labelIcon}
+        labelHelp={labelIcon}
       >
         <InputGroup
           className={classNames('rich-input__group', { 'rich_input__group--invalid': !isValid })}
@@ -148,19 +155,24 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
                   value={value}
                   error={error}
                   richValidationMessages={richValidationMessages as Record<string, string>}
+                  fieldId={fieldId}
                 />
               }
               withFocusTrap={false}
             >
-              <Button variant="plain" aria-label="Validation">
-                {!isValid ? (
-                  <ExclamationCircleIcon color={dangerColor.value} />
-                ) : value ? (
-                  <CheckCircleIcon color={okColor.value} />
-                ) : (
-                  <InfoCircleIcon color={blueInfoColor.value} />
-                )}
-              </Button>
+              <Button
+                icon={
+                  !isValid ? (
+                    <ExclamationCircleIcon color={dangerColor.value} />
+                  ) : value ? (
+                    <CheckCircleIcon color={okColor.value} />
+                  ) : (
+                    <InfoCircleIcon color={blueInfoColor.value} />
+                  )
+                }
+                variant="plain"
+                aria-label="Validation"
+              />
             </Popover>
           </InputGroupItem>
         </InputGroup>
@@ -171,6 +183,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
                 icon={errorMessage && <ExclamationCircleIcon />}
                 variant={isValid ? 'default' : 'error'}
                 id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
+                data-testid={`input-richinput-${fieldId}-helper-text`}
               >
                 {errorMessage ? errorMessage : helperText}
               </HelperTextItem>

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

@@ -38,7 +38,7 @@ const SelectField: React.FC<SelectFieldProps> = ({
       fieldId={fieldId}
       label={label}
       isRequired={isRequired}
-      labelIcon={labelIcon}
+      labelHelp={labelIcon}
       id={`form-control__${fieldId}`}
     >
       <FormSelect
@@ -65,6 +65,7 @@ const SelectField: React.FC<SelectFieldProps> = ({
               icon={<ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid={`input-selectfield-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : hText}
             </HelperTextItem>

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

@@ -50,7 +50,7 @@ const SwitchField: React.FC<SwitchFieldProps> = ({
   };
 
   return (
-    <FormGroup fieldId={fieldId} isRequired={isRequired} labelIcon={labelIcon}>
+    <FormGroup fieldId={fieldId} isRequired={isRequired} labelHelp={labelIcon}>
       {tooltipProps ? (
         <Tooltip {...tooltipProps}>
           <Switch {...switchFields} />
@@ -65,6 +65,7 @@ const SwitchField: React.FC<SwitchFieldProps> = ({
               icon={<ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid={`input-switchfield-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : hText}
             </HelperTextItem>

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

@@ -41,7 +41,7 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
       fieldId={fieldId}
       label={label}
       isRequired={isRequired}
-      labelIcon={labelIcon}
+      labelHelp={labelIcon}
       className={groupClassName}
       id={`form-control__${fieldId}`}
     >
@@ -60,20 +60,14 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
       {(errorMessage || helperText) && (
         <FormHelperText>
           <HelperText>
-            {errorMessage && (
-              <HelperTextItem
-                icon={<ExclamationCircleIcon />}
-                variant={'error'}
-                id={`${fieldId}-helper-error`}
-              >
-                {errorMessage}
-              </HelperTextItem>
-            )}
-            {helperText && (
-              <HelperTextItem variant={'default'} id={`${fieldId}-helper`}>
-                {helperText}
-              </HelperTextItem>
-            )}
+            <HelperTextItem
+              icon={errorMessage && <ExclamationCircleIcon />}
+              variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid={`input-textarea-${fieldId}-helper-text`}
+            >
+              {errorMessage ? errorMessage : helperText}
+            </HelperTextItem>
           </HelperText>
         </FormHelperText>
       )}

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

@@ -41,7 +41,10 @@ const TextAreaSecretField: React.FC<TextAreaSecretProps> = ({
       {helperTextHidden && (
         <FormHelperText>
           <HelperText>
-            <HelperTextItem>{helperTextHidden}</HelperTextItem>
+            <HelperTextItem data-testid={`input-textareasecret-${fieldId}-helper-text`}>
+              {' '}
+              {helperTextHidden}
+            </HelperTextItem>
           </HelperText>
         </FormHelperText>
       )}

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

@@ -44,7 +44,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
   const acceptedFiles = { 'application/x-ssh-key': ['.pub'] };
   const maxFileSize = 2048;
   return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
       {children}
       <FileUpload
         filenamePlaceholder={t('ai:Drag a file here or browse to upload')}
@@ -58,6 +58,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
         type="text"
         value={field.value as string}
         filename={filename}
+        data-testid={`upload-field-${fieldId}`}
         onDataChange={(_event, file: string) => {
           setValue(file);
           setTouched(true);
@@ -110,6 +111,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid={`input-uploadfield-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

package/lib/common/components/ui/uiState/EmptyState.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
 import {
-  Title,
   EmptyState as PFEmptyState,
   EmptyStateBody,
   Bullseye,
-  EmptyStateIcon,
-  EmptyStateIconProps,
   EmptyStateActions,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
+import { ComponentType } from 'react';
 
 type Props = {
   title?: string;
   content?: React.ReactNode;
-  icon?: EmptyStateIconProps['icon'];
+  icon?: ComponentType;
   primaryAction?: React.ReactNode;
   secondaryActions?: React.ReactNode[];
 };
@@ -26,9 +24,7 @@ const EmptyState: React.FC<Props> = ({
   secondaryActions,
 }) => (
   <Bullseye>
-    <PFEmptyState>
-      <EmptyStateIcon icon={icon} />
-      <Title headingLevel="h2">{title}</Title>
+    <PFEmptyState titleText={title} icon={icon} headingLevel="h2">
       {content && <EmptyStateBody>{content}</EmptyStateBody>}
       {primaryAction}
       {secondaryActions && <EmptyStateActions>{secondaryActions}</EmptyStateActions>}

package/lib/common/components/ui/uiState/ErrorState.tsx

@@ -3,24 +3,20 @@ import {
   EmptyState,
   EmptyStateBody,
   Bullseye,
-  EmptyStateIcon,
   EmptyStateVariant,
   Button,
   ButtonVariant,
-  EmptyStateIconProps,
   EmptyStateActions,
-  EmptyStateHeader,
   EmptyStateFooter,
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { global_danger_color_200 as globalDangerColor200 } from '@patternfly/react-tokens/dist/js/global_danger_color_200';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
 type ErrorStateProps = {
   title?: string;
   content?: React.ReactNode;
   fetchData?: () => void;
-  icon?: EmptyStateIconProps['icon'];
+  icon?: React.ComponentClass;
   iconColor?: string;
   primaryAction?: React.ReactNode;
   actions?: React.ReactNode[];
@@ -49,19 +45,19 @@ const ErrorState = ({
   content,
   fetchData,
   icon = ExclamationCircleIcon,
-  iconColor = globalDangerColor200.value,
   variant = EmptyStateVariant.sm,
   primaryAction,
   actions,
 }: ErrorStateProps) => {
   return (
     <Bullseye>
-      <EmptyState variant={variant}>
-        <EmptyStateHeader
-          titleText={<>{title}</>}
-          icon={<EmptyStateIcon icon={icon} color={iconColor} />}
-          headingLevel="h2"
-        />
+      <EmptyState
+        status="danger"
+        headingLevel="h2"
+        icon={icon}
+        titleText={<>{title}</>}
+        variant={variant}
+      >
         <EmptyStateBody>{content || <DefaultErrorContent fetchData={fetchData} />}</EmptyStateBody>
         <EmptyStateFooter>
           {primaryAction}

package/lib/common/components/ui/uiState/LoadingState.tsx

@@ -17,7 +17,7 @@ type Props = {
 const LoadingState: React.FC<Props> = ({ content, primaryAction, secondaryActions }) => (
   <Bullseye>
     <EmptyState variant={EmptyStateVariant.sm}>
-      <Spinner size="xl" />
+      <Spinner size="xl" data-testid="loading-state-spinner" />
       {content && <EmptyStateBody>{content}</EmptyStateBody>}
       {primaryAction}
       {secondaryActions && <EmptyStateActions>{secondaryActions}</EmptyStateActions>}

package/lib/ocm/components/AddHosts/InventoryAddHost.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TextContent, Alert, AlertVariant, Stack, StackItem } from '@patternfly/react-core';
+import { Content, Alert, AlertVariant, Stack, StackItem } from '@patternfly/react-core';
 import ClusterHostsTable from '../hosts/ClusterHostsTable';
 import InformationAndAlerts from '../clusterConfiguration/InformationAndAlerts';
 import { CpuArchitecture } from '../../../common';
@@ -17,14 +17,14 @@ const InventoryAddHosts = ({ cluster }: { cluster?: Cluster }) => {
   return (
     <Stack hasGutter>
       <StackItem>
-        <TextContent>
-          <Text component="p">
+        <Content>
+          <Content component="p">
             <Day2WizardContextProvider>
               <Day2DiscoveryImageModalButton cluster={cluster} />
               <Day2Wizard />
             </Day2WizardContextProvider>
-          </Text>
-        </TextContent>
+          </Content>
+        </Content>
       </StackItem>
       <StackItem>
         <InformationAndAlerts cluster={cluster} />

package/lib/ocm/components/AddHosts/day2Wizard/Day2StaticIP.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import {
   Grid,
-  TextContent,
-  Text,
-  TextVariants,
+  Content,
+  ContentVariants,
   PageSection,
-  PageSectionVariants,
   Button,
   ButtonVariant,
 } from '@patternfly/react-core';
@@ -93,7 +91,7 @@ const Day2StaticIP = () => {
 
   if (hasLoadError) {
     return (
-      <PageSection variant={PageSectionVariants.light} isFilled>
+      <PageSection hasBodyWrapper={false} isFilled>
         <ErrorState
           title="Cannot load the Static IP configuration for this cluster"
           content="For non-multi-architecture clusters, make sure you select the Day1 cpu architecture"
@@ -165,13 +163,13 @@ const Day2StaticIP = () => {
       }
     >
       <Grid hasGutter>
-        <TextContent>
-          <Text component={TextVariants.h2}>Static network configurations</Text>
-          <Text component={TextVariants.small}>
+        <Content>
+          <Content component={ContentVariants.h2}>Static network configurations</Content>
+          <Content component={ContentVariants.small}>
             Network configuration can be done using either the form view or YAML view.
             Configurations done in this step are for discovering hosts.
-          </Text>
-        </TextContent>
+          </Content>
+        </Content>
 
         <StaticIpViewRadioGroup
           initialView={initialStaticIpInfo.view}

package/lib/ocm/components/AddHosts/day2Wizard/Day2StaticIpHostConfigurations.tsx

@@ -3,9 +3,8 @@ import {
   Flex,
   FlexItem,
   FormGroup,
-  TextContent,
-  TextVariants,
-  Text,
+  Content,
+  ContentVariants,
   Tooltip,
 } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
@@ -25,9 +24,9 @@ const Day2HostStaticIpConfigurations = ({ isDisabled }: { isDisabled: boolean })
   return (
     <FormGroup
       label={
-        <TextContent>
-          <Text component={TextVariants.h4}>Hosts' network configuration</Text>
-        </TextContent>
+        <Content>
+          <Content component={ContentVariants.h4}>Hosts' network configuration</Content>
+        </Content>
       }
       fieldId={getFieldId(GROUP_NAME, 'radio')}
       isInline

package/lib/ocm/components/AddHosts/day2Wizard/Day2Wizard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { WizardHeader } from '@patternfly/react-core';
 import classNames from 'classnames';
 import { ClusterWizardStep } from '../../../../common';
@@ -44,11 +44,12 @@ const Day2Wizard = () => {
       hasNoBodyWrapper
       id="generate-discovery-iso-modal"
     >
-      <div className={classNames('pf-v5-c-wizard', 'cluster-wizard')}>
+      <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
         <WizardHeader
           title={'Add hosts'}
           description={'Choose the settings for adding a new host'}
           onClose={close}
+          data-testid="day2-wizard-header"
         />
         <Day2WizardStep />
       </div>

package/lib/ocm/components/AddHosts/day2Wizard/Day2WizardFooter.tsx

@@ -41,6 +41,7 @@ const Day2WizardFooter = ({
       isBackDisabled={wizardContext.currentStepId === 'cluster-details'}
       isNextDisabled={disableNext}
       onCancel={closeWizard}
+      data-testid="day2-wizard-footer"
     />
   );
 };

package/lib/ocm/components/AddHosts/day2Wizard/Day2WizardNav.tsx

@@ -24,6 +24,7 @@ const Day2WizardNav = () => {
         onClick={() => wizardContext.setCurrentStepId(stepId)}
         isCurrent={wizardContext.currentStepId === stepId}
         isDisabled={isStepDisabled(idx, stepId)}
+        data-testid={`day2-wizard-nav-item-${stepId}`}
       />
     );
   };
@@ -37,8 +38,12 @@ const Day2WizardNav = () => {
         key="static-network-configuration-form-view"
         isCurrent={isStaticIpStep(wizardContext.currentStepId)}
         isDisabled={isStepIdxAfterCurrent(idx)}
+        data-testid={`day2-wizard-nav-item-static-network-configuration-form-view`}
       >
-        <WizardNav isInnerList>
+        <WizardNav
+          isInnerList
+          data-testid="day2-wizard-nav-item-static-network-configuration-form-view-inner-list"
+        >
           {staticIpFormViewSubSteps.map((stepId, subIdx) => {
             return getNavItem(idx + subIdx, stepId);
           })}
@@ -64,7 +69,7 @@ const Day2WizardNav = () => {
     return navItems;
   };
 
-  return <WizardNav>{getWizardNavItems()}</WizardNav>;
+  return <WizardNav data-testid="day2-wizard-nav">{getWizardNavItems()}</WizardNav>;
 };
 
 export default Day2WizardNav;

package/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabMock.tsx

@@ -5,8 +5,6 @@ import {
   EmptyStateBody,
   Grid,
   PageSection,
-  PageSectionVariants,
-  EmptyStateHeader,
 } from '@patternfly/react-core';
 import {
   OcmCpuArchitecture,
@@ -66,9 +64,8 @@ export const HostsClusterDetailTabMock = () => {
 
   if (!isMocked) {
     return (
-      <PageSection variant={PageSectionVariants.light} isFilled>
-        <EmptyState>
-          <EmptyStateHeader titleText="Mocked environment not detected" headingLevel="h4" />
+      <PageSection hasBodyWrapper={false} isFilled>
+        <EmptyState headingLevel="h4" titleText="Mocked environment not detected">
           <EmptyStateBody>You can only use this page on a mocked environment</EmptyStateBody>
         </EmptyState>
       </PageSection>
@@ -76,7 +73,7 @@ export const HostsClusterDetailTabMock = () => {
   }
 
   return (
-    <PageSection variant={PageSectionVariants.light} isFilled>
+    <PageSection hasBodyWrapper={false} isFilled>
       {tabShown ? (
         <OpenShiftVersionsContextProvider>
           <HostsClusterDetailTab

package/lib/ocm/components/Routes.css

@@ -0,0 +1,10 @@
+#app-outer-div {
+  overflow-y: auto !important;
+  /* Hide scrollbar while maintaining scroll functionality */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer and Edge */
+}
+
+#app-outer-div::-webkit-scrollbar {
+  display: none; /* Webkit browsers (Chrome, Safari, newer Edge) */
+}

package/lib/ocm/components/Routes.tsx

@@ -13,6 +13,7 @@ import type { FeatureListType } from '../../common/features/featureGate';
 import { AssistedUILibVersion } from './ui';
 import { storeDay1 } from '../store';
 import { useFeatureDetection } from '../hooks/use-feature-detection';
+import './Routes.css';
 
 export const UILibRoutes = ({
   allEnabledFeatures,

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

@@ -141,7 +141,8 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      data-testid="control-plane-nodes-dropdown-toggle"
     >
       {options.find((opt) => opt.value === field.value)?.label || 'Select'}
     </MenuToggle>

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

@@ -159,7 +159,9 @@ const CpuArchitectureDropdown = ({
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '420px' }}
+      data-testid="cpu-architecture-dropdown-toggle"
     >
       {currentCpuArch}
     </MenuToggle>

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

@@ -81,7 +81,9 @@ const CustomManifestCheckbox = ({ clusterId, isDisabled }: CustomManifestCheckbo
             <FormGroup>
               <FormHelperText>
                 <HelperText id={fieldId}>
-                  <HelperTextItem>
+                  <HelperTextItem
+                    data-testid={`input-custommanifestcheckbox-${fieldId}-helper-text`}
+                  >
                     Additional manifests will be applied at the install time for advanced
                     configuration of the cluster.
                   </HelperTextItem>

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { pluralize } from 'humanize-plus';
 import {
   AI_CISCO_INTERSIGHT_TAG,
@@ -104,13 +105,16 @@ export const DiscoveryImageModal = () => {
   return (
     <Modal
       aria-label="Add hosts dialog"
-      title={`Add ${pluralize(+isSNOCluster, 'host')}`}
+      title={
+        <span data-testid="discovery-modal-title">{`Add ${pluralize(+isSNOCluster, 'host')}`}</span>
+      }
       isOpen={isOpen}
       onClose={close}
       variant={ModalVariant.small}
       hasNoBodyWrapper
       id="generate-discovery-iso-modal"
       tabIndex={0}
+      ouiaId="discovery-image-modal"
     >
       {(isoDownloadError || ipxeDownloadError) && <ErrorState />}
       {isoDownloadUrl ? (

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

@@ -93,12 +93,14 @@ export const DiscoveryImageTypeDropdown = ({
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
       ref={toggleRef}
       isFullWidth
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
       isDisabled={isDisabled}
+      style={{ minWidth: '510px' }}
+      data-testid="discovery-image-type-dropdown-toggle"
     >
       {current || value}
     </MenuToggle>