@flightctl/ui-components 1.1.0-rc4 → 1.1.0-rc6

package/src/components/Catalog/AddCatalogItemWizard/ChannelsSelect.tsx

@@ -0,0 +1,214 @@
+import * as React from 'react';
+import {
+  Button,
+  HelperText,
+  HelperTextItem,
+  Label,
+  LabelGroup,
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+} 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 { useField } from 'formik';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import ErrorHelperText from '../../form/FieldHelperText';
+import { getDnsSubdomainValidations, getKubernetesDnsSubdomainErrors } from '../../form/validations';
+
+type ChannelsSelectProps = {
+  name: string;
+  availableChannels: string[];
+  isDisabled?: boolean;
+};
+
+const ChannelsSelect = ({ name, availableChannels, isDisabled }: ChannelsSelectProps) => {
+  const { t } = useTranslation();
+  const [{ value: selected }, meta, { setValue, setTouched }] = useField<string[]>(name);
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('');
+  const textInputRef = React.useRef<HTMLInputElement>(null);
+
+  const allOptions = React.useMemo(() => {
+    const merged = new Set([...availableChannels, ...selected]);
+    return Array.from(merged).sort();
+  }, [availableChannels, selected]);
+
+  const trimmedInput = inputValue.trim();
+  const filteredOptions = allOptions.filter(
+    (option) => !trimmedInput || option.toLowerCase().includes(trimmedInput.toLowerCase()),
+  );
+  const isNewChannel = trimmedInput && !allOptions.some((opt) => opt.toLowerCase() === trimmedInput.toLowerCase());
+  const dnsErrors = trimmedInput ? getKubernetesDnsSubdomainErrors(trimmedInput) : {};
+  const isValidDnsSubdomain = trimmedInput ? Object.keys(dnsErrors).length === 0 : true;
+  const showCreateOption = isNewChannel && isValidDnsSubdomain;
+
+  const toggleSelection = (channel: string) => {
+    const newSelected = selected.includes(channel) ? selected.filter((s) => s !== channel) : [...selected, channel];
+    void setValue(newSelected, true);
+    setTouched(true);
+  };
+
+  const handleSelect = (_event: React.MouseEvent | undefined, value: string | number | undefined) => {
+    if (value === undefined) {
+      return;
+    }
+    const channel = String(value);
+    toggleSelection(channel);
+    setInputValue('');
+    textInputRef.current?.focus();
+  };
+
+  const handleCreateOption = () => {
+    const newChannel = inputValue.trim();
+    if (newChannel && !selected.includes(newChannel)) {
+      void setValue([...selected, newChannel], true);
+      setTouched(true);
+    }
+    setInputValue('');
+    textInputRef.current?.focus();
+  };
+
+  const removeChannel = (channel: string) => {
+    void setValue(
+      selected.filter((s) => s !== channel),
+      true,
+    );
+    setTouched(true);
+  };
+
+  const clearAll = () => {
+    void setValue([], true);
+    setTouched(true);
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key !== 'Enter' || !isNewChannel) {
+      return;
+    }
+    event.preventDefault();
+    if (isValidDnsSubdomain) {
+      handleCreateOption();
+    }
+  };
+
+  return (
+    <>
+      <Select
+        isOpen={isOpen}
+        selected={selected}
+        onSelect={handleSelect}
+        onOpenChange={(open) => {
+          if (!open && !meta.touched) {
+            setTouched(true);
+          }
+          setIsOpen(open);
+          setInputValue('');
+        }}
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            variant="typeahead"
+            onClick={() => {
+              if (isDisabled) {
+                return;
+              }
+              setIsOpen(!isOpen);
+              textInputRef.current?.focus();
+            }}
+            isExpanded={isOpen}
+            isFullWidth
+            isDisabled={isDisabled}
+          >
+            <TextInputGroup isPlain>
+              <TextInputGroupMain
+                value={inputValue}
+                onChange={(_, val) => {
+                  setInputValue(val);
+                  if (!isOpen) {
+                    setIsOpen(true);
+                  }
+                }}
+                onKeyDown={onInputKeyDown}
+                onClick={() => {
+                  if (!isOpen) {
+                    setIsOpen(true);
+                  }
+                }}
+                placeholder={selected.length === 0 ? t('Select or create channels') : undefined}
+                autoComplete="off"
+                innerRef={textInputRef}
+              >
+                <LabelGroup>
+                  {selected.map((channel) => (
+                    <Label key={channel} onClose={() => removeChannel(channel)}>
+                      {channel}
+                    </Label>
+                  ))}
+                </LabelGroup>
+              </TextInputGroupMain>
+              {selected.length > 0 && (
+                <TextInputGroupUtilities>
+                  <Button
+                    variant="plain"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      clearAll();
+                    }}
+                    aria-label={t('Clear all')}
+                  >
+                    <TimesIcon />
+                  </Button>
+                </TextInputGroupUtilities>
+              )}
+            </TextInputGroup>
+          </MenuToggle>
+        )}
+      >
+        <SelectList>
+          {filteredOptions.map((option) => (
+            <SelectOption key={option} value={option} hasCheckbox isSelected={selected.includes(option)}>
+              {option}
+            </SelectOption>
+          ))}
+          {showCreateOption && (
+            <SelectOption value={trimmedInput} onClick={handleCreateOption}>
+              {t('Create "{{channel}}" channel', { channel: trimmedInput })}
+            </SelectOption>
+          )}
+          {isNewChannel && !isValidDnsSubdomain && (
+            <SelectOption isDisabled>
+              <HelperText component="ul">
+                {getDnsSubdomainValidations(t).map((validation) => {
+                  const hasError = dnsErrors[validation.key] === 'failed';
+                  return (
+                    <HelperTextItem
+                      key={validation.key}
+                      component="li"
+                      variant={hasError ? 'error' : 'success'}
+                      icon={hasError ? <TimesIcon /> : <CheckIcon />}
+                    >
+                      {validation.message}
+                    </HelperTextItem>
+                  );
+                })}
+              </HelperText>
+            </SelectOption>
+          )}
+          {!filteredOptions.length && !isNewChannel && (
+            <SelectOption isDisabled>{t('Type to create new channel')}</SelectOption>
+          )}
+        </SelectList>
+      </Select>
+      <ErrorHelperText meta={meta} />
+    </>
+  );
+};
+
+export default ChannelsSelect;

