@openshift-assisted/ui-lib 2.13.0-cim → 2.14.1-cim

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

@@ -0,0 +1,294 @@
+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/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 initialSelectOptions = React.useMemo(
+    () =>
+      versions.map((version) => ({
+        children:
+          version.supportLevel === 'beta'
+            ? version.label + ' - ' + 'Developer preview release'
+            : version.label,
+        value: version.value,
+      })),
+    [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;
+    }
+  }, []);
+
+  React.useEffect(() => {
+    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
+
+    // Filter menu items based on the text input value when one exists
+    if (filterValue) {
+      newSelectOptions = initialSelectOptions.filter((menuItem) =>
+        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase()),
+      );
+
+      // When no options are found after filtering, display 'No results found'
+      if (!newSelectOptions.length) {
+        newSelectOptions = [
+          {
+            isDisabled: true,
+            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);
+      }
+    }
+
+    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));
+        }
+
+        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
+    >
+      <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
+              variant="plain"
+              onClick={() => {
+                setSelected('');
+                setInputValue('');
+                setFilterValue('');
+                textInputRef?.current?.focus();
+              }}
+              aria-label="Clear input value"
+            >
+              <TimesIcon aria-hidden />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  const helperText = 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">
+            {helperText ??
+              'Select an Openshift version from the list or use the type ahead to narrow down the list.'}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+    </>
+  );
+};

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

@@ -0,0 +1,4 @@
+#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu {
+  max-height: 22vh;
+  overflow: auto;
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Button, ButtonProps, Popover } from '@patternfly/react-core';
+import { Button, ButtonProps, Icon, Popover } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
 import { PopoverProps } from '@patternfly/react-core/dist/js/components/Popover/Popover';
 import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
