@flightctl/ui-components 0.0.4 → 0.0.5

package/src/components/form/ExpandableFormSection.css

@@ -0,0 +1,3 @@
+.fctl-expandable-section--error {
+    color: var(--pf-v5-global--danger-color--100)
+}

package/src/components/form/ExpandableFormSection.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { ExpandableSection, ExpandableSectionProps, Split, SplitItem } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { useField, useFormikContext } from 'formik';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import WithTooltip from '../common/WithTooltip';
+
+import './ExpandableFormSection.css';
+
+const ExpandableFormSection = ({
+  fieldName,
+  title,
+  description,
+  children,
+}: {
+  fieldName: string;
+  title: string;
+  description?: string;
+  children: ExpandableSectionProps['children'];
+}) => {
+  const { t } = useTranslation();
+  const [isExpanded, setIsExpanded] = React.useState(true);
+  const { setFieldTouched } = useFormikContext();
+  const [, { error }, { setTouched }] = useField(fieldName);
+
+  return (
+    <ExpandableSection
+      toggleContent={
+        <Split hasGutter>
+          <SplitItem>{title}</SplitItem>
+          {!isExpanded && !!description && (
+            <SplitItem style={{ color: 'var(--pf-v5-global--Color--100)' }}>{description}</SplitItem>
+          )}
+          {!isExpanded && error && (
+            <SplitItem>
+              <WithTooltip showTooltip content={t('Invalid {{ itemType }}', { itemType: title })}>
+                <ExclamationCircleIcon className="fctl-expandable-section--error" />
+              </WithTooltip>
+            </SplitItem>
+          )}
+        </Split>
+      }
+      isIndented
+      isExpanded={isExpanded}
+      onToggle={(_, expanded) => {
+        setTouched(true);
+        Object.keys((error as unknown as object) || {}).forEach((key) => {
+          setFieldTouched(`${fieldName}.${key}`, true);
+        });
+        setIsExpanded(expanded);
+      }}
+    >
+      {children}
+    </ExpandableSection>
+  );
+};
+
+export default ExpandableFormSection;

package/src/components/form/FieldHelperText.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { FieldMetaProps } from 'formik';
+
+import { FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+
+type ErrorHelperTextProps = {
+  meta?: FieldMetaProps<unknown>;
+  touchRequired?: boolean;
+  error?: React.ReactNode;
+};
+
+type DefaultHelperTextProps = {
+  helperText: React.ReactNode;
+};
+
+export const DefaultHelperText = ({ helperText }: DefaultHelperTextProps) => {
+  return helperText ? (
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem variant="default">{helperText}</HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  ) : null;
+};
+
+const ErrorHelperText = ({ meta, error, touchRequired = true }: ErrorHelperTextProps) => {
+  let content: React.ReactNode;
+  if (meta) {
+    content = !touchRequired || meta.touched ? meta.error : undefined;
+  } else {
+    content = error;
+  }
+  return content ? (
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+          {content}
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  ) : null;
+};
+
+export default ErrorHelperText;

package/src/components/form/FilterSelect.css

@@ -0,0 +1,18 @@
+.fctl-filter-select__group {
+    height: 18rem;
+    overflow: auto;
+}
+
+.fctl-toggle-content {
+  position: relative;
+}
+
+.fctl-toggle-content__badge {
+    margin-left: var(--pf-v5-global--spacer--sm);
+}
+
+.fctl-toggle-content__loader {
+  position: absolute;
+  top: 0;
+  right: 2.5rem;
+}

package/src/components/form/FilterSelect.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import {
+  Badge,
+  Flex,
+  FlexItem,
+  Icon,
+  MenuToggle,
+  Select,
+  SelectGroup,
+  Spinner,
+  TextInputGroupUtilities,
+} from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons/dist/js/icons/filter-icon';
+
+import './FilterSelect.css';
+
+type FilterSelectGroupProps = React.PropsWithChildren<{
+  label: string;
+}>;
+
+export const FilterSelectGroup: React.FC<FilterSelectGroupProps> = ({ label, children }) => (
+  <SelectGroup label={label}>
+    <div className="fctl-filter-select__group">{children}</div>
+  </SelectGroup>
+);
+
+type FilterSelectProps = React.PropsWithChildren<{
+  placeholder: string;
+  filter: string;
+  setFilter: (filter: string) => void;
+  selectedFilters: number;
+  isFilterUpdating: boolean;
+}>;
+
+const FilterSelect: React.FC<FilterSelectProps> = ({ placeholder, selectedFilters, isFilterUpdating, children }) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const textInputRef = React.useRef<HTMLInputElement>();
+  const toggleExpand = () => {
+    if (!isExpanded) {
+      textInputRef?.current?.focus();
+    }
+    setIsExpanded(!isExpanded);
+  };
+  return (
+    <Select
+      aria-label={placeholder}
+      role="menu"
+      toggle={(toggleRef) => (
+        <MenuToggle
+          ref={toggleRef}
+          aria-label={placeholder}
+          onClick={toggleExpand}
+          isExpanded={isExpanded}
+          isFullWidth
+          icon={
+            <Icon>
+              <FilterIcon />
+            </Icon>
+          }
+        >
+          <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+            <FlexItem>
+              <span>{placeholder}</span>
+            </FlexItem>
+            <FlexItem className="fctl-toggle-content">
+              {!!selectedFilters && (
+                <TextInputGroupUtilities onClick={toggleExpand}>
+                  <Badge isRead className="fctl-toggle-content__badge">
+                    {selectedFilters}
+                  </Badge>
+                </TextInputGroupUtilities>
+              )}
+              {isFilterUpdating && (
+                <span className="fctl-toggle-content__loader">
+                  <TextInputGroupUtilities onClick={toggleExpand}>
+                    <Spinner size="sm" />
+                  </TextInputGroupUtilities>
+                </span>
+              )}
+            </FlexItem>
+          </Flex>
+        </MenuToggle>
+      )}
+      isOpen={isExpanded}
+      onOpenChange={setIsExpanded}
+    >
+      {children}
+    </Select>
+  );
+};
+
+export default FilterSelect;

