@openshift-assisted/ui-lib 2.7.12-cim → 2.9.0-cim

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

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { useField, useFormikContext } from 'formik';
+import { Checkbox, FormGroup, Tooltip } from '@patternfly/react-core';
+import { useFeature } from '../../../features';
+import { OpenshiftVersionOptionType } from '../../../types';
+import { getFieldId } from './utils';
+import HelperText from './HelperText';
+import { CheckboxFieldProps } from './types';
+import { FeatureSupportLevelBadge, useFeatureSupportLevel } from '../../featureSupportLevels';
+import { ClusterCreateParams } from '../../../api/types';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
+
+type SingleNodeCheckboxProps = CheckboxFieldProps & { versions: OpenshiftVersionOptionType[] };
+
+const SingleNodeCheckbox: React.FC<SingleNodeCheckboxProps> = ({
+  versions,
+  validate,
+  idPostfix,
+  ...props
+}) => {
+  const {
+    values: { openshiftVersion },
+  } = useFormikContext<ClusterCreateParams>();
+  const isSingleNodeOpenshiftEnabled = useFeature('ASSISTED_INSTALLER_SNO_FEATURE');
+  const [field, meta, helpers] = useField<'None' | 'Full'>({ name: props.name, validate });
+  const featureSupportLevelContext = useFeatureSupportLevel();
+  const prevVersionRef = React.useRef(openshiftVersion);
+  const fieldId = getFieldId(props.name, 'input', idPostfix);
+  const { t } = useTranslation();
+  const { value } = meta;
+  const { setValue } = helpers;
+  const isSupportedVersionAvailable = !!versions.find((version) =>
+    featureSupportLevelContext.isFeatureSupported(version.value, 'SNO'),
+  );
+  const onChanged = React.useCallback(
+    (checked: boolean) => setValue(checked ? 'None' : 'Full'),
+    [setValue],
+  );
+
+  const disabledReason = featureSupportLevelContext.getFeatureDisabledReason(
+    openshiftVersion,
+    'SNO',
+    t,
+  );
+
+  React.useEffect(() => {
+    if (
+      prevVersionRef.current !== openshiftVersion &&
+      !featureSupportLevelContext.isFeatureSupported(openshiftVersion, 'SNO')
+    ) {
+      //invoke updating SNO value only if the version changed to not be in danger of touching existing clusters
+      onChanged(false);
+    }
+    prevVersionRef.current = openshiftVersion;
+  }, [openshiftVersion, onChanged, featureSupportLevelContext]);
+
+  if (isSingleNodeOpenshiftEnabled && isSupportedVersionAvailable) {
+    return (
+      <FormGroup isInline fieldId={fieldId}>
+        <Tooltip hidden={!disabledReason} content={disabledReason}>
+          <Checkbox
+            {...field}
+            {...props}
+            id={fieldId}
+            label={
+              <>
+                {t('ai:Install single node OpenShift (SNO)')}&nbsp;
+                <FeatureSupportLevelBadge featureId="SNO" openshiftVersion={openshiftVersion} />
+              </>
+            }
+            aria-describedby={`${fieldId}-helper`}
+            description={
+              <HelperText fieldId={fieldId}>
+                {t('ai:SNO enables you to install OpenShift using only one host.')}
+              </HelperText>
+            }
+            isChecked={value === 'None'}
+            onChange={onChanged}
+            className="with-tooltip"
+          />
+        </Tooltip>
+      </FormGroup>
+    );
+  }
+  return null;
+};
+
+export default SingleNodeCheckbox;

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

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { FormGroup, Stack, StackItem, Switch, Tooltip } from '@patternfly/react-core';
+import { getFieldId } from './utils';
+import { SwitchFieldProps } from './types';
+import HelperText from './HelperText';
+
+const SwitchField: React.FC<SwitchFieldProps> = ({
+  label,
+  helperText,
+  isRequired,
+  onChange,
+  onChangeCustomOverride,
+  getHelperText,
+  idPostfix,
+  labelIcon,
+  tooltipProps,
+  switchOuiaId,
+  ...props
+}) => {
+  const [field, { touched, error }] = useField<string>(props.name);
+  const fieldId = getFieldId(props.name, 'input', idPostfix);
+  const isValid = !(touched && error);
+  const errorMessage = !isValid ? error : '';
+  const hText = getHelperText ? getHelperText(field.value) : helperText;
+
+  const switchFields = {
+    ...field,
+    id: fieldId,
+    label: label,
+    isDisabled: props.isDisabled,
+    isChecked: Boolean(field.value),
+    hasCheckIcon: Boolean(field.value),
+    ouiaId: switchOuiaId,
+    onChange: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => {
+      if (onChangeCustomOverride) {
+        onChangeCustomOverride(checked, event);
+      } else {
+        field.onChange(event);
+        onChange && onChange(checked, event);
+      }
+    },
+  };
+
+  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}
+          </HelperText>
+        )}
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default SwitchField;

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

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { FormGroup, Stack, StackItem, TextArea } from '@patternfly/react-core';
+import { TextAreaFieldProps } from './types';
+import { getFieldId } from './utils';
+import HelperText from './HelperText';
+
+const TextAreaField: React.FC<TextAreaFieldProps> = ({
+  label,
+  helperText,
+  getErrorText,
+  isRequired,
+  children,
+  idPostfix,
+  labelIcon,
+  groupClassName,
+  ...props
+}) => {
+  const [field, { touched, error }] = useField(props.name);
+  const fieldId = getFieldId(props.name, 'input', idPostfix);
+  const isValid = !(touched && error);
+
+  const getErrorMessage = () => {
+    if (!isValid && error) {
+      return getErrorText ? getErrorText(error) : error;
+    }
+    return '';
+  };
+
+  const errorMessage = getErrorMessage();
+  const { isDisabled, ...restProps } = props;
+  const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
+
+  return (
+    <Stack>
+      <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}
+          </HelperText>
+        )}
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default TextAreaField;

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { FormGroup, Button } from '@patternfly/react-core';
+import { TextAreaSecretProps } from './types';
+import { getFieldId } from './utils';
+import TextAreaField from './TextAreaField';
+
+const TextAreaSecretField: React.FC<TextAreaSecretProps> = ({
+  isSet,
+  isEdit,
+  helperTextHidden,
+  onToggle,
+  idPostfix,
+  ...props
+}) => {
+  const { label, name } = props;
+  const fieldId = getFieldId(name, 'input', idPostfix);
+
+  if (isEdit) {
+    return (
+      <TextAreaField {...props}>
+        {isSet && (
+          <Button onClick={() => onToggle(true)} variant="link">
+            Keep existing value
+          </Button>
+        )}
+      </TextAreaField>
+    );
+  }
+
+  return (
+    <FormGroup
+      fieldId={fieldId}
+      label={label}
+      helperText={helperTextHidden}
+      isRequired={props.isRequired}
+    >
+      <Button onClick={() => onToggle(false)} variant="link">
+        Change
+      </Button>
+    </FormGroup>
+  );
+};
+
+export default TextAreaSecretField;

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

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { FieldHelperProps, useField } from 'formik';
+import { FormGroup, FileUpload, Stack, StackItem } from '@patternfly/react-core';
+import { UploadFieldProps } from './types';
+import { getFieldId } from './utils';
+import HelperText from './HelperText';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
+
+const UploadField: React.FC<UploadFieldProps> = ({
+  label,
+  labelIcon,
+  helperText,
+  getErrorText,
+  isRequired,
+  children,
+  idPostfix,
+  isDisabled,
+  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 fieldId = getFieldId(name, 'input', idPostfix);
+  const isValid = !((touched || filename) && error);
+
+  const getErrorMessage = () => {
+    if (!isValid && error) {
+      return getErrorText ? getErrorText(error) : error;
+    }
+    return '';
+  };
+  const errorMessage = getErrorMessage();
+
+  const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
+
+  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 as FieldHelperProps<string>),
+            }}
+            allowEditingUploadedText={allowEdittingUploadedText}
+          />
+        </FormGroup>
+      </StackItem>
+      <StackItem>
+        {errorMessage && (
+          <HelperText fieldId={fieldId} isError>
+            {errorMessage}
+          </HelperText>
+        )}
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default UploadField;

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

