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

package/src/components/ImportResourceWizard/ImportResourceWizard.tsx

@@ -0,0 +1,226 @@
+import {
+  Alert,
+  Breadcrumb,
+  BreadcrumbItem,
+  Bullseye,
+  PageSection,
+  Spinner,
+  Title,
+  Wizard,
+  WizardStep,
+  WizardStepType,
+} from '@patternfly/react-core';
+import * as React from 'react';
+import * as Yup from 'yup';
+import { TFunction } from 'i18next';
+import { Formik, FormikErrors } from 'formik';
+import { RepoSpecType, Repository, RepositoryList, ResourceSync } from '@flightctl/types';
+
+import RepositoryStep, { isRepoStepValid, repositoryStepId } from './steps/RepositoryStep';
+import ReviewStep, { reviewStepId } from './steps/ReviewStep';
+import ResourceSyncStep, { isResourceSyncStepValid, resourceSyncStepId } from './steps/ResourceSyncStep';
+import { ImportResourceFormValues, ImportResourceWizardProps } from './types';
+import { useFetch } from '../../hooks/useFetch';
+import {
+  getInitValues,
+  getRepository,
+  getResourceSync,
+  handlePromises,
+  repoSyncSchema,
+  repositorySchema,
+} from '../Repository/CreateRepository/utils';
+import { getErrorMessage } from '../../utils/error';
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import { useTranslation } from '../../hooks/useTranslation';
+import { Link, useNavigate } from '../../hooks/useNavigate';
+import LeaveFormConfirmation from '../common/LeaveFormConfirmation';
+import ErrorBoundary from '../common/ErrorBoundary';
+import PageWithPermissions from '../common/PageWithPermissions';
+import { usePermissionsContext } from '../common/PermissionsContext';
+import FlightCtlWizardFooter from '../common/FlightCtlWizardFooter';
+import { RESOURCE, VERB } from '../../types/rbac';
+
+const validationSchema = (t: TFunction) =>
+  Yup.lazy((values: ImportResourceFormValues) =>
+    values.useExistingRepo
+      ? Yup.object({
+          existingRepo: Yup.string().required(t('Repository is required')),
+          resourceSyncs: repoSyncSchema(t, values.resourceSyncs),
+        })
+      : repositorySchema(t, undefined)({ ...values, useResourceSyncs: true, exists: false }),
+  );
+
+const validateFooterStep = (
+  activeStepId: string,
+  errors: FormikErrors<ImportResourceFormValues>,
+  values: ImportResourceFormValues,
+) => {
+  if (activeStepId === repositoryStepId) {
+    return isRepoStepValid(values, errors);
+  } else if (activeStepId === resourceSyncStepId) {
+    return isResourceSyncStepValid(errors);
+  }
+  return true;
+};
+
+const ImportResourceWizardContent = ({
+  resourceSyncType,
+  successRoute,
+  resourceSyncDescription,
+  reviewInfoText,
+}: ImportResourceWizardProps) => {
+  const { t } = useTranslation();
+  const { post } = useFetch();
+  const [errors, setErrors] = React.useState<string[]>();
+  const navigate = useNavigate();
+  const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
+  const [repoList, isLoading, error] = useFetchPeriodically<RepositoryList>({
+    endpoint: 'repositories',
+  });
+
+  const gitRepositories = (repoList?.items || []).filter((repo) => repo.spec.type === RepoSpecType.RepoSpecTypeGit);
+
+  if (isLoading) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert isInline variant="danger" title={t('An error occurred')}>
+        {getErrorMessage(error)}
+      </Alert>
+    );
+  }
+
+  const repoInitValues = getInitValues({
+    options: {
+      allowedRepoTypes: [RepoSpecType.RepoSpecTypeGit],
+      showRepoTypes: false,
+      defaultRSType: resourceSyncType,
+    },
+  });
+
+  return (
+    <Formik<ImportResourceFormValues>
+      initialValues={{
+        useExistingRepo: true,
+        existingRepo: gitRepositories.length === 1 ? gitRepositories[0].metadata.name || '' : '',
+        ...repoInitValues,
+      }}
+      validationSchema={validationSchema(t)}
+      validateOnMount
+      onSubmit={async (values) => {
+        setErrors(undefined);
+        if (!values.useExistingRepo) {
+          try {
+            await post<Repository>('repositories', getRepository(values));
+          } catch (e) {
+            setErrors([getErrorMessage(e)]);
+            return;
+          }
+        }
+        const resourceSyncPromises = values.resourceSyncs.map((rs) =>
+          post<ResourceSync>(
+            'resourcesyncs',
+            getResourceSync(values.useExistingRepo ? values.existingRepo : values.name, rs),
+          ),
+        );
+        const rsErrors = await handlePromises(resourceSyncPromises);
+        if (rsErrors.length) {
+          setErrors(rsErrors);
+          return;
+        }
+        navigate(successRoute);
+      }}
+    >
+      {({ values, errors: formikErrors }) => (
+        <>
+          <LeaveFormConfirmation />
+          <Wizard
+            footer={
+              <FlightCtlWizardFooter<ImportResourceFormValues>
+                firstStepId={repositoryStepId}
+                submitStepId={reviewStepId}
+                validateStep={validateFooterStep}
+                saveButtonText={t('Import')}
+              />
+            }
+            onStepChange={(_, step) => setCurrentStep(step)}
+          >
+            <WizardStep name={t('Select or create repository')} id={repositoryStepId}>
+              {(!currentStep || currentStep?.id === repositoryStepId) && (
+                <RepositoryStep repositories={gitRepositories} hasLoaded={!!repoList} />
+              )}
+            </WizardStep>
+            <WizardStep
+              name={t('Add resource sync')}
+              id={resourceSyncStepId}
+              isDisabled={
+                (!currentStep || currentStep?.id === repositoryStepId) && !isRepoStepValid(values, formikErrors)
+              }
+            >
+              {currentStep?.id === resourceSyncStepId && (
+                <ResourceSyncStep description={resourceSyncDescription} defaultSyncType={resourceSyncType} />
+              )}
+            </WizardStep>
+            <WizardStep
+              name={t('Review')}
+              id={reviewStepId}
+              isDisabled={!isRepoStepValid(values, formikErrors) || !isResourceSyncStepValid(formikErrors)}
+            >
+              {currentStep?.id === reviewStepId && <ReviewStep errors={errors} infoText={reviewInfoText} />}
+            </WizardStep>
+          </Wizard>
+        </>
+      )}
+    </Formik>
+  );
+};
+
+const ImportResourceWizard = (props: ImportResourceWizardProps) => {
+  const { breadcrumb, title } = props;
+  return (
+    <>
+      <PageSection hasBodyWrapper={false} type="breadcrumb">
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link to={breadcrumb.route}>{breadcrumb.label}</Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem isActive>{title}</BreadcrumbItem>
+        </Breadcrumb>
+      </PageSection>
+      <PageSection hasBodyWrapper={false}>
+        <Title headingLevel="h1" size="3xl">
+          {title}
+        </Title>
+      </PageSection>
+      <PageSection hasBodyWrapper={false} type="wizard">
+        <ErrorBoundary>
+          <ImportResourceWizardContent {...props} />
+        </ErrorBoundary>
+      </PageSection>
+    </>
+  );
+};
+
+const importResourceWizardPermissions = [
+  { kind: RESOURCE.RESOURCE_SYNC, verb: VERB.CREATE },
+  { kind: RESOURCE.REPOSITORY, verb: VERB.LIST },
+];
+
+const ImportResourceWizardWithPermissions = (props: ImportResourceWizardProps) => {
+  const { checkPermissions, loading: isLoading } = usePermissionsContext();
+  const [canCreateRs, canReadRepo] = checkPermissions(importResourceWizardPermissions);
+  const allowed = canCreateRs && canReadRepo;
+  return (
+    <PageWithPermissions allowed={allowed} loading={isLoading}>
+      <ImportResourceWizard {...props} />
+    </PageWithPermissions>
+  );
+};
+
+export default ImportResourceWizardWithPermissions;

