@flightctl/ui-components 0.5.1 → 0.6.0-rc2

package/src/components/Device/EditDeviceWizard/steps/ConfigWithRepositoryTemplateForm.tsx

@@ -6,13 +6,12 @@ import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exc
 import { TFunction, Trans } from 'react-i18next';
 
 import { RepoSpecType, Repository } from '@flightctl/types';
-import { GitConfigTemplate, HttpConfigTemplate } from '../../../../types/deviceSpec';
+import { DeviceSpecConfigFormValues, GitConfigTemplate, HttpConfigTemplate } from '../../../../types/deviceSpec';
 import { useTranslation } from '../../../../hooks/useTranslation';
-import { DeviceSpecConfigFormValues } from '../types';
 import TextField from '../../../form/TextField';
 import FormSelect from '../../../form/FormSelect';
 import CreateRepositoryModal from '../../../modals/CreateRepositoryModal/CreateRepositoryModal';
-import WithHelperText from '../../../common/WithHelperText';
+import { FormGroupWithHelperText } from '../../../common/WithHelperText';
 
 type ConfigWithRepositoryTemplateFormProps = {
   repoType: RepoSpecType;
@@ -66,14 +65,9 @@ const GitConfigForm = ({ template, index }: { template: GitConfigTemplate; index
           value={template.targetRevision}
         />
       </FormGroup>
-      <FormGroup
-        label={
-          <WithHelperText
-            ariaLabel={t('Path')}
-            content={t('Path in the repository where the configuration file(s) are located')}
-            showLabel
-          />
-        }
+      <FormGroupWithHelperText
+        label={t('Path')}
+        content={t('Path in the repository where the configuration files are located.')}
         isRequired
       >
         <TextField
@@ -82,16 +76,11 @@ const GitConfigForm = ({ template, index }: { template: GitConfigTemplate; index
           value={template.path}
           placeholder={t('/absolute/path')}
         />
-      </FormGroup>
-      <FormGroup
+      </FormGroupWithHelperText>
+      <FormGroupWithHelperText
+        label={t('Mount path')}
+        content={t('Path in the device where the configurations will be stored.')}
         isRequired
-        label={
-          <WithHelperText
-            ariaLabel={t('Mount path')}
-            content={t('Path in the device where the configurations will be stored')}
-            showLabel
-          />
-        }
       >
         <TextField
           aria-label={t('Mount path')}
@@ -99,7 +88,7 @@ const GitConfigForm = ({ template, index }: { template: GitConfigTemplate; index
           value={template.mountPath}
           placeholder={t('/absolute/path')}
         />
-      </FormGroup>
+      </FormGroupWithHelperText>
     </>
   );
 };
@@ -129,16 +118,11 @@ const HttpConfigForm = ({
 
   return (
     <>
-      <FormGroup
+      <FormGroupWithHelperText
         label={t('Suffix')}
-        labelIcon={
-          <WithHelperText
-            ariaLabel={t('Suffix')}
-            content={t(
-              "Suffix that will be combined with the repository's base URL to invoke the HTTP service. Can include query parameters.",
-            )}
-          />
-        }
+        content={t(
+          "Suffix that will be combined with the repository's base URL to invoke the HTTP service. Can include query parameters.",
+        )}
       >
         <TextField
           aria-label={t('Suffix')}
@@ -146,15 +130,10 @@ const HttpConfigForm = ({
           value={template.suffix || ''}
           helperText={suffixHelperText}
         />
-      </FormGroup>
-      <FormGroup
+      </FormGroupWithHelperText>
+      <FormGroupWithHelperText
         label={t('File path')}
-        labelIcon={
-          <WithHelperText
-            ariaLabel={t('File path')}
-            content={t('Path of the file where the response will be stored in the device filesystem.')}
-          />
-        }
+        content={t('Path of the file where the response will be stored in the device filesystem.')}
         isRequired
       >
         <TextField
@@ -163,7 +142,7 @@ const HttpConfigForm = ({
           value={template.filePath || ''}
           placeholder={t('/absolute/path')}
         />
-      </FormGroup>
+      </FormGroupWithHelperText>
     </>
   );
 };

package/src/components/Device/EditDeviceWizard/steps/ConfigurationTemplates.tsx

@@ -16,12 +16,11 @@ import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-cir
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 
 import { RepoSpecType, Repository, RepositoryList } from '@flightctl/types';
-import { ConfigType, SpecConfigTemplate } from '../../../../types/deviceSpec';
-import { DeviceSpecConfigFormValues } from '../types';
+import { ConfigType, DeviceSpecConfigFormValues, SpecConfigTemplate } from '../../../../types/deviceSpec';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
 import { getErrorMessage } from '../../../../utils/error';
-import WithHelperText from '../../../common/WithHelperText';
+import { FormGroupWithHelperText } from '../../../common/WithHelperText';
 import { getDnsSubdomainValidations } from '../../../form/validations';
 import ErrorHelperText from '../../../form/FieldHelperText';
 import FormSelect from '../../../form/FormSelect';
@@ -124,16 +123,11 @@ const ConfigurationTemplatesForm = ({ repositories, repoRefetch, canCreateRepo,
   const generalError = typeof errors.configTemplates === 'string' ? errors.configTemplates : undefined;
 
   return (
-    <FormGroup
-      label={
-        <WithHelperText
-          ariaLabel={t('Host configurations (files)')}
-          content={t(
-            "Define configuration files that shall be present on the device's file system. For example: systemd service config, network config, firewall config, etc.",
-          )}
-          showLabel
-        />
-      }
+    <FormGroupWithHelperText
+      label={t('Host configurations (files)')}
+      content={t(
+        "Define configuration files that shall be present on the device's file system. For example: systemd service config, network config, firewall config, etc.",
+      )}
     >
       <FieldArray name="configTemplates">
         {({ push, remove }) => (
@@ -183,7 +177,7 @@ const ConfigurationTemplatesForm = ({ repositories, repoRefetch, canCreateRepo,
           </>
         )}
       </FieldArray>
-    </FormGroup>
+    </FormGroupWithHelperText>
   );
 };
 

package/src/components/Device/EditDeviceWizard/steps/DeviceTemplateStep.tsx

@@ -1,23 +1,22 @@
 import * as React from 'react';
-import { Alert, Button, CodeBlock, CodeBlockCode, FormGroup, Grid, Spinner } from '@patternfly/react-core';
+import { Alert, CodeBlock, CodeBlockCode, FormGroup, Grid, Spinner } from '@patternfly/react-core';
 import { FormikErrors, useFormikContext } from 'formik';
 import { Trans } from 'react-i18next';
 import { Repository } from '@flightctl/types';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
-import { USING_TEMPLATE_VARIABLES_LINK } from '../../../../links';
+import { CREATE_ACM_REPOSITORY, USING_TEMPLATE_VARIABLES_LINK } from '../../../../links';
 import { useTranslation } from '../../../../hooks/useTranslation';
-import WithHelperText from '../../../common/WithHelperText';
+import LabelWithHelperText, { FormGroupWithHelperText } from '../../../common/WithHelperText';
 import LearnMoreLink from '../../../common/LearnMoreLink';
 import TextField from '../../../form/TextField';
 import FlightCtlForm from '../../../form/FlightCtlForm';
-import { DeviceSpecConfigFormValues } from '../types';
+import { DeviceSpecConfigFormValues } from '../../../../types/deviceSpec';
 import ConfigurationTemplates from './ConfigurationTemplates';
 import ApplicationsForm from './ApplicationTemplates';
 import SystemdUnitsForm from './SystemdUnitsForm';
 import CheckboxField from '../../../form/CheckboxField';
 import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
-import { useAppContext } from '../../../../hooks/useAppContext';
+import { FlightCtlApp, useAppContext } from '../../../../hooks/useAppContext';
 import { ACM_REPO_NAME } from '../deviceSpecUtils';
 
 export const deviceTemplateStepId = 'device-template';
@@ -50,8 +49,8 @@ const MicroShiftCheckbox = ({ isFleet }: { isFleet: boolean }) => {
             isFleet ? (
               <>
                 {t('Register all MicroShift devices to ACM')}
-                <WithHelperText
-                  ariaLabel="MicroShift registration"
+                <LabelWithHelperText
+                  label="MicroShift registration"
                   content={
                     <>
                       {t(
@@ -63,13 +62,14 @@ const MicroShiftCheckbox = ({ isFleet }: { isFleet: boolean }) => {
                       )}
                     </>
                   }
+                  hideLabel
                 />
               </>
             ) : (
               <>
                 {t('Register this MicroShift device to ACM')}
-                <WithHelperText
-                  ariaLabel="MicroShift registration"
+                <LabelWithHelperText
+                  label="MicroShift registration"
                   content={
                     <>
                       {t('Select this when the device is running MicroShift and you want to register it to ACM.')}
@@ -79,6 +79,7 @@ const MicroShiftCheckbox = ({ isFleet }: { isFleet: boolean }) => {
                       )}
                     </>
                   }
+                  hideLabel
                 />
               </>
             )
@@ -88,21 +89,12 @@ const MicroShiftCheckbox = ({ isFleet }: { isFleet: boolean }) => {
       </FormGroup>
       {isDisabled && (
         <FormGroup>
-          <Alert variant="warning" title={t(`'${ACM_REPO_NAME}' repository not found.`)} isInline>
-            <Trans t={t}>
-              To re-create the repository,{' '}
-              <Button
-                component="a"
-                variant="link"
-                isInline
-                href="https://github.com/flightctl/flightctl/blob/main/docs/user/registering-microshift-devices-acm.md#creating-repositories-in-flight-control"
-                target="_blank"
-                icon={<ExternalLinkAltIcon />}
-                iconPosition="end"
-              >
-                View documentation
-              </Button>
-            </Trans>
+          <Alert variant="warning" title={t('Cannot register MicroShift devices')} isInline>
+            {t(`{{ repository }} repository is missing. To re-create the repository`, {
+              repository: `'${ACM_REPO_NAME}'`,
+            })}
+            {', '}
+            <LearnMoreLink link={CREATE_ACM_REPOSITORY} text={t('view documentation')} />
           </Alert>
         </FormGroup>
       )}
@@ -130,17 +122,12 @@ const DeviceTemplateStep = ({ isFleet }: { isFleet: boolean }) => {
             <LearnMoreLink link={USING_TEMPLATE_VARIABLES_LINK} />
           </Alert>
         )}
-        <FormGroup
-          label={
-            <WithHelperText
-              ariaLabel={t('System image')}
-              content={
-                isFleet
-                  ? t("The target system image for this fleet's devices.")
-                  : t('The target system image for this device.')
-              }
-              showLabel
-            />
+        <FormGroupWithHelperText
+          label={t('System image')}
+          content={
+            isFleet
+              ? t("The target system image for this fleet's devices.")
+              : t('The target system image for this device.')
           }
         >
           <TextField
@@ -148,10 +135,10 @@ const DeviceTemplateStep = ({ isFleet }: { isFleet: boolean }) => {
             aria-label={t('System image')}
             value={values.osImage}
             helperText={t(
-              'Must be a reference to a bootable container image (e.g. "quay.io/<my-org>/my-rhel-with-fc-agent:<version>"). When left empty, the device\'s existing OS will be kept unchanged.',
+              'Must be a reference to a bootable container image (such as "quay.io/<my-org>/my-rhel-with-fc-agent:<version>"). If you do not want to manage your OS from Edge management, leave this field empty.',
             )}
           />
-        </FormGroup>
+        </FormGroupWithHelperText>
         <FormGroup>
           <ConfigurationTemplates />
         </FormGroup>
@@ -163,7 +150,7 @@ const DeviceTemplateStep = ({ isFleet }: { isFleet: boolean }) => {
             <SystemdUnitsForm />
           </FormGroup>
         )}
-        {appType === 'ocp' && <MicroShiftCheckbox isFleet={isFleet} />}
+        {appType === FlightCtlApp.OCP && <MicroShiftCheckbox isFleet={isFleet} />}
       </FlightCtlForm>
     </Grid>
   );

package/src/components/Device/EditDeviceWizard/steps/DeviceUpdateStep.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { Alert, Checkbox, FormGroup, Grid, Title } from '@patternfly/react-core';
+import { FormikErrors, useFormikContext } from 'formik';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import UpdateConfirmChangesModal from '../../../Fleet/CreateFleet/steps/UpdateConfirmChangesModal';
+import UpdateStepUpdatePolicy from '../../../Fleet/CreateFleet/steps/UpdateStepUpdatePolicy';
+import { getEmptyUpdateFormParams } from '../../../Fleet/CreateFleet/fleetSpecUtils';
+
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import { DeviceSpecConfigFormValues } from '../../../../types/deviceSpec';
+import { FormGroupWithHelperText } from '../../../common/WithHelperText';
+
+export const deviceUpdatePolicyStepId = 'update-policy';
+
+export const isUpdatePolicyStepValid = (errors: FormikErrors<DeviceSpecConfigFormValues>) => !errors.updatePolicy;
+
+const UpdatePolicyStep = () => {
+  const { t } = useTranslation();
+
+  const {
+    values: { updatePolicy },
+    setFieldValue,
+    setFieldTouched,
+  } = useFormikContext<DeviceSpecConfigFormValues>();
+
+  const [alertSwitchToBasic, setAlertSwitchToBasic] = React.useState<boolean>();
+  const hasAdvancedMode = updatePolicy.isAdvanced;
+
+  const onChangeUpdatePolicy = async (toAdvanced: boolean) => {
+    if (toAdvanced) {
+      await setFieldTouched('updatePolicy', true);
+    } else {
+      await setFieldValue('updatePolicy', getEmptyUpdateFormParams(), true);
+    }
+  };
+
+  const onAdvancedEnableChange = (toAdvanced: boolean) => {
+    if (toAdvanced) {
+      setFieldValue('updatePolicy.isAdvanced', true);
+      onChangeUpdatePolicy(true);
+    } else {
+      setAlertSwitchToBasic(true);
+    }
+  };
+
+  const onModalClose = (doSwitch: boolean) => {
+    setAlertSwitchToBasic(false);
+    if (doSwitch) {
+      onChangeUpdatePolicy(false);
+    }
+  };
+
+  return (
+    <Grid lg={8}>
+      <FlightCtlForm>
+        <FormGroup>
+          <Checkbox
+            label={t('Use basic configurations')}
+            isChecked={!hasAdvancedMode}
+            id="basic-update-configuration"
+            onChange={(_ev: React.FormEvent<HTMLInputElement>, toBasic: boolean) => {
+              onAdvancedEnableChange(!toBasic);
+            }}
+          />
+        </FormGroup>
+        {hasAdvancedMode ? (
+          <>
+            <Title headingLevel="h3">{t('Advanced configurations')}</Title>
+            <FormGroupWithHelperText
+              label={t('Update policies')}
+              content={t('Update policies allow you to control when updates should be downloaded and applied.')}
+            >
+              <UpdateStepUpdatePolicy />
+            </FormGroupWithHelperText>
+          </>
+        ) : (
+          <Alert isInline variant="info" title={t('Default update policy')}>
+            {t('The device will download and apply updates as soon as they are available.')}
+          </Alert>
+        )}
+        {alertSwitchToBasic && <UpdateConfirmChangesModal setting="update-policies" onClose={onModalClose} />}
+      </FlightCtlForm>
+    </Grid>
+  );
+};
+
+export default UpdatePolicyStep;

package/src/components/Device/EditDeviceWizard/steps/GeneralInfoStep.tsx

@@ -9,7 +9,7 @@ import LabelsField from '../../../form/LabelsField';
 import RichValidationTextField from '../../../form/RichValidationTextField';
 import { getLabelValueValidations } from '../../../form/validations';
 import DeviceLabelMatch from '../../../modals/ApproveDeviceModal/DeviceLabelMatch';
-import { EditDeviceFormValues } from '../types';
+import { EditDeviceFormValues } from '../../../../types/deviceSpec';
 
 export const generalInfoStepId = 'general-info';
 

package/src/components/Device/EditDeviceWizard/steps/ReviewApplications.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Flex, FlexItem, Label, Stack, StackItem } from '@patternfly/react-core';
+import { Stack, StackItem } from '@patternfly/react-core';
 
-import { ApplicationFormSpec } from '../types';
 import { useTranslation } from '../../../../hooks/useTranslation';
+import { AppForm, getAppIdentifier, isInlineAppForm } from '../../../../types/deviceSpec';
 
-const ReviewApplications = ({ apps }: { apps: ApplicationFormSpec[] }) => {
+const ReviewApplications = ({ apps }: { apps: AppForm[] }) => {
   const { t } = useTranslation();
   if (apps.length === 0) {
     return '-';
@@ -12,22 +12,21 @@ const ReviewApplications = ({ apps }: { apps: ApplicationFormSpec[] }) => {
 
   return (
     <Stack hasGutter>
-      {apps.map((app, index) => (
-        <StackItem key={`${app.image}_${index}`}>
-          <Flex>
-            <FlexItem>
-              {app.name || t('Unnamed')} ({app.image})
-            </FlexItem>
-            {app.variables.map((variable, index) => (
-              <FlexItem key={`var-${variable.name}_${index}`}>
-                <Label color="blue">
-                  {variable.name}={variable.value}
-                </Label>
-              </FlexItem>
-            ))}
-          </Flex>
-        </StackItem>
-      ))}
+      {apps.map((app, index) => {
+        const isInlineApp = isInlineAppForm(app);
+        const type = isInlineApp ? t('Inline') : t('Image based');
+        let name: string = '';
+        if (isInlineApp || app.name) {
+          name = app.name as string;
+        } else if (app.image) {
+          name = `${t('Unnamed')} (${app.image})`;
+        }
+        return (
+          <StackItem key={`${getAppIdentifier(app)}_${index}`}>
+            {name} ({type})
+          </StackItem>
+        );
+      })}
     </Stack>
   );
 };

package/src/components/Device/EditDeviceWizard/steps/ReviewDeviceStep.tsx

@@ -9,14 +9,14 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 
-import { EditDeviceFormValues } from '../types';
+import { EditDeviceFormValues } from '../../../../types/deviceSpec';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import LabelsView from '../../../common/LabelsView';
 import { toAPILabel } from '../../../../utils/labels';
 import { getErrorMessage } from '../../../../utils/error';
 import FlightControlDescriptionList from '../../../common/FlightCtlDescriptionList';
 import RepositorySourceList from '../../../Repository/RepositoryDetails/RepositorySourceList';
-import { getAPIConfig } from '../deviceSpecUtils';
+import { getApiConfig } from '../deviceSpecUtils';
 import ReviewApplications from './ReviewApplications';
 
 export const reviewDeviceStepId = 'review-device';
@@ -63,7 +63,7 @@ const ReviewStep = ({ error }: { error?: string }) => {
             <DescriptionListGroup>
               <DescriptionListTerm>{t('Configurations')}</DescriptionListTerm>
               <DescriptionListDescription>
-                <RepositorySourceList configs={values.configTemplates.map(getAPIConfig)} />
+                <RepositorySourceList configs={values.configTemplates.map(getApiConfig)} />
               </DescriptionListDescription>
             </DescriptionListGroup>
           )}

package/src/components/Device/EditDeviceWizard/steps/ReviewTrackedSystemdServices.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Label, LabelGroup } from '@patternfly/react-core';
-import { SystemdUnitFormValue } from '../../SystemdUnitsModal/TrackSystemdUnitsForm';
+import { SystemdUnitsFormValues } from '../../SystemdUnitsModal/TrackSystemdUnitsForm';
 
-const ReviewTrackedSystemdServices = ({ systemdUnits }: { systemdUnits: SystemdUnitFormValue[] }) => {
+const ReviewTrackedSystemdServices = ({ systemdUnits }: SystemdUnitsFormValues) => {
   if (systemdUnits.length === 0) {
     return '-';
   }

package/src/components/Device/EditDeviceWizard/steps/ReviewUpdatePolicy.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
 
-import { DisruptionBudgetForm, RolloutPolicyForm } from '../../../Fleet/CreateFleet/types';
+import { DisruptionBudgetForm, RolloutPolicyForm } from '../../../../types/deviceSpec';
+
 import { useTranslation } from '../../../../hooks/useTranslation';
 import LabelsView from '../../../common/LabelsView';
 

package/src/components/Device/EditDeviceWizard/steps/SystemdUnitsForm.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Label, LabelGroup } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 
-import { DeviceSpecConfigFormValues } from '../types';
+import { DeviceSpecConfigFormValues } from '../../../../types/deviceSpec';
 import { useTranslation } from '../../../../hooks/useTranslation';
 
 import ErrorHelperText from '../../../form/FieldHelperText';

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

@@ -7,15 +7,17 @@ import {
   validKubernetesLabelValue,
   validLabelsSchema,
   validOsImage,
+  validUpdatePolicySchema,
 } from '../../form/validations';
-import { appendJSONPatch, getApplicationPatches, getLabelPatches } from '../../../utils/patch';
+import { appendJSONPatch, getDeviceLabelPatches, getUpdatePolicyPatches } from '../../../utils/patch';
 import { Device, PatchRequest } from '@flightctl/types';
-import { EditDeviceFormValues } from './types';
+import { EditDeviceFormValues, UpdatePolicyForm } from './../../../types/deviceSpec';
 import {
   ACMCrdConfig,
   ACMImportConfig,
   MicroshiftRegistrationHook,
-  getAPIConfig,
+  getApiConfig,
+  getApplicationPatches,
   getDeviceSpecConfigPatches,
 } from './deviceSpecUtils';
 
@@ -27,6 +29,7 @@ export const getValidationSchema = (t: TFunction) =>
       labels: validLabelsSchema(t),
       configTemplates: validConfigTemplatesSchema(t),
       applications: validApplicationsSchema(t),
+      updatePolicy: validUpdatePolicySchema(t),
     }),
   );
 
@@ -37,11 +40,7 @@ export const getDevicePatches = (currentDevice: Device, updatedDevice: EditDevic
   const currentLabels = currentDevice.metadata.labels || {};
   const updatedLabels = [...updatedDevice.labels];
 
-  if (updatedDevice.deviceAlias) {
-    updatedLabels.push({ key: 'alias', value: updatedDevice.deviceAlias });
-  }
-
-  const deviceLabelPatches = getLabelPatches('/metadata/labels', currentLabels, updatedLabels);
+  const deviceLabelPatches = getDeviceLabelPatches(currentLabels, updatedLabels, updatedDevice.deviceAlias);
   allPatches = allPatches.concat(deviceLabelPatches);
 
   if (updatedDevice.fleetMatch) {
@@ -74,7 +73,7 @@ export const getDevicePatches = (currentDevice: Device, updatedDevice: EditDevic
 
   // Configurations
   const currentConfigs = currentDevice.spec?.config || [];
-  const newConfigs = updatedDevice.configTemplates.map(getAPIConfig);
+  const newConfigs = updatedDevice.configTemplates.map(getApiConfig);
   if (updatedDevice.registerMicroShift) {
     newConfigs.push(ACMCrdConfig, ACMImportConfig, MicroshiftRegistrationHook);
   }
@@ -85,5 +84,13 @@ export const getDevicePatches = (currentDevice: Device, updatedDevice: EditDevic
   const appPatches = getApplicationPatches('/spec', currentDevice.spec?.applications || [], updatedDevice.applications);
   allPatches = allPatches.concat(appPatches);
 
+  // Updates
+  const updatesPatches = getUpdatePolicyPatches(
+    '/spec/updatePolicy',
+    currentDevice.spec?.updatePolicy,
+    updatedDevice.updatePolicy as Required<UpdatePolicyForm>,
+  );
+  allPatches = allPatches.concat(updatesPatches);
+
   return allPatches;
 };

package/src/components/Device/SystemdUnitsModal/SystemdUnitsModal.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from '../../../hooks/useTranslation';
 import { getErrorMessage } from '../../../utils/error';
 import { getStringListPatches } from '../../../utils/patch';
 import { deviceSystemdUnitsValidationSchema } from '../../form/validations';
-import TrackSystemdUnitsForm, { SystemdUnitFormValue, SystemdUnitsFormValues } from './TrackSystemdUnitsForm';
+import TrackSystemdUnitsForm, { SystemdUnitsFormValues } from './TrackSystemdUnitsForm';
 
 type SystemdUnitsModalProps = {
   onClose: (hasChanges?: boolean, addedSystemdUnits?: string[]) => void;
@@ -27,11 +27,12 @@ const SystemdUnitsModal: React.FC<SystemdUnitsModalProps> = ({ onClose, device }
   const { t } = useTranslation();
   const { patch } = useFetch();
   const [error, setError] = React.useState<string>();
-
-  const currentSystemdUnits: SystemdUnitFormValue[] = (device.spec?.systemd?.matchPatterns || []).map((p) => ({
-    pattern: p,
-    exists: true,
-  }));
+  const currentSystemdUnits: SystemdUnitsFormValues['systemdUnits'] = (device.spec?.systemd?.matchPatterns || []).map(
+    (p) => ({
+      pattern: p,
+      exists: true,
+    }),
+  );
 
   return (
     <Modal title={t('Track systemd services')} isOpen onClose={() => onClose()} variant="small">

package/src/components/Device/SystemdUnitsModal/TrackSystemdUnitsForm.tsx

@@ -6,11 +6,7 @@ import { useTranslation } from '../../../hooks/useTranslation';
 import ErrorHelperText from '../../form/FieldHelperText';
 import FlightCtlActionGroup from '../../form/FlightCtlActionGroup';
 import FlightCtlForm from '../../form/FlightCtlForm';
-
-export type SystemdUnitFormValue = {
-  pattern: string;
-  exists: boolean;
-};
+import { SystemdUnitFormValue } from '../../../types/deviceSpec';
 
 export type SystemdUnitsFormValues = {
   systemdUnits: SystemdUnitFormValue[];