@@ -0,0 +1,73 @@
+import { TFunction } from 'i18next';
+
+export const CLUSTER_NAME_MAX_LENGTH = 54;
+
+export const clusterNameValidationMessages = (t: TFunction) => ({
+  INVALID_LENGTH_OCM: t('ai:1-{{count}} characters', { count: CLUSTER_NAME_MAX_LENGTH }),
+  INVALID_LENGTH_ACM: t('ai:2-{{count}} characters', { count: CLUSTER_NAME_MAX_LENGTH }),
+  INVALID_VALUE: t('ai:Use lowercase alphanumeric characters or hyphen (-)'),
+  INVALID_START_END: t('ai:Start and end with a lowercase letter or a number.'),
+  NOT_UNIQUE: t('ai:Must be unique'),
+});
+
+export const ocmClusterNameValidationMessages = (t: TFunction) => ({
+  INVALID_LENGTH: clusterNameValidationMessages(t).INVALID_LENGTH_OCM,
+  INVALID_VALUE: clusterNameValidationMessages(t).INVALID_VALUE,
+  INVALID_START_END: clusterNameValidationMessages(t).INVALID_START_END,
+});
+
+export const uniqueOcmClusterNameValidationMessages = (t: TFunction) => ({
+  INVALID_LENGTH: clusterNameValidationMessages(t).INVALID_LENGTH_OCM,
+  INVALID_VALUE: clusterNameValidationMessages(t).INVALID_VALUE,
+  INVALID_START_END: clusterNameValidationMessages(t).INVALID_START_END,
+  NOT_UNIQUE: clusterNameValidationMessages(t).NOT_UNIQUE,
+});
+
+export const acmClusterNameValidationMessages = (t: TFunction) => ({
+  INVALID_LENGTH: clusterNameValidationMessages(t).INVALID_LENGTH_ACM,
+  INVALID_VALUE: clusterNameValidationMessages(t).INVALID_VALUE,
+  INVALID_START_END: clusterNameValidationMessages(t).INVALID_START_END,
+  NOT_UNIQUE: clusterNameValidationMessages(t).NOT_UNIQUE,
+});
+
+export const nameValidationMessages = (t: TFunction) => ({
+  INVALID_LENGTH: t('ai:1-253 characters'),
+  NOT_UNIQUE: t('ai:Must be unique'),
+  INVALID_VALUE: t('ai:Use lowercase alphanumeric characters, dot (.) or hyphen (-)'),
+  INVALID_START_END: t('ai:Must start and end with an lowercase alphanumeric character'),
+  INVALID_FORMAT: t('ai:Number of characters between dots (.) must be 1-63'),
+});
+
+export const BMCValidationMessages = (t: TFunction) => ({
+  ...nameValidationMessages(t),
+  LOCALHOST_ERR: t('ai:Do not use forbidden words, for example: "localhost".'),
+});
+
+export const hostnameValidationMessages = (t: TFunction) => ({
+  INVALID_LENGTH: t('ai:1-63 characters'),
+  NOT_UNIQUE: t('ai:Must be unique'),
+  INVALID_VALUE: t('ai:Use lowercase alphanumeric characters, dot (.) or hyphen (-)'),
+  INVALID_START_END: t('ai:Must start and end with an lowercase alphanumeric character'),
+  LOCALHOST_ERR: t('ai:Do not use forbidden words, for example: "localhost".'),
+});
+
+export const locationValidationMessages = (t: TFunction) => ({
+  INVALID_LENGTH: t('ai:1-63 characters'),
+  INVALID_VALUE: t('ai:Use alphanumeric characters, dot (.), underscore (_) or hyphen (-)'),
+  INVALID_START_END: t('ai:Must start and end with an alphanumeric character'),
+});
+
+export const bmcAddressValidationMessages = (t: TFunction) => ({
+  INVALID_VALUE: t(
+    'ai:The Value is not valid BMC address, supported protocols are redfish-virtualmedia or idrac-virtualmedia.',
+  ),
+});
+
+export const FORBIDDEN_HOSTNAMES = [
+  'localhost',
+  'localhost.localdomain',
+  'localhost4',
+  'localhost4.localdomain4',
+  'localhost6',
+  'localhost6.localdomain6',
+];

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