@@ -30,11 +30,13 @@ const PopoverIcon: React.FC<PopoverIconProps> = ({
       component={component}
       variant={variant}
       onClick={(e) => e.preventDefault()}
-      className={classNames('pf-c-form__group-label-help', 'pf-u-p-0', buttonClassName)}
+      className={classNames('pf-v5-c-form__group-label-help', 'pf-v5-u-p-0', buttonClassName)}
       ouiaId={buttonOuiaId}
       style={buttonStyle}
     >
-      <IconComponent noVerticalAlign={noVerticalAlign} />
+      <Icon isInline={noVerticalAlign}>
+        <IconComponent />
+      </Icon>
     </Button>
   </Popover>
 );

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

@@ -16,14 +16,14 @@ export type PreviewBadgeProps = {
   className?: string;
   text: string;
   externalLink?: string;
-  popoverText: string;
+  popoverContent: React.ReactNode;
 } & WithTestID;
 
 export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
   position = PreviewBadgePosition.inline,
-  className = 'pf-u-ml-md',
+  className = 'pf-v5-u-ml-md',
   text,
-  popoverText,
+  popoverContent,
   externalLink,
   testId,
 }) => {
@@ -31,15 +31,15 @@ export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
   const { t } = useTranslation();
   switch (position) {
     case PreviewBadgePosition.inlineRight:
-      clsName += ' pf-u-float-right';
+      clsName += ' pf-v5-u-float-right';
       break;
     case PreviewBadgePosition.inline:
-      clsName += ' pf-u-display-inline';
+      clsName += ' pf-v5-u-display-inline';
       break;
   }
   const bodyContent = (
     <>
-      <div style={{ marginBottom: 'var(--pf-global--spacer--sm)' }}>{popoverText}</div>
+      <div style={{ marginBottom: 'var(--pf-v5-global--spacer--sm)' }}>{popoverContent}</div>
       {externalLink && (
         <>
           <ExternalLink href={externalLink}>{t('ai:Learn more')}</ExternalLink>
@@ -53,7 +53,7 @@ export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
         <Label
           style={{ cursor: 'pointer' }}
           color="orange"
-          icon={<InfoCircleIcon color="var(--pf-c-label__content--Color)" />}
+          icon={<InfoCircleIcon color="var(--pf-v5-c-label__content--Color)" />}
           className={clsName}
           {...(testId ? { 'data-testid': testId } : {})}
         >

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

@@ -1,4 +1,4 @@
 pre.prism-code {
-  padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
+  padding: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md);
   overflow-x: auto;
 }

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

@@ -49,7 +49,7 @@ const PrismCode: React.FC<PrismCodeProps> = ({
             onCopy={(e) => clipboardCopyFunc(e, code)}
             style={{ float: 'right', background: 'inherit' }}
           >
-            {}
+            {''}
           </ClipboardCopy>
         )}
         {tokens.map((line, i) => (

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

@@ -1,5 +1,10 @@
 import React from 'react';
-import { DropdownItem, DropdownToggle, Dropdown, DropdownProps } from '@patternfly/react-core';
+import {
+  DropdownItem,
+  DropdownToggle,
+  Dropdown,
+  DropdownProps,
+} from '@patternfly/react-core/deprecated';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { HostRole } from '../../../common/types/hosts';
 import './SimpleDropdown.css';
@@ -41,7 +46,7 @@ export const SimpleDropdown = ({
   const toggle = React.useMemo(
     () => (
       <DropdownToggle
-        onToggle={(val) => setOpen(!isDisabled && val)}
+        onToggle={(_event, val) => setOpen(!isDisabled && val)}
         toggleIndicator={CaretDownIcon}
         isDisabled={isDisabled}
         id={idPrefix ? `${idPrefix}-dropdown-toggle-items` : undefined}

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

@@ -1,7 +1,15 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, TextContent, Text } from '@patternfly/react-core';
-import { getFieldId, HelperText } from './formik';
+import {
+  FormGroup,
+  TextContent,
+  Text,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
+import { getFieldId } from './formik';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 export interface StaticFieldProps {
   name: string;
@@ -28,18 +36,22 @@ export const StaticField: React.FC<StaticFieldProps> = ({
       id={`form-control__${fieldId}`}
       fieldId={fieldId}
       label={label}
-      helperText={
-        typeof helperText === 'string' ? (
-          helperText
-        ) : (
-          <HelperText fieldId={fieldId}>{helperText}</HelperText>
-        )
-      }
-      helperTextInvalid={helperTextInvalid}
-      validated={isValid ? 'default' : 'error'}
       isRequired={isRequired}
     >
       {children}
+      {(helperText || helperTextInvalid) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={<ExclamationCircleIcon />}
+              variant={isValid ? 'default' : 'error'}
+              id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
+            >
+              {isValid ? helperText : helperTextInvalid}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
     </FormGroup>
   );
 };

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { TECH_SUPPORT_LEVEL_LINK } from '../../config/constants';
+import { TECH_SUPPORT_LEVEL_LINK } from '../../config/docs_links';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { PreviewBadge, PreviewBadgeProps } from './PreviewBadge';
 
 export type TechnologyPreviewProps = Omit<
   PreviewBadgeProps,
-  'text' | 'popoverText' | 'externalLink'
+  'text' | 'popoverContent' | 'externalLink'
 >;
 
 export const TechnologyPreview: React.FC<TechnologyPreviewProps> = (props) => {
@@ -14,7 +14,7 @@ export const TechnologyPreview: React.FC<TechnologyPreviewProps> = (props) => {
   return (
     <PreviewBadge
       text={t('ai:Technology Preview')}
-      popoverText={t(
+      popoverContent={t(
         'ai:Technology preview features provide early access to upcoming product innovations, enabling you to test functionality and provide feedback during the development process.',
       )}
       externalLink={TECH_SUPPORT_LEVEL_LINK}

package/lib/common/components/ui/Toolbar/ToolbarSecondaryGroup.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ToolbarGroup } from '@patternfly/react-core';
 
 const ToolbarSecondaryGroup: React.FC = ({ children }) => (
-  <ToolbarGroup alignment={{ md: 'alignRight' }}>{children}</ToolbarGroup>
+  <ToolbarGroup align={{ md: 'alignRight' }}>{children}</ToolbarGroup>
 );
 
 export default ToolbarSecondaryGroup;

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

@@ -0,0 +1,21 @@
+import React, { ReactElement } from 'react';
+import { Icon, IconComponentProps } from '@patternfly/react-core';
+
+export type UiIconProps = {
+  size?: IconComponentProps['size'];
+  status?: IconComponentProps['status'] | undefined;
+  icon?: ReactElement;
+  className?: string;
+};
+
+const UiIcon: React.FC<UiIconProps> = (props) => {
+  return (
+    <>
+      <Icon size={props.size ? props.size : 'md'} status={props.status} className={props.className}>
+        {props.icon}
+      </Icon>
+    </>
+  );
+};
+
+export default UiIcon;

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

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
+import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core/deprecated';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import UiIcon from './UiIcon';
 
 const getNavItemContent = (
   content: ReactNode,
@@ -13,10 +13,10 @@ const getNavItemContent = (
     return (
       <>
         {content}
-        <ExclamationCircleIcon
+        <UiIcon
+          status="danger"
           className="wizard-nav-item-warning-icon"
-          color={dangerColor.value}
-          size="sm"
+          icon={<ExclamationCircleIcon />}
         />
       </>
     );

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

@@ -91,7 +91,7 @@ export const EventsModal = ({
     <Modal
       header={
         <Title headingLevel={'h1'}>
-          {title} {isLoading && <Spinner isSVG size="lg" />}
+          {title} {isLoading && <Spinner size="lg" />}
         </Title>
       }
       isOpen={isOpen}

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

@@ -1,10 +1,18 @@
 import * as React from 'react';
-import { FormGroup, FileUpload } from '@patternfly/react-core';
+import {
+  FormGroup,
+  FileUpload,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  DropEvent,
+} from '@patternfly/react-core';
 import { UploadFieldProps } from './types';
 import { getFieldId } from './utils';
-import HelperText from './HelperText';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 import { useField } from 'formik';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { FileRejection } from 'react-dropzone';
 
 const CertificatesUploadField: React.FC<UploadFieldProps> = ({
   label,
@@ -20,9 +28,11 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
 
   const maxFileSize = 100000; //100 kb
   const maxFileSizeKb = 100;
-  const acceptedFiles =
-    '.pem,.crt,.ca,.cert,application/x-pem-file,application/x-x509-ca-cert,text/plain';
-
+  const acceptedFiles = {
+    'application/x-pem-file': ['.pem', '.crt', '.ca', '.cert'],
+    'application/x-x509-ca-cert': ['.pem', '.crt', '.ca', '.cert'],
+    'text/plain': ['.pem', '.crt', '.ca', '.cert'],
+  };
   const fieldId = getFieldId(name, 'input', idPostfix);
   const [field, , { setValue }] = useField<string | File>(name);
   const [filename, setFilename] = React.useState('');
@@ -30,10 +40,7 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
   const [isRejected, setIsRejected] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState('');
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File,
-  ) => {
+  const handleFileInputChange = (_event: DropEvent, file: File) => {
     setFilename(file.name);
   };
 
@@ -59,8 +66,8 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
     setErrorMessage('');
   };
 
-  const handleFileRejected = (_rejectedFiles: File[]) => {
-    if (_rejectedFiles[0].size > maxFileSize) {
+  const handleFileRejected = (_rejectedFiles: FileRejection[]) => {
+    if (_rejectedFiles[0].file.size > maxFileSize) {
       setIsRejected(true);
       setErrorMessage(
         t('ai:File size is too big. Upload a new {{maxFileSizeKb}} Kb or less.', { maxFileSizeKb }),
@@ -82,29 +89,7 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
   };
 
   return (
-    <FormGroup
-      fieldId={fieldId}
-      label={label}
-      helperText={
-        typeof helperText === 'string' ? (
-          helperText
-        ) : (
-          <HelperText fieldId={fieldId}>{helperText}</HelperText>
-        )
-      }
-      helperTextInvalid={
-        typeof errorMessage === 'string' ? (
-          errorMessage
-        ) : (
-          <HelperText fieldId={fieldId} isError>
-            {errorMessage}
-          </HelperText>
-        )
-      }
-      validated={isRejected ? 'error' : 'default'}
-      isRequired={isRequired}
-      labelIcon={labelIcon}
-    >
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
       {children}
       <FileUpload
         filenamePlaceholder={t('ai:Drag a file here or browse to upload')}
@@ -118,8 +103,8 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
         value={field.value}
         filename={filename}
         onFileInputChange={handleFileInputChange}
-        onDataChange={handleTextOrDataChange}
-        onTextChange={handleTextOrDataChange}
+        onDataChange={(_event, value: string) => handleTextOrDataChange(value)}
+        onTextChange={(_event, value: string) => handleTextOrDataChange(value)}
         onReadStarted={handleFileReadStarted}
         onReadFinished={handleFileReadFinished}
         onClearClick={handleClear}
@@ -133,6 +118,19 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
         disabled={isDisabled}
         allowEditingUploadedText={true}
       />
+      {(errorMessage || helperText) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={errorMessage && <ExclamationCircleIcon />}
+              variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+            >
+              {errorMessage ? errorMessage : helperText}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
     </FormGroup>
   );
 };