@openshift-assisted/ui-lib 2.17.1-cim → 2.18.0-cim

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

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
+import { Icon, WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import UiIcon from './UiIcon';
 
 const getNavItemContent = (
   content: ReactNode,
@@ -13,11 +12,9 @@ const getNavItemContent = (
     return (
       <>
         {content}
-        <UiIcon
-          status="danger"
-          className="wizard-nav-item-warning-icon"
-          icon={<ExclamationCircleIcon />}
-        />
+        <Icon status="danger" className="wizard-nav-item-warning-icon">
+          <ExclamationCircleIcon />
+        </Icon>
       </>
     );
   }

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

@@ -14,7 +14,7 @@ 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> = ({
+const CertificatesUploadField: React.FC<React.PropsWithChildren<UploadFieldProps>> = ({
   label,
   labelIcon,
   helperText,

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

@@ -15,7 +15,9 @@ import useFieldErrorMsg from '../../../hooks/useFieldErrorMsg';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 const InputField: React.FC<
-  InputFieldProps & { inputError?: string; description?: React.ReactNode; labelInfo?: string }
+  React.PropsWithChildren<
+    InputFieldProps & { inputError?: string; description?: React.ReactNode; labelInfo?: string }
+  >
   // eslint-disable-next-line react/display-name
 > = React.forwardRef(
   (

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

@@ -1,105 +1,89 @@
 import * as React from 'react';
 import { useField } from 'formik';
 import {
+  Button,
   FormGroup,
   FormHelperText,
   HelperText,
   HelperTextItem,
   Label,
+  LabelGroup,
   TextInput,
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import TagsInput from 'react-tagsinput';
-import { InputFieldProps } from './types';
+
+import { useTranslation } from '../../../hooks';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { getFieldId } from './utils';
-import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
-export const LabelField = ({
-  label,
-  labelIcon,
-  helperText,
-  isRequired,
-  onChange,
-  validate,
-  idPostfix,
-  ...props
-}: InputFieldProps & {
-  // eslint-disable-next-line
-  onChange?: (tags: any[]) => void;
-}) => {
+type LabelsFieldProps = {
+  name: string;
+  label: string;
+  idPostfix?: string;
+};
+
+export const LabelField = ({ name, label, idPostfix }: LabelsFieldProps) => {
   const { t } = useTranslation();
-  const [input, setInput] = React.useState('');
-  const [field, { touched, error }, { setValue, setTouched }] = useField({
-    name: props.name,
-    validate,
-  });
-  const fieldId = getFieldId(props.name, 'input', idPostfix);
+  const [{ value: labels }, { touched, error }, { setValue: setLabels, setTouched }] =
+    useField<string[]>(name);
+  const fieldId = getFieldId(name, 'input', idPostfix);
   const isValid = !(touched && error);
   const errorMessage = !isValid ? error : '';
 
-  return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
-      <TagsInput
-        {...field}
-        onChange={(tags) => {
-          setValue(tags);
-          setInput('');
-          onChange && onChange(tags);
-          !touched && setTouched(true);
-        }}
-        addKeys={[13, 32, 188]}
-        renderTag={({ tag, key, onRemove, getTagDisplayValue }) => (
-          <Label key={key} style={{ margin: 2 }} onClose={() => onRemove(key)}>
-            {getTagDisplayValue(tag)}
-          </Label>
-        )}
-        renderInput={({ value, onChange, ...rest }) => (
-          <TextInput
-            onChange={onChange as (e: unknown) => void}
-            value={value as string}
-            {...rest}
-          />
-        )}
-        renderLayout={(tagElements, inputElement) => (
-          <div
-            className="pf-v6-c-form-control"
-            style={{
-              padding: 0,
-              paddingTop: '1px',
-              display: 'flex',
-              alignItems: 'start',
-              flexWrap: 'wrap',
-              height: 'unset',
-              minHeight: '36px',
-            }}
-          >
-            <div>{tagElements}</div>
-            {inputElement}
-          </div>
-        )}
-        addOnBlur
-        inputProps={{
-          autoFocus: false,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          placeholder: field.value?.length ? '' : 'app=frontend',
-          spellCheck: 'false',
-          value: input,
-          // eslint-disable-next-line
-          onChange: (e: any) => setInput(e.target.value),
-          ['data-test']: fieldId,
-        }}
-      />
+  const onDelete = (_ev: React.MouseEvent<Element, MouseEvent>, index: number) => {
+    const newLabels = [...labels];
+    newLabels.splice(index, 1);
+    setTouched(true);
+    setLabels(newLabels, true);
+  };
 
+  const onAdd = (text: string) => {
+    if (!text) {
+      return;
+    }
+    const newLabels = [...labels, text];
+
+    setTouched(true);
+    setLabels(newLabels, true);
+  };
+
+  const onEdit = (index: number, nextText: string) => {
+    const newLabels = [...labels];
+    newLabels.splice(index, 1, nextText);
+
+    setTouched(true);
+    setLabels(newLabels, true);
+  };
+
+  return (
+    <FormGroup label={label}>
+      <LabelGroup
+        numLabels={5}
+        addLabelControl={<EditableLabelControl defaultLabel="key=value" onAddLabel={onAdd} />}
+      >
+        {labels.map((label, index) => {
+          return (
+            <Label
+              key={index}
+              textMaxWidth="16ch"
+              onClose={(e) => onDelete(e, index)}
+              onEditCancel={(_, prevText) => onEdit(index, prevText)}
+              onEditComplete={(_, newText) => onEdit(index, newText)}
+              /* Add a basic tooltip as the PF tooltip doesn't work for editable labels */
+              title={label}
+              isEditable
+            >
+              {label}
+            </Label>
+          );
+        })}
+      </LabelGroup>
       <FormHelperText>
         <HelperText>
           <HelperTextItem
             id={`${fieldId}-helper-text`}
             data-testid={`input-label-${fieldId}-helper-text`}
           >
-            {helperText ||
-              t(
-                "ai:Enter a key=value and then press 'enter' or 'space' or use a ',' to input the label.",
-              )}
+            {t("ai:Enter a key=value and then press 'enter' to input the label.")}
           </HelperTextItem>
           {errorMessage && (
             <HelperTextItem
@@ -116,3 +100,59 @@ export const LabelField = ({
     </FormGroup>
   );
 };
+
+type EditableLabelControlProps = {
+  defaultLabel: string;
+  onAddLabel: (text: string) => void;
+};
+
+const EditableLabelControl = ({ defaultLabel, onAddLabel }: EditableLabelControlProps) => {
+  const [isEditing, setIsEditing] = React.useState<boolean>(false);
+  const [label, setLabel] = React.useState<string>('');
+  const { t } = useTranslation();
+
+  const onConfirmAdd = () => {
+    onAddLabel(label);
+    setIsEditing(false);
+    setLabel('');
+  };
+
+  const onDiscardAdd = () => {
+    setIsEditing(false);
+    setLabel('');
+  };
+
+  return isEditing ? (
+    <TextInput
+      aria-label={t('ai:New label')}
+      autoFocus
+      value={label}
+      onChange={(_, value) => {
+        setLabel(value);
+      }}
+      onBlur={onConfirmAdd}
+      onKeyDown={(e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onConfirmAdd();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          onDiscardAdd();
+        }
+      }}
+    />
+  ) : (
+    <Button
+      aria-label={t('ai:Add label')}
+      variant="link"
+      className="pf-v6-u-ml-xs"
+      isInline
+      onClick={() => {
+        setIsEditing(true);
+        setLabel(defaultLabel);
+      }}
+    >
+      {t('ai:Add label')}
+    </Button>
+  );
+};

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

@@ -15,7 +15,7 @@ import { getFieldId } from './utils';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 // eslint-disable-next-line react/display-name
-const NumberInputField: React.FC<NumberInputFieldProps> = React.forwardRef(
+const NumberInputField: React.FC<React.PropsWithChildren<NumberInputFieldProps>> = React.forwardRef(
   (
     {
       label,

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

@@ -67,7 +67,6 @@ const GetPullSecretHelperText: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
 
 const PullSecretField: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
   const { t } = useTranslation();
-
   return (
     <TextAreaField
       name="pullSecret"

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Button, ButtonVariant, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Button, ButtonVariant, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
-import './RemovableField.css';
 import classnames from 'classnames';
-import UiIcon from '../UiIcon';
+
+import './RemovableField.css';
 
 interface RemovableFieldProps {
   onRemove: VoidFunction;
@@ -30,7 +30,11 @@ const RemovableField: React.FC<RemovableFieldProps & Omit<TooltipProps, 'content
       distance={0}
       content={
         <Button
-          icon={<UiIcon size="sm" icon={<MinusCircleIcon />} />}
+          icon={
+            <Icon size="sm">
+              <MinusCircleIcon />
+            </Icon>
+          }
           variant={ButtonVariant.plain}
           onClick={onRemove}
           data-testid={removeButtonDataTestId}

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

@@ -15,15 +15,13 @@ import {
   FormHelperText,
   HelperText,
   ButtonVariant,
+  Icon,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 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 { 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';
@@ -164,11 +162,17 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
               <Button
                 icon={
                   !isValid ? (
-                    <ExclamationCircleIcon color={dangerColor.value} />
+                    <Icon status="danger">
+                      <ExclamationCircleIcon />
+                    </Icon>
                   ) : value ? (
-                    <CheckCircleIcon color={okColor.value} />
+                    <Icon status="success">
+                      <CheckCircleIcon />
+                    </Icon>
                   ) : (
-                    <InfoCircleIcon color={blueInfoColor.value} />
+                    <Icon status="info">
+                      <InfoCircleIcon />
+                    </Icon>
                   )
                 }
                 variant={ButtonVariant.control}

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

@@ -164,7 +164,7 @@ const SelectFieldWithSearch = ({
   };
 
   const onSelect = React.useCallback(
-    (val) => {
+    (val: unknown) => {
       if (val && val !== NO_RESULTS) {
         if (isMultiSelect && Array.isArray(value)) {
           setValue(

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

@@ -11,7 +11,7 @@ import { TextAreaFieldProps } from './types';
 import { getFieldId } from './utils';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
-const TextAreaField: React.FC<TextAreaFieldProps> = ({
+const TextAreaField: React.FC<React.PropsWithChildren<TextAreaFieldProps>> = ({
   label,
   helperText,
   getErrorText,
@@ -54,7 +54,10 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
         validated={isValid ? 'default' : 'error'}
         isRequired={isRequired}
         aria-describedby={`${fieldId}-helper`}
-        onChange={(event) => field.onChange(event)}
+        onChange={(event) => {
+          field.onChange(event);
+          restProps.onChange?.(event);
+        }}
         disabled={isDisabled}
       />
       {(errorMessage || helperText) && (
@@ -72,7 +75,7 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
                 icon={<ExclamationCircleIcon />}
                 variant={'error'}
                 id={`${fieldId}-helper-error`}
-                data-testid={`input-textarea-${fieldId}-helper-text`}
+                data-testid={`input-textarea-${fieldId}-helper-text-error`}
               >
                 {errorMessage}
               </HelperTextItem>

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

@@ -12,7 +12,10 @@ import { getFieldId } from './utils';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
-const UploadField: React.FC<UploadFieldProps> = ({
+const MAX_FILE_SIZE = 2048;
+const ACCEPTED_FILES = { 'application/x-ssh-key': ['.pub'] };
+
+const UploadField: React.FC<React.PropsWithChildren<UploadFieldProps>> = ({
   label,
   labelIcon,
   helperText,
@@ -41,8 +44,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
     return '';
   };
   const errorMessage = getErrorMessage();
-  const acceptedFiles = { 'application/x-ssh-key': ['.pub'] };
-  const maxFileSize = 2048;
+
   return (
     <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
       {children}
@@ -70,7 +72,6 @@ const UploadField: React.FC<UploadFieldProps> = ({
         onFileInputChange={(_event, file) => {
           setFilename(file.name);
           setTouched(true);
-          setValue(file);
         }}
         onBlur={(e) => {
           const file: File | string = field.value;
@@ -96,8 +97,8 @@ const UploadField: React.FC<UploadFieldProps> = ({
         disabled={isDisabled}
         allowEditingUploadedText={allowEdittingUploadedText}
         dropzoneProps={{
-          accept: acceptedFiles,
-          maxSize: maxFileSize,
+          accept: ACCEPTED_FILES,
+          maxSize: MAX_FILE_SIZE,
         }}
         onClearClick={() => {
           setFilename('');

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

@@ -21,6 +21,4 @@ export { default as SelectFieldWithSearch } from './SelectFieldWithSearch';
 
 export * from './utils';
 export * from './PullSecretField';
-export * from './validationSchemas';
 export * from './LabelField';
-export * from './constants';

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

@@ -28,5 +28,3 @@ export { default as ClusterEventsToolbar } from './ClusterEventsToolbar';
 export { default as ModalProgress } from './ModalProgress';
 export { default as ConfirmationModal } from './ConfirmationModal';
 export { default as NoPermissionsError } from './NoPermissionsError';
-
-export { default as UiIcon } from './UiIcon';

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { DASH } from '../constants';
+import { OpenshiftVersionOptionType } from '../../types';
+import { TFunction } from 'i18next';
 
 export const getHumanizedDateTime = (dateTime?: string) => {
   if (!dateTime) return DASH;
@@ -20,3 +22,8 @@ export const isSelectEventChecked = (
   const target = event?.target as { checked?: boolean };
   return !!target?.checked;
 };
+
+export const getVersionLabel = (version: OpenshiftVersionOptionType, t: TFunction) =>
+  version.supportLevel === 'beta'
+    ? version.label + ' - ' + t('ai:Developer preview release')
+    : version.label;

package/lib/common/config/constants.ts

@@ -53,6 +53,7 @@ export const clusterStatusLabels = (t: TFunction): { [key in Cluster['status']]:
   error: t('ai:Error'),
   installed: t('ai:Installed'),
   'adding-hosts': t('ai:Adding hosts'),
+  unmonitored: t('ai:Unmonitored'),
 });
 
 export const clusterFieldLabels = (t: TFunction): { [key in string]: string } => ({
@@ -70,6 +71,7 @@ export const clusterFieldLabels = (t: TFunction): { [key in string]: string } =>
   httpProxy: t('ai:HTTP proxy'),
   httpsProxy: t('ai:HTTPS proxy'),
   noProxy: t('ai:No proxy'),
+  additionalNtpSources: t('ai:Additional NTP sources'),
   machineNetworks: t('ai:Machine networks'),
   clusterNetworks: t('ai:Cluster networks'),
   serviceNetworks: t('ai:Service networks'),
@@ -331,9 +333,6 @@ export const MS_PER_DAY = 1000 * 60 * 60 * 24;
 
 export const NO_SUBNET_SET = 'NO_SUBNET_SET';
 
-export const NETWORK_TYPE_OVN = 'OVNKubernetes';
-export const NETWORK_TYPE_SDN = 'OpenShiftSDN';
-
 export const IPV4_STACK = 'singleStack';
 export const DUAL_STACK = 'dualStack';
 

package/lib/common/config/docs_links.ts

@@ -1,6 +1,6 @@
 import { isMajorMinorVersionEqualOrGreater } from '../utils';
 
-const LATEST_OPENSHIFT_DOCS_VERSION = '4.19';
+const LATEST_OPENSHIFT_DOCS_VERSION = '4.21';
 const MIN_OPENSHIFT_DOCS_VERSION = '4.14';
 
 const getDocsOpenshiftVersion = (ocpVersion?: string): string => {
@@ -54,6 +54,8 @@ export const getOpenShiftNetworkingDocsLink = (ocpVersion?: string) => {
   return `https://docs.redhat.com/en/documentation/openshift_container_platform/${validOcpVersion}/html/installing_on_bare_metal/${variant}#installation-network-user-infra_installing-bare-metal`;
 };
 
+export const RED_HAT_CNI_SUPPORT_MATRIX_LINK = 'https://access.redhat.com/articles/5436171';
+
 export const SSH_GENERATION_DOC_LINK = 'https://www.redhat.com/sysadmin/configure-ssh-keygen';
 
 //Hosts status

package/lib/common/features/featureGate.tsx

@@ -34,9 +34,11 @@ export const FeatureGateContext = React.createContext<FeatureGateContextType>({
   isFeatureEnabled: () => false,
 });
 
-export const FeatureGateContextProvider: React.FC<{
-  features: FeatureListType;
-}> = ({ features, children }) => {
+export const FeatureGateContextProvider: React.FC<
+  React.PropsWithChildren<{
+    features: FeatureListType;
+  }>
+> = ({ features, children }) => {
   const featuresWithDefaults: FeatureListType = {
     ...features,
   };

package/lib/common/index.ts

@@ -7,4 +7,6 @@ export * from './reducers';
 export * from './selectors';
 export * from './hooks';
 export * from './utils';
+export * from './validationSchemas';
+
 export { ResourceUIState } from './types/resource-ui-state';

package/lib/common/types/index.ts

@@ -7,6 +7,7 @@ export * from './events';
 export * from './clusters';
 export * from './cpuArchitecture';
 export * from './featureSupportLevel';
+export * from './networkType';
 export * from './typescriptExtensions';
 export * from './generateIsoFields';
 export * from './errortype';

package/lib/common/types/networkType.ts

@@ -0,0 +1,37 @@
+import type { FeatureSupportLevelId } from '@openshift-assisted/types/assisted-installer-service';
+
+export type NetworkTypeKey =
+  | 'OVNKubernetes'
+  | 'OpenShiftSDN'
+  | 'CiscoACI'
+  | 'Cilium'
+  | 'Calico'
+  | 'None';
+
+export const NETWORK_TYPE_OVN: NetworkTypeKey = 'OVNKubernetes';
+export const NETWORK_TYPE_SDN: NetworkTypeKey = 'OpenShiftSDN';
+export const NETWORK_TYPE_CISCO_ACI: NetworkTypeKey = 'CiscoACI';
+export const NETWORK_TYPE_CILIUM: NetworkTypeKey = 'Cilium';
+export const NETWORK_TYPE_CALICO: NetworkTypeKey = 'Calico';
+export const NETWORK_TYPE_NONE: NetworkTypeKey = 'None';
+
+export const NETWORK_TYPE_LABELS: Record<string, string> = {
+  [NETWORK_TYPE_OVN]: 'Open Virtual Networking (OVN)',
+  [NETWORK_TYPE_SDN]: 'Software-Defined Networking (SDN)',
+  [NETWORK_TYPE_CISCO_ACI]: 'Cisco ACI',
+  [NETWORK_TYPE_CILIUM]: 'Isovalent Cilium',
+  [NETWORK_TYPE_CALICO]: 'Tigera Calico',
+  [NETWORK_TYPE_NONE]: 'None (Custom CNI)',
+};
+
+export const NETWORK_TYPE_FEATURE_IDS: Record<string, FeatureSupportLevelId> = {
+  [NETWORK_TYPE_OVN]: 'OVN_NETWORK_TYPE',
+  [NETWORK_TYPE_SDN]: 'SDN_NETWORK_TYPE',
+  [NETWORK_TYPE_CISCO_ACI]: 'CISCO_ACI_NETWORK_TYPE',
+  [NETWORK_TYPE_CILIUM]: 'CILIUM_NETWORK_TYPE',
+  [NETWORK_TYPE_CALICO]: 'CALICO_NETWORK_TYPE',
+  [NETWORK_TYPE_NONE]: 'NONE_NETWORK_TYPE',
+};
+
+export const isThirdPartyCNI = (networkType: string | undefined): boolean =>
+  !!networkType && networkType !== NETWORK_TYPE_OVN && networkType !== NETWORK_TYPE_SDN;

package/lib/common/types/ui-settings.ts

@@ -1,5 +1,4 @@
 export type UISettingsValues = {
-  addCustomManifests?: boolean;
   customManifestsAdded?: boolean;
   customManifestsUpdated?: boolean;
   bundlesSelected?: string[];

package/lib/common/utils.ts

@@ -2,13 +2,12 @@ import filesize from 'filesize.js';
 import camelCase from 'lodash-es/camelCase.js';
 import isString from 'lodash-es/isString.js';
 import { loadAll } from 'js-yaml';
+import { TFunction } from 'i18next';
 import { MAX_FILE_SIZE_BYTES, MAX_FILE_SIZE_OFFSET_FACTOR } from './configurations';
 
 export const FILENAME_REGEX = /^[^\/]*\.(json|ya?ml(\.patch_?[a-zA-Z0-9_]*)?)$/;
 
 export const FILE_TYPE_MESSAGE = 'Unsupported file type. Please provide a valid YAML file.';
-export const INCORRECT_TYPE_FILE_MESSAGE =
-  'File type is not supported. File type must be yaml, yml ,json , yaml.patch. or yml.patch.';
 
 export const getErrorMessage = (error: unknown): string => {
   if (error instanceof Error) {
@@ -60,11 +59,10 @@ export const fileSize: typeof filesize = (...args) =>
     .toUpperCase()
     .replace(/I/, 'i');
 
-export const getMaxFileSizeMessage = `File size is too big. The file size must be less than ${fileSize(
-  MAX_FILE_SIZE_BYTES,
-  0,
-  'si',
-)}.`;
+export const getMaxFileSizeMessage = (t: TFunction) =>
+  t('ai:File size is too big. The file size must be less than {{value}}.', {
+    value: fileSize(MAX_FILE_SIZE_BYTES, 0, 'si'),
+  });
 
 export const validateFileName = (fileName: string) => {
   return new RegExp(FILENAME_REGEX).test(fileName || '');