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

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

@@ -1,9 +1,16 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, FormSelect, FormSelectOption, Stack, StackItem } from '@patternfly/react-core';
+import {
+  FormGroup,
+  FormHelperText,
+  FormSelect,
+  FormSelectOption,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
 import { getFieldId } from './utils';
 import { SelectFieldProps } from './types';
-import HelperText from './HelperText';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 // Reimplement this component to use custom Select in case of using it along the MultiSelectField component due to visual differences.
 // Idea: use Formik's field.multiple to switch among single and multi-selection.
@@ -25,47 +32,46 @@ const SelectField: React.FC<SelectFieldProps> = ({
   const isValid = !(touched && error);
   const errorMessage = !isValid ? error : '';
   const hText = getHelperText ? getHelperText(field.value) : helperText;
-  const fieldHelperText = <HelperText fieldId={fieldId}>{hText}</HelperText>;
 
   return (
-    <Stack id={`form-control__${fieldId}`}>
-      <StackItem>
-        <FormGroup
-          fieldId={fieldId}
-          label={label}
-          helperText={fieldHelperText}
-          helperTextInvalid={fieldHelperText}
-          validated={isValid ? 'default' : 'error'}
-          isRequired={isRequired}
-          labelIcon={labelIcon}
-        >
-          <FormSelect
-            {...field}
-            {...props}
-            id={fieldId}
-            validated={isValid ? 'default' : 'error'}
-            isRequired={isRequired}
-            aria-describedby={`${fieldId}-helper`}
-            onChange={(value, event) => {
-              //customHandleChange enables calling formik change handler explicitly, useful for example to have the previous value
-              callFormikOnChange && field.onChange(event);
-              onChange && onChange(value, event);
-            }}
-          >
-            {options.map((option, index) => (
-              <FormSelectOption key={option.id || index} {...option} />
-            ))}
-          </FormSelect>
-        </FormGroup>
-      </StackItem>
-      <StackItem>
-        {errorMessage && (
-          <HelperText fieldId={fieldId} isError>
-            {errorMessage}
+    <FormGroup
+      fieldId={fieldId}
+      label={label}
+      isRequired={isRequired}
+      labelIcon={labelIcon}
+      id={`form-control__${fieldId}`}
+    >
+      <FormSelect
+        {...field}
+        {...props}
+        id={fieldId}
+        validated={isValid ? 'default' : 'error'}
+        isRequired={isRequired}
+        aria-describedby={`${fieldId}-helper`}
+        onChange={(event, value) => {
+          //customHandleChange enables calling formik change handler explicitly, useful for example to have the previous value
+          callFormikOnChange && field.onChange(event);
+          onChange && onChange(event, value);
+        }}
+      >
+        {options.map((option, index) => (
+          <FormSelectOption key={option.id || index} {...option} />
+        ))}
+      </FormSelect>
+      {(errorMessage || hText) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={<ExclamationCircleIcon />}
+              variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+            >
+              {errorMessage ? errorMessage : hText}
+            </HelperTextItem>
           </HelperText>
-        )}
-      </StackItem>
-    </Stack>
+        </FormHelperText>
+      )}
+    </FormGroup>
   );
 };
 

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

@@ -1,9 +1,15 @@
 import * as React from 'react';
 import { useField, useFormikContext } from 'formik';
-import { Checkbox, FormGroup, Tooltip } from '@patternfly/react-core';
+import {
+  Checkbox,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Tooltip,
+} from '@patternfly/react-core';
 import { OpenshiftVersionOptionType } from '../../../types';
 import { getFieldId } from './utils';
-import HelperText from './HelperText';
 import { CheckboxFieldProps } from './types';
 import { FeatureSupportLevelBadge, useFeatureSupportLevel } from '../../featureSupportLevels';
 import { ClusterCreateParams } from '@openshift-assisted/types/assisted-installer-service';
@@ -68,12 +74,18 @@ const SingleNodeCheckbox: React.FC<SingleNodeCheckboxProps> = ({
             }
             aria-describedby={`${fieldId}-helper`}
             description={
-              <HelperText fieldId={fieldId}>
-                {t('ai:SNO enables you to install OpenShift using only one host.')}
-              </HelperText>
+              <FormGroup>
+                <FormHelperText>
+                  <HelperText id={fieldId}>
+                    <HelperTextItem>
+                      {t('ai:SNO enables you to install OpenShift using only one host.')}
+                    </HelperTextItem>
+                  </HelperText>
+                </FormHelperText>
+              </FormGroup>
             }
             isChecked={value === 'None'}
-            onChange={onChanged}
+            onChange={(_event, value) => onChanged(value)}
             className="with-tooltip"
           />
         </Tooltip>

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

@@ -1,9 +1,16 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, Stack, StackItem, Switch, Tooltip } from '@patternfly/react-core';
+import {
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Switch,
+  Tooltip,
+} from '@patternfly/react-core';
 import { getFieldId } from './utils';
 import { SwitchFieldProps } from './types';
-import HelperText from './HelperText';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 const SwitchField: React.FC<SwitchFieldProps> = ({
   label,
@@ -32,7 +39,7 @@ const SwitchField: React.FC<SwitchFieldProps> = ({
     isChecked: Boolean(field.value),
     hasCheckIcon: Boolean(field.value),
     ouiaId: switchOuiaId,
-    onChange: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => {
+    onChange: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
       if (onChangeCustomOverride) {
         onChangeCustomOverride(checked, event);
       } else {
@@ -42,36 +49,29 @@ const SwitchField: React.FC<SwitchFieldProps> = ({
     },
   };
 
-  const fieldHelperText = <HelperText fieldId={fieldId}>{hText}</HelperText>;
-
   return (
-    <Stack>
-      <StackItem>
-        <FormGroup
-          fieldId={fieldId}
-          helperText={fieldHelperText}
-          helperTextInvalid={fieldHelperText}
-          validated={isValid ? 'default' : 'error'}
-          isRequired={isRequired}
-          labelIcon={labelIcon}
-        >
-          {tooltipProps ? (
-            <Tooltip {...tooltipProps}>
-              <Switch {...switchFields} />
-            </Tooltip>
-          ) : (
-            <Switch {...switchFields} />
-          )}
-        </FormGroup>
-      </StackItem>
-      <StackItem>
-        {errorMessage && (
-          <HelperText fieldId={fieldId} isError>
-            {errorMessage}
+    <FormGroup fieldId={fieldId} isRequired={isRequired} labelIcon={labelIcon}>
+      {tooltipProps ? (
+        <Tooltip {...tooltipProps}>
+          <Switch {...switchFields} />
+        </Tooltip>
+      ) : (
+        <Switch {...switchFields} />
+      )}
+      {(errorMessage || hText) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={<ExclamationCircleIcon />}
+              variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+            >
+              {errorMessage ? errorMessage : hText}
+            </HelperTextItem>
           </HelperText>
-        )}
-      </StackItem>
-    </Stack>
+        </FormHelperText>
+      )}
+    </FormGroup>
   );
 };
 

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

@@ -1,9 +1,15 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, Stack, StackItem, TextArea } from '@patternfly/react-core';
+import {
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  TextArea,
+} from '@patternfly/react-core';
 import { TextAreaFieldProps } from './types';
 import { getFieldId } from './utils';
-import HelperText from './HelperText';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 const TextAreaField: React.FC<TextAreaFieldProps> = ({
   label,
@@ -29,43 +35,42 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
 
   const errorMessage = getErrorMessage();
   const { isDisabled, ...restProps } = props;
-  const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
 
   return (
-    <Stack id={`form-control__${fieldId}`}>
-      <StackItem>
-        <FormGroup
-          fieldId={fieldId}
-          label={label}
-          helperText={fieldHelperText}
-          helperTextInvalid={fieldHelperText}
-          validated={isValid ? 'default' : 'error'}
-          isRequired={isRequired}
-          labelIcon={labelIcon}
-          className={groupClassName}
-        >
-          {children}
-          <TextArea
-            {...field}
-            {...restProps}
-            id={fieldId}
-            style={{ resize: 'vertical' }}
-            validated={isValid ? 'default' : 'error'}
-            isRequired={isRequired}
-            aria-describedby={`${fieldId}-helper`}
-            onChange={(value, event) => field.onChange(event)}
-            disabled={isDisabled}
-          />
-        </FormGroup>
-      </StackItem>
-      <StackItem>
-        {errorMessage && (
-          <HelperText fieldId={fieldId} isError>
-            {errorMessage}
+    <FormGroup
+      fieldId={fieldId}
+      label={label}
+      isRequired={isRequired}
+      labelIcon={labelIcon}
+      className={groupClassName}
+      id={`form-control__${fieldId}`}
+    >
+      {children}
+      <TextArea
+        {...field}
+        {...restProps}
+        id={fieldId}
+        style={{ resize: 'vertical' }}
+        validated={isValid ? 'default' : 'error'}
+        isRequired={isRequired}
+        aria-describedby={`${fieldId}-helper`}
+        onChange={(event) => field.onChange(event)}
+        disabled={isDisabled}
+      />
+      {(errorMessage || helperText) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={errorMessage && <ExclamationCircleIcon />}
+              variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+            >
+              {errorMessage ? errorMessage : helperText}
+            </HelperTextItem>
           </HelperText>
-        )}
-      </StackItem>
-    </Stack>
+        </FormHelperText>
+      )}
+    </FormGroup>
   );
 };
 

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

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { FormGroup, Button } from '@patternfly/react-core';
+import {
+  FormGroup,
+  Button,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
 import { TextAreaSecretProps } from './types';
 import { getFieldId } from './utils';
 import TextAreaField from './TextAreaField';
@@ -28,15 +34,17 @@ const TextAreaSecretField: React.FC<TextAreaSecretProps> = ({
   }
 
   return (
-    <FormGroup
-      fieldId={fieldId}
-      label={label}
-      helperText={helperTextHidden}
-      isRequired={props.isRequired}
-    >
+    <FormGroup fieldId={fieldId} label={label} isRequired={props.isRequired}>
       <Button onClick={() => onToggle(false)} variant="link">
         Change
       </Button>
+      {helperTextHidden && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>{helperTextHidden}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
     </FormGroup>
   );
 };

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

@@ -1,10 +1,16 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, FileUpload, Stack, StackItem } from '@patternfly/react-core';
+import {
+  FormGroup,
+  FileUpload,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
 import { UploadFieldProps } from './types';
 import { getFieldId } from './utils';
-import HelperText from './HelperText';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 const UploadField: React.FC<UploadFieldProps> = ({
   label,
@@ -18,14 +24,13 @@ const UploadField: React.FC<UploadFieldProps> = ({
   name,
   onBlur,
   allowEdittingUploadedText = true,
-  dropzoneProps,
 }) => {
   const { t } = useTranslation();
 
   const [filename, setFilename] = React.useState<string>();
   const [isFileUploading, setIsFileUploading] = React.useState(false);
 
-  const [field, { touched, error }, helpers] = useField<string | File>(name);
+  const [field, { touched, error }, { setValue, setTouched }] = useField<string | File>(name);
   const fieldId = getFieldId(name, 'input', idPostfix);
   const isValid = !((touched || filename) && error);
 
@@ -36,64 +41,82 @@ 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} labelIcon={labelIcon}>
+      {children}
+      <FileUpload
+        filenamePlaceholder={t('ai:Drag a file here or browse to upload')}
+        browseButtonText={t('ai:Browse...')}
+        clearButtonText={t('ai:Clear')}
+        id={field.name}
+        style={{ resize: 'vertical' }}
+        validated={isValid ? 'default' : 'error'}
+        isRequired={isRequired}
+        aria-describedby={`${fieldId}-helper`}
+        type="text"
+        value={field.value as string}
+        filename={filename}
+        onDataChange={(_event, file: string) => {
+          setValue(file);
+          setTouched(true);
+        }}
+        onTextChange={(_event, file: string) => {
+          setValue(file);
+          setTouched(true);
+        }}
+        onFileInputChange={(_event, file) => {
+          setFilename(file.name);
+          setTouched(true);
+          setValue(file);
+        }}
+        onBlur={(e) => {
+          const file: File | string = field.value;
+          if (file instanceof File) {
+            const reader = new FileReader();
 
-  const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
+            reader.onload = (event) => {
+              if (event.target) {
+                const contentAsString = event.target.result as string;
+                onBlur && onBlur(e, contentAsString);
+              }
+            };
 
-  return (
-    <Stack>
-      <StackItem>
-        <FormGroup
-          fieldId={fieldId}
-          label={label}
-          helperText={fieldHelperText}
-          helperTextInvalid={fieldHelperText}
-          validated={isValid ? 'default' : 'error'}
-          isRequired={isRequired}
-          labelIcon={labelIcon}
-        >
-          {children}
-          <FileUpload
-            filenamePlaceholder={t('ai:Drag a file here or browse to upload')}
-            browseButtonText={t('ai:Browse...')}
-            clearButtonText={t('ai:Clear')}
-            id={field.name}
-            style={{ resize: 'vertical' }}
-            validated={isValid ? 'default' : 'error'}
-            isRequired={isRequired}
-            aria-describedby={`${fieldId}-helper`}
-            type="text"
-            value={field.value as string}
-            filename={filename}
-            onChange={(value, filename) => {
-              setFilename(filename);
-              helpers.setTouched(true);
-              helpers.setValue(value);
-            }}
-            onBlur={(e) => {
-              field.onBlur(e);
-              onBlur && onBlur(e);
-            }}
-            onReadStarted={() => setIsFileUploading(true)}
-            onReadFinished={() => setIsFileUploading(false)}
-            isLoading={isFileUploading}
-            disabled={isDisabled}
-            dropzoneProps={{
-              ...dropzoneProps,
-              onDropRejected:
-                dropzoneProps?.onDropRejected && dropzoneProps?.onDropRejected(helpers),
-            }}
-            allowEditingUploadedText={allowEdittingUploadedText}
-          />
-        </FormGroup>
-      </StackItem>
-      <StackItem>
-        {errorMessage && (
-          <HelperText fieldId={fieldId} isError>
-            {errorMessage}
+            // Read the file content as text
+            reader.readAsText(file);
+          } else {
+            onBlur && onBlur(e, file);
+          }
+        }}
+        onReadStarted={() => setIsFileUploading(true)}
+        onReadFinished={() => setIsFileUploading(false)}
+        isLoading={isFileUploading}
+        disabled={isDisabled}
+        allowEditingUploadedText={allowEdittingUploadedText}
+        dropzoneProps={{
+          accept: acceptedFiles,
+          maxSize: maxFileSize,
+        }}
+        onClearClick={() => {
+          setFilename('');
+          setValue('');
+        }}
+      />
+      {(errorMessage || helperText) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={errorMessage && <ExclamationCircleIcon />}
+              variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+            >
+              {errorMessage ? errorMessage : helperText}
+            </HelperTextItem>
           </HelperText>
-        )}
-      </StackItem>
-    </Stack>
+        </FormHelperText>
+      )}
+    </FormGroup>
   );
 };
 

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

@@ -6,7 +6,6 @@ export { default as MultiSelectField } from './MultiSelectField';
 export { default as TextAreaSecretField } from './TextAreaSecretField';
 export { default as UploadField } from './UploadField';
 export { default as SwitchField } from './SwitchField';
-export { default as HelperText } from './HelperText';
 export { default as FormikAutoSave, useFormikAutoSave } from './FormikAutoSave';
 export { default as PullSecretField } from './PullSecretField';
 export { default as RadioField } from './RadioField';

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

@@ -2,13 +2,14 @@ import * as React from 'react';
 import {
   TextInputTypes,
   FormSelectOptionProps,
-  SelectOptionProps,
   TooltipProps,
   RadioProps,
   FormSelectProps,
+  DropEvent,
 } from '@patternfly/react-core';
+import { SelectOptionProps } from '@patternfly/react-core/deprecated';
 import { FieldValidator, FieldHelperProps } from 'formik';
-import { DropzoneProps, DropFileEventHandler } from 'react-dropzone';
+import { DropzoneProps } from 'react-dropzone';
 import { CodeEditorProps } from '@patternfly/react-code-editor';
 import { Optional } from '../../../types/typescriptExtensions';
 
@@ -88,7 +89,7 @@ export interface TextAreaFieldProps extends FieldProps {
   getErrorText?: (error: string) => React.ReactNode | undefined;
   placeholder?: string;
   onChange?: (event: React.FormEvent<HTMLTextAreaElement>) => void;
-  onBlur?: (event: React.FormEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement, Element> | undefined) => void;
   spellCheck?: boolean;
   rows?: number;
 }
@@ -97,10 +98,10 @@ export interface UploadFieldProps extends FieldProps {
   getErrorText?: (error: string) => React.ReactNode | undefined;
   placeholder?: string;
   onChange?: (event: React.FormEvent<HTMLTextAreaElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;
   allowEdittingUploadedText?: boolean;
   dropzoneProps?: Omit<DropzoneProps, 'onDropRejected'> & {
-    onDropRejected?: (helpers: FieldHelperProps<string>) => DropFileEventHandler;
+    onDropRejected?: (helpers: FieldHelperProps<string>) => DropEvent;
   };
 }
 
@@ -134,6 +135,7 @@ export interface CodeFieldProps extends FieldProps {
   description?: React.ReactNode;
   downloadFileName?: string;
   dataTestid?: string;
+  showCustomControls?: boolean;
 }
 
 type RadioWithoutRef = Omit<RadioProps, 'ref'>;

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

@@ -73,7 +73,7 @@ export const getDuplicates = (list: string[]): string[] => {
 };
 
 export const getRichTextValidation =
-  <T extends object>(schema: Yup.ObjectSchema<T> | Yup.Lazy) =>
+  <T extends object>(schema: Yup.ObjectSchema<T> | Yup.Lazy<T>) =>
   async (values: T): Promise<FieldErrors | undefined> => {
     try {
       await schema.validate(values, {