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

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

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import {
+  Alert,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  List,
+  ListItem,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { getErrorMessage } from '../../../../utils/error';
+import { AddCatalogItemFormValues } from '../types';
+import { appTypeIds } from '../../useCatalogs';
+import { getArtifactLabel } from '../../utils';
+import { CatalogItemArtifactType } from '@flightctl/types/alpha';
+
+export const reviewStepId = 'review';
+
+const ReviewStep = ({ error, isEdit, isReadOnly }: { error: unknown; isEdit?: boolean; isReadOnly?: boolean }) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<AddCatalogItemFormValues>();
+
+  let reviewTitle: string;
+  if (isReadOnly) {
+    reviewTitle = t('Review');
+  } else if (isEdit) {
+    reviewTitle = t('Review and save');
+  } else {
+    reviewTitle = t('Review and create');
+  }
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Title headingLevel="h2" size="lg">
+          {reviewTitle}
+        </Title>
+      </StackItem>
+      <StackItem>
+        <DescriptionList isHorizontal>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Catalog')}</DescriptionListTerm>
+            <DescriptionListDescription>{values.catalog}</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Name')}</DescriptionListTerm>
+            <DescriptionListDescription>{values.name}</DescriptionListDescription>
+          </DescriptionListGroup>
+          {values.displayName && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Display name')}</DescriptionListTerm>
+              <DescriptionListDescription>{values.displayName}</DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Type')}</DescriptionListTerm>
+            <DescriptionListDescription>{values.type}</DescriptionListDescription>
+          </DescriptionListGroup>
+          {values.type && appTypeIds.includes(values.type) && values.containerUri && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Container image')}</DescriptionListTerm>
+              <DescriptionListDescription>{values.containerUri}</DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+          {values.type && !appTypeIds.includes(values.type) && values.artifacts.length > 0 && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Artifacts')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                <List isPlain>
+                  {values.artifacts.map((a) => {
+                    return (
+                      <ListItem
+                        key={a.type}
+                      >{`${getArtifactLabel(t, a.type as CatalogItemArtifactType, a.name)} - ${a.uri}`}</ListItem>
+                    );
+                  })}
+                </List>
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+          {values.shortDescription && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Short description')}</DescriptionListTerm>
+              <DescriptionListDescription>{values.shortDescription}</DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+          {values.provider && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Provider')}</DescriptionListTerm>
+              <DescriptionListDescription>{values.provider}</DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+          {values.homepage && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Homepage')}</DescriptionListTerm>
+              <DescriptionListDescription>{values.homepage}</DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+          {values.supportUrl && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Support URL')}</DescriptionListTerm>
+              <DescriptionListDescription>{values.supportUrl}</DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+          {values.documentationUrl && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Documentation URL')}</DescriptionListTerm>
+              <DescriptionListDescription>{values.documentationUrl}</DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+          {values.deprecated && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Deprecated')}</DescriptionListTerm>
+              <DescriptionListDescription>{values.deprecationMessage}</DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Versions')}</DescriptionListTerm>
+            <DescriptionListDescription>{values.versions.map((v) => v.version).join(', ')}</DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </StackItem>
+      {!!error && (
+        <StackItem>
+          <Alert
+            isInline
+            variant="danger"
+            title={isEdit ? t('Failed to save catalog item') : t('Failed to create catalog item')}
+          >
+            {getErrorMessage(error)}
+          </Alert>
+        </StackItem>
+      )}
+    </Stack>
+  );
+};
+
+export default ReviewStep;

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

@@ -0,0 +1,203 @@
+import * as React from 'react';
+import { Button, FormGroup, FormSection, Grid, GridItem, Split, SplitItem, Title } from '@patternfly/react-core';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { FieldArray, FormikErrors, useFormikContext } from 'formik';
+import { TFunction } from 'i18next';
+import { CatalogItemArtifactType, CatalogItemType } from '@flightctl/types/alpha';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { AddCatalogItemFormValues, ArtifactFormValue, configurableAppTypes } from '../types';
+import { getEmptyArtifact } from '../utils';
+import TextField from '../../../form/TextField';
+import FormSelect from '../../../form/FormSelect';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import ExpandableFormSection from '../../../form/ExpandableFormSection';
+import UploadField from '../../../form/UploadField';
+import { getArtifactLabel, getCatalogItemBadge } from '../../utils';
+
+export const typeConfigStepId = 'type-config';
+
+export const isTypeConfigStepValid = (errors: FormikErrors<AddCatalogItemFormValues>) => {
+  return (
+    !errors.type && !errors.artifacts && !errors.containerUri && !errors.defaultConfig && !errors.defaultConfigSchema
+  );
+};
+
+const catalogItemTypeLabels = (
+  t: TFunction,
+): Record<
+  Exclude<CatalogItemType, CatalogItemType.CatalogItemTypeDriver | CatalogItemType.CatalogItemTypeFirmware>,
+  string
+> => ({
+  [CatalogItemType.CatalogItemTypeOS]: getCatalogItemBadge(CatalogItemType.CatalogItemTypeOS, t),
+  [CatalogItemType.CatalogItemTypeContainer]: getCatalogItemBadge(CatalogItemType.CatalogItemTypeContainer, t),
+  [CatalogItemType.CatalogItemTypeHelm]: getCatalogItemBadge(CatalogItemType.CatalogItemTypeHelm, t),
+  [CatalogItemType.CatalogItemTypeQuadlet]: getCatalogItemBadge(CatalogItemType.CatalogItemTypeQuadlet, t),
+  [CatalogItemType.CatalogItemTypeCompose]: getCatalogItemBadge(CatalogItemType.CatalogItemTypeCompose, t),
+  [CatalogItemType.CatalogItemTypeData]: getCatalogItemBadge(CatalogItemType.CatalogItemTypeData, t),
+});
+
+const getArtifactTitle = (artifact: ArtifactFormValue, index: number, t: ReturnType<typeof useTranslation>['t']) => {
+  const typeLabel = artifact.type ? getArtifactLabel(t, artifact.type, artifact.name) : artifact.name;
+  return typeLabel || t('Artifact {{ num }}', { num: index + 1 });
+};
+
+const TypeConfigStep = ({ isEdit, isReadOnly }: { isEdit?: boolean; isReadOnly?: boolean }) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<AddCatalogItemFormValues>();
+
+  let referenceURIField: React.ReactNode = undefined;
+
+  if (values.type) {
+    switch (values.type) {
+      case CatalogItemType.CatalogItemTypeOS: {
+        break;
+      }
+      case CatalogItemType.CatalogItemTypeData: {
+        referenceURIField = (
+          <FormGroup label={t('Image reference')} isRequired>
+            <TextField
+              name="containerUri"
+              aria-label={t('Image reference')}
+              isRequired
+              isDisabled={isReadOnly}
+              helperText={t('Provide a valid container image reference')}
+            />
+          </FormGroup>
+        );
+        break;
+      }
+      default: {
+        referenceURIField = (
+          <FormGroup label={t('Application image')} isRequired>
+            <TextField
+              name="containerUri"
+              aria-label={t('Application image')}
+              isRequired
+              isDisabled={isReadOnly}
+              helperText={t('Provide a valid container image reference')}
+            />
+          </FormGroup>
+        );
+        break;
+      }
+    }
+  }
+
+  return (
+    <Grid hasGutter>
+      <GridItem>
+        <Title headingLevel="h2" size="lg">
+          {t('Type and configuration')}
+        </Title>
+      </GridItem>
+      <GridItem lg={6} md={8} sm={12}>
+        <FlightCtlForm>
+          <FormGroup label={t('Type')} isRequired>
+            <FormSelect
+              name="type"
+              items={catalogItemTypeLabels(t)}
+              placeholderText={t('Select a type')}
+              isDisabled={isEdit || isReadOnly}
+            />
+          </FormGroup>
+          {referenceURIField}
+          {values.type === CatalogItemType.CatalogItemTypeOS && (
+            <FieldArray name="artifacts">
+              {(arrayHelpers) => (
+                <>
+                  {values.artifacts.map((artifact, index) => (
+                    <Split hasGutter key={artifact.type}>
+                      <SplitItem isFilled>
+                        <ExpandableFormSection
+                          title={getArtifactTitle(artifact, index, t)}
+                          fieldName={`artifacts.${index}`}
+                        >
+                          <Grid hasGutter>
+                            <FormGroup label={t('Type')} isRequired>
+                              <FormSelect
+                                name={`artifacts.${index}.type`}
+                                items={Object.values(CatalogItemArtifactType).reduce((acc, curr) => {
+                                  acc[curr] = getArtifactLabel(t, curr);
+                                  return acc;
+                                }, {})}
+                                placeholderText={t('Select a type')}
+                                isDisabled={isReadOnly}
+                              />
+                            </FormGroup>
+                            <FormGroup label={t('URI')} isRequired>
+                              <TextField
+                                name={`artifacts.${index}.uri`}
+                                aria-label={t('Artifact URI')}
+                                isRequired
+                                isDisabled={isReadOnly}
+                                placeholder="https://example.com/image.qcow2"
+                              />
+                            </FormGroup>
+                            <FormGroup label={t('Name')}>
+                              <TextField
+                                name={`artifacts.${index}.name`}
+                                aria-label={t('Artifact name')}
+                                helperText={t('Optional display name')}
+                                isDisabled={isReadOnly}
+                              />
+                            </FormGroup>
+                          </Grid>
+                        </ExpandableFormSection>
+                      </SplitItem>
+                      {!isReadOnly && (
+                        <SplitItem>
+                          <Button
+                            aria-label={t('Remove artifact')}
+                            variant="link"
+                            icon={<MinusCircleIcon />}
+                            iconPosition="start"
+                            onClick={() => arrayHelpers.remove(index)}
+                            isDisabled={values.artifacts.length === 1}
+                          />
+                        </SplitItem>
+                      )}
+                    </Split>
+                  ))}
+                  {!isReadOnly && (
+                    <FormGroup>
+                      <Button
+                        variant="link"
+                        icon={<PlusCircleIcon />}
+                        iconPosition="start"
+                        onClick={() => arrayHelpers.push(getEmptyArtifact())}
+                      >
+                        {t('Add artifact')}
+                      </Button>
+                    </FormGroup>
+                  )}
+                </>
+              )}
+            </FieldArray>
+          )}
+
+          {values.type && configurableAppTypes.includes(values.type) && (
+            <FormSection title={t('Default configuration')}>
+              <UploadField name="defaultConfig" ariaLabel={t('Configuration')} isDisabled={isReadOnly} />
+              <FormGroup
+                label={t('JSON schema')}
+                labelHelp={t(
+                  'JSON Schema defining configurable parameters (JSON or YAML format). Can be overridden per version.',
+                )}
+              >
+                <UploadField
+                  name="defaultConfigSchema"
+                  ariaLabel={t('Default config schema')}
+                  isDisabled={isReadOnly}
+                />
+              </FormGroup>
+            </FormSection>
+          )}
+        </FlightCtlForm>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default TypeConfigStep;

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

@@ -0,0 +1,249 @@
+import * as React from 'react';
+import { Button, FormGroup, FormSection, Grid, GridItem, Split, SplitItem, Title } from '@patternfly/react-core';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { FieldArray, FormikErrors, useField, useFormikContext } from 'formik';
+
+import { CatalogItemArtifactType } from '@flightctl/types/alpha';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { AddCatalogItemFormValues, VersionFormValues, configurableAppTypes } from '../types';
+import { getEmptyVersion } from '../utils';
+import { appTypeIds } from '../../useCatalogs';
+import TextField from '../../../form/TextField';
+import TextAreaField from '../../../form/TextAreaField';
+import CheckboxField from '../../../form/CheckboxField';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import ExpandableFormSection from '../../../form/ExpandableFormSection';
+import ChannelsSelect from '../ChannelsSelect';
+import UploadField from '../../../form/UploadField';
+import ErrorHelperText from '../../../form/FieldHelperText';
+import { getArtifactLabel } from '../../utils';
+
+export const versionStepId = 'version';
+
+export const isVersionStepValid = (errors: FormikErrors<AddCatalogItemFormValues>) => {
+  return !errors.versions;
+};
+
+const VersionEntry = ({
+  index,
+  availableChannels,
+  isReadOnly,
+  isEdit,
+}: {
+  index: number;
+  availableChannels: string[];
+  isReadOnly?: boolean;
+  isEdit: boolean;
+}) => {
+  const { values } = useFormikContext<AddCatalogItemFormValues>();
+  const showConfig = !!values.type && configurableAppTypes.includes(values.type);
+  const { t } = useTranslation();
+  const prefix = `versions.${index}`;
+
+  return (
+    <Grid hasGutter>
+      <FormGroup label={t('Version')} isRequired>
+        <TextField
+          name={`${prefix}.version`}
+          aria-label={t('Version')}
+          isRequired
+          isDisabled={isReadOnly}
+          helperText={t('Must be valid semver version (such as 1.0.0)')}
+        />
+      </FormGroup>
+      <FormGroup label={t('Channels')} isRequired>
+        <ChannelsSelect name={`${prefix}.channels`} availableChannels={availableChannels} isDisabled={isReadOnly} />
+      </FormGroup>
+      <ReferencesField index={index} isReadOnly={isReadOnly} />
+      <FormSection title={t('Updates')}>
+        <FormGroup label={t('Replaces')}>
+          <TextField
+            name={`${prefix}.replaces`}
+            aria-label={t('Replaces')}
+            placeholder="1.0.0"
+            isDisabled={isReadOnly}
+            helperText={t('Single version this one replaces, defining the primary upgrade edge')}
+          />
+        </FormGroup>
+        <FormGroup label={t('Skips')}>
+          <TextField
+            name={`${prefix}.skips`}
+            aria-label={t('Skips')}
+            placeholder="1.0.1, 1.0.2"
+            isDisabled={isReadOnly}
+            helperText={t('Comma-separated versions that can upgrade directly to this one')}
+          />
+        </FormGroup>
+        <FormGroup label={t('Skip range')}>
+          <TextField
+            name={`${prefix}.skipRange`}
+            aria-label={t('Skip range')}
+            placeholder=">=1.0.0 <1.5.0"
+            isDisabled={isReadOnly}
+            helperText={t('Semver range of versions that can upgrade directly to this one')}
+          />
+        </FormGroup>
+      </FormSection>
+      <FormGroup label={t('Readme')}>
+        <TextAreaField
+          name={`${prefix}.readme`}
+          aria-label={t('Readme')}
+          isDisabled={isReadOnly}
+          helperText={t('Markdown documentation for this version')}
+        />
+      </FormGroup>
+      {showConfig && (
+        <FormSection title={t('Application configuration')}>
+          <UploadField name={`${prefix}.config`} ariaLabel={t('Configuration')} isDisabled={isReadOnly} />
+          <FormGroup
+            label={t('JSON schema')}
+            labelHelp={t('JSON Schema for this version (JSON or YAML format). Overrides the default config schema.')}
+          >
+            <UploadField name={`${prefix}.configSchema`} ariaLabel={t('Config schema')} isDisabled={isReadOnly} />
+          </FormGroup>
+        </FormSection>
+      )}
+      {isEdit && (
+        <CheckboxField name={`${prefix}.deprecated`} label={t('Deprecated')} isDisabled={isReadOnly}>
+          <FormGroup label={t('Deprecation message')} isRequired>
+            <TextAreaField
+              name={`${prefix}.deprecationMessage`}
+              aria-label={t('Deprecation message')}
+              isRequired
+              isDisabled={isReadOnly}
+            />
+          </FormGroup>
+        </CheckboxField>
+      )}
+    </Grid>
+  );
+};
+
+const ReferencesField = ({ index, isReadOnly }: { index: number; isReadOnly?: boolean }) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<AddCatalogItemFormValues>();
+  const prefix = `versions.${index}`;
+  const isApp = !!values.type && appTypeIds.includes(values.type);
+  const [, refsMeta] = useField(`${prefix}.references`);
+  const refsError = refsMeta.touched && typeof refsMeta.error === 'string' ? refsMeta.error : undefined;
+
+  if (isApp) {
+    return (
+      <FormGroup label={t('Container reference')} isRequired>
+        <TextField
+          name={`${prefix}.references.${CatalogItemArtifactType.CatalogItemArtifactTypeContainer}`}
+          aria-label={t('Container reference')}
+          isDisabled={isReadOnly}
+          helperText={t('Tag, digest, or complete image reference')}
+        />
+        <ErrorHelperText error={refsError} />
+      </FormGroup>
+    );
+  }
+
+  const artifactsWithType = values.artifacts.filter((a) => a.type);
+
+  if (artifactsWithType.length === 0) {
+    return null;
+  }
+
+  return (
+    <FormSection title={t('References')}>
+      {artifactsWithType.map((artifact) => {
+        return (
+          <FormGroup
+            key={artifact.type}
+            label={getArtifactLabel(t, artifact.type as CatalogItemArtifactType, artifact.name)}
+          >
+            <TextField
+              name={`${prefix}.references.${artifact.type}`}
+              aria-label={t('{{type}} reference', { type: artifact.type })}
+              isDisabled={isReadOnly}
+              helperText={t('Tag, digest, or complete image reference')}
+            />
+          </FormGroup>
+        );
+      })}
+      <ErrorHelperText error={refsError} />
+    </FormSection>
+  );
+};
+
+const VersionStep = ({ isReadOnly, isEdit }: { isReadOnly?: boolean; isEdit: boolean }) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<AddCatalogItemFormValues>();
+
+  const availableChannels = React.useMemo(() => {
+    const channelSet = new Set<string>();
+    values.versions.forEach((v) => v.channels.forEach((c) => channelSet.add(c)));
+    return Array.from(channelSet);
+  }, [values.versions]);
+
+  return (
+    <Grid hasGutter>
+      <GridItem>
+        <Title headingLevel="h2" size="lg">
+          {t('Versions')}
+        </Title>
+      </GridItem>
+      <GridItem lg={6} md={8} sm={12}>
+        <FlightCtlForm>
+          <FieldArray name="versions">
+            {(arrayHelpers) => (
+              <>
+                {values.versions.map((v: VersionFormValues, index: number) => (
+                  <Split hasGutter key={index}>
+                    <SplitItem isFilled>
+                      <ExpandableFormSection
+                        title={t('Version {{ num }}', { num: v.version || index + 1 })}
+                        fieldName={`versions.${index}`}
+                        defaultExpanded={!isEdit}
+                      >
+                        <VersionEntry
+                          index={index}
+                          availableChannels={availableChannels}
+                          isReadOnly={isReadOnly}
+                          isEdit={isEdit}
+                        />
+                      </ExpandableFormSection>
+                    </SplitItem>
+                    {!isReadOnly && (
+                      <SplitItem>
+                        <Button
+                          aria-label={t('Remove version')}
+                          variant="link"
+                          icon={<MinusCircleIcon />}
+                          iconPosition="start"
+                          onClick={() => arrayHelpers.remove(index)}
+                          isDisabled={values.versions.length === 1}
+                        />
+                      </SplitItem>
+                    )}
+                  </Split>
+                ))}
+                {!isReadOnly && (
+                  <FormSection>
+                    <FormGroup>
+                      <Button
+                        variant="link"
+                        icon={<PlusCircleIcon />}
+                        iconPosition="start"
+                        onClick={() => arrayHelpers.push(getEmptyVersion())}
+                      >
+                        {t('Add version')}
+                      </Button>
+                    </FormGroup>
+                  </FormSection>
+                )}
+              </>
+            )}
+          </FieldArray>
+        </FlightCtlForm>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default VersionStep;

package/src/components/Catalog/AddCatalogItemWizard/types.ts

@@ -0,0 +1,58 @@
+import { CatalogItemArtifactType, CatalogItemType } from '@flightctl/types/alpha';
+
+export type CreateCatalogFormValues = {
+  name: string;
+  displayName: string;
+  shortDescription: string;
+  icon: string;
+  provider: string;
+  support: string;
+};
+
+export type VersionFormValues = {
+  version: string;
+  references: Record<string, string>;
+  channels: string[];
+  replaces: string;
+  skips: string;
+  skipRange: string;
+  readme: string;
+  config: string;
+  configSchema: string;
+  deprecated: boolean;
+  deprecationMessage: string;
+};
+
+export const configurableAppTypes: CatalogItemType[] = [
+  CatalogItemType.CatalogItemTypeContainer,
+  CatalogItemType.CatalogItemTypeHelm,
+  CatalogItemType.CatalogItemTypeQuadlet,
+  CatalogItemType.CatalogItemTypeCompose,
+];
+
+export type ArtifactFormValue = {
+  type: CatalogItemArtifactType | '';
+  name: string;
+  uri: string;
+};
+
+export type AddCatalogItemFormValues = {
+  catalog: string;
+  name: string;
+  displayName: string;
+  shortDescription: string;
+  icon: string;
+  type: CatalogItemType | '';
+  artifacts: ArtifactFormValue[];
+  containerUri: string;
+  provider: string;
+  homepage: string;
+  supportUrl: string;
+  documentationUrl: string;
+  versions: VersionFormValues[];
+  defaultConfig: string;
+  defaultConfigSchema: string;
+  deprecated: boolean;
+  deprecationMessage: string;
+  deprecationReplacement: string;
+};