package/src/components/Catalog/AddCatalogItemWizard/CreateCatalogModal.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import {
+  Alert,
+  Button,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+import { Catalog } from '@flightctl/types/alpha';
+
+import { useFetch } from '../../../hooks/useFetch';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { getDnsSubdomainValidations, validKubernetesDnsSubdomain, validURLSchema } from '../../form/validations';
+import FlightCtlForm from '../../form/FlightCtlForm';
+import NameField from '../../form/NameField';
+import TextField from '../../form/TextField';
+import IconUploadField from '../../form/IconUploadField';
+import { getErrorMessage } from '../../../utils/error';
+import TextAreaField from '../../form/TextAreaField';
+import { CreateCatalogFormValues } from './types';
+import { getCatalogPatches, getCatalogResource } from './utils';
+
+type CreateCatalogModalProps = {
+  onClose: VoidFunction;
+  onSuccess: (catalog: Catalog) => void;
+  catalog?: Catalog;
+};
+
+const CreateCatalogModal = ({ onClose, onSuccess, catalog }: CreateCatalogModalProps) => {
+  const { t } = useTranslation();
+  const { post, patch } = useFetch();
+  const [error, setError] = React.useState<unknown>();
+
+  const isEdit = !!catalog;
+  const isReadOnly = !!catalog?.metadata?.owner;
+
+  const validationSchema = React.useMemo(
+    () =>
+      Yup.object().shape({
+        name: validKubernetesDnsSubdomain(t, { isRequired: true }),
+        displayName: Yup.string(),
+        shortDescription: Yup.string(),
+        icon: Yup.string().test(
+          'url-or-data-uri',
+          t('Must be a valid URL or data URI'),
+          (value) => !value || /^(https?:\/\/|data:)/.test(value),
+        ),
+        provider: Yup.string(),
+        support: validURLSchema(t),
+      }),
+    [t],
+  );
+
+  const initialValues: CreateCatalogFormValues = {
+    name: catalog?.metadata.name || '',
+    displayName: catalog?.spec.displayName || '',
+    shortDescription: catalog?.spec.shortDescription || '',
+    icon: catalog?.spec.icon || '',
+    provider: catalog?.spec.provider || '',
+    support: catalog?.spec.support || '',
+  };
+
+  let title: string;
+  if (isReadOnly) {
+    title = t('View catalog');
+  } else if (isEdit) {
+    title = t('Edit catalog');
+  } else {
+    title = t('Create catalog');
+  }
+
+  return (
+    <Modal variant="medium" isOpen onClose={onClose}>
+      <Formik<CreateCatalogFormValues>
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        validateOnMount
+        onSubmit={async (values) => {
+          if (isReadOnly) {
+            return;
+          }
+          setError(undefined);
+          try {
+            if (isEdit) {
+              const patches = getCatalogPatches(catalog, values);
+              if (patches.length) {
+                const result = await patch<Catalog>(`catalogs/${catalog.metadata.name}`, patches);
+                onSuccess(result);
+              }
+            } else {
+              const result = await post<Catalog>('catalogs', getCatalogResource(values));
+              onSuccess(result);
+            }
+          } catch (e) {
+            setError(e);
+          }
+        }}
+      >
+        {({ isSubmitting, isValid, submitForm, dirty }) => (
+          <>
+            <ModalHeader title={title} />
+            <ModalBody>
+              <FlightCtlForm>
+                <NameField
+                  name="name"
+                  aria-label={t('Name')}
+                  isRequired
+                  isDisabled={isEdit}
+                  resourceType="catalogs"
+                  validations={getDnsSubdomainValidations(t)}
+                />
+                <FormGroup label={t('Display name')}>
+                  <TextField name="displayName" aria-label={t('Display name')} isDisabled={isReadOnly} />
+                </FormGroup>
+                <FormGroup label={t('Short description')}>
+                  <TextAreaField name="shortDescription" aria-label={t('Short description')} isDisabled={isReadOnly} />
+                </FormGroup>
+                <FormGroup label={t('Icon')}>
+                  <IconUploadField name="icon" isDisabled={isReadOnly} />
+                </FormGroup>
+                <FormGroup label={t('Provider')}>
+                  <TextField name="provider" aria-label={t('Provider')} isDisabled={isReadOnly} />
+                </FormGroup>
+                <FormGroup label={t('Support')}>
+                  <TextField
+                    name="support"
+                    aria-label={t('Support')}
+                    placeholder="https://example.com/support"
+                    isDisabled={isReadOnly}
+                  />
+                </FormGroup>
+              </FlightCtlForm>
+            </ModalBody>
+            <ModalFooter>
+              <Stack hasGutter>
+                {!!error && (
+                  <StackItem>
+                    <Alert variant="danger" isInline title={getErrorMessage(error)} />
+                  </StackItem>
+                )}
+                <StackItem>
+                  <Split hasGutter>
+                    {!isReadOnly && (
+                      <SplitItem>
+                        <Button
+                          variant="primary"
+                          onClick={submitForm}
+                          isDisabled={!isValid || isSubmitting || !dirty}
+                          isLoading={isSubmitting}
+                        >
+                          {isEdit ? t('Save') : t('Create')}
+                        </Button>
+                      </SplitItem>
+                    )}
+                    <SplitItem>
+                      <Button variant="link" onClick={onClose} isDisabled={isSubmitting}>
+                        {isReadOnly ? t('Close') : t('Cancel')}
+                      </Button>
+                    </SplitItem>
+                  </Split>
+                </StackItem>
+              </Stack>
+            </ModalFooter>
+          </>
+        )}
+      </Formik>
+    </Modal>
+  );
+};
+
+export default CreateCatalogModal;

package/src/components/Catalog/AddCatalogItemWizard/steps/GeneralInfoStep.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { Alert, FormGroup, Grid, GridItem, Spinner, Title } from '@patternfly/react-core';
+import { FormikErrors, useFormikContext } from 'formik';
+import { CatalogList } from '@flightctl/types/alpha';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { AddCatalogItemFormValues } from '../types';
+import NameField from '../../../form/NameField';
+import { getDnsSubdomainValidations } from '../../../form/validations';
+import TextField from '../../../form/TextField';
+import TextAreaField from '../../../form/TextAreaField';
+import IconUploadField from '../../../form/IconUploadField';
+import CheckboxField from '../../../form/CheckboxField';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import FormSelect, { SelectItem } from '../../../form/FormSelect';
+import CreateCatalogModal from '../CreateCatalogModal';
+import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
+import { getErrorMessage } from '../../../../utils/error';
+import { usePermissionsContext } from '../../../common/PermissionsContext';
+import { RESOURCE, VERB } from '../../../../types/rbac';
+
+export const generalInfoStepId = 'general-info';
+
+export const isGeneralInfoStepValid = (errors: FormikErrors<AddCatalogItemFormValues>) => {
+  return (
+    !errors.catalog &&
+    !errors.name &&
+    !errors.homepage &&
+    !errors.supportUrl &&
+    !errors.documentationUrl &&
+    !errors.deprecationMessage &&
+    !errors.icon
+  );
+};
+
+const createCatalogPermission = [{ kind: RESOURCE.CATALOG, verb: VERB.CREATE }];
+
+const GeneralInfoStep = ({ isEdit, isReadOnly }: { isEdit?: boolean; isReadOnly?: boolean }) => {
+  const { t } = useTranslation();
+  const { values, setFieldValue } = useFormikContext<AddCatalogItemFormValues>();
+  const [createModalOpen, setCreateModalOpen] = React.useState(false);
+  const { checkPermissions } = usePermissionsContext();
+  const [canCreateCatalog] = checkPermissions(createCatalogPermission);
+
+  const [catalogList, catalogsLoading, catalogsErr, refetch] = useFetchPeriodically<CatalogList>({
+    endpoint: 'catalogs',
+  });
+
+  React.useEffect(() => {
+    const unownedCatalogs = (catalogList?.items || []).filter((c) => !c.metadata.owner);
+    if (unownedCatalogs.length === 1 && !values.catalog) {
+      void setFieldValue('catalog', unownedCatalogs[0].metadata.name, true);
+    }
+  }, [catalogList?.items, values.catalog, setFieldValue]);
+
+  const catalogItems = (catalogList?.items || [])
+    .sort((a, b) => {
+      const aOwned = !!a.metadata.owner;
+      const bOwned = !!b.metadata.owner;
+      if (aOwned !== bOwned) {
+        return aOwned ? 1 : -1;
+      }
+      const aName = a.spec.displayName || a.metadata.name || '';
+      const bName = b.spec.displayName || b.metadata.name || '';
+      return aName.localeCompare(bName);
+    })
+    .reduce<Record<string, SelectItem>>((acc, curr) => {
+      acc[curr.metadata.name || ''] = {
+        label: curr.spec.displayName || curr.metadata.name,
+        isDisabled: !!curr.metadata.owner,
+        description: curr.metadata.owner ? t('Catalog is owned by Resource sync') : undefined,
+      };
+      return acc;
+    }, {});
+
+  let content: React.ReactNode = (
+    <FlightCtlForm>
+      <FormGroup label={t('Catalog')} isRequired>
+        <FormSelect
+          name="catalog"
+          items={catalogItems}
+          placeholderText={t('Select a catalog')}
+          isDisabled={isEdit || isReadOnly}
+          addAction={
+            !isEdit && !isReadOnly && canCreateCatalog
+              ? { label: t('Create catalog'), onAdd: () => setCreateModalOpen(true) }
+              : undefined
+          }
+        />
+      </FormGroup>
+      <NameField
+        name="name"
+        aria-label={t('Name')}
+        isRequired
+        isDisabled={isEdit || isReadOnly}
+        resourceType={`catalogs/${values.catalog}/items`}
+        validations={getDnsSubdomainValidations(t)}
+      />
+      <FormGroup label={t('Display name')}>
+        <TextField name="displayName" aria-label={t('Display name')} isDisabled={isReadOnly} />
+      </FormGroup>
+      <FormGroup label={t('Icon')}>
+        <IconUploadField name="icon" isDisabled={isReadOnly} />
+      </FormGroup>
+      <FormGroup label={t('Short description')}>
+        <TextAreaField name="shortDescription" aria-label={t('Short description')} isDisabled={isReadOnly} />
+      </FormGroup>
+      <FormGroup label={t('Provider')}>
+        <TextField name="provider" aria-label={t('Provider')} isDisabled={isReadOnly} />
+      </FormGroup>
+      <FormGroup label={t('Homepage')}>
+        <TextField
+          name="homepage"
+          aria-label={t('Homepage')}
+          placeholder="https://example.com"
+          isDisabled={isReadOnly}
+        />
+      </FormGroup>
+      <FormGroup label={t('Support URL')}>
+        <TextField
+          name="supportUrl"
+          aria-label={t('Support URL')}
+          placeholder="https://example.com/support"
+          isDisabled={isReadOnly}
+        />
+      </FormGroup>
+      <FormGroup label={t('Documentation URL')}>
+        <TextField
+          name="documentationUrl"
+          aria-label={t('Documentation URL')}
+          placeholder="https://example.com/docs"
+          isDisabled={isReadOnly}
+        />
+      </FormGroup>
+      {isEdit && (
+        <CheckboxField name="deprecated" label={t('Deprecated')} isDisabled={isReadOnly}>
+          <FormGroup label={t('Deprecation message')} isRequired>
+            <TextAreaField
+              name="deprecationMessage"
+              aria-label={t('Deprecation message')}
+              isRequired
+              isDisabled={isReadOnly}
+            />
+          </FormGroup>
+          <FormGroup label={t('Replacement')}>
+            <TextField
+              name="deprecationReplacement"
+              aria-label={t('Replacement')}
+              helperText={t('Name of the replacement catalog item')}
+              isDisabled={isReadOnly}
+            />
+          </FormGroup>
+        </CheckboxField>
+      )}
+    </FlightCtlForm>
+  );
+
+  if (catalogsLoading) {
+    content = <Spinner />;
+  }
+
+  if (catalogsErr) {
+    content = (
+      <Alert isInline variant="danger" title={t('Failed to fetch catalogs')}>
+        {getErrorMessage(catalogsErr)}
+      </Alert>
+    );
+  }
+
+  return (
+    <>
+      <Grid hasGutter>
+        <GridItem>
+          <Title headingLevel="h2" size="lg">
+            {t('General info')}
+          </Title>
+        </GridItem>
+        <GridItem lg={6} md={8} sm={12}>
+          {content}
+        </GridItem>
+      </Grid>
+      {createModalOpen && (
+        <CreateCatalogModal
+          onClose={() => setCreateModalOpen(false)}
+          onSuccess={(catalog) => {
+            setCreateModalOpen(false);
+            refetch();
+            void setFieldValue('catalog', catalog.metadata.name, true);
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default GeneralInfoStep;