@flightctl/ui-components 0.0.10 → 0.4.0-rc2

package/src/components/Device/EditDeviceWizard/steps/{ConfigTemplateForm.tsx → ConfigurationTemplates.tsx}

@@ -21,7 +21,7 @@ import { DeviceSpecConfigFormValues } from '../types';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
 import { getErrorMessage } from '../../../../utils/error';
-import { sortByName } from '../../../../utils/sort/generic';
+import WithHelperText from '../../../common/WithHelperText';
 import { getDnsSubdomainValidations } from '../../../form/validations';
 import ErrorHelperText from '../../../form/FieldHelperText';
 import FormSelect from '../../../form/FormSelect';
@@ -30,6 +30,8 @@ import ConfigWithRepositoryTemplateForm from './ConfigWithRepositoryTemplateForm
 import ConfigK8sSecretTemplateForm from './ConfigK8sSecretTemplateForm';
 import ConfigInlineTemplateForm from './ConfigInlineTemplateForm';
 import ExpandableFormSection from '../../../form/ExpandableFormSection';
+import { useAccessReview } from '../../../../hooks/useAccessReview';
+import { RESOURCE, VERB } from '../../../../types/rbac';
 
 const useValidateOnMount = () => {
   const { validateForm } = useFormikContext<DeviceSpecConfigFormValues>();
@@ -42,12 +44,19 @@ const useValidateOnMount = () => {
 };
 
 type ConfigSectionProps = {
-  index: number;
   repositories: Repository[];
   repoRefetch: VoidFunction;
+  canCreateRepo: boolean;
+  canListRepo: boolean;
 };
 
-const ConfigSection = ({ index, repositories, repoRefetch }: ConfigSectionProps) => {
+const ConfigSection = ({
+  index,
+  repositories,
+  repoRefetch,
+  canCreateRepo,
+  canListRepo,
+}: ConfigSectionProps & { index: number }) => {
   const { t } = useTranslation();
   const fieldName = `configTemplates[${index}]`;
   const [
@@ -60,20 +69,26 @@ const ConfigSection = ({ index, repositories, repoRefetch }: ConfigSectionProps)
 
   const items = React.useMemo(() => {
     const options = {
-      [ConfigType.GIT]: { label: t('Git configuration') },
-      [ConfigType.HTTP]: { label: t('Http configuration') },
       [ConfigType.INLINE]: { label: t('Inline configuration') },
     };
+    if (canListRepo && (canCreateRepo || repositories.length > 0)) {
+      options[ConfigType.GIT] = { label: t('Git configuration') };
+      options[ConfigType.HTTP] = { label: t('Http configuration') };
+    }
     if (type === ConfigType.K8S_SECRET) {
       options[ConfigType.K8S_SECRET] = { label: t('Kubernetes secret provider') };
     }
     return options;
     // The k8s secret option must remain active for this config even when the users switch the configType to a different one
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [t]);
+  }, [t, canListRepo]);
 
   return (
-    <ExpandableFormSection title={t('Configurations')} fieldName={fieldName} description={name}>
+    <ExpandableFormSection
+      title={t('Configuration {{ configNum }}', { configNum: index + 1 })}
+      fieldName={fieldName}
+      description={name}
+    >
       <Grid hasGutter>
         <RichValidationTextField
           fieldName={`${fieldName}.name`}
@@ -92,6 +107,7 @@ const ConfigSection = ({ index, repositories, repoRefetch }: ConfigSectionProps)
           <ConfigWithRepositoryTemplateForm
             repoType={type === ConfigType.HTTP ? RepoSpecType.HTTP : RepoSpecType.GIT}
             index={index}
+            canCreateRepo={canCreateRepo}
             repositories={repositories}
             repoRefetch={repoRefetch}
           />
@@ -101,16 +117,84 @@ const ConfigSection = ({ index, repositories, repoRefetch }: ConfigSectionProps)
   );
 };
 
-const ConfigTemplateForm = () => {
+const ConfigurationTemplatesForm = ({ repositories, repoRefetch, canCreateRepo, canListRepo }: ConfigSectionProps) => {
   const { t } = useTranslation();
   const { values, errors } = useFormikContext<DeviceSpecConfigFormValues>();
+
+  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
+        />
+      }
+    >
+      <FieldArray name="configTemplates">
+        {({ push, remove }) => (
+          <>
+            {values.configTemplates.map((_, index) => (
+              <FormSection key={index}>
+                <Split hasGutter>
+                  <SplitItem isFilled>
+                    <ConfigSection
+                      index={index}
+                      canCreateRepo={canCreateRepo}
+                      repositories={repositories}
+                      repoRefetch={repoRefetch}
+                      canListRepo={canListRepo}
+                    />
+                  </SplitItem>
+                  <SplitItem>
+                    <Button
+                      variant="link"
+                      icon={<MinusCircleIcon />}
+                      iconPosition="start"
+                      onClick={() => remove(index)}
+                    />
+                  </SplitItem>
+                </Split>
+              </FormSection>
+            ))}
+            <FormSection>
+              <FormGroup>
+                <Button
+                  variant="link"
+                  icon={<PlusCircleIcon />}
+                  iconPosition="start"
+                  onClick={() => {
+                    push({
+                      name: '',
+                      type: '',
+                    });
+                  }}
+                >
+                  {t('Add configuration')}
+                </Button>
+              </FormGroup>
+            </FormSection>
+            <ErrorHelperText error={generalError} />
+          </>
+        )}
+      </FieldArray>
+    </FormGroup>
+  );
+};
+
+const ConfigurationTemplates = () => {
+  const [canCreateRepo] = useAccessReview(RESOURCE.REPOSITORY, VERB.CREATE);
   const [repositoryList, isLoading, error, refetch] = useFetchPeriodically<RepositoryList>({
     endpoint: 'repositories',
   });
 
-  const repositories = React.useMemo(() => sortByName(repositoryList?.items || []), [repositoryList]);
+  const repositories = repositoryList?.items || [];
 
-  const generalError = typeof errors.configTemplates === 'string' ? errors.configTemplates : undefined;
+  const { t } = useTranslation();
 
   if (error) {
     return (
@@ -127,48 +211,22 @@ const ConfigTemplateForm = () => {
   }
 
   return (
-    <FieldArray name="configTemplates">
-      {({ push, remove }) => (
-        <>
-          {values.configTemplates.map((_, index) => (
-            <FormSection key={index}>
-              <Split hasGutter>
-                <SplitItem isFilled>
-                  <ConfigSection index={index} repositories={repositories} repoRefetch={refetch} />
-                </SplitItem>
-                <SplitItem>
-                  <Button
-                    variant="link"
-                    icon={<MinusCircleIcon />}
-                    iconPosition="start"
-                    onClick={() => remove(index)}
-                  />
-                </SplitItem>
-              </Split>
-            </FormSection>
-          ))}
-          <FormSection>
-            <FormGroup>
-              <Button
-                variant="link"
-                icon={<PlusCircleIcon />}
-                iconPosition="start"
-                onClick={() => {
-                  push({
-                    name: '',
-                    type: '',
-                  });
-                }}
-              >
-                {t('Add configuration')}
-              </Button>
-            </FormGroup>
-          </FormSection>
-          <ErrorHelperText error={generalError} />
-        </>
-      )}
-    </FieldArray>
+    <ConfigurationTemplatesForm
+      canListRepo
+      canCreateRepo={canCreateRepo}
+      repositories={repositories}
+      repoRefetch={refetch}
+    />
+  );
+};
+
+const ConfigurationTemplatesWithPermissions = () => {
+  const [canListRepo] = useAccessReview(RESOURCE.REPOSITORY, VERB.LIST);
+  return canListRepo ? (
+    <ConfigurationTemplates />
+  ) : (
+    <ConfigurationTemplatesForm canListRepo={false} canCreateRepo={false} repositories={[]} repoRefetch={() => {}} />
   );
 };
 
-export default ConfigTemplateForm;
+export default ConfigurationTemplatesWithPermissions;

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

@@ -1,27 +1,117 @@
 import * as React from 'react';
-import { Alert, CodeBlock, CodeBlockCode, FormGroup, Grid } from '@patternfly/react-core';
+import { Alert, Button, 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 { useTranslation } from '../../../../hooks/useTranslation';
 import WithHelperText from '../../../common/WithHelperText';
+import LearnMoreLink from '../../../common/LearnMoreLink';
 import TextField from '../../../form/TextField';
 import FlightCtlForm from '../../../form/FlightCtlForm';
 import { DeviceSpecConfigFormValues } from '../types';
-import ConfigTemplateForm from './ConfigTemplateForm';
-import ApplicationsForm from './ApplicationsForm';
+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 { ACM_REPO_NAME } from '../deviceSpecUtils';
 
 export const deviceTemplateStepId = 'device-template';
 
-export const isDeviceTemplateStepValid = (errors: FormikErrors<DeviceSpecConfigFormValues>) => {
-  return !errors.osImage && !errors.configTemplates && !errors.applications;
-};
+export const isDeviceTemplateStepValid = (errors: FormikErrors<DeviceSpecConfigFormValues>) =>
+  !errors.osImage && !errors.configTemplates && !errors.applications && !errors.systemdUnits;
+
+const templateOption1 = '{{ .metadata.labels.key }}';
+const templateOption2 = '{{ .metadata.name }}';
+const exampleCode = `/device-configs/deployment-sites/site-{{ .metadata.labels.site }}`;
 
-const templateOption1 = '{{ device.metadata.labels[key] }}';
-const templateOption2 = '{{ device.metadata.name }}';
-const exampleCode = `/device-configs/factory-floors/floor-{{ device.metadata.labels[factory-floor] }}`;
+const MicroShiftCheckbox = ({ isFleet }: { isFleet: boolean }) => {
+  const { initialValues } = useFormikContext<DeviceSpecConfigFormValues>();
+  const { t } = useTranslation();
+
+  const [repo, loading, error] = useFetchPeriodically<Required<Repository>>({
+    endpoint: `repositories/${ACM_REPO_NAME}`,
+  });
+  if (loading) {
+    return <Spinner size="sm" />;
+  }
+
+  const isDisabled = !initialValues.registerMicroShift && (!repo || !!error);
+  return (
+    <>
+      <FormGroup>
+        <CheckboxField
+          name="registerMicroShift"
+          label={
+            isFleet ? (
+              <>
+                {t('Register all MicroShift devices to ACM')}
+                <WithHelperText
+                  ariaLabel="MicroShift registration"
+                  content={
+                    <>
+                      {t(
+                        'Select this when all the devices in the fleet are running MicroShift and you want to register them to ACM.',
+                      )}
+                      <br />
+                      {t(
+                        "To remove registration, you'll need to uncheck this option and also remove the clusters from ACM's clusters list",
+                      )}
+                    </>
+                  }
+                />
+              </>
+            ) : (
+              <>
+                {t('Register this MicroShift device to ACM')}
+                <WithHelperText
+                  ariaLabel="MicroShift registration"
+                  content={
+                    <>
+                      {t('Select this when the device is running MicroShift and you want to register it to ACM.')}
+                      <br />
+                      {t(
+                        "To remove registration, you'll need to uncheck this option and also remove the cluster from ACM's clusters list",
+                      )}
+                    </>
+                  }
+                />
+              </>
+            )
+          }
+          isDisabled={isDisabled}
+        />
+      </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>
+        </FormGroup>
+      )}
+    </>
+  );
+};
 
 const DeviceTemplateStep = ({ isFleet }: { isFleet: boolean }) => {
+  const { appType } = useAppContext();
   const { t } = useTranslation();
   const { values } = useFormikContext<DeviceSpecConfigFormValues>();
   return (
@@ -37,6 +127,7 @@ const DeviceTemplateStep = ({ isFleet }: { isFleet: boolean }) => {
             <CodeBlock className="pf-v5-u-mt-md">
               <CodeBlockCode>{exampleCode}</CodeBlockCode>
             </CodeBlock>
+            <LearnMoreLink link={USING_TEMPLATE_VARIABLES_LINK} />
           </Alert>
         )}
         <FormGroup
@@ -57,16 +148,22 @@ const DeviceTemplateStep = ({ isFleet }: { isFleet: boolean }) => {
             aria-label={t('System image')}
             value={values.osImage}
             helperText={t(
-              'Must be either an OCI image ref (e.g. "quay.io/redhat/rhde:9.3") or ostree ref (e.g. "https://ostree.fedoraproject.org/iot?ref=fedora/stable/x86_64/iot"). Keep this empty if you do not want to manage your OS from Flight Control.',
+              '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.',
             )}
           />
         </FormGroup>
         <FormGroup>
-          <ConfigTemplateForm />
+          <ConfigurationTemplates />
         </FormGroup>
         <FormGroup>
           <ApplicationsForm />
         </FormGroup>
+        {isFleet && (
+          <FormGroup label={t('Tracked systemd services')}>
+            <SystemdUnitsForm />
+          </FormGroup>
+        )}
+        {appType === 'ocp' && <MicroShiftCheckbox isFleet={isFleet} />}
       </FlightCtlForm>
     </Grid>
   );

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import { SystemdUnitFormValue } from '../../SystemdUnitsModal/TrackSystemdUnitsForm';
+
+const ReviewTrackedSystemdServices = ({ systemdUnits }: { systemdUnits: SystemdUnitFormValue[] }) => {
+  if (systemdUnits.length === 0) {
+    return '-';
+  }
+
+  return (
+    <LabelGroup>
+      {systemdUnits.map((systemD, index) => (
+        <Label key={`${systemD.pattern}_${index}`}>{systemD.pattern}</Label>
+      ))}
+    </LabelGroup>
+  );
+};
+
+export default ReviewTrackedSystemdServices;

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

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+
+import { DeviceSpecConfigFormValues } from '../types';
+import { useTranslation } from '../../../../hooks/useTranslation';
+
+import ErrorHelperText from '../../../form/FieldHelperText';
+import EditableLabelControl from '../../../common/EditableLabelControl';
+
+const SystemdUnitsForm = () => {
+  const { t } = useTranslation();
+  const { values, setFieldValue, errors } = useFormikContext<DeviceSpecConfigFormValues>();
+
+  const onAdd = (text: string) => {
+    void setFieldValue(
+      'systemdUnits',
+      values.systemdUnits.concat({
+        pattern: text,
+        exists: false,
+      }),
+    );
+  };
+
+  const onEdit = (editIndex: number, text: string) => {
+    void setFieldValue(
+      'systemdUnits',
+      values.systemdUnits.map((systemdUnit, index) => {
+        if (index === editIndex) {
+          return { pattern: text, exists: systemdUnit.exists };
+        } else {
+          return systemdUnit;
+        }
+      }),
+    );
+  };
+
+  const removeLabel = (removeIndex: number) => {
+    void setFieldValue(
+      'systemdUnits',
+      values.systemdUnits.filter((_, index) => index !== removeIndex),
+    );
+  };
+
+  const textError = typeof errors.systemdUnits === 'string' ? errors.systemdUnits : undefined;
+  return (
+    <>
+      <LabelGroup
+        isEditable
+        addLabelControl={
+          <EditableLabelControl
+            defaultLabel="name.service"
+            addButtonText={t('Add service')}
+            onAddLabel={onAdd}
+            isEditable
+          />
+        }
+      >
+        {values.systemdUnits.map((systemD, index) => (
+          <Label
+            key={`${systemD.pattern}-${index}`}
+            isEditable
+            onEditComplete={(_, newText) => onEdit(index, newText)}
+            onClose={() => removeLabel(index)}
+          >
+            {systemD.pattern}
+          </Label>
+        ))}
+      </LabelGroup>
+      <ErrorHelperText error={textError} />
+    </>
+  );
+};
+
+export default SystemdUnitsForm;

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

@@ -1,6 +1,7 @@
 import { ApplicationSpec } from '@flightctl/types';
 import { FlightCtlLabel } from '../../../types/extraTypes';
 import { SpecConfigTemplate } from '../../../types/deviceSpec';
+import { SystemdUnitFormValue } from '../SystemdUnitsModal/TrackSystemdUnitsForm';
 
 export type ApplicationFormSpec = Omit<ApplicationSpec, 'envVars'> & {
   variables: { name: string; value: string }[];
@@ -10,6 +11,8 @@ export type DeviceSpecConfigFormValues = {
   osImage?: string;
   configTemplates: SpecConfigTemplate[];
   applications: ApplicationFormSpec[];
+  systemdUnits: SystemdUnitFormValue[];
+  registerMicroShift: boolean;
 };
 
 export type EditDeviceFormValues = DeviceSpecConfigFormValues & {

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

@@ -2,22 +2,28 @@ import { TFunction } from 'i18next';
 import * as Yup from 'yup';
 
 import {
-  maxLengthString,
   validApplicationsSchema,
   validConfigTemplatesSchema,
   validKubernetesLabelValue,
   validLabelsSchema,
+  validOsImage,
 } from '../../form/validations';
 import { appendJSONPatch, getApplicationPatches, getLabelPatches } from '../../../utils/patch';
 import { Device, PatchRequest } from '@flightctl/types';
 import { EditDeviceFormValues } from './types';
-import { getAPIConfig, getDeviceSpecConfigPatches } from './deviceSpecUtils';
+import {
+  ACMCrdConfig,
+  ACMImportConfig,
+  MicroshiftRegistrationHook,
+  getAPIConfig,
+  getDeviceSpecConfigPatches,
+} from './deviceSpecUtils';
 
 export const getValidationSchema = (t: TFunction) =>
   Yup.lazy(() =>
     Yup.object({
       deviceAlias: validKubernetesLabelValue(t, { isRequired: false, fieldName: t('Alias') }),
-      osImage: maxLengthString(t, { fieldName: t('System image'), maxLength: 2048 }),
+      osImage: validOsImage(t, { isFleet: false }),
       labels: validLabelsSchema(t),
       configTemplates: validConfigTemplatesSchema(t),
       applications: validApplicationsSchema(t),
@@ -29,7 +35,8 @@ export const getDevicePatches = (currentDevice: Device, updatedDevice: EditDevic
 
   // Device labels
   const currentLabels = currentDevice.metadata.labels || {};
-  const updatedLabels = updatedDevice.labels || [];
+  const updatedLabels = [...updatedDevice.labels];
+
   if (updatedDevice.deviceAlias) {
     updatedLabels.push({ key: 'alias', value: updatedDevice.deviceAlias });
   }
@@ -68,6 +75,9 @@ export const getDevicePatches = (currentDevice: Device, updatedDevice: EditDevic
   // Configurations
   const currentConfigs = currentDevice.spec?.config || [];
   const newConfigs = updatedDevice.configTemplates.map(getAPIConfig);
+  if (updatedDevice.registerMicroShift) {
+    newConfigs.push(ACMCrdConfig, ACMImportConfig, MicroshiftRegistrationHook);
+  }
   const configPatches = getDeviceSpecConfigPatches(currentConfigs, newConfigs, '/spec/config');
   allPatches = allPatches.concat(configPatches);
 

package/src/components/Device/{MatchPatternsModal/MatchPatternsModal.tsx → SystemdUnitsModal/SystemdUnitsModal.tsx}

@@ -1,16 +1,17 @@
+import * as React from 'react';
+import { Formik } from 'formik';
 import { Modal } from '@patternfly/react-core';
 import { Device } from '@flightctl/types';
-import { Formik } from 'formik';
-import * as React from 'react';
-import MatchPatternsForm, { MatchPatternsFormValues } from './MatchPatternsForm';
+
 import { useFetch } from '../../../hooks/useFetch';
+import { useTranslation } from '../../../hooks/useTranslation';
 import { getErrorMessage } from '../../../utils/error';
 import { getStringListPatches } from '../../../utils/patch';
-import { useTranslation } from '../../../hooks/useTranslation';
 import { deviceSystemdUnitsValidationSchema } from '../../form/validations';
+import TrackSystemdUnitsForm, { SystemdUnitFormValue, SystemdUnitsFormValues } from './TrackSystemdUnitsForm';
 
-type MatchPatternsModalProps = {
-  onClose: (reload?: boolean) => void;
+type SystemdUnitsModalProps = {
+  onClose: (hasChanges?: boolean, addedSystemdUnits?: string[]) => void;
   device: Device;
 };
 
@@ -22,41 +23,57 @@ type MatchPatternsModalProps = {
  * @param device FlightCtl device
  * @param onClose on close callback
  */
-const MatchPatternsModal: React.FC<MatchPatternsModalProps> = ({ onClose, device }) => {
+const SystemdUnitsModal: React.FC<SystemdUnitsModalProps> = ({ onClose, device }) => {
   const { t } = useTranslation();
   const { patch } = useFetch();
   const [error, setError] = React.useState<string>();
 
-  const currentPatterns = device.spec?.systemd?.matchPatterns || [];
+  const currentSystemdUnits: SystemdUnitFormValue[] = (device.spec?.systemd?.matchPatterns || []).map((p) => ({
+    pattern: p,
+    exists: true,
+  }));
+
   return (
-    <Modal title={t('Edit match patterns')} isOpen onClose={() => onClose()} variant="small">
-      <Formik<MatchPatternsFormValues>
+    <Modal title={t('Track systemd services')} isOpen onClose={() => onClose()} variant="small">
+      <Formik<SystemdUnitsFormValues>
         validationSchema={deviceSystemdUnitsValidationSchema(t)}
-        initialValues={{ matchPatterns: currentPatterns }}
-        onSubmit={async ({ matchPatterns: updatedPatterns }) => {
+        initialValues={{ systemdUnits: currentSystemdUnits }}
+        onSubmit={async ({ systemdUnits: updatedSystemdUnits }) => {
           try {
-            const patternPatchBuilder = (value: string[]) => ({
-              matchPatterns: value,
-            });
+            const currentPatterns = currentSystemdUnits.map((p) => p.pattern);
+            const updatedPatterns = updatedSystemdUnits.map((p) => p.pattern);
+
             const patches = getStringListPatches(
               '/spec/systemd',
               currentPatterns,
               updatedPatterns,
-              patternPatchBuilder,
+              (value: string[]) => ({
+                matchPatterns: value,
+              }),
             );
             if (patches.length > 0) {
               await patch(`devices/${device.metadata.name}`, patches);
+
+              const addedServices: string[] = [];
+              updatedPatterns.forEach((newSystemd) => {
+                if (!currentPatterns.includes(newSystemd)) {
+                  addedServices.push(newSystemd);
+                }
+              });
+
+              onClose(true, addedServices);
+            } else {
+              onClose();
             }
-            onClose(true);
           } catch (err) {
             setError(getErrorMessage(err));
           }
         }}
       >
-        <MatchPatternsForm onClose={onClose} error={error} />
+        <TrackSystemdUnitsForm onClose={onClose} error={error} />
       </Formik>
     </Modal>
   );
 };
 
-export default MatchPatternsModal;
+export default SystemdUnitsModal;