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

package/src/components/Fleet/FleetDetails/FleetDetailsCatalog.tsx

@@ -0,0 +1,66 @@
+import { Fleet, PatchRequest } from '@flightctl/types';
+import * as React from 'react';
+import { useFetch } from '../../../hooks/useFetch';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import { usePermissionsContext } from '../../common/PermissionsContext';
+import ResourceCatalogPage from '../../Catalog/ResourceCatalog/ResourceCatalogPage';
+import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+
+type FleetDetailsCatalogProps = {
+  fleet: Fleet;
+  refetch: VoidFunction;
+};
+
+const fleetCatalogPermissions = [{ kind: RESOURCE.FLEET, verb: VERB.PATCH }];
+
+const FleetDetailsCatalog = ({ fleet, refetch }: FleetDetailsCatalogProps) => {
+  const { patch } = useFetch();
+  const navigate = useNavigate();
+  const { checkPermissions } = usePermissionsContext();
+  const [canEdit] = checkPermissions(fleetCatalogPermissions);
+  const onPatch = React.useCallback(
+    async (allPatches: PatchRequest) => {
+      await patch(`fleets/${fleet.metadata.name}`, allPatches);
+      refetch();
+    },
+    [fleet.metadata.name, patch, refetch],
+  );
+
+  return (
+    <ResourceCatalogPage
+      canEdit={canEdit && !fleet.metadata.owner}
+      hasOwner={!!fleet.metadata.owner}
+      currentLabels={fleet.metadata.labels}
+      onPatch={onPatch}
+      spec={fleet.spec.template.spec}
+      specPath="/spec/template/"
+      onEdit={(catalogId, catalogItemId, appName) => {
+        let path = `${fleet.metadata.name}/${catalogId}/${catalogItemId}`;
+        if (appName) {
+          const params = new URLSearchParams({
+            appName,
+          });
+          path = `${path}?${params.toString()}`;
+        }
+        navigate({
+          route: ROUTE.CATALOG_FLEET_EDIT,
+          postfix: path,
+        });
+      }}
+      onInstall={({ item, version, channel }) => {
+        const params = new URLSearchParams({
+          version,
+          channel,
+        });
+
+        const path = `${fleet.metadata.name}/${item.metadata.catalog}/${item.metadata.name}?${params.toString()}`;
+        navigate({
+          route: ROUTE.CATALOG_FLEET_EDIT,
+          postfix: path,
+        });
+      }}
+    />
+  );
+};
+
+export default FleetDetailsCatalog;

package/src/components/Fleet/FleetDetails/FleetDetailsPage.tsx

@@ -16,6 +16,7 @@ import FleetDetailsContent from './FleetDetailsContent';
 import FleetRestoreBanner from './FleetRestoreBanner';
 import FleetYaml from './FleetYaml';
 import TabsNav from '../../TabsNav/TabsNav';
