@flightctl/ui-components 0.0.4 → 0.0.5

package/src/components/form/LabelsField.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { Label, LabelGroup } from '@patternfly/react-core';
+
+import { FlightCtlLabel } from '../../types/extraTypes';
+import EditableLabelControl from '../common/EditableLabelControl';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+
+type LabelsFieldProps = {
+  name: string;
+  isFormEditable?: boolean;
+  addButtonText?: string;
+  helperText?: React.ReactNode;
+  onChangeCallback?: (newLabels: FlightCtlLabel[], hasErrors: boolean) => void;
+};
+
+const maxWidthDefaultLabel = '18ch'; // Can fit more chars as it doesn't have a "Close" button
+const maxWidthNonDefaultLabel = '16ch'; // Can fit less chars due to the "Close" button
+
+const LabelsField: React.FC<LabelsFieldProps> = ({
+  name,
+  onChangeCallback,
+  addButtonText,
+  helperText,
+  isFormEditable = true,
+}) => {
+  const [{ value: labels }, meta, { setValue: setLabels }] = useField<FlightCtlLabel[]>(name);
+  const updateLabels = async (newLabels: FlightCtlLabel[]) => {
+    const errors = await setLabels(newLabels, true);
+    const hasErrors = Object.keys(errors || {}).length > 0;
+
+    onChangeCallback && onChangeCallback(newLabels, hasErrors);
+  };
+
+  const onDelete = async (_ev: React.MouseEvent<Element, MouseEvent>, index: number) => {
+    if (!isFormEditable) {
+      return;
+    }
+    const newLabels = [...labels];
+    newLabels.splice(index, 1);
+    await updateLabels(newLabels);
+  };
+
+  const onAdd = async (text: string) => {
+    const split = text.split('=');
+    let newLabel: FlightCtlLabel;
+    if (split.length === 2) {
+      newLabel = { key: split[0], value: split[1] };
+    } else {
+      newLabel = { key: text || '', value: '' };
+    }
+
+    const newLabels = [...labels, newLabel];
+
+    await updateLabels(newLabels);
+  };
+
+  const onEdit = async (index: number, nextText: string) => {
+    const label = nextText.split('=');
+    const newLabels = [...labels];
+    newLabels.splice(index, 1, { key: label[0], value: label.length ? label[1] : undefined });
+
+    await updateLabels(newLabels);
+  };
+
+  return (
+    <>
+      <LabelGroup
+        numLabels={5}
+        isEditable={isFormEditable}
+        addLabelControl={
+          <EditableLabelControl
+            defaultLabel="key=value"
+            addButtonText={addButtonText}
+            onAddLabel={onAdd}
+            isEditable={isFormEditable}
+          />
+        }
+      >
+        {labels.map(({ key, value, isDefault }, index) => {
+          const text = value ? `${key}=${value}` : key;
+          const elKey = `${key}__${index}`;
+          if (isDefault) {
+            return (
+              <Label key={elKey} textMaxWidth={maxWidthDefaultLabel}>
+                {text}
+              </Label>
+            );
+          }
+
+          const closeButtonProps = !isFormEditable && { isDisabled: true };
+          const isLabelEditable = isFormEditable && !isDefault;
+          return (
+            <Label
+              key={elKey}
+              textMaxWidth={maxWidthNonDefaultLabel}
+              closeBtnProps={closeButtonProps}
+              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={isLabelEditable ? text : undefined}
+              isEditable={isLabelEditable}
+            >
+              {text}
+            </Label>
+          );
+        })}
+      </LabelGroup>
+      <DefaultHelperText helperText={helperText} />
+      <ErrorHelperText meta={meta} touchRequired={false} />
+    </>
+  );
+};
+
+export default LabelsField;

