@flightctl/ui-components 1.0.2 → 1.1.0-rc2

package/src/constants.ts

@@ -1,6 +1,20 @@
-const APP_TITLE = 'Edge Manager';
-const API_VERSION = 'v1beta1';
-const PAGE_SIZE = 15;
-const EVENT_PAGE_SIZE = 200; // It's 500 in OCP console
+export const APP_TITLE = 'Edge Manager';
+export const CORE_API_VERSION = 'v1beta1';
+export const IMAGEBUILDER_API_VERSION = 'v1alpha1';
 
-export { APP_TITLE, API_VERSION, PAGE_SIZE, EVENT_PAGE_SIZE };
+export const PAGE_SIZE = 15;
+export const EVENT_PAGE_SIZE = 200; // It's 500 in OCP console
+
+export const CERTIFICATE_VALIDITY_IN_YEARS = 1;
+
+export const getApiVersion = (api: 'flightctl' | 'imagebuilder' | 'alerts'): string | undefined => {
+  switch (api) {
+    case 'flightctl':
+      return CORE_API_VERSION;
+    case 'imagebuilder':
+      return IMAGEBUILDER_API_VERSION;
+    case 'alerts':
+    default:
+      return undefined;
+  }
+};

package/src/hooks/useAppContext.tsx

@@ -37,6 +37,10 @@ export const appRoutes = {
   [ROUTE.AUTH_PROVIDER_CREATE]: '/admin/authproviders/create',
   [ROUTE.AUTH_PROVIDER_EDIT]: '/admin/authproviders/edit',
   [ROUTE.AUTH_PROVIDER_DETAILS]: '/admin/authproviders',
+  [ROUTE.IMAGE_BUILDS]: '/devicemanagement/imagebuilds',
+  [ROUTE.IMAGE_BUILD_CREATE]: '/devicemanagement/imagebuilds/create',
+  [ROUTE.IMAGE_BUILD_DETAILS]: '/devicemanagement/imagebuilds',
+  [ROUTE.IMAGE_BUILD_EDIT]: '/devicemanagement/imagebuilds/edit',
 };
 
 export type NavLinkFC = React.FC<{ to: string; children: (props: { isActive: boolean }) => React.ReactNode }>;

package/src/hooks/useNavigate.tsx

@@ -29,6 +29,10 @@ export enum ROUTE {
   AUTH_PROVIDER_CREATE = 'AUTH_PROVIDER_CREATE',
   AUTH_PROVIDER_EDIT = 'AUTH_PROVIDER_EDIT',
   AUTH_PROVIDER_DETAILS = 'AUTH_PROVIDER_DETAILS',
+  IMAGE_BUILDS = 'IMAGE_BUILDS',
+  IMAGE_BUILD_CREATE = 'IMAGE_BUILD_CREATE',
+  IMAGE_BUILD_DETAILS = 'IMAGE_BUILD_DETAILS',
+  IMAGE_BUILD_EDIT = 'IMAGE_BUILD_EDIT',
 }
 
 export type RouteWithPostfix =
@@ -41,7 +45,9 @@ export type RouteWithPostfix =
   | ROUTE.DEVICE_EDIT
   | ROUTE.ENROLLMENT_REQUEST_DETAILS
   | ROUTE.AUTH_PROVIDER_EDIT
-  | ROUTE.AUTH_PROVIDER_DETAILS;
+  | ROUTE.AUTH_PROVIDER_DETAILS
+  | ROUTE.IMAGE_BUILD_DETAILS
+  | ROUTE.IMAGE_BUILD_EDIT;
 export type Route = Exclude<ROUTE, RouteWithPostfix>;
 
 type ToObj = { route: RouteWithPostfix; postfix: string | undefined };

package/src/hooks/useThemePreferences.ts

@@ -4,7 +4,7 @@ import { useUserPreferences } from './useUserPreferences';
 export const THEME_LOCAL_STORAGE_KEY = 'flightctl/theme';
 export const OCP_CONSOLE_THEME_LOCAL_STORAGE_KEY = 'bridge/theme';
 