package/src/components/form/FlightCtlActionGroup.css

@@ -0,0 +1,9 @@
+/**
+  Overwrites the "sm" margins set by Patternfly, which cut the focus outline vertically
+ */
+.fctl-form__action-footer .pf-v5-c-form__actions > * {
+  --pf-v5-c-form__actions--child--MarginTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-form__actions--child--MarginBottom: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-form__actions--child--MarginLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-form__actions--child--MarginRight: var(--pf-v5-global--spacer--sm);
+}

package/src/components/form/FlightCtlActionGroup.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { ActionGroup } from '@patternfly/react-core';
+
+import './FlightCtlActionGroup.css';
+
+const FlightCtlActionGroup = ({ children }: React.PropsWithChildren<Record<never, never>>) => (
+  <ActionGroup className="fctl-form__action-footer">{children}</ActionGroup>
+);
+
+export default FlightCtlActionGroup;

package/src/components/form/FlightCtlForm.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { Form } from '@patternfly/react-core';
+
+const FlightCtlForm = ({ className, children }: React.PropsWithChildren<{ className?: string }>) => {
+  return (
+    <Form
+      className={className}
+      onSubmit={(ev) => {
+        ev.preventDefault();
+      }}
+    >
+      {children}
+    </Form>
+  );
+};
+
+export default FlightCtlForm;

package/src/components/form/FormSelect.css

@@ -0,0 +1,16 @@
+.fctl-form-select__toggle {
+    width: 100%;
+}
+
+.fctl-form-select__menu {
+    max-height: 20rem;
+    overflow: auto;
+}
+
+.fctl-form-select{
+    max-width: 30rem;
+}
+
+.fctl-form-select__item .pf-v5-c-menu__item-text {
+    white-space: normal;
+}

package/src/components/form/FormSelect.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+
+import { FormGroup, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
+import { useField } from 'formik';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+
+import './FormSelect.css';
+
+type SelectItem = { label: string; description?: string };
+
+type FormSelectProps = {
+  name: string;
+  items: Record<string, string | SelectItem>;
+  helperText?: React.ReactNode;
+  children?: React.ReactNode;
+  placeholderText?: string;
+};
+
+const isItemObject = (item: string | SelectItem): item is SelectItem => typeof item === 'object';
+
+const getItemLabel = (item: string | SelectItem) => (isItemObject(item) ? item.label : item);
+
+const FormSelect: React.FC<FormSelectProps> = ({ name, items, helperText, placeholderText, children }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [field, meta, { setValue, setTouched }] = useField<string>({
+    name: name,
+  });
+
+  const fieldId = `selectfield-${name}`;
+  const itemKeys = Object.keys(items);
+
+  React.useEffect(() => {
+    const hasOneItem = itemKeys.length === 1;
+    if (hasOneItem && !field.value) {
+      setValue(itemKeys[0], true);
+    }
+  }, [itemKeys, field.value, setValue]);
+
+  const selectedText = field.value ? getItemLabel(items[field.value]) : placeholderText;
+
+  return (
+    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
+      <Select
+        id={fieldId}
+        selected={field.value}
+        onSelect={(_, value) => {
+          setValue(value as string, true);
+          setIsOpen(false);
+        }}
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            onClick={() => {
+              if (isOpen && !meta.touched) {
+                setTouched(true);
+              }
+              setIsOpen(!isOpen);
+            }}
+            isExpanded={isOpen}
+            className="fctl-form-select__toggle"
+            id={`${fieldId}-menu`}
+          >
+            {selectedText}
+          </MenuToggle>
+        )}
+        isOpen={isOpen}
+        onOpenChange={(open) => {
+          if (!open && !meta.touched) {
+            setTouched(true);
+          }
+          setIsOpen(open);
+        }}
+      >
+        {!!itemKeys.length && (
+          <SelectList className="fctl-form-select__menu">
+            {itemKeys.map((key) => {
+              const item = items[key];
+              const desc = isItemObject(item) ? item.description : undefined;
+              return (
+                <SelectOption key={key} value={key} description={desc}>
+                  {getItemLabel(item)}
+                </SelectOption>
+              );
+            })}
+          </SelectList>
+        )}
+        {children}
+      </Select>
+
+      <DefaultHelperText helperText={helperText} />
+      <ErrorHelperText meta={meta} />
+    </FormGroup>
+  );
+};
+
+export default FormSelect;