package/src/components/form/NameField.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import debounce from 'lodash/debounce';
+
+import { useFetch } from '../../hooks/useFetch';
+import { useTranslation } from '../../hooks/useTranslation';
+import RichValidationTextField, { RichValidationTextFieldProps } from './RichValidationTextField';
+import { TextFieldProps } from './TextField';
+
+type NameFieldProps = TextFieldProps & {
+  resourceType: string;
+  validations: RichValidationTextFieldProps['validations'];
+};
+
+const NameField: React.FC<NameFieldProps> = ({ name, isDisabled, validations, resourceType, ...rest }) => {
+  const { t } = useTranslation();
+  const { get } = useFetch();
+  const [{ value }, { error }, { setError }] = useField<string>(name);
+  const currentErrorRef = React.useRef<boolean>();
+  const abortControllerRef = React.useRef<AbortController>();
+
+  const setValidationError = () => {
+    // @ts-expect-error Sets format used by RichValidationTextField
+    setError({
+      duplicateName: 'failed',
+    });
+  };
+
+  const validateExistingName = async (value: string) => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+    if (isDisabled || !value) {
+      currentErrorRef.current = false;
+      return;
+    }
+    try {
+      await get(`${resourceType}/${value}`, abortControllerRef.current.signal);
+      currentErrorRef.current = true;
+      setValidationError();
+    } catch (e) {
+      currentErrorRef.current = false;
+    }
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const validate = React.useCallback(debounce(validateExistingName, 1000), []);
+
+  React.useEffect(() => {
+    currentErrorRef.current = undefined;
+    validate(value);
+  }, [value, validate]);
+
+  React.useEffect(() => {
+    if (!error && currentErrorRef.current) {
+      setValidationError();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [error]);
+
+  const allValidations = [
+    {
+      key: 'duplicateName',
+      message: t('Name must be unique'),
+    },
+    ...validations,
+  ];
+
+  return <RichValidationTextField fieldName={name} validations={allValidations} isDisabled={isDisabled} {...rest} />;
+};
+
+export default NameField;

package/src/components/form/RadioField.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { FormGroup, Radio, RadioProps } from '@patternfly/react-core';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+
+export interface RadioFieldProps extends Omit<RadioProps, 'onChange' | 'ref' | 'checked'> {
+  checkedValue?: unknown;
+  name: string;
+  helperText?: React.ReactNode;
+  onChangeCustom?: (checkedValue: unknown) => void;
+  noDefaultOnChange?: boolean;
+}
+
+const RadioField = ({
+  helperText,
+  checkedValue,
+  name,
+  onChangeCustom,
+  noDefaultOnChange,
+  ...props
+}: RadioFieldProps) => {
+  const [field, meta, { setValue, setTouched }] = useField({
+    name,
+  });
+
+  const onChange: RadioProps['onChange'] = async (_, checked) => {
+    if (checked) {
+      if (onChangeCustom) {
+        onChangeCustom(checkedValue);
+      }
+      if (noDefaultOnChange) {
+        return;
+      }
+      await setValue(checkedValue || true, true);
+      await setTouched(true);
+    }
+  };
+
+  const fieldId = `radiofield-${props.id}`;
+
+  return (
+    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
+      <Radio
+        {...field}
+        {...props}
+        id={fieldId}
+        onChange={onChange}
+        isChecked={checkedValue ? field.value === checkedValue : !!field.value}
+      />
+
+      <DefaultHelperText helperText={helperText} />
+      <ErrorHelperText meta={meta} />
+    </FormGroup>
+  );
+};
+
+export default RadioField;

package/src/components/form/RichValidationTextField.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import {
+  Button,
+  FormGroup,
+  HelperText,
+  HelperTextItem,
+  HelperTextItemProps,
+  InputGroup,
+  InputGroupItem,
+  Popover,
+  PopoverPosition,
+  TextInput,
+  TextInputProps,
+} from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-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 successColor from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+import dangerColor from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import infoColor from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
+import { useField } from 'formik';
+
+interface RichValidationStatusProps {
+  validations: RichValidationTextFieldProps['validations'];
+  metaError?: string | Record<string, string>;
+  isRequired: boolean;
+  hasValue: boolean;
+}
+const RichValidationStatus = ({ isRequired, hasValue, validations, metaError }: RichValidationStatusProps) => {
+  const showRequiredError = isRequired && !hasValue;
+  return (
+    <HelperText component="ul">
+      {validations.map((validation) => {
+        let hasError = false;
+        // For each validation entry, we check if there's an error with the same key
+        if (metaError !== undefined && typeof metaError !== 'string') {
+          hasError = metaError?.[validation.key] === 'failed';
+        }
+
+        let iconType: HelperTextItemProps['icon'];
+        let variant: HelperTextItemProps['variant'];
+
+        if (showRequiredError) {
+          variant = 'indeterminate';
+        } else if (hasError) {
+          iconType = <TimesIcon />;
+          variant = 'error';
+        } else {
+          variant = 'success';
+          iconType = <CheckIcon />;
+        }
+
+        return (
+          <HelperTextItem key={validation.key} isDynamic component="li" variant={variant} icon={iconType}>
+            {validation.message}
+          </HelperTextItem>
+        );
+      })}
+    </HelperText>
+  );
+};
+
+export interface RichValidationTextFieldProps extends TextInputProps {
+  fieldName: string;
+  isRequired?: boolean;
+  validations: {
+    key: string;
+    message: string;
+  }[];
+}
+
+const RichValidationTextField = ({ fieldName, validations, isRequired, ...rest }: RichValidationTextFieldProps) => {
+  const [popoverOpen, setPopoverOpen] = React.useState(false);
+
+  const [field, meta, { setTouched }] = useField({
+    name: fieldName,
+  });
+
+  const fieldId = `rich-validation-field-${fieldName}`;
+  const hasValue = !!field.value;
+
+  return (
+    <FormGroup label={rest?.['aria-label']} id={`form-control__${fieldId}`} fieldId={fieldId} isRequired={isRequired}>
+      <InputGroup>
+        <InputGroupItem isFill>
+          <TextInput
+            {...field}
+            {...rest}
+            id={fieldId}
+            isRequired={isRequired}
+            aria-describedby={`${fieldId}-helper`}
+            onChange={async (event, val) => {
+              !popoverOpen && setPopoverOpen(true);
+              field.onChange(event);
+              // TODO does not work well for the first character
+              if (!meta.touched && val?.length) {
+                await setTouched(true, true);
+              }
+            }}
+            onBlur={() => {
+              setPopoverOpen(false);
+              void setTouched(true, true);
+            }}
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Popover
+            isVisible={popoverOpen}
+            shouldClose={() => setPopoverOpen(false)}
+            shouldOpen={() => setPopoverOpen(true)}
+            aria-label="validation popover"
+            position={PopoverPosition.top}
+            bodyContent={
+              <RichValidationStatus
+                hasValue={hasValue}
+                isRequired={isRequired || false}
+                validations={validations}
+                metaError={meta.error}
+              />
+            }
+            withFocusTrap={false}
+          >
+            <Button variant="plain" aria-label="Validation">
+              {!hasValue ? (
+                <InfoCircleIcon color={infoColor.value} />
+              ) : !!meta.error ? (
+                <ExclamationCircleIcon color={dangerColor.value} />
+              ) : (
+                <CheckCircleIcon color={successColor.value} />
+              )}
+            </Button>
+          </Popover>
+        </InputGroupItem>
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+export default RichValidationTextField;

package/src/components/form/SwitchField.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { FormGroup, Switch, SwitchProps } from '@patternfly/react-core';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+
+export interface SwitchFieldProps extends Omit<SwitchProps, 'onChange' | 'ref' | 'checked' | 'id'> {
+  name: string;
+  helperText?: React.ReactNode;
+}
+
+const SwitchField = ({ helperText, name, ...props }: SwitchFieldProps) => {
+  const [field, meta, { setValue, setTouched }] = useField({
+    name,
+  });
+
+  const onChange: SwitchProps['onChange'] = async (_, checked) => {
+    await setValue(checked);
+    await setTouched(true);
+  };
+
+  const fieldId = `switchfield-${name}`;
+
+  return (
+    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
+      <Switch {...field} {...props} id={fieldId} onChange={onChange} isChecked={!!field.value} />
+      <DefaultHelperText helperText={helperText} />
+      <ErrorHelperText meta={meta} />
+    </FormGroup>
+  );
+};
+
+export default SwitchField;

package/src/components/form/TextAreaField.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { FormGroup, TextArea, TextAreaProps } from '@patternfly/react-core';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+
+interface TextAreaFieldProps extends Omit<TextAreaProps, 'onChange'> {
+  name: string;
+  helperText?: React.ReactNode;
+  onChangeCustom?: (value: string) => void;
+  minHeight?: string;
+}
+
+const TextAreaField = ({ helperText, onChangeCustom, minHeight = '10rem', ...props }: TextAreaFieldProps) => {
+  const [field, meta, { setValue, setTouched }] = useField({
+    name: props.name,
+  });
+
+  const onChange: TextAreaProps['onChange'] = async (_, value) => {
+    await setValue(value);
+    if (onChangeCustom) {
+      onChangeCustom(value);
+    }
+    await setTouched(true);
+  };
+
+  const fieldId = `textareafield-${props.name}`;
+  const hasError = meta.touched && !!meta.error;
+
+  return (
+    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
+      <TextArea
+        {...field}
+        {...props}
+        id={fieldId}
+        onChange={onChange}
+        validated={hasError ? 'error' : 'default'}
+        style={{ minHeight }}
+      />
+
+      <DefaultHelperText helperText={helperText} />
+      <ErrorHelperText meta={meta} />
+    </FormGroup>
+  );
+};
+
+export default TextAreaField;

package/src/components/form/TextField.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { FormGroup, TextInput, TextInputProps } from '@patternfly/react-core';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+
+export interface TextFieldProps extends Omit<TextInputProps, 'onChange'> {
+  name: string;
+  helperText?: React.ReactNode;
+  onChangeCustom?: (value: string) => void;
+}
+
+const TextField = React.forwardRef(
+  ({ helperText, onChangeCustom, ...props }: TextFieldProps, ref: React.Ref<HTMLInputElement>) => {
+    const [field, meta, { setValue, setTouched }] = useField({
+      name: props.name,
+    });
+
+    const onChange: TextInputProps['onChange'] = async (_, value) => {
+      await setValue(value);
+      if (onChangeCustom) {
+        onChangeCustom(value);
+      }
+      await setTouched(true);
+    };
+
+    const fieldId = `textfield-${props.name}`;
+    const hasError = meta.touched && !!meta.error;
+
+    return (
+      <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
+        <TextInput
+          {...field}
+          {...props}
+          ref={ref}
+          id={fieldId}
+          onChange={onChange}
+          validated={hasError ? 'error' : 'default'}
+        />
+
+        <DefaultHelperText helperText={helperText} />
+        <ErrorHelperText meta={meta} />
+      </FormGroup>
+    );
+  },
+);
+
+TextField.displayName = 'TextField';
+
+export default TextField;

package/src/components/form/UploadField.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { FieldMetaProps, useField } from 'formik';
+import { FileUpload, FormGroup } from '@patternfly/react-core';
+import { useTranslation } from '../../hooks/useTranslation';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+
+type UploadFieldProps = {
+  name: string;
+  isRequired?: boolean;
+  label: string;
+  getErrorText?: (error: string) => React.ReactNode | undefined;
+  placeholder?: string;
+  onChange?: (event: React.FormEvent<HTMLTextAreaElement>) => void;
+  maxFileBytes?: number;
+};
+
+const UploadHelperText = ({
+  meta,
+  isUploading,
+  isRejected,
+  maxFileBytes,
+}: {
+  meta?: FieldMetaProps<unknown>;
+  isUploading: boolean;
+  isRejected: boolean;
+  maxFileBytes?: number;
+}) => {
+  const { t } = useTranslation();
+
+  const maxFileMB = (maxFileBytes || 0) / (1024 * 1024);
+
+  const defaultContent = maxFileBytes ? (
+    <DefaultHelperText helperText={t('Max file size {{ maxFileSize }} MB', { maxFileSize: maxFileMB })} />
+  ) : null;
+  if (isRejected) {
+    return (
+      <>
+        {defaultContent}
+        <ErrorHelperText
+          error={t('Content exceeds max file size of {{ maxFileSize }} MB', {
+            maxFileSize: maxFileMB,
+          })}
+        />
+      </>
+    );
+  } else if (!isUploading && !!meta?.error) {
+    return (
+      <>
+        {defaultContent}
+        <ErrorHelperText meta={meta} />
+      </>
+    );
+  }
+  return defaultContent;
+};
+
+const UploadField = ({ label, maxFileBytes, isRequired, name }: UploadFieldProps) => {
+  const { t } = useTranslation();
+  const fieldId = `fileuploadfield-${name}`;
+
+  const [filename, setFilename] = React.useState<string>();
+  const [isFileUploading, setIsFileUploading] = React.useState(false);
+  const [isRejected, setIsRejected] = React.useState(false);
+
+  const [field, meta, { setValue, setTouched }] = useField<string | File>(name);
+  const isValid = !isRejected && !((meta.touched || filename) && meta.error);
+
+  const handleFileRejected = (clearValue: boolean) => {
+    setIsRejected(true);
+    void setTouched(true);
+    if (clearValue) {
+      void setValue('');
+    }
+  };
+
+  const handleFileChange = (_event, file: string) => {
+    if (maxFileBytes) {
+      const contentFile = new TextEncoder().encode(file);
+      if (contentFile.length > maxFileBytes) {
+        handleFileRejected(false);
+        return;
+      }
+    }
+
+    void setValue(file);
+    void setTouched(true);
+    setIsRejected(false);
+  };
+
+  return (
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired}>
+      <FileUpload
+        type="text"
+        id={field.name}
+        isRequired={isRequired}
+        filenamePlaceholder={t('Drag a file or browse to upload')}
+        browseButtonText={t('Browse...')}
+        clearButtonText={t('Clear')}
+        style={{ resize: 'vertical' }}
+        validated={isValid || isFileUploading ? 'default' : 'error'}
+        value={field.value as string}
+        filename={filename ? t('Content loaded from: {{ filename }}', { filename }) : ''}
+        onDataChange={handleFileChange}
+        onTextChange={handleFileChange}
+        onFileInputChange={(_event, file) => {
+          if (!maxFileBytes || file.size <= maxFileBytes) {
+            setFilename(file.name);
+            setIsRejected(false);
+          }
+        }}
+        onReadStarted={() => {
+          setIsFileUploading(true);
+          setIsRejected(false);
+        }}
+        onReadFinished={() => setIsFileUploading(false)}
+        isLoading={isFileUploading}
+        dropzoneProps={{
+          maxSize: maxFileBytes,
+          onDropRejected: () => handleFileRejected(true),
+        }}
+        onClearClick={() => {
+          setFilename('');
+          void setValue('');
+          void setTouched(false);
+        }}
+      />
+
+      <UploadHelperText maxFileBytes={maxFileBytes} meta={meta} isUploading={isFileUploading} isRejected={isRejected} />
+    </FormGroup>
+  );
+};
+
+export default UploadField;