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

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;

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;