package/src/components/{Fleet/ImportFleetWizard → ImportResourceWizard}/steps/RepositoryStep.tsx

@@ -2,23 +2,22 @@ import * as React from 'react';
 import { FormGroup, FormSection, Grid, Radio } from '@patternfly/react-core';
 import { FormikErrors, useFormikContext } from 'formik';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
-
 import { GitRepoSpec, Repository } from '@flightctl/types';
-import { ImportFleetFormValues } from '../types';
 
-import { RepositoryForm } from '../../../Repository/CreateRepository/CreateRepositoryForm';
-import RepositoryStatus from '../../../Status/RepositoryStatus';
-import { getLastTransitionTimeText } from '../../../../utils/status/repository';
-import { useTranslation } from '../../../../hooks/useTranslation';
-import FormSelect from '../../../form/FormSelect';
-import FlightCtlForm from '../../../form/FlightCtlForm';
-import { usePermissionsContext } from '../../../common/PermissionsContext';
-import { RESOURCE, VERB } from '../../../../types/rbac';
-import WithTooltip from '../../../common/WithTooltip';
+import { ImportResourceFormValues } from '../types';
+import { RepositoryForm } from '../../Repository/CreateRepository/CreateRepositoryForm';
+import RepositoryStatus from '../../Status/RepositoryStatus';
+import { getLastTransitionTimeText } from '../../../utils/status/repository';
+import { useTranslation } from '../../../hooks/useTranslation';
+import FormSelect from '../../form/FormSelect';
+import FlightCtlForm from '../../form/FlightCtlForm';
+import { usePermissionsContext } from '../../common/PermissionsContext';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import WithTooltip from '../../common/WithTooltip';
 
 export const repositoryStepId = 'repository';
 
