@flightctl/ui-components 1.0.2 → 1.1.0-rc2

package/src/components/Device/EditDeviceWizard/deviceSpecUtils.ts

@@ -1,14 +1,19 @@
+import yaml from 'js-yaml';
 import {
   AppType,
-  // eslint-disable-next-line no-restricted-imports
+  ApplicationContent,
   ApplicationProviderSpec,
   ApplicationResourceLimits,
   ApplicationVolume,
+  ApplicationVolumeReclaimPolicy,
+  ComposeApplication,
   ConfigProviderSpec,
+  ContainerApplication,
   DeviceSpec,
   EncodingType,
   FileSpec,
   GitConfigProviderSpec,
+  HelmApplication,
   HttpConfigProviderSpec,
   ImageApplicationProviderSpec,
   ImageMountVolumeProviderSpec,
@@ -17,37 +22,37 @@ import {
   InlineConfigProviderSpec,
   KubernetesSecretProviderSpec,
   PatchRequest,
+  QuadletApplication,
 } from '@flightctl/types';
 import {
   AppForm,
   AppSpecType,
   ApplicationVolumeForm,
-  ComposeImageAppForm,
-  ComposeInlineAppForm,
+  ComposeAppForm,
   ConfigSourceProvider,
   ConfigType,
   GitConfigTemplate,
+  HelmAppForm,
   HttpConfigTemplate,
   InlineConfigTemplate,
+  InlineFileForm,
   KubeSecretTemplate,
-  PortMapping,
-  QuadletImageAppForm,
-  QuadletInlineAppForm,
+  QuadletAppForm,
+  RUN_AS_FLIGHTCTL_USER,
+  RUN_AS_ROOT_USER,
+  SingleContainerAppForm,
   SpecConfigTemplate,
   SystemdUnitFormValue,
-  isComposeImageAppForm,
   isGitConfigTemplate,
   isGitProviderSpec,
   isHttpConfigTemplate,
   isHttpProviderSpec,
-  isImageAppProvider,
+  isImageVariantApp,
   isInlineProviderSpec,
+  isInlineVariantApp,
   isKubeProviderSpec,
   isKubeSecretTemplate,
-  isQuadletImageAppForm,
-  isSingleContainerAppForm,
 } from '../../../types/deviceSpec';
-import { ApplicationProviderSpecFixed, InlineApplicationFileFixed } from '../../../types/extraTypes';
 
 const DEFAULT_INLINE_FILE_MODE = 420; // In Octal: 0644
 const DEFAULT_INLINE_FILE_USER = 'root';
@@ -214,296 +219,372 @@ export const getDeviceSpecConfigPatches = (
   return allPatches;
 };
 
-export const toAPIApplication = (app: AppForm): ApplicationProviderSpec => {
-  const envVars = app.variables.reduce((acc, variable) => {
-    acc[variable.name] = variable.value;
-    return acc;
-  }, {});
-
-  const volumes = app.volumes?.map((v) => {
-    const volume: Partial<ApplicationVolume & ImageMountVolumeProviderSpec> = {
-      name: v.name || '',
-    };
-
-    if (v.imageRef) {
-      volume.image = {
-        reference: v.imageRef,
-        pullPolicy: v.imagePullPolicy || ImagePullPolicy.PullIfNotPresent,
-      };
-    }
-    if (v.mountPath) {
-      volume.mount = {
-        path: v.mountPath,
-      };
-    }
-    return volume as ApplicationVolume;
-  });
-
-  if (isSingleContainerAppForm(app)) {
-    const data: ImageApplicationProviderSpec & ApplicationProviderSpec = {
-      image: app.image,
-      appType: app.appType,
-      envVars,
-      volumes,
-    };
-    if (app.name) {
-      data.name = app.name;
-    }
-    if (app.ports) {
-      data.ports = app.ports.map((p) => `${p.hostPort}:${p.containerPort}`);
-    }
-    // Removed fields must not appear in the resources object
-    const appLimits: ApplicationResourceLimits = {};
-    if (app.limits?.cpu) {
-      appLimits.cpu = app.limits.cpu;
-    }
-    if (app.limits?.memory) {
-      appLimits.memory = app.limits.memory;
-    }
-    if (Object.keys(appLimits).length > 0) {
-      data.resources = {
-        limits: appLimits,
-      };
-    }
-    return data as ApplicationProviderSpec;
-  }
-
-  if (isQuadletImageAppForm(app) || isComposeImageAppForm(app)) {
-    const data: ApplicationProviderSpec = {
-      image: app.image,
-      appType: app.appType,
-      envVars,
-      volumes,
-    };
-    if (app.name) {
-      data.name = app.name;
-    }
-    return data;
-  }
-
-  // Inline applications (Quadlet or Compose)
-  return {
-    name: app.name,
-    appType: app.appType,
-    inline: app.files.map(
-      (file): InlineApplicationFileFixed => ({
-        path: file.path,
-        content: file.content || '',
-        contentEncoding: file.base64 ? EncodingType.EncodingBase64 : EncodingType.EncodingPlain,
-      }),
-    ),
-    envVars,
-    volumes,
-  };
-};
-
-const hasInlineApplicationChanged = (
-  currentApp: InlineApplicationProviderSpec,
-  updatedApp: QuadletInlineAppForm | ComposeInlineAppForm,
-) => {
-  if (currentApp.inline.length !== updatedApp.files.length) {
-    return true;
-  }
-  const filesChanged = currentApp.inline.some((file, index) => {
-    const updatedFile = updatedApp.files[index];
-    const isCurrentBase64 = file.contentEncoding === EncodingType.EncodingBase64;
+const haveInlineFilesChanged = (current: ApplicationContent[], updated: ApplicationContent[]): boolean => {
+  if (current.length !== updated.length) return true;
+  return current.some((file, index) => {
+    const other = updated[index];
+    const aBase64 = file.contentEncoding === EncodingType.EncodingBase64;
+    const bBase64 = other.contentEncoding === EncodingType.EncodingBase64;
     return (
-      (updatedFile.base64 || false) !== isCurrentBase64 ||
-      updatedFile.path !== file.path ||
-      updatedFile.content !== file.content
+      aBase64 !== bBase64 || (file.path || '') !== (other.path || '') || (file.content || '') !== (other.content || '')
     );
   });
-  if (filesChanged) {
-    return true;
-  }
-  return !areVolumesEqual(currentApp.volumes || [], updatedApp.volumes || []);
 };
 
-const areVolumesEqual = (currentVolumes: ApplicationVolume[], updatedFormVolumes: ApplicationVolumeForm[]): boolean => {
-  if (currentVolumes.length !== updatedFormVolumes.length) {
-    return false;
-  }
-
-  return currentVolumes.every((currentVol, index) => {
-    const updatedFormVol = updatedFormVolumes[index];
-    const currentFullVol = currentVol as ApplicationVolume & ImageMountVolumeProviderSpec;
-
-    if (currentFullVol.name !== updatedFormVol.name) {
-      return false;
-    }
+const haveEnvVarsChanged = (current: Record<string, string>, updated: Record<string, string>): boolean => {
+  const aKeys = Object.keys(current);
+  const bKeys = Object.keys(updated);
+  if (aKeys.length !== bKeys.length) return true;
+  return aKeys.some((key) => current[key] !== updated[key]);
+};
 
-    const currentImageRef = currentFullVol.image?.reference || '';
-    const updatedImageRef = updatedFormVol?.imageRef || '';
-    if (currentImageRef !== updatedImageRef) {
-      return false;
-    }
+const haveVolumesChanged = (current: ApplicationVolume[], updated: ApplicationVolume[]): boolean => {
+  if (current.length !== updated.length) return true;
+  return current.some((currentVol, index) => {
+    const updatedVol = updated[index];
+    if (currentVol.name !== updatedVol.name) return true;
+    if (
+      (currentVol.reclaimPolicy || ApplicationVolumeReclaimPolicy.RETAIN) !==
+      (updatedVol.reclaimPolicy || ApplicationVolumeReclaimPolicy.RETAIN)
+    )
+      return true;
 
+    const currentFull = currentVol as ApplicationVolume & ImageMountVolumeProviderSpec;
+    const updatedFull = updatedVol as ApplicationVolume & ImageMountVolumeProviderSpec;
+    const currentImageRef = currentFull.image?.reference || '';
+    const updatedImageRef = updatedFull.image?.reference || '';
+    if (currentImageRef !== updatedImageRef) return true;
     if (currentImageRef || updatedImageRef) {
-      const currentPullPolicy = currentFullVol.image?.pullPolicy || ImagePullPolicy.PullIfNotPresent;
-      const updatedPullPolicy = updatedFormVol?.imagePullPolicy || ImagePullPolicy.PullIfNotPresent;
-      if (currentPullPolicy !== updatedPullPolicy) {
-        return false;
-      }
-    }
-
-    const currentMountPath = currentFullVol.mount?.path || '';
-    const updatedMountPath = updatedFormVol?.mountPath || '';
-    if (currentMountPath !== updatedMountPath) {
-      return false;
+      if (
+        (currentFull.image?.pullPolicy || ImagePullPolicy.PullIfNotPresent) !==
+        (updatedFull.image?.pullPolicy || ImagePullPolicy.PullIfNotPresent)
+      )
+        return true;
     }
-
-    return true;
+    return (currentFull.mount?.path || '') !== (updatedFull.mount?.path || '');
   });
 };
 
-const arePortsEqual = (currentPorts: string[], updatedPorts: PortMapping[]): boolean => {
-  if (currentPorts.length !== updatedPorts.length) {
-    return false;
-  }
+const hasStringChanged = (
+  current: string | undefined,
+  updated: string | undefined,
+  defaultValue: string = '',
+): boolean => (current || defaultValue) !== (updated || defaultValue);
 
-  // Reordered ports will be considered as changed
-  return currentPorts.every((currentPort, index) => {
-    const updatedPort = updatedPorts[index];
-    return currentPort === `${updatedPort.hostPort}:${updatedPort.containerPort}`;
-  });
+const havePortsChanged = (current: string[], updated: string[]): boolean => {
+  if (current.length !== updated.length) return true;
+  return current.some((port, index) => port !== updated[index]);
 };
 
-const areResourceLimitsEqual = (
-  currentLimits: { cpu?: string; memory?: string } | undefined,
-  updatedLimits: { cpu?: string; memory?: string } | undefined,
+const haveResourceLimitsChanged = (
+  current: { cpu?: string; memory?: string } | undefined,
+  updated: { cpu?: string; memory?: string } | undefined,
 ): boolean => {
-  const currentCpu = currentLimits?.cpu || '';
-  const updatedCpu = updatedLimits?.cpu || '';
-  const currentMemory = currentLimits?.memory || '';
-  const updatedMemory = updatedLimits?.memory || '';
+  return (current?.cpu || '') !== (updated?.cpu || '') || (current?.memory || '') !== (updated?.memory || '');
+};
 
-  return currentCpu === updatedCpu && currentMemory === updatedMemory;
+const haveValuesFilesChanged = (current: string[], updated: string[]): boolean => {
+  const a = current.filter((f) => f.trim() !== '');
+  const b = updated.filter((f) => f.trim() !== '');
+  if (a.length !== b.length) return true;
+  return a.some((file, i) => file !== b[i]);
 };
 
-const areEnvVariablesEqual = (
-  currentVars: Record<string, string> | undefined,
-  updatedFormVars: { name: string; value: string }[],
-): boolean => {
-  const envVars = currentVars || {};
-  if (Object.keys(envVars).length !== updatedFormVars.length) {
-    return false;
-  }
+const haveHelmValuesChanged = (current: Record<string, unknown>, updated: Record<string, unknown>): boolean =>
+  JSON.stringify(current) !== JSON.stringify(updated);
 
-  return updatedFormVars.every((variable) => {
-    // Envvars may have "falsy" values (eg. number 0) when they are defined
-    return variable.name in envVars && envVars[variable.name] === variable.value;
-  });
+const hasRunAsChanged = (current: string | undefined, updated: string | undefined): boolean => {
+  if (!current) {
+    // For empty "runAs", we mark the app as changed.
+    // This means that we'll set the field explicitly to the default user (currently "root").
+    return true;
+  }
+  return current !== updated;
 };
 
-const hasSingleContainerAppChanged = (currentApp: ApplicationProviderSpec, updatedApp: AppForm): boolean => {
-  if (!isSingleContainerAppForm(updatedApp)) {
+// Single container apps always have an image, and it doesn't have an inline variant
+const hasContainerAppChanged = (current: ContainerApplication, updated: ContainerApplication): boolean =>
+  hasStringChanged(current.name, updated.name) ||
+  hasStringChanged(current.image, updated.image) ||
+  havePortsChanged(current.ports || [], updated.ports || []) ||
+  haveResourceLimitsChanged(current.resources?.limits, updated.resources?.limits) ||
+  haveEnvVarsChanged(current.envVars || {}, updated.envVars || {}) ||
+  hasRunAsChanged(current.runAs, updated.runAs) ||
+  haveVolumesChanged(current.volumes || [], updated.volumes || []);
+
+// Helm apps always have an image (chart), and it doesn't have an inline variant
+const hasHelmAppChanged = (current: HelmApplication, updated: HelmApplication): boolean =>
+  hasStringChanged(current.name, updated.name) ||
+  hasStringChanged(current.image, updated.image) ||
+  hasStringChanged(current.namespace, updated.namespace) ||
+  haveValuesFilesChanged(current.valuesFiles || [], updated.valuesFiles || []) ||
+  haveHelmValuesChanged(current.values || {}, updated.values || {});
+
+const hasComposeAppChanged = (
+  current: ComposeApplication,
+  updated: ComposeApplication,
+  specType: AppSpecType,
+): boolean => {
+  const baseChanged =
+    hasStringChanged(current.name, updated.name) ||
+    haveEnvVarsChanged(current.envVars || {}, updated.envVars || {}) ||
+    haveVolumesChanged(current.volumes || [], updated.volumes || []);
+
+  if (baseChanged) {
     return true;
   }
 
-  const imageApp = currentApp as ImageApplicationProviderSpec & ApplicationProviderSpec;
-  if (imageApp.name !== updatedApp.name || imageApp.image !== updatedApp.image) {
-    return true;
+  if (specType === AppSpecType.OCI_IMAGE) {
+    return hasStringChanged(
+      (current as ImageApplicationProviderSpec).image,
+      (updated as ImageApplicationProviderSpec).image,
+    );
   }
+  return haveInlineFilesChanged(
+    (current as InlineApplicationProviderSpec).inline,
+    (updated as InlineApplicationProviderSpec).inline,
+  );
+};
 
-  if (!arePortsEqual(imageApp.ports || [], updatedApp.ports || [])) {
+// Quadlet apps are currently the same as Compose apps, plus an optional "runAs" field.
+const hasQuadletAppChanged = (
+  current: QuadletApplication,
+  updated: QuadletApplication,
+  specType: AppSpecType,
+): boolean => {
+  const baseChanged = hasComposeAppChanged(current, updated, specType);
+  if (baseChanged) {
     return true;
   }
+  return hasRunAsChanged(current.runAs, updated.runAs);
+};
 
-  if (!areResourceLimitsEqual(imageApp.resources?.limits, updatedApp.limits)) {
+const hasApplicationChanged = (current: ApplicationProviderSpec, updated: ApplicationProviderSpec): boolean => {
+  if (current.appType !== updated.appType) {
     return true;
   }
 
-  if (!areEnvVariablesEqual(imageApp.envVars, updatedApp.variables)) {
+  const currentSpectType = isImageVariantApp(current) ? AppSpecType.OCI_IMAGE : AppSpecType.INLINE;
+  const updatedSpectType = isImageVariantApp(updated) ? AppSpecType.OCI_IMAGE : AppSpecType.INLINE;
+  if (currentSpectType !== updatedSpectType) {
     return true;
   }
+  switch (current.appType) {
+    case AppType.AppTypeContainer:
+      return hasContainerAppChanged(current as ContainerApplication, updated as ContainerApplication);
+    case AppType.AppTypeHelm:
+      return hasHelmAppChanged(current as HelmApplication, updated as HelmApplication);
+    case AppType.AppTypeQuadlet:
+      return hasQuadletAppChanged(current as QuadletApplication, updated as QuadletApplication, currentSpectType);
+    case AppType.AppTypeCompose:
+      return hasComposeAppChanged(current as ComposeApplication, updated as ComposeApplication, currentSpectType);
+  }
+};
 
-  return !areVolumesEqual(imageApp.volumes || [], updatedApp.volumes || []);
+const variablesToEnvVars = (variables: { name: string; value: string }[]) => {
+  if (variables.length === 0) {
+    return undefined;
+  }
+  return variables.reduce(
+    (acc, v) => {
+      if (v.name) {
+        acc[v.name] = v.value || '';
+      }
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
 };
 
-const hasApplicationChanged = (currentApp: ApplicationProviderSpec, updatedApp: AppForm): boolean => {
-  const isCurrentImageApp = isImageAppProvider(currentApp);
-  const currentAppSpecType = isCurrentImageApp ? AppSpecType.OCI_IMAGE : AppSpecType.INLINE;
+/**
+ * Converts form volumes to API volumes, ignoring fields that are not allowed for the given app type.
+ * Quadlet/Compose apps --> can only be image volumes (mount is not allowed)
+ * Container apps --> can either be mount or image mount volumes
+ */
+const formVolumesToApi = (volumes: ApplicationVolumeForm[], appType: AppType): ApplicationVolume[] => {
+  return volumes.map((v) => {
+    const vol: Partial<ApplicationVolume & ImageMountVolumeProviderSpec> = {
+      name: v.name || '',
+    };
+    if (v.imageRef) {
+      vol.image = {
+        reference: v.imageRef,
+        pullPolicy: v.imagePullPolicy || ImagePullPolicy.PullIfNotPresent,
+      };
+    }
+    if (v.mountPath && appType === AppType.AppTypeContainer) {
+      vol.mount = { path: v.mountPath };
+    }
+    return vol as ApplicationVolume;
+  });
+};
 
-  // Check if application name changed, or it's a different type of application (either specType or appType)
-  if (
-    currentAppSpecType !== updatedApp.specType ||
-    currentApp.appType !== updatedApp.appType ||
-    currentApp.name !== updatedApp.name
-  ) {
-    return true;
+const formFilesToApi = (files: InlineFileForm[]) =>
+  files.map((f) => ({
+    path: f.path,
+    content: f.content || '',
+    contentEncoding: f.base64 ? EncodingType.EncodingBase64 : EncodingType.EncodingPlain,
+  }));
+
+const toFormFiles = (files: ApplicationContent[]) =>
+  files.map((file) => ({
+    path: file.path || '',
+    content: file.content || '',
+    base64: file.contentEncoding === EncodingType.EncodingBase64,
+  }));
+
+const toApiHelmApp = (app: HelmAppForm): HelmApplication => {
+  const helmApp: HelmApplication = {
+    name: app.name,
+    image: app.image,
+    appType: app.appType,
+  };
+  if (app.namespace) {
+    helmApp.namespace = app.namespace;
   }
-
-  if (!areEnvVariablesEqual(currentApp.envVars, updatedApp.variables)) {
-    return true;
+  if (app.valuesYaml) {
+    try {
+      const values = yaml.load(app.valuesYaml) as Record<string, unknown>;
+      if (values && Object.keys(values).length > 0) helmApp.values = values;
+    } catch {
+      // leave values unset on invalid YAML
+    }
+  }
+  const fileNames = (app.valuesFiles || []).filter((f) => f.trim() !== '');
+  if (fileNames.length > 0) {
+    helmApp.valuesFiles = fileNames;
   }
+  return helmApp;
+};
 
-  // The app is a single container application
-  if (isSingleContainerAppForm(updatedApp)) {
-    return hasSingleContainerAppChanged(currentApp, updatedApp);
+const toApiContainerApp = (app: SingleContainerAppForm): ContainerApplication => {
+  const containerApp: ContainerApplication = {
+    image: app.image,
+    appType: app.appType,
+    runAs: app.runAs || RUN_AS_ROOT_USER,
+    envVars: variablesToEnvVars(app.variables || []),
+    volumes: formVolumesToApi(app.volumes || [], AppType.AppTypeContainer),
+  };
+  if (app.name) {
+    containerApp.name = app.name;
+  }
+  if (app.ports.length > 0) {
+    containerApp.ports = app.ports.map((p) => `${p.hostPort}:${p.containerPort}`);
   }
 
-  // The app is an image application (Quadlet/Compose image apps)
-  if (isCurrentImageApp) {
-    const imageApp = currentApp as ImageApplicationProviderSpec;
-    const updatedImageApp = updatedApp as QuadletImageAppForm | ComposeImageAppForm;
-    if (imageApp.image !== updatedImageApp.image) {
-      return true;
+  const cpu = app.cpuLimit;
+  const memory = app.memoryLimit;
+  if (cpu || memory) {
+    const limits: ApplicationResourceLimits = {};
+    if (cpu) {
+      limits.cpu = cpu;
+    }
+    if (memory) {
+      limits.memory = memory;
     }
 
-    return !areVolumesEqual(imageApp.volumes || [], updatedApp.volumes || []);
+    containerApp.resources = { limits };
   }
+  return containerApp;
+};
 
-  // The app must be an inline application
-  return hasInlineApplicationChanged(
-    currentApp as InlineApplicationProviderSpec,
-    updatedApp as QuadletInlineAppForm | ComposeInlineAppForm,
-  );
+const toApiComposeApp = (app: ComposeAppForm): ComposeApplication => {
+  const formApp: Partial<ComposeApplication> = {
+    appType: app.appType,
+    envVars: variablesToEnvVars(app.variables || []),
+    volumes: formVolumesToApi(app.volumes || [], app.appType),
+  };
+  if (app.name) {
+    formApp.name = app.name;
+  }
+  if (app.specType === AppSpecType.OCI_IMAGE) {
+    (formApp as ImageApplicationProviderSpec).image = app.image;
+  } else {
+    (formApp as InlineApplicationProviderSpec).inline = formFilesToApi(app.files);
+  }
+  return formApp as ComposeApplication;
+};
+
+// Quadlet apps are currently the same as Compose apps, plus an optional "runAs" field.
+const toApiQuadletApp = (app: QuadletAppForm): QuadletApplication => {
+  const baseApp = toApiComposeApp(app);
+  return { ...baseApp, appType: AppType.AppTypeQuadlet, runAs: app.runAs || RUN_AS_ROOT_USER };
+};
+
+export const toApiApplication = (app: AppForm): ApplicationProviderSpec => {
+  switch (app.appType) {
+    case AppType.AppTypeHelm:
+      return toApiHelmApp(app as HelmAppForm);
+    case AppType.AppTypeContainer:
+      return toApiContainerApp(app as SingleContainerAppForm);
+    case AppType.AppTypeQuadlet:
+      return toApiQuadletApp(app as QuadletAppForm);
+    case AppType.AppTypeCompose:
+      return toApiComposeApp(app as ComposeAppForm);
+    default:
+      throw new Error('Unknown application type');
+  }
+};
+
+const toFormVariables = (envVars: Record<string, string>): { name: string; value: string }[] =>
+  Object.entries(envVars).map(([name, value]) => ({ name, value: value || '' }));
+
+const toFormVolumes = (volumes?: ApplicationVolume[]): ApplicationVolumeForm[] => {
+  if (!volumes) return [];
+  return volumes.map((vol) => {
+    const fullVolume = vol as ApplicationVolume & ImageMountVolumeProviderSpec;
+    return {
+      name: fullVolume.name,
+      imageRef: fullVolume.image?.reference || '',
+      mountPath: fullVolume.mount?.path || '',
+      imagePullPolicy: fullVolume.image?.pullPolicy || ImagePullPolicy.PullIfNotPresent,
+    };
+  });
+};
+
+const toFormApps = (app: ApplicationProviderSpec): AppForm => {
+  switch (app.appType) {
+    case AppType.AppTypeContainer:
+      return toContainerAppForm(app as ContainerApplication);
+    case AppType.AppTypeHelm:
+      return toHelmAppForm(app as HelmApplication);
+    case AppType.AppTypeQuadlet:
+      return toQuadletAppForm(app as QuadletApplication);
+    case AppType.AppTypeCompose:
+      return toComposeAppForm(app as ComposeApplication);
+    default:
+      throw new Error('Unknown application type');
+  }
 };
 
 export const getApplicationPatches = (
   basePath: string,
   currentApps: ApplicationProviderSpec[],
   updatedApps: AppForm[],
-) => {
+): PatchRequest => {
   const patches: PatchRequest = [];
-
   const currentLen = currentApps.length;
   const newLen = updatedApps.length;
 
   if (currentLen === 0 && newLen > 0) {
-    // First apps(s) have been added
-    patches.push({
-      path: `${basePath}/applications`,
-      op: 'add',
-      value: updatedApps.map(toAPIApplication),
-    });
+    patches.push({ path: `${basePath}/applications`, op: 'add', value: updatedApps.map(toApiApplication) });
   } else if (currentLen > 0 && newLen === 0) {
-    // Last app(s) have been removed
-    patches.push({
-      path: `${basePath}/applications`,
-      op: 'remove',
-    });
+    patches.push({ path: `${basePath}/applications`, op: 'remove' });
   } else if (currentLen !== newLen) {
-    // Array length changed, need to replace entire array
-    patches.push({
-      path: `${basePath}/applications`,
-      op: 'replace',
-      value: updatedApps.map(toAPIApplication),
-    });
+    patches.push({ path: `${basePath}/applications`, op: 'replace', value: updatedApps.map(toApiApplication) });
   } else {
-    // Apps length has not changed. We only PATCH the applications that have actually changed
     currentApps.forEach((currentApp, index) => {
       const updatedApp = updatedApps[index];
-      if (hasApplicationChanged(currentApp, updatedApp)) {
+      const updatedApi = toApiApplication(updatedApp);
+      if (hasApplicationChanged(currentApp, updatedApi)) {
         patches.push({
           path: `${basePath}/applications/${index}`,
           op: 'replace',
-          value: toAPIApplication(updatedApp),
+          value: updatedApi,
         });
       }
     });
   }
-
   return patches;
 };
 
@@ -559,83 +640,112 @@ export const getApiConfig = (ct: SpecConfigTemplate): ConfigSourceProvider => {
   };
 };
 
-const getAppFormVariables = (app: ApplicationProviderSpecFixed) =>
-  Object.entries(app.envVars || {}).map(([varName, varValue]) => ({ name: varName, value: varValue }));
+const getRunAsUser = (app: ContainerApplication | QuadletApplication | undefined): string => {
+  if (app) {
+    // Existing apps that don't have a "runAs" user are actually running as the "root" user.
+    return app.runAs || RUN_AS_ROOT_USER;
+  }
+  // For new applications, we want to promote "flightctl" as the default user.
+  return RUN_AS_FLIGHTCTL_USER;
+};
 
-const convertVolumesToForm = (volumes?: ApplicationVolume[]) => {
-  if (!volumes) return [];
-  return volumes.map((vol) => {
-    const fullVolume = vol as ApplicationVolume & ImageMountVolumeProviderSpec;
-    const volForm: ApplicationVolumeForm = {
-      name: fullVolume.name,
-      imageRef: fullVolume.image?.reference || '',
-      mountPath: fullVolume.mount?.path || '',
-    };
-    // Only set imagePullPolicy if there's an image
-    if (fullVolume.image) {
-      volForm.imagePullPolicy = fullVolume.image.pullPolicy || ImagePullPolicy.PullIfNotPresent;
-    }
-    return volForm;
-  });
+const toContainerAppForm = (containerApp: ContainerApplication | undefined): SingleContainerAppForm => {
+  const ports =
+    containerApp?.ports?.map((portString) => {
+      const [hostPort, containerPort] = portString.split(':');
+      return { hostPort: hostPort || '', containerPort: containerPort || '' };
+    }) || [];
+
+  const limits = containerApp?.resources?.limits;
+
+  return {
+    appType: AppType.AppTypeContainer,
+    specType: AppSpecType.OCI_IMAGE,
+    name: containerApp?.name || '',
+    image: containerApp?.image || '',
+    variables: toFormVariables(containerApp?.envVars || {}),
+    volumes: toFormVolumes(containerApp?.volumes),
+    ports,
+    cpuLimit: limits?.cpu || '',
+    memoryLimit: limits?.memory || '',
+    runAs: getRunAsUser(containerApp),
+  };
 };
 
-export const getApplicationValues = (deviceSpec?: DeviceSpec): AppForm[] => {
-  const apps = deviceSpec?.applications || [];
-  return apps.map((app) => {
-    if (!app.appType) {
-      throw new Error('Application appType is required');
-    }
-    // Single container application
-    if (app.appType === AppType.AppTypeContainer && isImageAppProvider(app)) {
-      const imageApp = app as ImageApplicationProviderSpec;
-      const ports =
-        imageApp.ports?.map((portString) => {
-          const [hostPort, containerPort] = portString.split(':');
-          return { hostPort: hostPort || '', containerPort: containerPort || '' };
-        }) || [];
+const toHelmAppForm = (helmApp: HelmApplication | undefined): HelmAppForm => {
+  // We want to always show at least one values file field, even when no files have been added yet.
+  const values = helmApp?.values || {};
+  const valuesFiles = helmApp?.valuesFiles?.length ? helmApp.valuesFiles : [''];
+  const valuesYaml = Object.keys(values || {}).length > 0 ? yaml.dump(values) : '';
 
-      return {
-        specType: AppSpecType.OCI_IMAGE,
-        appType: AppType.AppTypeContainer,
-        name: app.name || '',
-        image: app.image,
-        variables: getAppFormVariables(app),
-        volumes: convertVolumesToForm(app.volumes),
-        ports,
-        limits: imageApp.resources?.limits
-          ? {
-              cpu: imageApp.resources.limits.cpu || '',
-              memory: imageApp.resources.limits.memory || '',
-            }
-          : undefined,
-      };
-    }
+  return {
+    appType: AppType.AppTypeHelm,
+    specType: AppSpecType.OCI_IMAGE,
+    name: helmApp?.name || '',
+    image: helmApp?.image || '',
+    namespace: helmApp?.namespace || '',
+    valuesYaml,
+    valuesFiles,
+  };
+};
 
-    // Compose or Quadlet image application
-    if (isImageAppProvider(app)) {
-      return {
-        specType: AppSpecType.OCI_IMAGE,
-        name: app.name || '',
-        image: app.image,
-        appType: app.appType,
-        variables: getAppFormVariables(app),
-        volumes: convertVolumesToForm(app.volumes),
-      };
-    }
+const toComposeAppForm = (app: ComposeApplication | undefined): ComposeAppForm => {
+  const isInlineVariant = app && isInlineVariantApp(app);
+  const specType = isInlineVariant ? AppSpecType.INLINE : AppSpecType.OCI_IMAGE;
+  const formApp: Partial<QuadletAppForm | ComposeAppForm> = {
+    appType: AppType.AppTypeCompose,
+    specType,
+    name: app?.name || '',
+    variables: toFormVariables(app?.envVars || {}),
+    volumes: toFormVolumes(app?.volumes),
+  };
 
-    // Compose or Quadlet inline application
-    const inlineApp = app as InlineApplicationProviderSpec;
-    return {
-      specType: AppSpecType.INLINE,
-      appType: app.appType,
-      name: app.name || '',
-      files: inlineApp.inline,
-      variables: getAppFormVariables(app),
-      volumes: convertVolumesToForm(app.volumes),
-    } as QuadletInlineAppForm | ComposeInlineAppForm;
-  });
+  // We want to have both fields initialized for the formik form
+  if (isInlineVariant) {
+    formApp.files = toFormFiles(app?.inline || []);
+    formApp.image = '';
+  } else {
+    formApp.image = app?.image || '';
+    formApp.files = [];
+  }
+  return formApp as ComposeAppForm;
+};
+
+const toQuadletAppForm = (app: QuadletApplication | undefined): QuadletAppForm => {
+  const baseApp = toComposeAppForm(app);
+
+  return {
+    ...baseApp,
+    appType: AppType.AppTypeQuadlet,
+    runAs: getRunAsUser(app),
+  };
 };
 
+export const createInitialAppForm = (appType: AppType, name: string = ''): AppForm => {
+  let app: AppForm;
+  switch (appType) {
+    case AppType.AppTypeContainer:
+      app = toContainerAppForm(undefined);
+      break;
+    case AppType.AppTypeHelm:
+      app = toHelmAppForm(undefined);
+      break;
+    case AppType.AppTypeQuadlet:
+      app = toQuadletAppForm(undefined);
+      break;
+    case AppType.AppTypeCompose:
+      app = toComposeAppForm(undefined);
+      break;
+    default:
+      throw new Error('Unknown application type');
+  }
+  app.name = name;
+  return app;
+};
+
+export const getApplicationValues = (deviceSpec?: DeviceSpec): AppForm[] =>
+  (deviceSpec?.applications || []).map(toFormApps);
+
 export const getSystemdUnitsValues = (deviceSpec?: DeviceSpec): SystemdUnitFormValue[] => {
   return (
     deviceSpec?.systemd?.matchPatterns?.map((pattern) => ({