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

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { Checkbox, FormGroup, Stack, StackItem } from '@patternfly/react-core';
+import { CheckboxFieldProps } from './types';
+import { getFieldId } from './utils';
+import HelperText from './HelperText';
+
+const CheckboxField: React.FC<CheckboxFieldProps> = ({
+  label,
+  helperText,
+  onChange,
+  validate,
+  idPostfix,
+  ...props
+}) => {
+  const [field, { touched, error }] = useField({ name: props.name, validate });
+  const fieldId = getFieldId(props.name, 'checkbox', idPostfix);
+  const isValid = !(touched && error);
+  const errorMessage = !isValid ? error : '';
+  const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
+
+  return (
+    <Stack>
+      <StackItem>
+        <FormGroup
+          fieldId={fieldId}
+          helperTextInvalid={fieldHelperText}
+          validated={isValid ? 'default' : 'error'}
+        >
+          <Checkbox
+            {...field}
+            {...props}
+            id={fieldId}
+            label={label}
+            aria-describedby={`${fieldId}-helper`}
+            description={fieldHelperText}
+            isValid={isValid}
+            isChecked={field.value as boolean}
+            onChange={(value, event) => {
+              field.onChange(event);
+              onChange && onChange(value, event);
+            }}
+          />
+        </FormGroup>
+      </StackItem>
+      <StackItem>
+        {errorMessage && (
+          <HelperText fieldId={fieldId} isError>
+            {errorMessage}
+          </HelperText>
+        )}
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default CheckboxField;

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

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { FormGroup, HelperTextItem, Stack, StackItem } from '@patternfly/react-core';
+import { CodeFieldProps } from './types';
+import { getFieldId } from './utils';
+import HelperText from './HelperText';
+import { CodeEditor } from '@patternfly/react-code-editor';
+import useFieldErrorMsg from '../../../hooks/useFieldErrorMsg';
+import { monaco } from 'react-monaco-editor';
+
+const CodeField = ({
+  label,
+  labelIcon,
+  helperText,
+  isRequired,
+  validate,
+  idPostfix,
+  language,
+  name,
+  description,
+  isDisabled,
+  downloadFileName,
+}: CodeFieldProps) => {
+  const [field, , { setValue, setTouched }] = useField({ name, validate });
+  const fieldId = getFieldId(name, 'input', idPostfix);
+  const [monacoSubscription, setMonacoSubscription] = React.useState<monaco.IDisposable>();
+  const [monacoEditor, setMonacoEditor] = React.useState<monaco.editor.IStandaloneCodeEditor>();
+  const errorMessage = useFieldErrorMsg({ name, validate });
+
+  React.useEffect(() => {
+    //Work around for Patternfly CodeEditor not calling onChange after upload or drag/drop files
+    //The temporary solution is to handle the changes by registering to the change events of the internal editor in CodeEditor
+    //Once issue https://github.com/patternfly/patternfly-react/issues/7341 will be resolved this code can be replaced with a simple onChange
+    if (!monacoEditor) {
+      return;
+    }
+    if (monacoSubscription) {
+      monacoSubscription.dispose();
+    }
+    setMonacoSubscription(
+      monacoEditor.onDidChangeModelContent(() => {
+        setTouched(true);
+        setValue(monacoEditor.getModel()?.getValue(), true);
+      }),
+    );
+    return () => {
+      if (monacoSubscription) {
+        monacoSubscription.dispose();
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [monacoEditor]);
+
+  const isValid = !errorMessage;
+  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}
+        >
+          {description && (
+            <HelperText fieldId={fieldId}>
+              <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
+            </HelperText>
+          )}
+          <CodeEditor
+            code={field.value as string}
+            isUploadEnabled={!isDisabled}
+            isDownloadEnabled
+            isCopyEnabled
+            isLanguageLabelVisible
+            height="400px"
+            language={language}
+            onEditorDidMount={(editor) => setMonacoEditor(editor)}
+            downloadFileName={downloadFileName}
+          />
+        </FormGroup>
+      </StackItem>
+      <StackItem>
+        {errorMessage && (
+          <HelperText fieldId={fieldId} isError>
+            {errorMessage}
+          </HelperText>
+        )}
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default CodeField;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { shallowEqual } from 'react-redux';
+import debouncer from 'lodash-es/debounce.js';
+import { useFormikContext } from 'formik';
+
+type UseFormikAutoSave = (debounce?: number) => boolean;
+
+export const useFormikAutoSave: UseFormikAutoSave = (debounce = 1000) => {
+  const [autoSaveIDs, setAutoSaveIDs] = React.useState<number[]>([]);
+  const { values, isSubmitting, submitForm } = useFormikContext();
+  const prevValuesRef = React.useRef(values);
+  const commitRef = React.useRef(
+    debouncer(async (autoSaveID: number) => {
+      await submitForm();
+      setAutoSaveIDs((ids) => ids.filter((id) => id > autoSaveID));
+    }, debounce),
+  );
+
+  React.useEffect(() => {
+    if (!shallowEqual(prevValuesRef.current, values) && !isSubmitting) {
+      const autoSaveID = Date.now();
+      setAutoSaveIDs((ids) => {
+        ids.push(autoSaveID);
+        return ids;
+      });
+      void commitRef.current(autoSaveID);
+    }
+    if (!isSubmitting) {
+      prevValuesRef.current = values;
+    }
+  }, [values, isSubmitting, setAutoSaveIDs]);
+
+  React.useEffect(() => {
+    const commit = commitRef.current;
+    return () => commit.cancel();
+  }, []);
+
+  return !!autoSaveIDs.length;
+};
+
+const FormikAutoSave: React.FC<{ debounce?: number }> = ({ debounce = 1000 }) => {
+  const { values, dirty, isSubmitting, submitForm } = useFormikContext();
+  const prevValuesRef = React.useRef(values);
+  const commitRef = React.useRef(debouncer(submitForm, debounce));
+
+  React.useEffect(() => {
+    if (!shallowEqual(prevValuesRef.current, values) && dirty && !isSubmitting) {
+      void commitRef.current();
+    }
+    if (!isSubmitting) {
+      prevValuesRef.current = values;
+    }
+  }, [values, dirty, isSubmitting]);
+
+  React.useEffect(() => {
+    const commit = commitRef.current;
+    return () => commit.cancel();
+  }, []);
+
+  return null;
+};
+
+export default FormikAutoSave;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+
+type HelperTextProps = {
+  fieldId: string;
+  isError?: boolean;
+};
+
+/**
+ * HelperText component standardizes the format of non string helperText prop on FormGroup
+ * which is otherwise rendered 'as is' in FormGroup
+ */
+const HelperText: React.FC<HelperTextProps> = ({ fieldId, children, isError = false }) => (
+  <div
+    className={css('pf-c-form__helper-text', { 'pf-m-error': isError })}
+    id={isError ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+    aria-live="polite"
+  >
+    {children}
+  </div>
+);
+
+export default HelperText;

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

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import {
+  FormGroup,
+  HelperTextItem,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  TextInput,
+} from '@patternfly/react-core';
+import { InputFieldProps } from './types';
+import { getFieldId } from './utils';
+import HelperText from './HelperText';
+import useFieldErrorMsg from '../../../hooks/useFieldErrorMsg';
+
+const InputField: React.FC<
+  InputFieldProps & { inputError?: string; description?: React.ReactNode; labelInfo?: string }
+  // eslint-disable-next-line react/display-name
+> = React.forwardRef(
+  (
+    {
+      label,
+      labelIcon,
+      helperText,
+      isRequired,
+      onChange,
+      validate,
+      idPostfix,
+      children,
+      noDefaultOnChange,
+      inputError,
+      description,
+      labelInfo,
+      showErrorMessage = true,
+      ...props
+    },
+    ref: React.Ref<HTMLInputElement>,
+  ) => {
+    const [field] = useField({
+      name: props.name,
+      validate,
+    });
+
+    const fieldId = getFieldId(props.name, 'input', idPostfix);
+    const errorMessage = useFieldErrorMsg({ name: props.name, inputError, validate });
+    const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
+    const isValid = !errorMessage;
+
+    return (
+      <>
+        <Stack>
+          <StackItem>
+            <FormGroup
+              fieldId={fieldId}
+              label={label}
+              helperText={fieldHelperText}
+              helperTextInvalid={fieldHelperText}
+              validated={isValid ? 'default' : 'error'}
+              isRequired={isRequired}
+              labelIcon={labelIcon}
+              labelInfo={labelInfo}
+            >
+              {description && (
+                <HelperText fieldId={fieldId}>
+                  <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
+                </HelperText>
+              )}
+              <Split>
+                <SplitItem isFilled>
+                  <TextInput
+                    {...field}
+                    {...props}
+                    ref={ref}
+                    id={fieldId}
+                    validated={isValid ? 'default' : 'error'}
+                    isRequired={isRequired}
+                    aria-describedby={`${fieldId}-helper`}
+                    onChange={(value, event) => {
+                      if (!props.isDisabled) {
+                        !noDefaultOnChange && field.onChange(event);
+                        onChange && onChange(event);
+                      }
+                    }}
+                  />
+                </SplitItem>
+                <SplitItem>{children}</SplitItem>
+              </Split>
+            </FormGroup>
+          </StackItem>
+          <StackItem>
+            {showErrorMessage && errorMessage && (
+              <HelperText fieldId={fieldId} isError>
+                {errorMessage}
+              </HelperText>
+            )}
+          </StackItem>
+        </Stack>
+      </>
+    );
+  },
+);
+
+export default InputField;

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

@@ -0,0 +1,38 @@
+.label-field__value {
+  margin: 0 var(--pf-global--spacer--sm) 0 0;
+}
+
+.label-field__input {
+  border: 1px solid transparent;
+  outline: none;
+  width: 100%;
+}
+
+.label-field .react-autosuggest__suggestions-list {
+  margin-left: var(--pf-global--spacer-xs);
+  margin-right: var(--pf-global--spacer-xs);
+  box-shadow: var(--pf-global--BoxShadow--lg);
+
+  max-height: 10rem;
+  overflow: auto;
+  list-style-type: none;
+}
+
+.label-field .react-autosuggest__suggestion {
+  cursor: pointer;
+}
+
+.label-field .react-autosuggest__suggestion--highlighted {
+  /* TODO(mlibra): maybe a lighter color would be better */
+  background-color: var(--pf-global--primary-color--light-100);
+}
+
+.label-field .react-autosuggest__section-title {
+  padding: 10px 0 0 10px;
+  font-size: var(--pf-global--FontSize--sm);
+  color: var(--pf-global--Color--200);
+}
+
+.label-field .react-tagsinput {
+  width: 100%;
+}

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

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { FormGroup, Label, Stack, StackItem } from '@patternfly/react-core';
+import TagsInput from 'react-tagsinput';
+import { InputFieldProps } from './types';
+import { getFieldId } from './utils';
+import HelperText from './HelperText';
+
+import './LabelField.css';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
+
+type LabelValueProps = {
+  value: React.ReactText;
+  onClose?: () => void;
+};
+
+export const LabelValue: React.FC<LabelValueProps> = ({ value, onClose }) => (
+  <Label className="label-field__value" variant="outline" onClose={onClose}>
+    {value}
+  </Label>
+);
+
+type LabelFieldProps = InputFieldProps & {
+  // eslint-disable-next-line
+  onChange?: (tags: any[]) => void;
+};
+
+export const LabelField: React.FC<LabelFieldProps> = ({
+  label,
+  labelIcon,
+  helperText,
+  isRequired,
+  onChange,
+  validate,
+  idPostfix,
+  ...props
+}) => {
+  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 isValid = !(touched && error);
+  const errorMessage = !isValid ? error : '';
+  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}
+        >
+          {t(
+            "ai:Enter key=value and then press 'enter' or 'space' or use a ',' to input the label.",
+          )}
+          <div className="co-search-input pf-c-form-control">
+            <TagsInput
+              {...field}
+              onChange={(tags) => {
+                setValue(tags);
+                setInput('');
+                onChange && onChange(tags);
+                !touched && setTouched(true);
+              }}
+              addKeys={[13, 32, 188]}
+              renderTag={({ tag, key, onRemove, getTagDisplayValue }) => (
+                <LabelValue
+                  key={key as number}
+                  onClose={() => onRemove(key as number)}
+                  value={getTagDisplayValue(tag)}
+                />
+              )}
+              addOnBlur
+              inputProps={{
+                autoFocus: false,
+                className: 'label-field__input',
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                placeholder: field.value?.length ? '' : 'app=frontend',
+                spellCheck: 'false',
+                id: 'tags-input',
+                value: input,
+                // eslint-disable-next-line
+                onChange: (e: any) => setInput(e.target.value),
+                ['data-test']: 'tags-input',
+              }}
+            />
+          </div>
+        </FormGroup>
+      </StackItem>
+      <StackItem>
+        {errorMessage && (
+          <HelperText fieldId={fieldId} isError>
+            {errorMessage}
+          </HelperText>
+        )}
+      </StackItem>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,149 @@
+import React from 'react';
+import { useField } from 'formik';
+import Fuse from 'fuse.js';
+import {
+  FormGroup,
+  Select,
+  SelectOption,
+  SelectOptionObject,
+  SelectOptionProps,
+  SelectProps,
+  SelectVariant,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { MultiSelectFieldProps, MultiSelectOption } from './types';
+import { getFieldId } from './utils';
+import HelperText from './HelperText';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
+
+// Field value is a string[]
+const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
+  label,
+  options,
+  helperText,
+  placeholderText,
+  isRequired,
+  onChange,
+  getHelperText,
+  idPostfix,
+  labelIcon,
+  ...props
+}) => {
+  const [isOpen, setOpen] = React.useState(false);
+  const [field, { touched, error }, { setValue }] = useField<string[]>(props.name);
+  const fieldId = getFieldId(props.name, 'multiinput', idPostfix);
+  const isValid = !(touched && error);
+  const errorMessage = !isValid ? error : '';
+  const hText = getHelperText ? getHelperText(field.value?.join(',') || '') : helperText;
+
+  const onToggle = (isOpen: boolean) => setOpen(isOpen);
+  const onClearSelection = () => {
+    // onChange && onChange(event);
+    setValue([]);
+    onChange && onChange([]);
+    setOpen(false);
+  };
+
+  const onSelect: SelectProps['onSelect'] = (event, selection) => {
+    // already selected
+    const selected = field.value;
+
+    // selected just now
+    const selectionValue: string =
+      (
+        selection as {
+          /* TypeScript hack, debug hint: created as part of "selections" array below */ value?: string;
+        }
+      ).value || (selection as string);
+
+    let newValue: string[];
+    if (selected.includes(selectionValue)) {
+      newValue = selected.filter((sel: string) => sel !== selectionValue);
+    } else {
+      newValue = [...field.value, selectionValue];
+    }
+    setValue(newValue);
+    onChange && onChange(newValue);
+  };
+
+  // list of already selected options
+  const selections: (SelectOptionObject | string)[] = field.value.map((value: string) => {
+    const option = options.find((opt) => opt.value === value);
+    return option
+      ? {
+          value: option.value,
+          toString: () => option.displayName,
+          compareTo: (selectOption: { value: string }) => selectOption.value === value,
+        }
+      : value;
+  });
+
+  const children = options
+    .filter((option) => !(field.value || []).includes(option.value.toString()))
+    .map((option) => (
+      <SelectOption key={option.id} id={option.id} value={option.value}>
+        {option.displayName}
+      </SelectOption>
+    ));
+
+  const fuse = new Fuse(options, {
+    ignoreLocation: true,
+    keys: ['displayName'],
+  });
+  const { t } = useTranslation();
+  const fieldHelperText = <HelperText fieldId={fieldId}>{hText}</HelperText>;
+
+  return (
+    <Stack>
+      <StackItem>
+        <FormGroup
+          fieldId={fieldId}
+          label={label}
+          helperText={fieldHelperText}
+          helperTextInvalid={fieldHelperText}
+          validated={isValid ? 'default' : 'error'}
+          isRequired={isRequired}
+          labelIcon={labelIcon}
+        >
+          <Select
+            {...field}
+            {...props}
+            id={fieldId}
+            variant={SelectVariant.typeaheadMulti}
+            typeAheadAriaLabel={t('ai:Select a state')}
+            validated={isValid ? 'default' : 'error'}
+            aria-describedby={`${fieldId}-helper`}
+            isCreatable={false}
+            placeholderText={placeholderText}
+            isOpen={isOpen}
+            onToggle={onToggle}
+            onSelect={onSelect}
+            onClear={onClearSelection}
+            selections={selections}
+            onFilter={(e, val) => {
+              if (!val || val === '') {
+                return children;
+              }
+              const results = fuse.search<MultiSelectOption>(val).map((result) => result.item.id);
+              return (
+                React.Children.toArray(children) as React.ReactElement<SelectOptionProps>[]
+              ).filter(({ props }) => results.includes(props.id as string));
+            }}
+          >
+            {children}
+          </Select>
+        </FormGroup>
+      </StackItem>
+      <StackItem>
+        {errorMessage && (
+          <HelperText fieldId={fieldId} isError>
+            {errorMessage}
+          </HelperText>
+        )}
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default MultiSelectField;