-const THEME_DARK_CLASS = 'pf-v5-theme-dark';
+const THEME_DARK_CLASS = 'pf-v6-theme-dark';
 
 export type Theme = 'dark' | 'light' | 'system';
 export type ResolvedTheme = Exclude<Theme, 'system'>;

package/src/types/deviceSpec.ts

@@ -1,18 +1,26 @@
 import {
-  AppType,
-  ApplicationResourceLimits,
+  ApplicationProviderSpec,
+  ComposeApplication,
   ConfigProviderSpec,
+  ContainerApplication,
   DisruptionBudget,
   GitConfigProviderSpec,
+  HelmApplication,
   HttpConfigProviderSpec,
   ImageApplicationProviderSpec,
   ImagePullPolicy,
+  InlineApplicationProviderSpec,
   InlineConfigProviderSpec,
   KubernetesSecretProviderSpec,
+  QuadletApplication,
 } from '@flightctl/types';
-import { ApplicationProviderSpecFixed, FlightCtlLabel } from './extraTypes';
+import { FlightCtlLabel } from './extraTypes';
 import { UpdateScheduleMode } from '../utils/time';
 
+// At the moment the "root" user is the default user when no user is specified.
+export const RUN_AS_ROOT_USER = 'root';
+export const RUN_AS_FLIGHTCTL_USER = 'flightctl';
+
 export enum ConfigType {
   GIT = 'git',
   HTTP = 'http',
@@ -32,65 +40,12 @@ export type GitConfigTemplate = ConfigTemplate & {
   path: string;
 };
 
+/** Used when adding a Compose/Quadlet app to choose image vs inline source. */
 export enum AppSpecType {
   OCI_IMAGE = 'image',
   INLINE = 'inline',
 }
 
-type InlineContent = {
-  content?: string;
-  path: string;
-  base64?: boolean;
-};
-
-type AppBase = {
-  appType: AppType;
-  specType: AppSpecType;
-  name?: string;
-  variables: { name: string; value: string }[];
-  volumes?: ApplicationVolumeForm[];
-};
-
-export type PortMapping = {
-  hostPort: string;
-  containerPort: string;
-};
-
-export type SingleContainerAppForm = AppBase & {
-  appType: AppType.AppTypeContainer;
-  specType: AppSpecType.OCI_IMAGE;
-  name: string;
-  image: string;
-  ports?: PortMapping[];
-  limits?: ApplicationResourceLimits;
-};
-
-export type QuadletImageAppForm = AppBase & {
-  appType: AppType.AppTypeQuadlet;
-  specType: AppSpecType.OCI_IMAGE;
-  image: string;
-};
-
-export type QuadletInlineAppForm = AppBase & {
-  appType: AppType.AppTypeQuadlet;
-  specType: AppSpecType.INLINE;
-  name: string; // transforms the field in required
-  files: InlineContent[];
-};
-
-export type ComposeImageAppForm = AppBase & {
-  appType: AppType.AppTypeCompose;
-  specType: AppSpecType.OCI_IMAGE;
-  image: string;
-};
-
-export type ComposeInlineAppForm = AppBase & {
-  appType: AppType.AppTypeCompose;
-  specType: AppSpecType.INLINE;
-  name: string;
-  files: InlineContent[];
-};
-
 export const isGitConfigTemplate = (configTemplate: ConfigTemplate): configTemplate is GitConfigTemplate =>
   configTemplate.type === ConfigType.GIT;
 
@@ -108,47 +63,70 @@ export type RepoConfig = GitConfigProviderSpec | HttpConfigProviderSpec;
 export const isRepoConfig = (config: ConfigSourceProvider): config is RepoConfig =>
   isGitProviderSpec(config) || isHttpProviderSpec(config);
 
-export type AppForm =
-  | QuadletImageAppForm
-  | QuadletInlineAppForm
-  | ComposeImageAppForm
-  | ComposeInlineAppForm
-  | SingleContainerAppForm;
-
-export const isImageAppProvider = (
-  app: ApplicationProviderSpecFixed,
-): app is ApplicationProviderSpecFixed & ImageApplicationProviderSpec => 'image' in app;
-
-// Type guards for the 5 explicit types
-export const isQuadletImageAppForm = (app: AppBase): app is QuadletImageAppForm =>
-  app.appType === AppType.AppTypeQuadlet && app.specType === AppSpecType.OCI_IMAGE;
-export const isQuadletInlineAppForm = (app: AppBase): app is QuadletInlineAppForm =>
-  app.appType === AppType.AppTypeQuadlet && app.specType === AppSpecType.INLINE;
-export const isComposeImageAppForm = (app: AppBase): app is ComposeImageAppForm =>
-  app.appType === AppType.AppTypeCompose && app.specType === AppSpecType.OCI_IMAGE;
-export const isComposeInlineAppForm = (app: AppBase): app is ComposeInlineAppForm =>
-  app.appType === AppType.AppTypeCompose && app.specType === AppSpecType.INLINE;
-export const isSingleContainerAppForm = (app: AppBase): app is SingleContainerAppForm =>
-  app.appType === AppType.AppTypeContainer;
+export const isImageVariantApp = (
+  app: ApplicationProviderSpec,
+): app is ApplicationProviderSpec & ImageApplicationProviderSpec => 'image' in app;
+export const isInlineVariantApp = (
+  app: ApplicationProviderSpec,
+): app is ApplicationProviderSpec & InlineApplicationProviderSpec => 'inline' in app;
 
 export type ApplicationVolumeForm = {
   name: string;
-  imageRef?: string;
-  imagePullPolicy?: ImagePullPolicy;
-  mountPath?: string;
+  imageRef: string;
+  imagePullPolicy: ImagePullPolicy;
+  mountPath: string;
+};
+
+export type PortMapping = {
+  hostPort: string;
+  containerPort: string;
+};
+
+export type VariablesForm = { name: string; value: string }[];
+
+export type InlineFileForm = { path: string; content?: string; base64?: boolean };
+
+type InlineOrImageVariantForm = {
+  specType: AppSpecType;
+  image: string;
+  files: InlineFileForm[];
 };
 
+export type SingleContainerAppForm = Omit<ContainerApplication, 'ports' | 'resources' | 'envVars' | 'volumes'> & {
+  specType: AppSpecType.OCI_IMAGE;
+  ports: PortMapping[];
+  cpuLimit: string;
+  memoryLimit: string;
+  variables: VariablesForm;
+  volumes: ApplicationVolumeForm[];
+};
+
+export type HelmAppForm = Omit<HelmApplication, 'values'> & {
+  specType: AppSpecType.OCI_IMAGE;
+  valuesYaml?: string;
+  valuesFiles: string[];
+};
+
+export type QuadletAppForm = Omit<QuadletApplication, 'envVars' | 'volumes' | 'image' | 'inline'> &
+  InlineOrImageVariantForm & {
+    variables: VariablesForm;
+    volumes: ApplicationVolumeForm[];
+  };
+
+export type ComposeAppForm = Omit<ComposeApplication, 'envVars' | 'volumes' | 'image' | 'inline'> &
+  InlineOrImageVariantForm & {
+    variables: VariablesForm;
+    volumes: ApplicationVolumeForm[];
+  };
+
+export type AppForm = SingleContainerAppForm | HelmAppForm | QuadletAppForm | ComposeAppForm;
+
 const hasTemplateVariables = (str: string) => /{{.+?}}/.test(str);
 
-export const getAppIdentifier = (app: AppForm) => {
-  if (isSingleContainerAppForm(app)) {
-    return app.name || app.image;
-  }
-  if (isQuadletImageAppForm(app) || isComposeImageAppForm(app)) {
-    return app.name || app.image;
-  }
-  // Name is mandatory for inline applications
-  return app.name;
+export const getAppIdentifier = (app: AppForm | ApplicationProviderSpec): string => {
+  if (app.name) return app.name;
+  if ('image' in app && app.image) return app.image;
+  return '';
 };
 
 const removeSlashes = (url: string | undefined) => (url || '').replace(/^\/+|\/+$/g, '');
@@ -196,7 +174,7 @@ export const isKubeProviderSpec = (providerSpec: ConfigProviderSpec): providerSp
 
 export type InlineConfigTemplate = ConfigTemplate & {
   type: ConfigType.INLINE;
-  files: Array<InlineContent & { permissions?: string; user?: string; group?: string }>;
+  files: Array<InlineFileForm & { permissions?: string; user?: string; group?: string }>;
 };
 
 export const isInlineConfigTemplate = (configTemplate: ConfigTemplate): configTemplate is InlineConfigTemplate =>

package/src/types/extraTypes.ts

@@ -1,19 +1,26 @@
 import {
-  AppType,
-  ApplicationEnvVars,
-  ApplicationVolumeProviderSpec,
   AuthProvider,
+  Condition,
   ConditionType,
   Device,
   EnrollmentRequest,
   FileContent,
   Fleet,
-  ImageApplicationProviderSpec,
   OAuth2ProviderSpec,
   OIDCProviderSpec,
   RelativePath,
+  ResourceKind,
   ResourceSync,
 } from '@flightctl/types';
+import {
+  ImageBuild,
+  ImageBuildCondition,
+  ImageBuildConditionType,
+  ResourceKind as ImageBuilderResourceKind,
+  ImageExport,
+  ImageExportCondition,
+  ImageExportConditionType,
+} from '@flightctl/types/imagebuilder';
 
 export interface FlightCtlLabel {
   key: string;
@@ -33,6 +40,10 @@ export enum DeviceAnnotation {
   RenderedVersion = 'device-controller/renderedVersion',
 }
 
+export type GenericCondition = Condition | ImageBuildCondition | ImageExportCondition;
+export type GenericConditionType = ConditionType | ImageBuildConditionType | ImageExportConditionType;
+export type FlightctlKind = ResourceKind | ImageBuilderResourceKind;
+
 export const isEnrollmentRequest = (resource: Device | EnrollmentRequest): resource is EnrollmentRequest =>
   resource.kind === 'EnrollmentRequest';
 
@@ -40,16 +51,10 @@ export type AnnotationType = DeviceAnnotation; // Add more types when they are a
 
 export const isFleet = (resource: ResourceSync | Fleet): resource is Fleet => resource.kind === 'Fleet';
 
-// ApplicationProviderSpec's definition for inline files adds a Record<string, any>. We use the fixed types to get full Typescript checks for the field
+// ApplicationProviderSpec's definition for inline files adds a Record<string, any>.
+// We use the fixed type to get proper Typescript checks for the field
 export type InlineApplicationFileFixed = FileContent & RelativePath;
 
-// "FixedApplicationProviderSpec" will need to be manually adjusted whenever the API definition changes
-export type ApplicationProviderSpecFixed = ApplicationEnvVars &
-  ApplicationVolumeProviderSpec & {
-    name?: string;
-    appType: AppType;
-  } & (ImageApplicationProviderSpec | { inline: InlineApplicationFileFixed[] });
-
 type CliArtifact = {
   os: string;
   arch: string;
@@ -79,6 +84,12 @@ export type AlertManagerAlert = {
   receivers: Array<{ name: string }>;
 };
 
+// ImageBuild with the latest exports for each format
+export type ImageBuildWithExports = Omit<ImageBuild, 'imageexports'> & {
+  imageExports: (ImageExport | undefined)[];
+  exportsCount: number;
+};
+
 // AuthProviders that can be added dynamically to the system can only be OAuth2 or OIDC.
 export type DynamicAuthProviderSpec = OIDCProviderSpec | OAuth2ProviderSpec;
 export type DynamicAuthProvider = AuthProvider & { spec: DynamicAuthProviderSpec };

package/src/types/rbac.ts

@@ -20,4 +20,11 @@ export enum RESOURCE {
   ENROLLMENT_REQUEST_APPROVAL = 'enrollmentrequests/approval',
   ALERTS = 'alerts',
   AUTH_PROVIDER = 'authproviders',
+  IMAGE_BUILD = 'imagebuilds',
+  IMAGE_BUILD_LOG = 'imagebuilds/log',
+  IMAGE_BUILD_CANCEL = 'imagebuilds/cancel',
+  IMAGE_EXPORT = 'imageexports',
+  IMAGE_EXPORT_LOG = 'imageexports/log',
+  IMAGE_EXPORT_CANCEL = 'imageexports/cancel',
+  IMAGE_EXPORT_DOWNLOAD = 'imageexports/download',
 }

package/src/utils/api.ts

@@ -1,7 +1,5 @@
 import {
-  Condition,
   ConditionStatus,
-  ConditionType,
   DeviceList,
   EnrollmentRequestList,
   FleetList,
@@ -9,10 +7,17 @@ import {
   RepositoryList,
   ResourceSyncList,
 } from '@flightctl/types';
+import { ImageBuildList } from '@flightctl/types/imagebuilder';
 
-import { AnnotationType } from '../types/extraTypes';
+import { AnnotationType, GenericCondition, GenericConditionType } from '../types/extraTypes';
 
-export type ApiList = EnrollmentRequestList | DeviceList | FleetList | RepositoryList | ResourceSyncList;
+export type ApiList =
+  | EnrollmentRequestList
+  | DeviceList
+  | FleetList
+  | RepositoryList
+  | ResourceSyncList
+  | ImageBuildList;
 
 const getApiListCount = (listResponse: ApiList | undefined): number | undefined => {
   if (listResponse === undefined) {
@@ -31,10 +36,10 @@ const getMetadataAnnotation = (metadata: ObjectMeta | undefined, annotation: Ann
 };
 
 const getCondition = (
-  conditions: Condition[] | undefined,
-  type: ConditionType,
+  conditions: GenericCondition[] | undefined,
+  type: GenericConditionType,
   status: ConditionStatus = ConditionStatus.ConditionStatusTrue,
-) => {
+): GenericCondition | undefined => {
   const typeCond = conditions?.filter((c) => c.type === type);
   if (typeCond) {
     return typeCond.find((tc) => tc.status === status);

package/src/utils/apps.ts

@@ -0,0 +1,20 @@
+import { TFunction } from 'react-i18next';
+
+import { AppType } from '@flightctl/types';
+
+export const appTypeOptions = (t: TFunction) => ({
+  [AppType.AppTypeContainer]: t('Single Container application'),
+  [AppType.AppTypeQuadlet]: t('Quadlet application'),
+  [AppType.AppTypeHelm]: t('Helm application'),
+  [AppType.AppTypeCompose]: t('Compose application'),
+});
+
+export const getAppTypeLabel = (appType: AppType, t: TFunction): string => {
+  const labels: Record<AppType, string> = {
+    [AppType.AppTypeContainer]: t('Single Container'),
+    [AppType.AppTypeQuadlet]: t('Quadlet'),
+    [AppType.AppTypeCompose]: t('Compose'),
+    [AppType.AppTypeHelm]: t('Helm'),
+  };
+  return labels[appType] || t('Unknown');
+};

package/src/utils/imageBuilds.ts

@@ -0,0 +1,183 @@
+import { TFunction } from 'react-i18next';
+import {
+  ExportFormatType,
+  ImageBuild,
+  ImageBuildConditionReason,
+  ImageBuildConditionType,
+  ImageBuildDestination,
+  ImageBuildSource,
+  ImageExport,
+  ImageExportConditionReason,
+  ImageExportConditionType,
+} from '@flightctl/types/imagebuilder';
+import { Repository } from '@flightctl/types';
+import { isOciRepoSpec } from '../components/Repository/CreateRepository/utils';
+
+export const getAllExportFormats = () => [
+  ExportFormatType.ExportFormatTypeISO,
+  ExportFormatType.ExportFormatTypeQCOW2DiskContainer,
+  ExportFormatType.ExportFormatTypeQCOW2,
+  ExportFormatType.ExportFormatTypeVMDK,
+];
+
+export const getImageBuildImage = (srcOrDst: ImageBuildSource | ImageBuildDestination | undefined) => {
+  if (!srcOrDst) {
+    return '-';
+  }
+  return `${srcOrDst.imageName}:${srcOrDst.imageTag}`;
+};
+
+export const getExportFormatDescription = (t: TFunction, format: ExportFormatType) => {
+  switch (format) {
+    case ExportFormatType.ExportFormatTypeVMDK:
+      return t('For enterprise virtualization platforms.');
+    case ExportFormatType.ExportFormatTypeQCOW2:
+      return t('For virtualized edge workloads.');
+    case ExportFormatType.ExportFormatTypeQCOW2DiskContainer:
+      return t('For OpenShift Virtualization.');
+    case ExportFormatType.ExportFormatTypeISO:
+      return t('For physical edge devices and bare metal.');
+  }
+};
+
+export const getExportFormatLabel = (t: TFunction, format: ExportFormatType) => {
+  switch (format) {
+    case ExportFormatType.ExportFormatTypeQCOW2DiskContainer:
+      return t('QCOW2 (Container)');
+    default:
+      return format.toUpperCase();
+  }
+};
+
+const getOciRepositoryUrl = (repositories: Repository[], repositoryName: string): string | undefined => {
+  const repo = repositories.find((r) => r.metadata.name === repositoryName);
+  if (!repo || !isOciRepoSpec(repo.spec)) {
+    return undefined;
+  }
+  return repo.spec.registry;
+};
+
+export const getImageReference = (
+  repositories: Repository[],
+  imageTarget: ImageBuildSource | ImageBuildDestination,
+) => {
+  const registryUrl = getOciRepositoryUrl(repositories, imageTarget.repository);
+  if (!registryUrl) {
+    return undefined;
+  }
+  if (!(imageTarget.imageTag && imageTarget.imageName)) {
+    return undefined;
+  }
+  return `${registryUrl}/${imageTarget.imageName}:${imageTarget.imageTag}`;
+};
+
+export const getImageBuildStatusReason = (imageBuild: ImageBuild): ImageBuildConditionReason => {
+  const readyCondition = imageBuild.status?.conditions?.find(
+    (c) => c.type === ImageBuildConditionType.ImageBuildConditionTypeReady,
+  );
+  return (
+    (readyCondition?.reason as ImageBuildConditionReason) || ImageBuildConditionReason.ImageBuildConditionReasonPending
+  );
+};
+
+export const getImageExportStatusReason = (imageExport: ImageExport): ImageExportConditionReason => {
+  const readyCondition = imageExport.status?.conditions?.find(
+    (c) => c.type === ImageExportConditionType.ImageExportConditionTypeReady,
+  );
+  return (
+    (readyCondition?.reason as ImageExportConditionReason) ||
+    ImageExportConditionReason.ImageExportConditionReasonPending
+  );
+};
+
+export const isImageBuildActiveReason = (reason: ImageBuildConditionReason): boolean => {
+  return (
+    reason === ImageBuildConditionReason.ImageBuildConditionReasonPending ||
+    reason === ImageBuildConditionReason.ImageBuildConditionReasonBuilding ||
+    reason === ImageBuildConditionReason.ImageBuildConditionReasonPushing ||
+    reason === ImageBuildConditionReason.ImageBuildConditionReasonCanceling
+  );
+};
+
+export const isImageBuildCancelable = (reason: ImageBuildConditionReason): boolean => {
+  return (
+    reason === ImageBuildConditionReason.ImageBuildConditionReasonPending ||
+    reason === ImageBuildConditionReason.ImageBuildConditionReasonBuilding ||
+    reason === ImageBuildConditionReason.ImageBuildConditionReasonPushing
+  );
+};
+
+export const isImageExportActiveReason = (reason: ImageExportConditionReason): boolean => {
+  return (
+    reason === ImageExportConditionReason.ImageExportConditionReasonPending ||
+    reason === ImageExportConditionReason.ImageExportConditionReasonConverting ||
+    reason === ImageExportConditionReason.ImageExportConditionReasonPushing ||
+    reason === ImageExportConditionReason.ImageExportConditionReasonCanceling
+  );
+};
+
+const isDownloadResultRedirect = (response: Response): boolean => {
+  return (
+    response.status === 302 ||
+    response.status === 301 ||
+    response.status === 307 ||
+    response.status === 308 ||
+    response.type === 'opaqueredirect' ||
+    response.status === 0
+  );
+};
+
+// Validate that a URL is safe to use for download (only http/https protocols)
+const isValidDownloadUrl = (url: string): boolean => {
+  try {
+    const parsedUrl = new URL(url, window.location.origin);
+    return parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:';
+  } catch {
+    return false;
+  }
+};
+
+const getRedirectUrl = (response: Response): string | undefined => {
+  // If the Location header is present, it indicates a redirect.
+  const redirectUrl = response.headers.get('Location');
+  if (redirectUrl) {
+    return redirectUrl;
+  }
+  if (isDownloadResultRedirect(response) && response.url) {
+    return response.url;
+  }
+  return undefined;
+};
+
+export type ExportDownloadResult =
+  | { type: 'redirect'; url: string }
+  | { type: 'blob'; blob: Blob; filename: string | undefined };
+
+// The download endpoint returns two types of responses: a redirect URL or a blob.
+// If a redirect URL is found, we should use it to trigger the download in the browser.
+// If no redirect URL is found, we should download the blob directly.
+export const getExportDownloadResult = async (response: Response): Promise<ExportDownloadResult | null> => {
+  if (!response.ok && response.status !== 0) {
+    return null;
+  }
+  const redirectUrl = getRedirectUrl(response);
+  if (redirectUrl) {
+    if (!isValidDownloadUrl(redirectUrl)) {
+      throw new Error('Invalid redirect URL received from server');
+    }
+    return { type: 'redirect', url: redirectUrl };
+  }
+
+  const blob = await response.blob();
+
+  let filename = '';
+  const disposition = response.headers.get('Content-Disposition');
+  if (disposition) {
+    const filenameMatch = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+    if (filenameMatch && filenameMatch[1]) {
+      filename = filenameMatch[1].replace(/['"]/g, '');
+    }
+  }
+
+  return { type: 'blob', blob, filename };
+};

package/src/utils/search.ts

@@ -1,5 +1,5 @@
 import fuzzy from 'fuzzysearch';
-import { API_VERSION } from '../constants';
+import { CORE_API_VERSION } from '../constants';
 
 // Must be an even number for "getSearchResultsCount" to work
 export const MAX_TOTAL_SEARCH_RESULTS = 10;
@@ -26,7 +26,7 @@ export const getSearchResultsCount = (labelCount: number, fleetCount: number) =>
 };
 
 export const getEmptyFleetSearch = () => ({
-  apiVersion: API_VERSION,
+  apiVersion: CORE_API_VERSION,
   kind: 'Fleet',
   metadata: {},
   items: [],

package/src/utils/status/common.ts

@@ -6,12 +6,12 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/e
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
 
-import warningColor from '@patternfly/react-tokens/dist/js/global_warning_color_100';
-import dangerColor from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import successColor from '@patternfly/react-tokens/dist/js/global_success_color_100';
-import disabledColor from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
-import activeColor from '@patternfly/react-tokens/dist/js/global_active_color_100';
-import defaultColor from '@patternfly/react-tokens/dist/js/global_palette_black_1000';
+import warningColor from '@patternfly/react-tokens/dist/js/t_global_color_status_warning_200';
+import dangerColor from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
+import successColor from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_success_default';
+import disabledColor from '@patternfly/react-tokens/dist/js/t_global_color_disabled_200';
+import activeColor from '@patternfly/react-tokens/dist/js/t_global_color_status_info_200';
+import defaultColor from '@patternfly/react-tokens/dist/js/t_chart_color_black_200';
 
 export type StatusLevel = 'custom' | 'info' | 'success' | 'warning' | 'danger' | 'unknown';
 

package/src/utils/status/devices.ts

@@ -3,8 +3,8 @@ import { PowerOffIcon } from '@patternfly/react-icons/dist/js/icons/power-off-ic
 import { PauseCircleIcon } from '@patternfly/react-icons/dist/js/icons/pause-circle-icon';
 import { BanIcon } from '@patternfly/react-icons/dist/js/icons/ban-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import suspendedColor from '@patternfly/react-tokens/dist/js/global_palette_orange_300';
-import pendingSyncColor from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
+import suspendedColor from '@patternfly/react-tokens/dist/js/t_color_orange_40';
+import pendingSyncColor from '@patternfly/react-tokens/dist/js/t_global_color_status_info_200';
 
 import {
   ApplicationsSummaryStatusType,