-export const isRepoStepValid = (values: ImportFleetFormValues, errors: FormikErrors<ImportFleetFormValues>) => {
+export const isRepoStepValid = (values: ImportResourceFormValues, errors: FormikErrors<ImportResourceFormValues>) => {
   if (values.useExistingRepo) {
     return !errors.existingRepo;
   }
@@ -34,19 +33,22 @@ export const isRepoStepValid = (values: ImportFleetFormValues, errors: FormikErr
 
 const ExistingRepoForm = ({ repositories }: { repositories: Repository[] }) => {
   const { t } = useTranslation();
-  const { values } = useFormikContext<ImportFleetFormValues>();
+  const { values } = useFormikContext<ImportResourceFormValues>();
 
   const currentRepo = repositories.find((r) => r.metadata.name === values.existingRepo);
-  const repoSpec = currentRepo?.spec as GitRepoSpec | undefined; // Only git repositories can be used for importing fleets;
+  const repoSpec = currentRepo?.spec as GitRepoSpec | undefined;
   return (
     <>
       <FormGroup label={t('Repository')} fieldId="repository">
         <FormSelect
           name="existingRepo"
-          items={repositories.reduce((acc, curr) => {
-            acc[curr.metadata.name || ''] = curr.metadata.name || '';
-            return acc;
-          }, {})}
+          items={repositories.reduce(
+            (acc, curr) => {
+              acc[curr.metadata.name || ''] = curr.metadata.name || '';
+              return acc;
+            },
+            {} as Record<string, string>,
+          )}
           placeholderText={t('Select a repository')}
         />
       </FormGroup>
@@ -76,7 +78,7 @@ const ExistingRepoForm = ({ repositories }: { repositories: Repository[] }) => {
 
 const RepositoryStep = ({ repositories, hasLoaded }: { repositories: Repository[]; hasLoaded: boolean }) => {
   const { t } = useTranslation();
-  const { values, setFieldValue } = useFormikContext<ImportFleetFormValues>();
+  const { values, setFieldValue } = useFormikContext<ImportResourceFormValues>();
 
   const { checkPermissions } = usePermissionsContext();
   const [canCreateRepo] = checkPermissions([{ kind: RESOURCE.REPOSITORY, verb: VERB.CREATE }]);

package/src/components/ImportResourceWizard/steps/ResourceSyncStep.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Content, Grid, Stack, StackItem } from '@patternfly/react-core';
+import { FormikErrors } from 'formik';
+import { ResourceSyncType } from '@flightctl/types';
+
+import FlightControlForm from '../../form/FlightCtlForm';
+import CreateResourceSyncsForm from '../../Repository/CreateRepository/CreateResourceSyncsForm';
+import { ImportResourceFormValues } from '../types';
+
+export const resourceSyncStepId = 'resource-sync';
+export const isResourceSyncStepValid = (errors: FormikErrors<ImportResourceFormValues>) => {
+  if (Array.isArray(errors.resourceSyncs)) {
+    return !errors.resourceSyncs?.some((e) => !!e);
+  }
+  return !errors.resourceSyncs;
+};
+
+const ResourceSyncStep = ({
+  description,
+  defaultSyncType,
+}: {
+  description: string;
+  defaultSyncType: ResourceSyncType;
+}) => {
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Content component="p">{description}</Content>
+      </StackItem>
+      <StackItem>
+        <FlightControlForm>
+          <Grid span={8}>
+            <CreateResourceSyncsForm showSyncType={false} defaultSyncType={defaultSyncType} />
+          </Grid>
+        </FlightControlForm>
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default ResourceSyncStep;

package/src/components/{Fleet/ImportFleetWizard → ImportResourceWizard}/steps/ReviewStep.tsx

@@ -3,16 +3,15 @@ import { Alert, FormGroup, Stack, StackItem, TextInput } from '@patternfly/react
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { useFormikContext } from 'formik';
 
-import { ImportFleetFormValues } from '../types';
-import FlightCtlForm from '../../../form/FlightCtlForm';
-
-import { useTranslation } from '../../../../hooks/useTranslation';
+import { ImportResourceFormValues } from '../types';
+import FlightCtlForm from '../../form/FlightCtlForm';
+import { useTranslation } from '../../../hooks/useTranslation';
 
 export const reviewStepId = 'review';
 
-const ReviewStep = ({ errors }: { errors?: string[] }) => {
+const ReviewStep = ({ errors, infoText }: { errors?: string[]; infoText?: string }) => {
   const { t } = useTranslation();
-  const { values } = useFormikContext<ImportFleetFormValues>();
+  const { values } = useFormikContext<ImportResourceFormValues>();
   return (
     <Stack hasGutter>
       <StackItem isFilled>
@@ -47,15 +46,11 @@ const ReviewStep = ({ errors }: { errors?: string[] }) => {
           </FormGroup>
         </FlightCtlForm>
       </StackItem>
-      <StackItem>
-        <Alert
-          isInline
-          variant="info"
-          title={t(
-            'Fleets will appear in the fleets table list and their status will be reflecting the resource sync process status. After a few minutes, they should be synced and enabled.',
-          )}
-        />
-      </StackItem>
+      {infoText && (
+        <StackItem>
+          <Alert isInline variant="info" title={infoText} />
+        </StackItem>
+      )}
       {errors?.length && (
         <StackItem>
           <Alert isInline variant="danger" title={t('An error occurred')}>

package/src/components/ImportResourceWizard/types.ts

@@ -0,0 +1,18 @@
+import { ResourceSyncType } from '@flightctl/types';
+
+import { RepositoryFormValues } from '../Repository/CreateRepository/types';
+import { Route } from '../../hooks/useNavigate';
+
+export type ImportResourceFormValues = RepositoryFormValues & {
+  useExistingRepo: boolean;
+  existingRepo: string;
+};
+
+export type ImportResourceWizardProps = {
+  resourceSyncType: ResourceSyncType;
+  successRoute: Route;
+  breadcrumb: { label: string; route: Route };
+  title: string;
+  resourceSyncDescription: string;
+  reviewInfoText?: string;
+};

package/src/components/ListPage/ListPage.tsx

@@ -13,7 +13,7 @@ const ListPage: React.FC<ListPageProps> = ({ title, headingLevel = 'h1', childre
     <PageSection hasBodyWrapper={false}>
       <Flex gap={{ default: 'gapMd' }} alignItems={{ default: 'alignItemsCenter' }}>
         <FlexItem>
-          <Title headingLevel={headingLevel} size="3xl">
+          <Title headingLevel={headingLevel} size="3xl" data-testid="list-page-title">
             {title}
           </Title>
         </FlexItem>

package/src/components/Repository/CreateRepository/CreateRepository.tsx

@@ -25,8 +25,7 @@ import { RESOURCE, VERB } from '../../../types/rbac';
 import { getErrorMessage } from '../../../utils/error';
 import { commonQueries } from '../../../utils/query';
 import PageWithPermissions from '../../common/PageWithPermissions';
-
-import CreateRepositoryForm from './CreateRepositoryForm';
+import CreateRepositoryForm, { CreateRepositoryFormProps } from './CreateRepositoryForm';
 
 const CreateRepository = () => {
   const { t } = useTranslation();
@@ -105,15 +104,17 @@ const CreateRepository = () => {
       </Bullseye>
     );
   } else {
+    const options: CreateRepositoryFormProps['options'] = {
+      isReadOnly: !!rsError,
+    };
+
     content = (
       <CreateRepositoryForm
         onClose={() => navigate(-1)}
         onSuccess={(repo) => navigate({ route: ROUTE.REPO_DETAILS, postfix: repo.metadata.name })}
         repository={repositoryDetails}
         resourceSyncs={resourceSyncs}
-        options={{
-          isReadOnly: !!rsError,
-        }}
+        options={options}
       />
     );
   }

package/src/components/Repository/CreateRepository/CreateRepositoryForm.tsx

@@ -427,7 +427,7 @@ const CreateRepositoryFormContent = ({ isEdit, onClose, options, children }: Cre
                 <LabelWithHelperText
                   label={t('Use resource syncs')}
                   content={t(
-                    'A resource sync is an automated Gitops method that helps manage your imported fleets by monitoring source repository changes and updating your fleet configuration accordingly.',
+                    "A resource sync is an automated Gitops method that helps manage your imported fleets or catalogs by monitoring source repository changes and updating resource's configuration accordingly.",
                   )}
                 />
               }

package/src/components/Repository/CreateRepository/CreateResourceSyncsForm.tsx

@@ -1,18 +1,29 @@
 import * as React from 'react';
 import { FieldArray, useFormikContext } from 'formik';
-import { Button, FormGroup, FormSection } from '@patternfly/react-core';
+import { Button, FormGroup, FormSection, Split, SplitItem } 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 { useTranslation } from '../../../hooks/useTranslation';
+import { ResourceSyncType } from '@flightctl/types';
 
+import { useTranslation } from '../../../hooks/useTranslation';
 import TextField from '../../form/TextField';
 import { FormGroupWithHelperText } from '../../common/WithHelperText';
 import { RepositoryFormValues, ResourceSyncFormValue } from './types';
 import NameField from '../../form/NameField';
 import { getDnsSubdomainValidations } from '../../form/validations';
+import RadioField from '../../form/RadioField';
 
-export const CreateResourceSyncForm = ({ rs, index }: { rs: ResourceSyncFormValue; index: number }) => {
+export const CreateResourceSyncForm = ({
+  rs,
+  index,
+  showSyncType = true,
+}: {
+  rs: ResourceSyncFormValue;
+  index: number;
+  showSyncType?: boolean;
+}) => {
   const { t } = useTranslation();
+
   return (
     <FormSection key={index}>
       <NameField
@@ -24,6 +35,28 @@ export const CreateResourceSyncForm = ({ rs, index }: { rs: ResourceSyncFormValu
         resourceType="resourcesyncs"
         validations={getDnsSubdomainValidations(t)}
       />
+      {showSyncType && (
+        <FormGroup label={t('Sync type')}>
+          <Split hasGutter>
+            <SplitItem>
+              <RadioField
+                id={`resource-sync-${index}-fleet-type`}
+                name={`resourceSyncs[${index}].type`}
+                label={t('Fleet')}
+                checkedValue={ResourceSyncType.ResourceSyncTypeFleet}
+              />
+            </SplitItem>
+            <SplitItem>
+              <RadioField
+                id={`resource-sync-${index}-catalog-type`}
+                name={`resourceSyncs[${index}].type`}
+                label={t('Catalog')}
+                checkedValue={ResourceSyncType.ResourceSyncTypeCatalog}
+              />
+            </SplitItem>
+          </Split>
+        </FormGroup>
+      )}
       <FormGroupWithHelperText label={t('Target revision')} content={t('Name of a branch or a tag.')} isRequired>
         <TextField
           name={`resourceSyncs[${index}].targetRevision`}
@@ -52,20 +85,31 @@ export const CreateResourceSyncForm = ({ rs, index }: { rs: ResourceSyncFormValu
   );
 };
 
-const CreateResourceSyncsForm = () => {
+const CreateResourceSyncsForm = ({
+  showSyncType = true,
+  defaultSyncType = ResourceSyncType.ResourceSyncTypeFleet,
+}: {
+  showSyncType?: boolean;
+  defaultSyncType?: ResourceSyncType;
+}) => {
   const { t } = useTranslation();
   const { values } = useFormikContext<RepositoryFormValues>();
 
   return (
     <FieldArray name="resourceSyncs">
-      {({ remove, push }) => (
+      {(arrayHelpers) => (
         <>
           {values.resourceSyncs.map((resourceSync, index) => (
             <React.Fragment key={index}>
-              <CreateResourceSyncForm rs={resourceSync} index={index} />
+              <CreateResourceSyncForm rs={resourceSync} index={index} showSyncType={showSyncType} />
               {values.resourceSyncs.length > 1 && (
                 <FormGroup isInline>
-                  <Button variant="link" icon={<MinusCircleIcon />} iconPosition="left" onClick={() => remove(index)}>
+                  <Button
+                    variant="link"
+                    icon={<MinusCircleIcon />}
+                    iconPosition="left"
+                    onClick={() => arrayHelpers.remove(index)}
+                  >
                     {t('Remove resource sync')}
                   </Button>
                 </FormGroup>
@@ -76,7 +120,14 @@ const CreateResourceSyncsForm = () => {
             variant="link"
             icon={<PlusCircleIcon />}
             iconPosition="left"
-            onClick={() => push({ name: '', path: '', targetRevision: '' } as ResourceSyncFormValue)}
+            onClick={() =>
+              arrayHelpers.push({
+                name: '',
+                path: '',
+                targetRevision: '',
+                type: defaultSyncType,
+              } as ResourceSyncFormValue)
+            }
           >
             {t('Add another resource sync')}
           </Button>

package/src/components/Repository/CreateRepository/types.ts

@@ -1,9 +1,10 @@
-import { OciRepoSpec, RepoSpecType } from '@flightctl/types';
+import { OciRepoSpec, RepoSpecType, ResourceSyncType } from '@flightctl/types';
 
 export type ResourceSyncFormValue = {
   name: string;
   targetRevision: string;
   path: string;
+  type: ResourceSyncType;
   exists?: boolean;
 };
 

package/src/components/Repository/CreateRepository/utils.ts

@@ -13,6 +13,7 @@ import {
   Repository,
   RepositorySpec,
   ResourceSync,
+  ResourceSyncType,
   SshConfig,
 } from '@flightctl/types';
 
@@ -26,7 +27,7 @@ const gitRepoUrlRegex = new RegExp(
   /^((http|git|ssh|http(s)|file|\/?)|(git@[\w.]+))(:(\/\/)?)([\w.@:/\-~]+)(\.git)?(\/)?$/,
 );
 const httpRepoUrlRegex = /^(http|https)/;
-const pathRegex = /\/.+/;
+const pathRegex = /\/.*?/;
 const jwtTokenRegexp = /^[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+$/;
 
 export const isHttpRepoSpec = (repoSpec: RepositorySpec): repoSpec is HttpRepoSpec =>
@@ -469,6 +470,7 @@ export const getInitValues = ({
     allowedRepoTypes?: RepoSpecType[];
     showRepoTypes?: boolean;
     writeAccessOnly?: boolean;
+    defaultRSType?: ResourceSyncType;
   };
 }): RepositoryFormValues => {
   const configAllowsResourceSyncs = options?.canUseResourceSyncs ?? true;
@@ -494,6 +496,7 @@ export const getInitValues = ({
           name: '',
           path: '',
           targetRevision: '',
+          type: options?.defaultRSType ?? ResourceSyncType.ResourceSyncTypeFleet,
         },
       ],
     };
@@ -531,8 +534,9 @@ export const getInitValues = ({
             path: rs.spec.path || '',
             targetRevision: rs.spec.targetRevision || '',
             exists: true,
+            type: rs.spec.type || ResourceSyncType.ResourceSyncTypeFleet,
           }))
-      : [{ name: '', path: '', targetRevision: '' }],
+      : [{ name: '', path: '', targetRevision: '', type: ResourceSyncType.ResourceSyncTypeFleet }],
   };
 
   if (repository.spec.type === RepoSpecType.RepoSpecTypeOci) {
@@ -898,6 +902,7 @@ export const getResourceSync = (repositoryId: string, values: ResourceSyncFormVa
       repository: repositoryId,
       targetRevision: values.targetRevision,
       path: values.path,
+      type: values.type,
     },
   };
 };

package/src/components/Repository/RepositoryDetails/DeleteRepositoryModal.tsx

@@ -31,7 +31,7 @@ const DeleteRepositoryModal = ({ repositoryId, onClose, onDeleteSuccess }: Delet
   const { get, remove } = useFetch();
   const [isDeleting, setIsDeleting] = React.useState(false);
   const [error, setError] = React.useState<string>();
-  const [rsError, setRsError] = React.useState<string>();
+  const [rsError, setRsError] = React.useState<unknown>();
   const [message, setMessage] = React.useState<string>();
   const [resourceSyncIds, setResourceSyncIds] = React.useState<string[]>();
   const isLoadingRSs = resourceSyncIds === undefined;
@@ -62,15 +62,9 @@ const DeleteRepositoryModal = ({ repositoryId, onClose, onDeleteSuccess }: Delet
       setResourceSyncIds(resourceSyncs.items.map((rs) => rs.metadata.name || ''));
       setRsError(undefined);
     } catch (e) {
-      setRsError(
-        t(
-          `The repository cannot be safely deleted at this moment, as we couldn't determine if the repository contains resource syncs. Detail: {{detail}}`,
-          { detail: getErrorMessage(e) },
-        ),
-      );
+      setRsError(getErrorMessage(e));
       setResourceSyncIds([]);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [get, repositoryId]);
 
   React.useEffect(() => {
@@ -113,7 +107,10 @@ const DeleteRepositoryModal = ({ repositoryId, onClose, onDeleteSuccess }: Delet
           )}
           {rsError ? (
             <Alert isInline variant="warning" title={t('Cannot delete repository')}>
-              {rsError}
+              {t(
+                `The repository cannot be safely deleted at this moment, as we couldn't determine if the repository contains resource syncs. Detail: {{detail}}`,
+                { detail: rsError },
+              )}
             </Alert>
           ) : (
             <StackItem>