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

package/src/types/deviceSpec.ts

@@ -1,20 +1,25 @@
 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';
 
-export const RUN_AS_DEFAULT_USER = 'flightctl';
+// 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',
@@ -35,77 +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;
-  runAs?: string;
-};
-
-export type QuadletImageAppForm = AppBase & {
-  appType: AppType.AppTypeQuadlet;
-  specType: AppSpecType.OCI_IMAGE;
-  image: string;
-  runAs?: string;
-};
-
-export type QuadletInlineAppForm = AppBase & {
-  appType: AppType.AppTypeQuadlet;
-  specType: AppSpecType.INLINE;
-  name: string; // transforms the field in required
-  files: InlineContent[];
-  runAs?: string;
-};
-
-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 type HelmImageAppForm = Omit<AppBase, 'variables' | 'volumes'> & {
-  appType: AppType.AppTypeHelm;
-  specType: AppSpecType.OCI_IMAGE;
-  image: string;
-  namespace?: string;
-  valuesFiles: Array<string>;
-  valuesYaml?: string;
-};
-
 export const isGitConfigTemplate = (configTemplate: ConfigTemplate): configTemplate is GitConfigTemplate =>
   configTemplate.type === ConfigType.GIT;
 
@@ -123,50 +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
-  | HelmImageAppForm;
-
-export const isImageAppProvider = (
-  app: ApplicationProviderSpecFixed,
-): app is ApplicationProviderSpecFixed & ImageApplicationProviderSpec => 'image' in app;
-
-// Type guards for the 5 explicit types
-export const isQuadletImageAppForm = (app: AppForm): app is QuadletImageAppForm =>
-  app.appType === AppType.AppTypeQuadlet && app.specType === AppSpecType.OCI_IMAGE;
-export const isQuadletInlineAppForm = (app: AppForm): app is QuadletInlineAppForm =>
-  app.appType === AppType.AppTypeQuadlet && app.specType === AppSpecType.INLINE;
-export const isComposeImageAppForm = (app: AppForm): app is ComposeImageAppForm =>
-  app.appType === AppType.AppTypeCompose && app.specType === AppSpecType.OCI_IMAGE;
-export const isComposeInlineAppForm = (app: AppForm): app is ComposeInlineAppForm =>
-  app.appType === AppType.AppTypeCompose && app.specType === AppSpecType.INLINE;
-export const isSingleContainerAppForm = (app: AppForm): app is SingleContainerAppForm =>
-  app.appType === AppType.AppTypeContainer;
-export const isHelmImageAppForm = (app: AppForm): app is HelmImageAppForm =>
-  app.appType === AppType.AppTypeHelm && app.specType === AppSpecType.OCI_IMAGE;
+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, '');
@@ -214,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,7 +1,4 @@
 import {
-  AppType,
-  ApplicationEnvVars,
-  ApplicationVolumeProviderSpec,
   AuthProvider,
   Condition,
   ConditionType,
@@ -9,7 +6,6 @@ import {
   EnrollmentRequest,
   FileContent,
   Fleet,
-  ImageApplicationProviderSpec,
   OAuth2ProviderSpec,
   OIDCProviderSpec,
   RelativePath,
@@ -55,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;

package/src/types/rbac.ts

@@ -21,4 +21,10 @@ export enum RESOURCE {
   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/imageBuilds.ts

@@ -99,6 +99,14 @@ export const isImageBuildActiveReason = (reason: ImageBuildConditionReason): boo
   );
 };
 
+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 ||
@@ -108,17 +116,6 @@ export const isImageExportActiveReason = (reason: ImageExportConditionReason): b
   );
 };
 
-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 {
@@ -129,37 +126,30 @@ const isValidDownloadUrl = (url: string): boolean => {
   }
 };
 
-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.
+// The ImageBuilder API download endpoint returns two types of responses: a redirect URL or a blob.
+// When it returns a redirect URL, the UI proxy rewrites the response to 200 with { redirectUrl: CDN_URL }
+// When 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) {
+  if (!response.ok || response.type === 'opaqueredirect' || response.status === 0) {
     return null;
   }
-  const redirectUrl = getRedirectUrl(response);
-  if (redirectUrl) {
-    if (!isValidDownloadUrl(redirectUrl)) {
-      throw new Error('Invalid redirect URL received from server');
+
+  // Extract the redirect URL returned by the UI proxy
+  const contentType = response.headers.get('Content-Type') || '';
+  if (response.ok && contentType.includes('application/json')) {
+    const data = (await response.json()) as { redirectUrl?: string };
+    const url = data?.redirectUrl;
+    if (url && isValidDownloadUrl(url)) {
+      return { type: 'redirect', url };
     }
-    return { type: 'redirect', url: redirectUrl };
+    return null;
   }
 
+  // Download the blob directly
   const blob = await response.blob();
 
   let filename = '';

package/src/utils/search.ts

@@ -1,5 +1,5 @@
 import fuzzy from 'fuzzysearch';
-import { API_VERSION } from '../constants';
+import { ApiVersion } from '@flightctl/types';
 
 // 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: ApiVersion.ApiVersionV1beta1,
   kind: 'Fleet',
   metadata: {},
   items: [],