@@ -0,0 +1,27 @@
+export { default as InputField } from './InputField';
+export { default as CheckboxField } from './CheckboxField';
+export { default as TextAreaField } from './TextAreaField';
+export { default as SelectField } from './SelectField';
+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';
+export { default as SingleNodeCheckbox } from './SingleNodeCheckbox';
+export { default as NumberInputField } from './NumberInputField';
+export { default as CodeField } from './CodeField';
+export { default as RichInputField } from './RichInputField';
+export { default as AdditionalNTPSourcesField } from './AdditionalNTPSourcesField';
+export { default as RemovableField } from './RemovableField';
+export { default as AddButton } from './AddButton';
+export { default as PencilEditField } from './PencilEditField';
+export { default as AlertFormikError } from './AlertFormikError';
+
+export * from './utils';
+export * from './PullSecretField';
+export * from './validationSchemas';
+export * from './LabelField';
+export * from './constants';

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

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import {
+  TextInputTypes,
+  FormSelectOptionProps,
+  SelectOptionProps,
+  TooltipProps,
+  RadioProps,
+} from '@patternfly/react-core';
+import { FieldValidator, FieldHelperProps } from 'formik';
+import { DropzoneProps, DropFileEventHandler } from 'react-dropzone';
+import { CodeEditorProps } from '@patternfly/react-code-editor';
+import { Optional } from '../../../types/typescriptExtensions';
+
+export interface FieldProps {
+  name: string;
+  label?: React.ReactNode;
+  labelIcon?: React.ReactElement;
+  helperText?: React.ReactNode;
+  isRequired?: boolean;
+  style?: React.CSSProperties;
+  isReadOnly?: boolean;
+  disableDeleteRow?: boolean;
+  disableAddRow?: boolean;
+  className?: string;
+  groupClassName?: string;
+  isDisabled?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref?: React.Ref<any>;
+  validate?: FieldValidator;
+  min?: number | string;
+  max?: number | string;
+  idPostfix?: string;
+  callFormikOnChange?: boolean;
+  maxLength?: number | undefined;
+  minLength?: number | undefined;
+}
+
+export interface SelectFieldProps extends FieldProps {
+  options: FormSelectOptionProps[];
+  onChange?: (event: React.FormEvent<HTMLSelectElement>) => void;
+  getHelperText?: (value: string) => React.ReactNode | undefined;
+  // onBlur?: (event: React.FormEvent<HTMLSelectElement>) => void;
+}
+
+export type MultiSelectOption = SelectOptionProps & { id: string; displayName: string };
+
+export interface MultiSelectFieldProps extends FieldProps {
+  options: MultiSelectOption[];
+  placeholderText?: string;
+  onChange?: (val: string[]) => void;
+  getHelperText?: (value: string) => React.ReactNode | undefined;
+}
+
+export interface SwitchFieldProps extends FieldProps {
+  // replace the default onChange handler
+  onChangeCustomOverride?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+  // called in addition to the default internal onChange handler
+  onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+  getHelperText?: (value: string) => string | undefined;
+  tooltipProps?: TooltipProps;
+  switchOuiaId?: string;
+}
+
+export interface InputFieldProps extends FieldProps {
+  type?: TextInputTypes;
+  placeholder?: string;
+  noDefaultOnChange?: boolean;
+  onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  validate?: FieldValidator;
+  showErrorMessage?: boolean;
+}
+
+export interface NumberInputFieldProps extends FieldProps {
+  minValue?: number;
+  maxValue?: number;
+  minusBtnAriaLabel?: string;
+  plusBtnAriaLabel?: string;
+  unit?: string;
+  formatValue?: (newValue: number) => number;
+  onChange?: (value: number) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  validate?: FieldValidator;
+}
+
+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;
+  spellCheck?: boolean;
+  rows?: number;
+}
+
+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;
+  allowEdittingUploadedText?: boolean;
+  dropzoneProps?: Omit<DropzoneProps, 'onDropRejected'> & {
+    onDropRejected?: (helpers: FieldHelperProps<string>) => DropFileEventHandler;
+  };
+}
+
+export interface TextAreaSecretProps extends TextAreaFieldProps {
+  isSet?: boolean;
+  isEdit: boolean;
+  helperTextHidden?: string;
+  onToggle: (isHidden: boolean) => void;
+}
+
+export interface CheckboxFieldProps extends FieldProps {
+  body?: React.ReactNode;
+  onChange?: (value: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+}
+
+export interface SearchInputFieldProps extends InputFieldProps {
+  onSearch: (searchTerm: string) => void;
+}
+
+export interface DropdownFieldProps extends FieldProps {
+  items?: object;
+  selectedKey?: string;
+  title?: React.ReactNode;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export interface CodeFieldProps extends FieldProps {
+  language: CodeEditorProps['language'];
+  description?: React.ReactNode;
+  downloadFileName?: string;
+}
+
+type RadioWithoutRef = Omit<RadioProps, 'ref'>;
+
+export type RadioFieldProps = Optional<RadioWithoutRef, 'id'> & { callFormikOnChange?: boolean };