+import FleetDetailsCatalog from './FleetDetailsCatalog';
 
 const fleetDetailsPermissions = [
   { kind: RESOURCE.FLEET, verb: VERB.DELETE },
@@ -52,8 +53,9 @@ const FleetDetailPage = () => {
       resourceTypeLabel={t('Fleets')}
       banner={<FleetRestoreBanner fleet={fleet} refetch={refetch} />}
       nav={
-        <TabsNav aria-label="Fleet details tabs" tabKeys={['details', 'yaml']}>
+        <TabsNav aria-label="Fleet details tabs" tabKeys={['details', 'catalog', 'yaml']}>
           <Tab eventKey="details" title={t('Details')} />
+          <Tab eventKey="catalog" title={t('Catalog')} />
           <Tab eventKey="yaml" title={t('YAML')} />
         </TabsNav>
       }
@@ -102,6 +104,7 @@ const FleetDetailPage = () => {
           <Routes>
             <Route index element={<Navigate to="details" replace />} />
             <Route path="details" element={<FleetDetailsContent fleet={fleet} />} />
+            <Route path="catalog" element={<FleetDetailsCatalog fleet={fleet} refetch={refetch} />} />
             <Route path="yaml" element={<FleetYaml fleet={fleet} refetch={refetch} canEdit={canEdit} />} />
           </Routes>
           {isDeleteModalOpen && (

package/src/components/Fleet/FleetDetails/FleetOwnerLink.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { CodeBranchIcon } from '@patternfly/react-icons/dist/js/icons/code-branch-icon';
+
+import { ResourceKind } from '@flightctl/types';
 import { Link, ROUTE } from '../../../hooks/useNavigate';
-import WithTooltip from '../../common/WithTooltip';
 import { useTranslation } from '../../../hooks/useTranslation';
-
-const rsOwnerRegex = /^ResourceSync\/(?<rsName>.*)$/;
-
-export const getOwnerName = (owner: string | undefined) => rsOwnerRegex.exec(owner || '')?.groups?.rsName;
+import WithTooltip from '../../common/WithTooltip';
+import { getOwnerName } from '../../../utils/resource';
 
 export const RSLink = ({ rsName }: { rsName: string }) => (
   <div>
@@ -15,7 +14,7 @@ export const RSLink = ({ rsName }: { rsName: string }) => (
 );
 
 const FleetOwnerLink = ({ owner }: { owner: string | undefined }) => {
-  const ownerRsName = getOwnerName(owner);
+  const ownerRsName = getOwnerName(ResourceKind.RESOURCE_SYNC, owner);
   if (!ownerRsName) {
     return '-';
   }

package/src/components/Fleet/FleetRow.tsx

@@ -1,24 +1,28 @@
 import * as React from 'react';
 import { ActionsColumn, IAction, OnSelect, Td, Tr } from '@patternfly/react-table';
 
-import { Fleet } from '@flightctl/types';
+import { Fleet, ResourceKind } from '@flightctl/types';
 import { useTranslation } from '../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../hooks/useNavigate';
 import { getFleetRolloutStatusWarning } from '../../utils/status/fleet';
+import { getOwnerName } from '../../utils/resource';
 
-import { FleetOwnerLinkIcon, getOwnerName } from './FleetDetails/FleetOwnerLink';
-import FleetStatus from './FleetStatus';
 import ResourceLink from '../common/ResourceLink';
 import FleetDevicesCount from './FleetDetails/FleetDevicesCount';
+import { FleetOwnerLinkIcon } from './FleetDetails/FleetOwnerLink';
+import FleetStatus from './FleetStatus';
 
 type FleetRowProps = {
   fleet: Fleet;
   rowIndex: number;
   onRowSelect: (fleet: Fleet) => OnSelect;
   isRowSelected: (fleet: Fleet) => boolean;
-  onDeleteClick: VoidFunction;
-  canDelete: boolean;
-  canEdit: boolean;
+  onDeleteClick?: VoidFunction;
+  canDelete?: boolean;
+  canEdit?: boolean;
+  singleSelect?: boolean;
+  hideActions?: boolean;
+  isSelectDisabled?: boolean;
 };
 
 const useFleetActions = (fleetName: string, isManaged: boolean, canEdit: boolean) => {
@@ -45,8 +49,11 @@ const FleetRow: React.FC<FleetRowProps> = ({
   onRowSelect,
   isRowSelected,
   onDeleteClick,
-  canDelete,
-  canEdit,
+  canDelete = false,
+  canEdit = false,
+  singleSelect,
+  hideActions,
+  isSelectDisabled,
 }) => {
   const { t } = useTranslation();
   const fleetName = fleet.metadata.name || '';
@@ -77,10 +84,12 @@ const FleetRow: React.FC<FleetRowProps> = ({
           rowIndex,
           onSelect: onRowSelect(fleet),
           isSelected: isRowSelected(fleet),
+          variant: singleSelect ? 'radio' : 'checkbox',
+          isDisabled: isSelectDisabled,
         }}
       />
       <Td dataLabel={t('Name')}>
-        <FleetOwnerLinkIcon ownerName={getOwnerName(fleet.metadata.owner)}>
+        <FleetOwnerLinkIcon ownerName={getOwnerName(ResourceKind.RESOURCE_SYNC, fleet.metadata.owner)}>
           <ResourceLink id={fleetName} routeLink={ROUTE.FLEET_DETAILS} />
         </FleetOwnerLinkIcon>
       </Td>
@@ -95,9 +104,11 @@ const FleetRow: React.FC<FleetRowProps> = ({
       <Td dataLabel={t('Status')}>
         <FleetStatus fleet={fleet} />
       </Td>
-      <Td isActionCell>
-        <ActionsColumn items={actions} />
-      </Td>
+      {!hideActions && (
+        <Td isActionCell>
+          <ActionsColumn items={actions} />
+        </Td>
+      )}
     </Tr>
   );
 };

package/src/components/Fleet/FleetsPage.tsx

@@ -30,12 +30,12 @@ import ResourceListEmptyState from '../common/ResourceListEmptyState';
 import { useTranslation } from '../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../hooks/useNavigate';
 import DeleteFleetModal from './DeleteFleetModal/DeleteFleetModal';
-import FleetResourceSyncs from './FleetResourceSyncs';
 import { useFleetBackendFilters, useFleets } from './useFleets';
 import { usePermissionsContext } from '../common/PermissionsContext';
 import { RESOURCE, VERB } from '../../types/rbac';
 import PageWithPermissions from '../common/PageWithPermissions';
 import { GlobalSystemRestoreBanners } from '../SystemRestore/SystemRestoreBanners';
+import ResourceSyncImportStatus from '../ResourceSync/ResourceSyncImportStatus';
 
 const fleetPageActionsPermissions = [
   { kind: RESOURCE.FLEET, verb: VERB.CREATE },
@@ -90,7 +90,7 @@ const FleetEmptyState = () => {
   );
 };
 
-const getColumns = (t: TFunction): ApiSortTableColumn[] => [
+export const getFleetTableColumns = (t: TFunction): ApiSortTableColumn[] => [
   {
     name: t('Name'),
   },
@@ -114,7 +114,7 @@ const fleetTablePermissions = [
 const FleetTable = () => {
   const { t } = useTranslation();
 
-  const fleetColumns = React.useMemo(() => getColumns(t), [t]);
+  const fleetColumns = React.useMemo(() => getFleetTableColumns(t), [t]);
   const { name, setName, hasFiltersEnabled } = useFleetBackendFilters();
 
   const { fleets, isLoading, error, isUpdating, refetch, pagination } = useFleets({ name, addDevicesSummary: true });
@@ -210,7 +210,7 @@ const FleetsPage = () => {
 
   return (
     <>
-      <FleetResourceSyncs />
+      <ResourceSyncImportStatus type="fleet" />
 
       <ListPage title={t('Fleets')}>
         <FleetTable />

package/src/components/Fleet/ImportFleetWizard/ImportFleetWizard.tsx

@@ -1,213 +1,26 @@
-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 { ResourceSyncType } from '@flightctl/types';
 
-import RepositoryStep, { isRepoStepValid, repositoryStepId } from './steps/RepositoryStep';
-import ReviewStep, { reviewStepId } from './steps/ReviewStep';
-import ResourceSyncStep, { isResourceSyncStepValid, resourceSyncStepId } from './steps/ResourceSyncStep';
-import { ImportFleetFormValues } from './types';
-import { useFetch } from '../../../hooks/useFetch';
-import { RepoSpecType, Repository, RepositoryList, ResourceSync } from '@flightctl/types';
-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, ROUTE, 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: ImportFleetFormValues) =>
-    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<ImportFleetFormValues>,
-  values: ImportFleetFormValues,
-) => {
-  if (activeStepId === repositoryStepId) {
-    return isRepoStepValid(values, errors);
-  } else if (activeStepId === resourceSyncStepId) {
-    return isResourceSyncStepValid(errors);
-  }
-  return true;
-};
+import { ROUTE } from '../../../hooks/useNavigate';
+import ImportResourceWizard from '../../ImportResourceWizard/ImportResourceWizard';
 
 const ImportFleetWizard = () => {
   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);
-
-  let body: React.ReactNode;
-
-  if (isLoading) {
-    body = (
-      <Bullseye>
-        <Spinner />
-      </Bullseye>
-    );
-  } else if (error) {
-    body = (
-      <Alert isInline variant="danger" title={t('An error occurred')}>
-        {getErrorMessage(error)}
-      </Alert>
-    );
-  } else {
-    const repoInitValues = getInitValues({
-      options: {
-        allowedRepoTypes: [RepoSpecType.RepoSpecTypeGit],
-        showRepoTypes: false,
-      },
-    });
-    body = (
-      <Formik<ImportFleetFormValues>
-        initialValues={{
-          useExistingRepo: true,
-          existingRepo: '',
-          ...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 errors = await handlePromises(resourceSyncPromises);
-          if (errors.length) {
-            setErrors(errors);
-            return;
-          }
-          navigate(ROUTE.FLEETS);
-        }}
-      >
-        {({ values, errors: formikErrors }) => (
-          <>
-            <LeaveFormConfirmation />
-            <Wizard
-              footer={
-                <FlightCtlWizardFooter<ImportFleetFormValues>
-                  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 />}
-              </WizardStep>
-              <WizardStep
-                name={t('Review')}
-                id={reviewStepId}
-                isDisabled={!isRepoStepValid(values, formikErrors) || !isResourceSyncStepValid(formikErrors)}
-              >
-                {currentStep?.id === reviewStepId && <ReviewStep errors={errors} />}
-              </WizardStep>
-            </Wizard>
-          </>
-        )}
-      </Formik>
-    );
-  }
-
-  return (
-    <>
-      <PageSection hasBodyWrapper={false} type="breadcrumb">
-        <Breadcrumb>
-          <BreadcrumbItem>
-            <Link to={ROUTE.FLEETS}>{t('Fleets')}</Link>
-          </BreadcrumbItem>
-          <BreadcrumbItem isActive>{t('Import fleets')}</BreadcrumbItem>
-        </Breadcrumb>
-      </PageSection>
-      <PageSection hasBodyWrapper={false}>
-        <Title headingLevel="h1" size="3xl">
-          {t('Import fleets')}
-        </Title>
-      </PageSection>
-      <PageSection hasBodyWrapper={false} type="wizard">
-        <ErrorBoundary>{body}</ErrorBoundary>
-      </PageSection>
-    </>
-  );
-};
-
-const importFleetWizardPermissions = [
-  { kind: RESOURCE.RESOURCE_SYNC, verb: VERB.CREATE },
-  { kind: RESOURCE.REPOSITORY, verb: VERB.LIST },
-];
-
-const ImportFleetWizardWithPermissions = () => {
-  const { checkPermissions, loading: isLoading } = usePermissionsContext();
-  const [canCreateRs, canReadRepo] = checkPermissions(importFleetWizardPermissions);
-  const allowed = canCreateRs && canReadRepo;
   return (
-    <PageWithPermissions allowed={allowed} loading={isLoading}>
-      <ImportFleetWizard />
-    </PageWithPermissions>
+    <ImportResourceWizard
+      resourceSyncType={ResourceSyncType.ResourceSyncTypeFleet}
+      successRoute={ROUTE.FLEETS}
+      breadcrumb={{ label: t('Fleets'), route: ROUTE.FLEETS }}
+      title={t('Import fleets')}
+      resourceSyncDescription={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.',
+      )}
+      reviewInfoText={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.',
+      )}
+    />
   );
 };
 
-export default ImportFleetWizardWithPermissions;
+export default ImportFleetWizard;

package/src/components/Fleet/useFleets.ts

@@ -15,6 +15,7 @@ type FleetsEndpointArgs = {
   name?: string;
   nextContinue?: string;
   addDevicesSummary?: boolean;
+  limit?: number;
 };
 
 export const useFleetBackendFilters = () => {

package/src/components/ImageBuilds/CreateImageBuildWizard/utils.ts

@@ -175,9 +175,7 @@ export const getValidationSchema = (t: TFunction) => {
 
 // Returns an array with one item per format (VMDK, QCOW2, ISO), where each item is either
 // undefined or the latest ImageExport for that format.
-const getImageExportsByFormat = (
-  imageExports?: ImageExport[],
-): { imageExports: (ImageExport | undefined)[]; exportsCount: number } => {
+const getImageExportsByFormat = (imageExports?: ImageExport[]): { imageExports: (ImageExport | undefined)[] } => {
   const formatMap: Partial<Record<ExportFormatType, ImageExport>> = {};
 
   imageExports?.forEach((ie) => {
@@ -208,7 +206,6 @@ const getImageExportsByFormat = (
       formatMap[ExportFormatType.ExportFormatTypeQCOW2],
       formatMap[ExportFormatType.ExportFormatTypeVMDK],
     ],
-    exportsCount: imageExports?.length || 0,
   };
 };
 
@@ -223,7 +220,6 @@ export const toImageBuildWithExports = (imageBuild: ImageBuild): ImageBuildWithE
   return {
     ...imageBuildWithoutExports,
     imageExports: latestExports,
-    exportsCount: allExports.length,
   };
 };
 

package/src/components/ImageBuilds/ImageBuildDetails/ImageBuildDetailsTab.tsx

@@ -37,8 +37,8 @@ const ImageBuildDetailsTab = ({ imageBuild }: { imageBuild: ImageBuildWithExport
   const { ociRegistries } = useOciRegistriesContext();
   const isEarlyBinding = imageBuild.spec.binding.type === BindingType.BindingTypeEarly;
 
-  const hasExports = imageBuild.exportsCount > 0;
   const existingImageExports = imageBuild.imageExports.filter((imageExport) => imageExport !== undefined);
+  const hasExports = existingImageExports.length > 0;
 
   const srcImageReference = React.useMemo(() => {
     return getImageReference(ociRegistries, imageBuild.spec.source) || '';

package/src/components/ImageBuilds/ImageBuildDetails/ImageBuildYaml.tsx

@@ -9,7 +9,7 @@ import { ImageBuildWithExports } from '../../../types/extraTypes';
 // For that reason, we must remove the fields we add to "ImageBuildWithExports"
 const ImageBuildYaml = ({ imageBuild, refetch }: { imageBuild: ImageBuildWithExports; refetch: VoidFunction }) => {
   const { t } = useTranslation();
-  const rawImageBuild = { ...imageBuild, imageExports: undefined, exportsCount: undefined } as ImageBuild;
+  const rawImageBuild = { ...imageBuild, imageExports: undefined } as ImageBuild;
   return (
     <YamlEditor
       apiObj={rawImageBuild}

package/src/components/ImageBuilds/ImageBuildRow.tsx

@@ -103,7 +103,6 @@ const ImageBuildRow = ({
         <Td dataLabel={t('Status')}>
           <ImageBuildStatusDisplay buildStatus={imageBuild.status} />
         </Td>
-        <Td dataLabel={t('Export images')}>{`${imageBuild.exportsCount || 0}`}</Td>
         <Td dataLabel={t('Date')}>{getDateDisplay(imageBuild.metadata.creationTimestamp)}</Td>
         <Td isActionCell>
           <ActionsColumn items={actions} />

package/src/components/ImageBuilds/ImageBuildsPage.tsx

@@ -46,9 +46,6 @@ const getColumns = (t: TFunction): ApiSortTableColumn[] => [
   {
     name: t('Status'),
   },
-  {
-    name: t('Export images'),
-  },
   {
     name: t('Date'),
   },