@flightctl/ui-components 0.5.1 → 0.6.0-rc2

package/src/components/Terminal/Terminal.tsx

@@ -17,7 +17,7 @@ const terminalOptions: ITerminalOptions & ITerminalInitOnlyOptions = {
 };
 
 type TerminalProps = {
-  onData: (data: string) => void;
+  onData: (data: string, resize?: boolean) => void;
 };
 
 export type ImperativeTerminalType = {
@@ -41,7 +41,13 @@ const Terminal = React.forwardRef<ImperativeTerminalType, TerminalProps>(({ onDa
     term.focus();
 
     const resizeObserver: ResizeObserver = new ResizeObserver(() => {
-      window.requestAnimationFrame(() => fitAddon.fit());
+      window.requestAnimationFrame(() => {
+        fitAddon.fit();
+        if (terminal.current) {
+          const size = JSON.stringify({ Height: terminal.current?.rows, Width: terminal.current?.cols });
+          onData(size, true);
+        }
+      });
     });
 
     terminalRef.current && resizeObserver.observe(terminalRef.current);
@@ -55,11 +61,11 @@ const Terminal = React.forwardRef<ImperativeTerminalType, TerminalProps>(({ onDa
       term.dispose();
       resizeObserver.disconnect();
     };
-  }, []);
+  }, [onData]);
 
   React.useEffect(() => {
     const term = terminal.current;
-    const data = term?.onData(onData);
+    const data = term?.onData((data) => onData(data, false));
     return () => {
       data?.dispose();
     };

package/src/components/charts/DonutChart.tsx

@@ -2,7 +2,7 @@ import { ChartContainer, ChartDonut } from '@patternfly/react-charts';
 import { Flex, FlexItem, Stack, StackItem, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import * as React from 'react';
 import { Link, LinkProps } from '../../hooks/useNavigate';
-import WithHelperText from '../common/WithHelperText';
+import LabelWithHelperText from '../common/WithHelperText';
 import { useTranslation } from '../../hooks/useTranslation';
 import { getDefaultStatusColor } from '../../utils/status/common';
 
@@ -83,7 +83,7 @@ const DonutChart = ({ data, title, helperText }: { data: Data[]; title: string;
                 alignContent={{ default: 'alignContentCenter' }}
                 className="fctl-charts__title"
               >
-                {helperText ? <WithHelperText showLabel ariaLabel={title} content={helperText} /> : title}
+                {helperText ? <LabelWithHelperText label={title} content={helperText} /> : title}
               </Flex>
             </foreignObject>
             <ChartDonut

package/src/components/common/LeaveFormConfirmation.tsx

@@ -4,7 +4,7 @@ import { Blocker, BlockerFunction } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 
 import { useTranslation } from '../../hooks/useTranslation';
-import { useAppContext } from '../../hooks/useAppContext';
+import { FlightCtlApp, useAppContext } from '../../hooks/useAppContext';
 
 const ConfirmNavigationDialog = ({ blocker }: { blocker: Blocker }) => {
   const { t } = useTranslation();
@@ -85,7 +85,7 @@ const LeaveFormConfirmation = () => {
 
   const lock = !isSubmitting && dirty;
 
-  if (appType === 'aap') {
+  if (appType === FlightCtlApp.AAP) {
     return null;
   }
 

package/src/components/common/WithHelperText.tsx

@@ -1,34 +1,66 @@
 import * as React from 'react';
-import { Button, Popover } from '@patternfly/react-core';
+import { Button, FormGroup, Popover } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
 
 import './WithHelperText.css';
 
-type WithHelperTextProps = {
-  ariaLabel: string;
-  showLabel?: boolean;
+type HelperTextPopoverProps = {
+  label: string;
   triggerAction?: 'click' | 'hover';
   content: React.ReactNode;
 };
 
-const WithHelperText = ({ ariaLabel, showLabel, content, triggerAction }: WithHelperTextProps) => (
+type FormGroupWithHelperTextProps = HelperTextPopoverProps & {
+  isRequired?: boolean;
+};
+
+const HelperTextPopover = ({
+  ariaLabel,
+  content,
+  triggerAction,
+}: Omit<HelperTextPopoverProps, 'label'> & { ariaLabel: string }) => (
+  <Popover aria-label={ariaLabel} bodyContent={content} withFocusTrap triggerAction={triggerAction}>
+    <Button
+      component="a"
+      className="fctl-helper-text__icon"
+      isInline
+      variant="plain"
+      onClick={(ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }}
+      aria-label={`${ariaLabel} help text`}
+    >
+      <OutlinedQuestionCircleIcon />
+    </Button>
+  </Popover>
+);
+
+const LabelWithHelperText = ({
+  label,
+  hideLabel,
+  content,
+  triggerAction,
+}: HelperTextPopoverProps & { hideLabel?: boolean }) => (
   <>
-    {showLabel && ariaLabel}
-    <Popover aria-label={ariaLabel} bodyContent={content} withFocusTrap triggerAction={triggerAction}>
-      <Button
-        component="a"
-        className="fctl-helper-text__icon"
-        isInline
-        variant="plain"
-        onClick={(ev) => {
-          ev.preventDefault();
-          ev.stopPropagation();
-        }}
-        aria-label={`${ariaLabel} help text`}
-        icon={<OutlinedQuestionCircleIcon />}
-      />
-    </Popover>
+    {!hideLabel && label}
+    <HelperTextPopover ariaLabel={label} content={content} triggerAction={triggerAction} />
   </>
 );
 
-export default WithHelperText;
+export const FormGroupWithHelperText = ({
+  label,
+  isRequired,
+  content,
+  children,
+}: React.PropsWithChildren<FormGroupWithHelperTextProps>) => (
+  <FormGroup
+    label={label}
+    labelIcon={<HelperTextPopover ariaLabel={label} content={content} />}
+    isRequired={isRequired}
+  >
+    {children}
+  </FormGroup>
+);
+
+export default LabelWithHelperText;

package/src/components/form/CheckboxField.tsx

@@ -3,13 +3,38 @@ import { useField } from 'formik';
 import { Checkbox, CheckboxProps, FormGroup } from '@patternfly/react-core';
 import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
 
-export interface CheckboxFieldProps extends Omit<CheckboxProps, 'onChange' | 'id' | 'ref'> {
+interface BaseCheckboxProps extends Omit<CheckboxProps, 'onChange' | 'id' | 'ref'> {
   name: string;
-  helperText?: React.ReactNode;
   onChangeCustom?: (value: boolean) => void;
 }
 
-const CheckboxField = ({ helperText, onChangeCustom, children, ...props }: CheckboxFieldProps) => {
+export interface CheckboxFieldProps extends BaseCheckboxProps {
+  helperText?: React.ReactNode;
+}
+
+// Checkboxes that are validated as a group rather than individually
+export const CheckboxFieldGroupValidation = ({ onChangeCustom, ...props }: BaseCheckboxProps) => {
+  const [{ value, ...rest }, , { setValue, setTouched }] = useField<boolean>({
+    name: props.name,
+  });
+
+  const onChange: CheckboxProps['onChange'] = async (_, value) => {
+    await setValue(value);
+    if (onChangeCustom) {
+      onChangeCustom(value);
+    }
+    await setTouched(true);
+  };
+
+  const fieldId = `checkboxfield-${props.name}`;
+  return (
+    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
+      <Checkbox {...rest} {...props} isChecked={value} id={fieldId} onChange={onChange} body={value && props.body} />
+    </FormGroup>
+  );
+};
+
+const CheckboxField = ({ onChangeCustom, helperText, children, ...props }: CheckboxFieldProps) => {
   const [{ value, ...rest }, meta, { setValue, setTouched }] = useField<boolean>({
     name: props.name,
   });

package/src/components/form/FormSelectTypeahead.tsx

@@ -11,7 +11,6 @@ import {
 } from '@patternfly/react-core';
 import { useField } from 'formik';
 import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
-import { useTranslation } from '../../hooks/useTranslation';
 
 import './FormSelect.css';
 
@@ -24,35 +23,31 @@ type FormSelectProps = {
   helperText?: React.ReactNode;
   children?: React.ReactNode;
   placeholderText?: string;
-  validateNewItem?: (value: string) => string | undefined;
-  transformNewItem?: (value: string) => string;
+  isValidTypedItem?: (value: string) => boolean;
+  transformTypedItem?: (value: string) => string;
 };
 
 const isItemObject = (item: string | SelectItem): item is SelectItem => typeof item === 'object';
 
 const getItemLabel = (item: string | SelectItem) => (isItemObject(item) ? item.label : item);
 
-const CREATE_NEW = 'create';
-
-const FormSelectTypeahead: React.FC<FormSelectProps> = ({
+const FormSelectTypeahead = ({
   name,
   items,
   defaultId,
   helperText,
   placeholderText,
+  isValidTypedItem,
+  transformTypedItem,
   children,
-  validateNewItem,
-  transformNewItem,
-}) => {
-  const { t } = useTranslation();
+}: FormSelectProps) => {
   const [field, meta, { setValue, setTouched }] = useField<string>({
     name: name,
   });
   const [isOpen, setIsOpen] = React.useState(false);
   const [inputValue, setInputValue] = React.useState<string | undefined>(undefined);
-  const [addedItems, setAddedItems] = React.useState<string[]>(
-    !field.value || Object.keys(items).some((k) => k === field.value) ? [] : [field.value],
-  );
+
+  const currentValue = field.value;
 
   const fieldId = `selectfield-${name}`;
   const itemKeys = Object.keys(items);
@@ -65,71 +60,34 @@ const FormSelectTypeahead: React.FC<FormSelectProps> = ({
 
   React.useEffect(() => {
     const hasOneItem = itemKeys.length === 1;
-    if (hasOneItem && !field.value) {
+    if (hasOneItem && !currentValue) {
       setValue(itemKeys[0], true);
     }
-  }, [itemKeys, field.value, setValue]);
-
-  const selectedText = isOpen
-    ? inputValue
-    : field.value
-      ? getItemLabel(items[field.value]) || field.value
-      : defaultValue;
-
-  const itemValidation = inputValue ? validateNewItem?.(inputValue) : undefined;
+  }, [itemKeys, currentValue, setValue]);
 
-  let alreadyAdded = false;
-  const inputTransformed = inputValue && transformNewItem ? transformNewItem(inputValue) : inputValue;
-  const addedItemsFiltered = addedItems.filter((item) => {
-    if (!inputValue) {
-      return true;
-    }
-    if (!alreadyAdded) {
-      alreadyAdded = item === inputTransformed;
-    }
-    return item.includes(inputValue);
-  });
+  let selectedText = defaultValue;
+  if (inputValue) {
+    selectedText = inputValue;
+  } else if (currentValue) {
+    selectedText = getItemLabel(items[currentValue]) || currentValue;
+  }
 
   const itemKeysFiltered = itemKeys.filter((key) => {
     if (!inputValue) {
       return true;
     }
-    if (!alreadyAdded) {
-      alreadyAdded = key === inputTransformed;
-    }
-    return getItemLabel(items[key]).includes(inputValue);
+    return getItemLabel(items[key]).toLowerCase().includes(inputValue.toLowerCase());
   });
 
-  const selectOptions = [
-    ...addedItemsFiltered.map((item) => (
-      <SelectOption className="fctl-form-select__item" key={item} value={item}>
-        {item}
-      </SelectOption>
-    )),
-    ...itemKeysFiltered.map((key) => {
-      const item = items[key];
-      const desc = isItemObject(item) ? item.description : undefined;
-      return (
-        <SelectOption className="fctl-form-select__item" key={key} value={key} description={desc}>
-          {getItemLabel(item)}
-        </SelectOption>
-      );
-    }),
-  ];
-
   return (
     <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
       <Select
         id={fieldId}
         className="fctl-form-select"
-        selected={field.value || defaultId}
+        selected={currentValue || defaultId}
         onSelect={(_, value) => {
-          let newValue: string = value as string;
-          if (value === CREATE_NEW && inputTransformed) {
-            setAddedItems([...addedItems, inputTransformed]);
-            newValue = inputTransformed;
-          }
-          setValue(newValue, true);
+          setTouched(true);
+          setValue(value as string, true);
           setInputValue(undefined);
           setIsOpen(false);
         }}
@@ -157,12 +115,34 @@ const FormSelectTypeahead: React.FC<FormSelectProps> = ({
                   setIsOpen(!isOpen);
                 }}
                 onChange={(_, value) => {
-                  setInputValue(value);
+                  setInputValue(value || undefined);
                   if (!isOpen) {
                     setIsOpen(true);
                   }
                 }}
-                id="create-typeahead-select-input"
+                onBlur={() => {
+                  if (!inputValue) {
+                    return;
+                  }
+
+                  // If there is no "isValidTypedItem", it means selection must always be done by selecting from the list
+                  const skipSetValue = isValidTypedItem ? !isValidTypedItem(inputValue) : true;
+                  if (skipSetValue) {
+                    if (itemKeysFiltered.length === 0) {
+                      setInputValue(undefined);
+                      setIsOpen(false);
+                    } else {
+                      // The typed text has no matches from the list. We clear the value to use the default/empty
+                      setValue('');
+                    }
+                    return;
+                  }
+                  const transformedValue = transformTypedItem?.(inputValue) || inputValue;
+                  setInputValue(undefined);
+                  void setValue(transformedValue);
+                  setIsOpen(false);
+                }}
+                id={`create-typeahead-select-input-${name}`}
                 autoComplete="off"
                 role="combobox"
                 isExpanded={isOpen}
@@ -175,9 +155,6 @@ const FormSelectTypeahead: React.FC<FormSelectProps> = ({
         isOpen={isOpen}
         onOpenChange={(open) => {
           if (!open) {
-            if (inputValue !== undefined) {
-              setInputValue(undefined);
-            }
             if (!meta.touched) {
               setTouched(true);
             }
@@ -186,19 +163,15 @@ const FormSelectTypeahead: React.FC<FormSelectProps> = ({
         }}
       >
         <SelectList className="fctl-form-select__menu">
-          {inputValue && !alreadyAdded && (
-            <SelectOption
-              className="fctl-form-select__item"
-              isDisabled={!!itemValidation}
-              description={itemValidation}
-              value={CREATE_NEW}
-            >
-              {t(`Create new option '{{ value }}'`, {
-                value: itemValidation ? inputValue : inputTransformed,
-              })}
-            </SelectOption>
-          )}
-          {selectOptions}
+          {itemKeysFiltered.map((key) => {
+            const item = items[key];
+            const desc = isItemObject(item) ? item.description : undefined;
+            return (
+              <SelectOption className="fctl-form-select__item" key={key} value={key} description={desc}>
+                {getItemLabel(item)}
+              </SelectOption>
+            );
+          })}
         </SelectList>
         {children}
       </Select>

package/src/components/form/RichValidationTextField.tsx

@@ -72,71 +72,82 @@ export interface RichValidationTextFieldProps extends TextInputProps {
   }[];
 }
 
-const RichValidationTextField = ({ fieldName, validations, isRequired, ...rest }: RichValidationTextFieldProps) => {
-  const [popoverOpen, setPopoverOpen] = React.useState(false);
+const RichValidationTextField = React.forwardRef(
+  (
+    { fieldName, validations, isRequired, onBlur, ...rest }: RichValidationTextFieldProps,
+    ref: React.Ref<HTMLInputElement>,
+  ) => {
+    const [popoverOpen, setPopoverOpen] = React.useState(false);
 
-  const [field, meta, { setTouched }] = useField({
-    name: fieldName,
-  });
+    const [field, meta, { setTouched }] = useField({
+      name: fieldName,
+    });
 
-  const fieldId = `rich-validation-field-${fieldName}`;
-  const hasValue = !!field.value;
+    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);
+    return (
+      <FormGroup label={rest?.['aria-label']} id={`form-control__${fieldId}`} fieldId={fieldId} isRequired={isRequired}>
+        <InputGroup>
+          <InputGroupItem isFill>
+            <TextInput
+              {...field}
+              {...rest}
+              id={fieldId}
+              ref={ref}
+              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);
+                if (onBlur) {
+                  onBlur();
+                }
+              }}
+            />
+          </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}
+                />
               }
-            }}
-            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>
-  );
-};
+              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>
+    );
+  },
+);
+
+RichValidationTextField.displayName = 'RichValidationTextField';
 
 export default RichValidationTextField;