package/src/components/form/FormSelectTypeahead.tsx

@@ -0,0 +1,212 @@
+import * as React from 'react';
+
+import {
+  FormGroup,
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption,
+  TextInputGroup,
+  TextInputGroupMain,
+} from '@patternfly/react-core';
+import { useField } from 'formik';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+import { useTranslation } from '../../hooks/useTranslation';
+
+import './FormSelect.css';
+
+type SelectItem = { label: string; description?: string };
+
+type FormSelectProps = {
+  name: string;
+  items: Record<string, string | SelectItem>;
+  defaultId?: string;
+  helperText?: React.ReactNode;
+  children?: React.ReactNode;
+  placeholderText?: string;
+  validateNewItem?: (value: string) => string | undefined;
+  transformNewItem?: (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> = ({
+  name,
+  items,
+  defaultId,
+  helperText,
+  placeholderText,
+  children,
+  validateNewItem,
+  transformNewItem,
+}) => {
+  const { t } = useTranslation();
+  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 fieldId = `selectfield-${name}`;
+  const itemKeys = Object.keys(items);
+
+  let defaultValue = '';
+  if (defaultId) {
+    const defaultItem = items[defaultId];
+    defaultValue = isItemObject(defaultItem) ? defaultItem.description || '' : defaultItem;
+  }
+
+  React.useEffect(() => {
+    const hasOneItem = itemKeys.length === 1;
+    if (hasOneItem && !field.value) {
+      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;
+
+  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);
+  });
+
+  const itemKeysFiltered = itemKeys.filter((key) => {
+    if (!inputValue) {
+      return true;
+    }
+    if (!alreadyAdded) {
+      alreadyAdded = key === inputTransformed;
+    }
+    return getItemLabel(items[key]).includes(inputValue);
+  });
+
+  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}
+        onSelect={(_, value) => {
+          let newValue: string = value as string;
+          if (value === CREATE_NEW && inputTransformed) {
+            setAddedItems([...addedItems, inputTransformed]);
+            newValue = inputTransformed;
+          }
+          setValue(newValue, true);
+          setInputValue(undefined);
+          setIsOpen(false);
+        }}
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            onClick={() => {
+              if (isOpen && !meta.touched) {
+                setTouched(true);
+              }
+              setIsOpen(!isOpen);
+            }}
+            isExpanded={isOpen}
+            className="fctl-form-select__toggle"
+            id={`${fieldId}-menu`}
+            variant="typeahead"
+          >
+            <TextInputGroup isPlain>
+              <TextInputGroupMain
+                value={selectedText}
+                onClick={() => {
+                  if (isOpen && !meta.touched) {
+                    setTouched(true);
+                  }
+                  setIsOpen(!isOpen);
+                }}
+                onChange={(_, value) => {
+                  setInputValue(value);
+                  if (!isOpen) {
+                    setIsOpen(true);
+                  }
+                }}
+                id="create-typeahead-select-input"
+                autoComplete="off"
+                role="combobox"
+                isExpanded={isOpen}
+                aria-controls="select-create-typeahead-listbox"
+                placeholder={placeholderText}
+              />
+            </TextInputGroup>
+          </MenuToggle>
+        )}
+        isOpen={isOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            if (inputValue !== undefined) {
+              setInputValue(undefined);
+            }
+            if (!meta.touched) {
+              setTouched(true);
+            }
+          }
+          setIsOpen(open);
+        }}
+      >
+        <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}
+        </SelectList>
+        {children}
+      </Select>
+
+      <DefaultHelperText helperText={helperText} />
+      <ErrorHelperText meta={meta} />
+    </FormGroup>
+  );
+};
+
+export default FormSelectTypeahead;