@flightctl/ui-components 0.5.1 → 0.6.0-rc1

package/src/hooks/useAppContext.tsx

@@ -13,6 +13,7 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 import { PatchRequest } from '@flightctl/types';
+import { CliArtifactsResponse } from '@flightctl/ui-components/src/types/extraTypes';
 import { ROUTE } from './useNavigate';
 import { RESOURCE, VERB } from '../types/rbac';
 
@@ -33,17 +34,26 @@ export const appRoutes = {
   [ROUTE.RESOURCE_SYNC_DETAILS]: '/devicemanagement/resourcesyncs',
   [ROUTE.ENROLLMENT_REQUESTS]: '/devicemanagement/enrollmentrequests',
   [ROUTE.ENROLLMENT_REQUEST_DETAILS]: '/devicemanagement/enrollmentrequests',
+  [ROUTE.COMMAND_LINE_TOOLS]: '/command-line-tools',
 };
 
 export type NavLinkFC = React.FC<{ to: string; children: (props: { isActive: boolean }) => React.ReactNode }>;
 export type PromptFC = React.FC<{ message: string }>;
+export enum FlightCtlApp {
+  STANDALONE = 'standalone',
+  OCP = 'ocp',
+  AAP = 'aap',
+}
 
 export type AppContextProps = {
-  appType: 'standalone' | 'ocp' | 'aap';
+  appType: FlightCtlApp;
   user?: string; // auth?.user?.profile.preferred_username
   i18n: {
     transNamespace?: string;
   };
+  settings: {
+    isRHEM?: boolean;
+  };
   router: {
     useNavigate: () => RouterNavigateFunction;
     Link: typeof Link;
@@ -59,7 +69,7 @@ export type AppContextProps = {
     Prompt?: PromptFC;
   };
   fetch: {
-    getWsEndpoint: (deviceId: string) => { wsEndpoint: string; protocols: string[] };
+    getWsEndpoint: (deviceId: string) => string;
     get: <R>(kind: string, abortSignal?: AbortSignal) => Promise<R>;
     post: <R>(kind: string, data: R, abortSignal?: AbortSignal) => Promise<R>;
     put: <R>(kind: string, data: R, abortSignal?: AbortSignal) => Promise<R>;
@@ -67,13 +77,16 @@ export type AppContextProps = {
     patch: <R>(kind: string, patches: PatchRequest, abortSignal?: AbortSignal) => Promise<R>;
     checkPermissions: (resource: RESOURCE, verb: VERB) => Promise<boolean>;
   };
-  metrics: {
-    get: <R>(query: string, abortSignal?: AbortSignal) => Promise<R>;
-  };
+  // Extra fetch functions
+  getMetrics?: <R>(query: string, abortSignal?: AbortSignal) => Promise<R>;
+  getCliArtifacts?: (abortSignal?: AbortSignal) => Promise<CliArtifactsResponse>;
 };
 
 export const AppContext = React.createContext<AppContextProps>({
-  appType: 'standalone',
+  appType: FlightCtlApp.STANDALONE,
+  settings: {
+    isRHEM: false,
+  },
   router: {
     useNavigate,
     Link,
@@ -92,7 +105,7 @@ export const AppContext = React.createContext<AppContextProps>({
   },
   /* eslint-disable */
   fetch: {
-    getWsEndpoint: () => ({ wsEndpoint: '', protocols: [''] }),
+    getWsEndpoint: () => '',
     get: async () => ({}) as any,
     post: async () => ({}) as any,
     put: async () => ({}) as any,
@@ -100,9 +113,6 @@ export const AppContext = React.createContext<AppContextProps>({
     patch: async () => ({}) as any,
     checkPermissions: async () => true,
   },
-  metrics: {
-    get: async () => ({}) as any,
-  },
   /* eslint-enable */
 });
 

package/src/hooks/useFetch.ts

@@ -1,10 +1,11 @@
 import { useAppContext } from './useAppContext';
 
 export const useFetch = () => {
-  const { fetch, metrics } = useAppContext();
+  const { fetch, getCliArtifacts, getMetrics } = useAppContext();
 
   return {
     ...fetch,
-    getMetrics: metrics.get,
+    getCliArtifacts,
+    getMetrics,
   };
 };

package/src/hooks/useNavigate.tsx

@@ -24,6 +24,7 @@ export enum ROUTE {
   RESOURCE_SYNC_DETAILS = 'RESOURCE_SYNC_DETAILS',
   ENROLLMENT_REQUESTS = 'ENROLLMENT_REQUESTS',
   ENROLLMENT_REQUEST_DETAILS = 'ENROLLMENT_REQUEST_DETAILS',
+  COMMAND_LINE_TOOLS = 'COMMAND_LINE_TOOLS',
 }
 
 export type RouteWithPostfix =

package/src/hooks/useTimeZones.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+type TimeZoneMap = Record<string, string>;
+
+// Hook allows us to only load the timeZones when they are being used
+const useTimeZones = () => {
+  const [zones, setZones] = React.useState<TimeZoneMap>({});
+
+  React.useEffect(() => {
+    const loadZones = async () => {
+      const timeZones = (await import('./timeZones')).default;
+
+      const filledZones = Object.entries(timeZones).reduce((finalMap, [name, offset]) => {
+        finalMap[name] = `(GMT ${offset}) ${name}`;
+        return finalMap;
+      }, {} as TimeZoneMap);
+
+      setZones(filledZones);
+    };
+    void loadZones();
+  }, []);
+
+  return zones;
+};
+
+export default useTimeZones;

package/src/hooks/useWebSocket.ts

@@ -2,11 +2,26 @@ import * as React from 'react';
 import { useTranslation } from './useTranslation';
 import { useAppContext } from './useAppContext';
 
+const msgToBytes = (msg: string, resize?: boolean) => {
+  const encoder = new TextEncoder();
+  const encodedData = encoder.encode(msg);
+  const result = new Uint8Array(encodedData.length + 1);
+  result[0] = resize ? 0x4 : 0x00;
+  result.set(encodedData, 1);
+  return result;
+};
+
+export type WsMetadata = {
+  tty: boolean;
+  term: string;
+};
+
 export const useWebSocket = <T>(
   deviceId: string,
   onMsgReceived: (msg: T) => Promise<void>,
+  wsMetadata: WsMetadata,
 ): {
-  sendMessage: (msg: string) => void;
+  sendMessage: (msg: string, resize?: boolean) => void;
   isConnecting: boolean;
   isClosed: boolean;
   error: unknown;
@@ -22,18 +37,25 @@ export const useWebSocket = <T>(
   const [error, setError] = React.useState<unknown>();
   const [reset, setReset] = React.useState<number>(0);
 
-  const sendMessage = React.useCallback((data: string) => {
-    wsRef.current?.send(data);
+  const sendMessage = React.useCallback((data: string, resize?: boolean) => {
+    wsRef.current?.send(msgToBytes(data, resize));
   }, []);
 
   React.useEffect(() => {
     try {
       setIsConnecting(true);
       setIsClosed(false);
-      const { wsEndpoint, protocols } = getWsEndpoint(deviceId);
-      const ws = new WebSocket(wsEndpoint, protocols);
+      const wsEndpoint = getWsEndpoint(deviceId);
+      const wsMeta = JSON.stringify(wsMetadata);
+      const params = new URLSearchParams({
+        metadata: wsMeta,
+      });
+      const ws = new WebSocket(`${wsEndpoint}?${params.toString()}`, 'v5.channel.k8s.io');
       ws.addEventListener('open', () => setIsConnecting(false));
-      ws.addEventListener('close', () => setIsClosed(true));
+      ws.addEventListener('close', () => {
+        setIsClosed(true);
+        wsRef.current = undefined;
+      });
       ws.addEventListener('error', (evt) => {
         // eslint-disable-next-line no-console
         console.error('Error creating websocket:', evt);
@@ -48,7 +70,7 @@ export const useWebSocket = <T>(
       wsRef.current?.close();
       wsRef.current = undefined;
     };
-  }, [deviceId, t, getWsEndpoint, reset]);
+  }, [deviceId, t, getWsEndpoint, reset, wsMetadata]);
 
   const reconnect = React.useCallback(() => {
     wsRef.current?.close();

package/src/links.ts

@@ -1,7 +1,16 @@
-export const CREATING_APPLICATIONS_LINK =
-  'https://github.com/flightctl/flightctl/blob/main/docs/user/managing-devices.md#creating-applications';
+const baseDocsRepoUrl = 'https://github.com/flightctl/flightctl/blob/main/docs';
 
-export const USING_TEMPLATE_VARIABLES_LINK =
-  'https://github.com/flightctl/flightctl/blob/main/docs/user/managing-fleets.md#defining-device-templates';
+// Links to the fLightctl upstream docs
+export const CREATING_APPLICATIONS_LINK = `${baseDocsRepoUrl}/user/managing-devices.md#creating-applications`;
 
+export const USING_TEMPLATE_VARIABLES_LINK = `${baseDocsRepoUrl}/user/managing-fleets.md#defining-device-templates`;
+
+export const ADDING_NEW_DEVICES_LINK = `${baseDocsRepoUrl}/user/getting-started.md#building-a-bootable-container-image-including-the-flight-control-agent`;
+
+export const CREATE_ACM_REPOSITORY = `${baseDocsRepoUrl}/user/registering-microshift-devices-acm.md#creating-the-acm-registration-repository`;
+
+// Links to other flightctl upstream resources
+export const DEMO_REPOSITORY_URL = 'https://github.com/flightctl/flightctl-demos';
+
+// Links to general Red Hat docs
 export const TECH_PREVIEW_LEVEL_LINK = 'https://access.redhat.com/support/offerings/techpreview';

package/src/types/deviceSpec.ts

@@ -1,10 +1,16 @@
 import {
   ConfigProviderSpec,
+  DisruptionBudget,
   GitConfigProviderSpec,
   HttpConfigProviderSpec,
+  ImageApplicationProviderSpec,
+  InlineApplicationProviderSpec,
   InlineConfigProviderSpec,
   KubernetesSecretProviderSpec,
 } from '@flightctl/types';
+import { FlightCtlLabel } from './extraTypes';
+import { UpdateScheduleMode } from '../utils/time';
+import { ApplicationProviderSpecFixed } from './extraTypes';
 
 export enum ConfigType {
   GIT = 'git',
@@ -26,6 +32,33 @@ export type GitConfigTemplate = ConfigTemplate & {
   mountPath?: string;
 };
 
+export enum AppSpecType {
+  OCI_IMAGE = 'image',
+  INLINE = 'inline',
+}
+
+type InlineContent = {
+  content?: string;
+  path: string;
+  base64?: boolean;
+};
+
+type AppBase = {
+  specType: AppSpecType;
+  // appType: AppType - commented out for now, since it only accepts one value ("compose")
+  name?: string;
+  variables: { name: string; value: string }[];
+};
+
+export type InlineAppForm = AppBase & {
+  name: string; // name can only be optional for image applications
+  files: InlineContent[];
+};
+
+export type ImageAppForm = AppBase & {
+  image: string;
+};
+
 export const isGitConfigTemplate = (configTemplate: ConfigTemplate): configTemplate is GitConfigTemplate =>
   configTemplate.type === ConfigType.GIT;
 
@@ -43,7 +76,25 @@ export type RepoConfig = GitConfigProviderSpec | HttpConfigProviderSpec;
 export const isRepoConfig = (config: ConfigSourceProvider): config is RepoConfig =>
   isGitProviderSpec(config) || isHttpProviderSpec(config);
 
-const hasTemplateVariables = (str: string) => /device.metadata/.test(str);
+export type AppForm = ImageAppForm | InlineAppForm;
+
+export const isInlineAppProvider = (app: ApplicationProviderSpecFixed): app is InlineApplicationProviderSpec =>
+  'inline' in app;
+export const isImageAppProvider = (app: ApplicationProviderSpecFixed): app is ImageApplicationProviderSpec =>
+  'image' in app;
+
+export const isImageAppForm = (app: AppBase): app is ImageAppForm => app.specType === AppSpecType.OCI_IMAGE;
+export const isInlineAppForm = (app: AppBase): app is InlineAppForm => app.specType === AppSpecType.INLINE;
+
+const hasTemplateVariables = (str: string) => /{{.+?}}/.test(str);
+
+export const getAppIdentifier = (app: AppForm) => {
+  if (isImageAppForm(app)) {
+    return app.name || app.image;
+  }
+  // Name is mandatory for inline applications
+  return app.name;
+};
 
 export const getConfigFullRepoUrl = (config: RepoConfig, repositoryUrl: string) => {
   let relativePath: string = '';
@@ -84,7 +135,7 @@ export const isKubeProviderSpec = (providerSpec: ConfigProviderSpec): providerSp
 
 export type InlineConfigTemplate = ConfigTemplate & {
   type: ConfigType.INLINE;
-  files: Array<{ path: string; content: string; base64: boolean; permissions?: string; user?: string; group?: string }>;
+  files: Array<InlineContent & { permissions?: string; user?: string; group?: string }>;
 };
 
 export const isInlineConfigTemplate = (configTemplate: ConfigTemplate): configTemplate is InlineConfigTemplate =>
@@ -108,3 +159,68 @@ export const isHttpProviderSpec = (providerSpec: ConfigProviderSpec): providerSp
   'httpRef' in providerSpec;
 
 export type SpecConfigTemplate = GitConfigTemplate | HttpConfigTemplate | KubeSecretTemplate | InlineConfigTemplate;
+export type SystemdUnitFormValue = {
+  pattern: string;
+  exists: boolean;
+};
+
+export type DeviceSpecConfigFormValues = {
+  osImage?: string;
+  configTemplates: SpecConfigTemplate[];
+  applications: AppForm[];
+  systemdUnits: SystemdUnitFormValue[];
+  updatePolicy: UpdatePolicyForm;
+  registerMicroShift: boolean;
+};
+
+export type EditDeviceFormValues = DeviceSpecConfigFormValues & {
+  deviceAlias: string;
+  labels: FlightCtlLabel[];
+  fleetMatch: string;
+};
+
+export type FleetFormValues = DeviceSpecConfigFormValues & {
+  name: string;
+  fleetLabels: FlightCtlLabel[];
+  labels: FlightCtlLabel[];
+  rolloutPolicy: RolloutPolicyForm;
+  disruptionBudget: DisruptionBudgetForm;
+  updatePolicy: UpdatePolicyForm;
+};
+
+export enum BatchLimitType {
+  BatchLimitPercent = 'percent',
+  BatchLimitAbsoluteNumber = 'value',
+}
+
+export type BatchForm = {
+  selector: FlightCtlLabel[];
+  limit?: number;
+  limitType: BatchLimitType;
+  successThreshold?: number;
+};
+
+export type RolloutPolicyForm = {
+  isAdvanced: boolean;
+  updateTimeout: number;
+  batches: BatchForm[];
+};
+
+export type DisruptionBudgetForm = DisruptionBudget & {
+  isAdvanced: boolean;
+};
+
+export type UpdatePolicyForm = {
+  isAdvanced: boolean;
+  downloadAndInstallDiffer: boolean;
+  downloadStartsAt?: string;
+  downloadEndsAt?: string;
+  downloadScheduleMode: UpdateScheduleMode;
+  downloadWeekDays: boolean[];
+  downloadTimeZone: string;
+  installStartsAt?: string;
+  installEndsAt?: string;
+  installScheduleMode: UpdateScheduleMode;
+  installWeekDays: boolean[];
+  installTimeZone: string;
+};

package/src/types/extraTypes.ts

@@ -1,4 +1,15 @@
-import { ConditionType, Device, EnrollmentRequest, Fleet, ResourceSync } from '@flightctl/types';
+import {
+  AppType,
+  ApplicationEnvVars,
+  ConditionType,
+  Device,
+  EnrollmentRequest,
+  FileContent,
+  Fleet,
+  ImageApplicationProviderSpec,
+  RelativePath,
+  ResourceSync,
+} from '@flightctl/types';
 
 export enum FlightControlMetrics {
   ACTIVE_AGENT_COUNT_METRIC = 'flightctl_devicesimulator_active_agent_count',
@@ -50,3 +61,24 @@ export const isEnrollmentRequest = (resource: Device | EnrollmentRequest): resou
 export type AnnotationType = DeviceAnnotation; // Add more types when they are added to the API
 
 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
+export type InlineApplicationFileFixed = FileContent & RelativePath;
+
+// "FixedApplicationProviderSpec" will need to be manually adjusted whenever the API definition changes
+export type ApplicationProviderSpecFixed = ApplicationEnvVars & {
+  name?: string;
+  appType?: AppType;
+} & (ImageApplicationProviderSpec | { inline: InlineApplicationFileFixed[] });
+
+type CliArtifact = {
+  os: string;
+  arch: string;
+  filename: string;
+  sha256: string;
+};
+
+export type CliArtifactsResponse = {
+  baseUrl: string;
+  artifacts: CliArtifact[];
+};

package/src/utils/labels.ts

@@ -22,8 +22,14 @@ export const toAPILabel = (labels: FlightCtlLabel[]): Record<string, string> =>
     {} as Record<string, string>,
   );
 
-// Used to force the API to perform an exact match check for labels
 export const labelToExactApiMatchString = (label: FlightCtlLabel) => `${label.key}=${label.value || ''}`;
+export const textToPartialApiMatchString = (text: string) => {
+  if (text.includes('=')) {
+    const [key, value] = text.split('=');
+    return value ? `metadata.labels.key=${key},metadata.labels.value contains ${value}` : `metadata.label.key=${key}`;
+  }
+  return `metadata.labels.keyOrValue contains ${text}`;
+};
 
 export const labelToString = (label: FlightCtlLabel) => `${label.key}${label.value ? `=${label.value}` : ''}`;
 

package/src/utils/patch.ts

@@ -1,16 +1,24 @@
-import { ApplicationSpec, BatchSequence, DisruptionBudget, PatchRequest, RolloutPolicy } from '@flightctl/types';
+import {
+  BatchSequence,
+  DeviceUpdatePolicySpec,
+  DisruptionBudget,
+  PatchRequest,
+  RolloutPolicy,
+  UpdateSchedule,
+} from '@flightctl/types';
 import isNil from 'lodash/isNil';
 
 import { FlightCtlLabel } from '../types/extraTypes';
 import { toAPILabel } from './labels';
-import { ApplicationFormSpec } from '../components/Device/EditDeviceWizard/types';
 import {
   BatchForm,
   BatchLimitType,
   DisruptionBudgetForm,
   FleetFormValues,
   RolloutPolicyForm,
-} from '../components/Fleet/CreateFleet/types';
+  UpdatePolicyForm,
+} from '../types/deviceSpec';
+import { getStartGraceDuration, getUpdateCronExpression, localDeviceTimezone } from './time';
 
 export const appendJSONPatch = <V = unknown>({
   patches,
@@ -127,6 +135,112 @@ const toApiDisruptionBudget = (disruptionValues: DisruptionBudgetForm) => {
   return data;
 };
 
+export const schedulesAreEqual = (a: UpdateSchedule | undefined, b: UpdateSchedule | undefined) => {
+  if (!a && !b) {
+    return true;
+  }
+  if (!a || !b) {
+    return false;
+  }
+  if (a.at !== b.at) {
+    return false;
+  }
+  if ((a.timeZone || localDeviceTimezone) !== (b.timeZone || localDeviceTimezone)) {
+    return false;
+  }
+  return (a.startGraceDuration || '0s') === (b.startGraceDuration || '0s');
+};
+
+export const updatePolicyFormToApi = (form: Required<UpdatePolicyForm>) => {
+  const downloadSchedule = {
+    at: getUpdateCronExpression(form.downloadStartsAt, form.downloadScheduleMode, form.downloadWeekDays),
+    startGraceDuration: getStartGraceDuration(form.downloadStartsAt, form.downloadEndsAt),
+    timeZone: form.downloadTimeZone === localDeviceTimezone ? undefined : form.downloadTimeZone,
+  };
+  let updateSchedule: UpdateSchedule;
+  if (form.downloadAndInstallDiffer) {
+    updateSchedule = {
+      at: getUpdateCronExpression(form.installStartsAt, form.installScheduleMode, form.installWeekDays),
+      startGraceDuration: getStartGraceDuration(form.installStartsAt, form.installEndsAt),
+      timeZone: form.installTimeZone === localDeviceTimezone ? undefined : form.installTimeZone,
+    };
+  } else {
+    updateSchedule = { ...downloadSchedule };
+  }
+  return {
+    downloadSchedule,
+    updateSchedule,
+  };
+};
+
+export const getUpdatePolicyPatches = (
+  basePath: string,
+  currentPolicy: DeviceUpdatePolicySpec | undefined,
+  form: Required<UpdatePolicyForm>,
+): PatchRequest => {
+  // Switching from basic mode to advanced or viceversa
+  if (!currentPolicy) {
+    return form.isAdvanced
+      ? ([
+          {
+            op: 'add',
+            path: basePath,
+            value: updatePolicyFormToApi(form),
+          },
+        ] as PatchRequest)
+      : [];
+  } else if (!form.isAdvanced) {
+    return [
+      {
+        op: 'remove',
+        path: basePath,
+      },
+    ] as PatchRequest;
+  }
+
+  // Making changes to existing advaced settings
+  const updatePatches: PatchRequest = [];
+  const { downloadSchedule: newDownloadSched, updateSchedule: newInstallSched } = updatePolicyFormToApi(form);
+  if (!schedulesAreEqual(currentPolicy.downloadSchedule, newDownloadSched)) {
+    if (form.downloadAndInstallDiffer) {
+      updatePatches.push({
+        op: currentPolicy.downloadSchedule ? 'replace' : 'add',
+        path: `${basePath}/downloadSchedule`,
+        value: newDownloadSched,
+      });
+    } else {
+      updatePatches.push({
+        op: 'replace',
+        path: basePath,
+        value: {
+          downloadSchedule: newDownloadSched,
+          updateSchedule: newInstallSched,
+        },
+      });
+    }
+  } else if (!form.downloadAndInstallDiffer) {
+    // DownloadSchedule did not change. Check if they just unchecked "useDifferent" and updateSchedule must be changed?
+    if (!schedulesAreEqual(currentPolicy.updateSchedule, newDownloadSched)) {
+      // Important: we are using downloadSchedule here since we don't copy settings from download to update when
+      // the checkbox for "useDifferent" is unchecked
+      updatePatches.push({
+        op: currentPolicy.updateSchedule ? 'replace' : 'add',
+        path: `${basePath}/updateSchedule`,
+        value: newDownloadSched,
+      });
+    }
+  }
+  if (form.downloadAndInstallDiffer && !schedulesAreEqual(currentPolicy.updateSchedule, newInstallSched)) {
+    updatePatches.push({
+      op: currentPolicy.updateSchedule ? 'replace' : 'add',
+      path: `${basePath}/updateSchedule`,
+      value: newInstallSched,
+    });
+  }
+
+  return updatePatches;
+};
+
 export const getRolloutPolicyData = ({ rolloutPolicy, disruptionBudget }: FleetFormValues) => {
   const newRolloutPolicy: RolloutPolicy = {};
   if (rolloutPolicy.isAdvanced) {
@@ -301,76 +415,16 @@ export const getLabelPatches = (
   return patches;
 };
 
-export const toAPIApplication = (app: ApplicationFormSpec): ApplicationSpec => {
-  const envVars = app.variables.reduce((acc, variable) => {
-    acc[variable.name] = variable.value;
-    return acc;
-  }, {});
-
-  return app.name
-    ? {
-        name: app.name,
-        image: app.image,
-        envVars,
-      }
-    : {
-        // Name must not be sent, otherwise the API expects it to have a value
-        image: app.image,
-        envVars,
-      };
-};
-
-export const getApplicationPatches = (
-  basePath: string,
-  currentApps: ApplicationSpec[],
-  updatedApps: ApplicationFormSpec[],
+export const getDeviceLabelPatches = (
+  currentLabels: Record<string, string>,
+  newLabels: FlightCtlLabel[],
+  newAlias?: string,
 ) => {
-  const patches: PatchRequest = [];
+  let allNewLabels = newLabels;
 
-  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),
-    });
-  } else if (currentLen > 0 && newLen === 0) {
-    // Last app(s) have been removed
-    patches.push({
-      path: `${basePath}/applications`,
-      op: 'remove',
-    });
-  } else if (currentLen !== newLen) {
-    patches.push({
-      path: `${basePath}/applications`,
-      op: 'replace',
-      value: updatedApps.map(toAPIApplication),
-    });
-  } else {
-    const needsPatch = currentApps.some((currentApp, index) => {
-      const updatedApp = updatedApps[index];
-      if (updatedApp.name !== currentApp.name || updatedApp.image !== currentApp.image) {
-        return true;
-      }
-      const currentVars = Object.entries(currentApp.envVars || {});
-      if (currentVars.length !== updatedApp.variables.length) {
-        return true;
-      }
-      return updatedApp.variables.some((variable) => {
-        const currentValue = currentApp.envVars ? currentApp.envVars[variable.name] : undefined;
-        return !currentValue || currentValue !== variable.value;
-      });
-    });
-    if (needsPatch) {
-      patches.push({
-        path: `${basePath}/applications`,
-        op: 'replace',
-        value: updatedApps.map(toAPIApplication),
-      });
-    }
+  const currentAlias = newAlias || currentLabels['alias']; // The "alias" label is not allowed for devices, we need to add it back
+  if (currentAlias) {
+    allNewLabels = newLabels.concat([{ key: 'alias', value: currentAlias }]);
   }
-
-  return patches;
+  return getLabelPatches('/metadata/labels', currentLabels, allNewLabels);
 };