@flightctl/ui-components 0.7.2 → 0.8.0-rc2

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

@@ -18,6 +18,7 @@ type ConfigWithRepositoryTemplateFormProps = {
   index: number;
   repositories: Repository[];
   repoRefetch: VoidFunction;
+  isReadOnly?: boolean;
   canCreateRepo: boolean;
 };
 
@@ -53,7 +54,15 @@ const getRepositoryItems = (
   return repositoryItems;
 };
 
-const GitConfigForm = ({ template, index }: { template: GitConfigTemplate; index: number }) => {
+const GitConfigForm = ({
+  template,
+  index,
+  isReadOnly,
+}: {
+  template: GitConfigTemplate;
+  index: number;
+  isReadOnly?: boolean;
+}) => {
   const { t } = useTranslation();
 
   return (
@@ -63,6 +72,7 @@ const GitConfigForm = ({ template, index }: { template: GitConfigTemplate; index
           aria-label={t('Branch/tag/commit')}
           name={`configTemplates[${index}].targetRevision`}
           value={template.targetRevision}
+          isDisabled={isReadOnly}
         />
       </FormGroup>
       <FormGroupWithHelperText
@@ -75,18 +85,7 @@ const GitConfigForm = ({ template, index }: { template: GitConfigTemplate; index
           name={`configTemplates[${index}].path`}
           value={template.path}
           placeholder={t('/absolute/path')}
-        />
-      </FormGroupWithHelperText>
-      <FormGroupWithHelperText
-        label={t('Mount path')}
-        content={t('Path in the device where the configurations will be stored.')}
-        isRequired
-      >
-        <TextField
-          aria-label={t('Mount path')}
-          name={`configTemplates[${index}].mountPath`}
-          value={template.mountPath}
-          placeholder={t('/absolute/path')}
+          isDisabled={isReadOnly}
         />
       </FormGroupWithHelperText>
     </>
@@ -97,10 +96,12 @@ const HttpConfigForm = ({
   template,
   baseURL,
   index,
+  isReadOnly,
 }: {
   template: HttpConfigTemplate;
   index: number;
   baseURL?: string;
+  isReadOnly?: boolean;
 }) => {
   const { t } = useTranslation();
 
@@ -129,6 +130,7 @@ const HttpConfigForm = ({
           name={`configTemplates[${index}].suffix`}
           value={template.suffix || ''}
           helperText={suffixHelperText}
+          isDisabled={isReadOnly}
         />
       </FormGroupWithHelperText>
       <FormGroupWithHelperText
@@ -141,6 +143,7 @@ const HttpConfigForm = ({
           name={`configTemplates[${index}].filePath`}
           value={template.filePath || ''}
           placeholder={t('/absolute/path')}
+          isDisabled={isReadOnly}
         />
       </FormGroupWithHelperText>
     </>
@@ -152,6 +155,7 @@ const ConfigWithRepositoryTemplateForm = ({
   index,
   repositories,
   repoRefetch,
+  isReadOnly,
   canCreateRepo,
 }: ConfigWithRepositoryTemplateFormProps) => {
   const { t } = useTranslation();
@@ -159,9 +163,17 @@ const ConfigWithRepositoryTemplateForm = ({
   const [createRepoModalOpen, setCreateRepoModalOpen] = React.useState(false);
 
   const ct = values.configTemplates[index] as HttpConfigTemplate | GitConfigTemplate;
-  const selectedRepoName = ct?.repository;
+  const selectedRepoName = ct.repository;
+
+  const repositoryItems = isReadOnly
+    ? {
+        [selectedRepoName]: {
+          label: selectedRepoName,
+          description: '',
+        },
+      }
+    : getRepositoryItems(t, repositories, repoType, selectedRepoName);
 
-  const repositoryItems = getRepositoryItems(t, repositories, repoType, selectedRepoName);
   const selectedRepo = repositories.find((repo) => repo.metadata.name === selectedRepoName);
   return (
     <>
@@ -171,6 +183,7 @@ const ConfigWithRepositoryTemplateForm = ({
           items={repositoryItems}
           withStatusIcon
           placeholderText={t('Select a repository')}
+          isDisabled={isReadOnly}
         >
           {canCreateRepo && (
             <MenuFooter>
@@ -181,6 +194,7 @@ const ConfigWithRepositoryTemplateForm = ({
                 onClick={() => {
                   setCreateRepoModalOpen(true);
                 }}
+                isDisabled={isReadOnly}
               >
                 {t('Create repository')}
               </Button>
@@ -188,9 +202,16 @@ const ConfigWithRepositoryTemplateForm = ({
           )}
         </FormSelect>
       </FormGroup>
-      {repoType === RepoSpecType.GIT && <GitConfigForm template={ct as GitConfigTemplate} index={index} />}
+      {repoType === RepoSpecType.GIT && (
+        <GitConfigForm template={ct as GitConfigTemplate} index={index} isReadOnly={isReadOnly} />
+      )}
       {repoType === RepoSpecType.HTTP && (
-        <HttpConfigForm template={ct as HttpConfigTemplate} index={index} baseURL={selectedRepo?.spec.url} />
+        <HttpConfigForm
+          template={ct as HttpConfigTemplate}
+          index={index}
+          baseURL={selectedRepo?.spec.url}
+          isReadOnly={isReadOnly}
+        />
       )}
       {createRepoModalOpen && (
         <CreateRepositoryModal

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

@@ -47,12 +47,14 @@ type ConfigSectionProps = {
   repoRefetch: VoidFunction;
   canCreateRepo: boolean;
   canListRepo: boolean;
+  isReadOnly?: boolean;
 };
 
 const ConfigSection = ({
   index,
   repositories,
   repoRefetch,
+  isReadOnly,
   canCreateRepo,
   canListRepo,
 }: ConfigSectionProps & { index: number }) => {
@@ -67,20 +69,33 @@ const ConfigSection = ({
   useValidateOnMount();
 
   const items = React.useMemo(() => {
-    const options = {
+    const allOptions = {
       [ConfigType.INLINE]: { label: t('Inline configuration') },
+      [ConfigType.GIT]: { label: t('Git configuration') },
+      [ConfigType.HTTP]: { label: t('Http configuration') },
+      [ConfigType.K8S_SECRET]: { label: t('Kubernetes secret') },
+    };
+    if (isReadOnly) {
+      return {
+        [type]: allOptions[type],
+      };
+    }
+
+    const options = {
+      [ConfigType.INLINE]: allOptions[ConfigType.INLINE],
     };
     if (canListRepo && (canCreateRepo || repositories.length > 0)) {
-      options[ConfigType.GIT] = { label: t('Git configuration') };
-      options[ConfigType.HTTP] = { label: t('Http configuration') };
+      options[ConfigType.GIT] = allOptions[ConfigType.GIT];
+      options[ConfigType.HTTP] = allOptions[ConfigType.HTTP];
     }
     if (type === ConfigType.K8S_SECRET) {
-      options[ConfigType.K8S_SECRET] = { label: t('Kubernetes secret provider') };
+      options[ConfigType.K8S_SECRET] = allOptions[ConfigType.K8S_SECRET];
     }
+
     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, canListRepo]);
+  }, [t, canListRepo, isReadOnly]);
 
   return (
     <ExpandableFormSection
@@ -90,6 +105,7 @@ const ConfigSection = ({
     >
       <Grid hasGutter>
         <RichValidationTextField
+          isDisabled={isReadOnly}
           fieldName={`${fieldName}.name`}
           aria-label={t('Source name')}
           validations={getDnsSubdomainValidations(t)}
@@ -97,15 +113,21 @@ const ConfigSection = ({
         />
 
         <FormGroup label={t('Source type')} isRequired>
-          <FormSelect items={items} name={`${fieldName}.type`} placeholderText={t('Select a source type')} />
+          <FormSelect
+            items={items}
+            name={`${fieldName}.type`}
+            placeholderText={t('Select a source type')}
+            isDisabled={isReadOnly}
+          />
         </FormGroup>
 
         {type === ConfigType.K8S_SECRET && <ConfigK8sSecretTemplateForm index={index} />}
-        {type === ConfigType.INLINE && <ConfigInlineTemplateForm index={index} />}
+        {type === ConfigType.INLINE && <ConfigInlineTemplateForm index={index} isReadOnly={isReadOnly} />}
         {(type === ConfigType.GIT || type === ConfigType.HTTP) && (
           <ConfigWithRepositoryTemplateForm
             repoType={type === ConfigType.HTTP ? RepoSpecType.HTTP : RepoSpecType.GIT}
             index={index}
+            isReadOnly={isReadOnly}
             canCreateRepo={canCreateRepo}
             repositories={repositories}
             repoRefetch={repoRefetch}
@@ -116,9 +138,18 @@ const ConfigSection = ({
   );
 };
 
-const ConfigurationTemplatesForm = ({ repositories, repoRefetch, canCreateRepo, canListRepo }: ConfigSectionProps) => {
+const ConfigurationTemplatesForm = ({
+  repositories,
+  repoRefetch,
+  isReadOnly,
+  canCreateRepo,
+  canListRepo,
+}: ConfigSectionProps) => {
   const { t } = useTranslation();
   const { values, errors } = useFormikContext<DeviceSpecConfigFormValues>();
+  if (isReadOnly && values.configTemplates.length === 0) {
+    return null;
+  }
 
   const generalError = typeof errors.configTemplates === 'string' ? errors.configTemplates : undefined;
 
@@ -138,41 +169,46 @@ const ConfigurationTemplatesForm = ({ repositories, repoRefetch, canCreateRepo,
                   <SplitItem isFilled>
                     <ConfigSection
                       index={index}
+                      isReadOnly={isReadOnly}
                       canCreateRepo={canCreateRepo}
                       repositories={repositories}
                       repoRefetch={repoRefetch}
                       canListRepo={canListRepo}
                     />
                   </SplitItem>
-                  <SplitItem>
-                    <Button
-                      aria-label={t('Delete configuration')}
-                      variant="link"
-                      icon={<MinusCircleIcon />}
-                      iconPosition="start"
-                      onClick={() => remove(index)}
-                    />
-                  </SplitItem>
+                  {!isReadOnly && (
+                    <SplitItem>
+                      <Button
+                        aria-label={t('Delete configuration')}
+                        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>
+            {!isReadOnly && (
+              <FormSection>
+                <FormGroup>
+                  <Button
+                    variant="link"
+                    icon={<PlusCircleIcon />}
+                    iconPosition="start"
+                    onClick={() => {
+                      push({
+                        name: '',
+                        type: '',
+                      });
+                    }}
+                  >
+                    {t('Add configuration')}
+                  </Button>
+                </FormGroup>
+              </FormSection>
+            )}
             <ErrorHelperText error={generalError} />
           </>
         )}
@@ -181,7 +217,7 @@ const ConfigurationTemplatesForm = ({ repositories, repoRefetch, canCreateRepo,
   );
 };
 
-const ConfigurationTemplates = () => {
+const ConfigurationTemplates = ({ isReadOnly }: { isReadOnly?: boolean }) => {
   const [canCreateRepo] = useAccessReview(RESOURCE.REPOSITORY, VERB.CREATE);
   const [repositoryList, isLoading, error, refetch] = useFetchPeriodically<RepositoryList>({
     endpoint: 'repositories',
@@ -207,6 +243,7 @@ const ConfigurationTemplates = () => {
 
   return (
     <ConfigurationTemplatesForm
+      isReadOnly={isReadOnly}
       canListRepo
       canCreateRepo={canCreateRepo}
       repositories={repositories}
@@ -215,12 +252,18 @@ const ConfigurationTemplates = () => {
   );
 };
 
-const ConfigurationTemplatesWithPermissions = () => {
+const ConfigurationTemplatesWithPermissions = ({ isReadOnly }) => {
   const [canListRepo] = useAccessReview(RESOURCE.REPOSITORY, VERB.LIST);
-  return canListRepo ? (
+  return canListRepo && !isReadOnly ? (
     <ConfigurationTemplates />
   ) : (
-    <ConfigurationTemplatesForm canListRepo={false} canCreateRepo={false} repositories={[]} repoRefetch={() => {}} />
+    <ConfigurationTemplatesForm
+      isReadOnly
+      canListRepo={false}
+      canCreateRepo={false}
+      repositories={[]}
+      repoRefetch={() => {}}
+    />
   );
 };
 

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

@@ -4,7 +4,6 @@ import { FormikErrors, useFormikContext } from 'formik';
 import { Trans } from 'react-i18next';
 import { Repository } from '@flightctl/types';
 
-import { CREATE_ACM_REPOSITORY, USING_TEMPLATE_VARIABLES_LINK } from '../../../../links';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import LabelWithHelperText, { FormGroupWithHelperText } from '../../../common/WithHelperText';
 import LearnMoreLink from '../../../common/LearnMoreLink';
@@ -15,6 +14,7 @@ import ConfigurationTemplates from './ConfigurationTemplates';
 import ApplicationsForm from './ApplicationTemplates';
 import SystemdUnitsForm from './SystemdUnitsForm';
 import CheckboxField from '../../../form/CheckboxField';
+import { useAppLinks } from '../../../../hooks/useAppLinks';
 import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
 import { FlightCtlApp, useAppContext } from '../../../../hooks/useAppContext';
 import { ACM_REPO_NAME } from '../deviceSpecUtils';
@@ -28,9 +28,10 @@ const templateOption1 = '{{ .metadata.labels.key }}';
 const templateOption2 = '{{ .metadata.name }}';
 const exampleCode = `/device-configs/deployment-sites/site-{{ .metadata.labels.site }}`;
 
-const MicroShiftCheckbox = ({ isFleet }: { isFleet: boolean }) => {
+const MicroShiftCheckbox = ({ isFleet, isReadOnly }: { isFleet: boolean; isReadOnly?: boolean }) => {
   const { initialValues } = useFormikContext<DeviceSpecConfigFormValues>();
   const { t } = useTranslation();
+  const createAcmRepoLink = useAppLinks('createAcmRepo');
 
   const [repo, loading, error] = useFetchPeriodically<Required<Repository>>({
     endpoint: `repositories/${ACM_REPO_NAME}`,
@@ -84,7 +85,7 @@ const MicroShiftCheckbox = ({ isFleet }: { isFleet: boolean }) => {
               </>
             )
           }
-          isDisabled={isDisabled}
+          isDisabled={isDisabled || isReadOnly}
         />
       </FormGroup>
       {isDisabled && (
@@ -94,7 +95,7 @@ const MicroShiftCheckbox = ({ isFleet }: { isFleet: boolean }) => {
               repository: `'${ACM_REPO_NAME}'`,
             })}
             {', '}
-            <LearnMoreLink link={CREATE_ACM_REPOSITORY} text={t('view documentation')} />
+            <LearnMoreLink link={createAcmRepoLink} text={t('view documentation')} />
           </Alert>
         </FormGroup>
       )}
@@ -102,14 +103,16 @@ const MicroShiftCheckbox = ({ isFleet }: { isFleet: boolean }) => {
   );
 };
 
-const DeviceTemplateStep = ({ isFleet }: { isFleet: boolean }) => {
+const DeviceTemplateStep = ({ isFleet, isReadOnly }: { isFleet: boolean; isReadOnly?: boolean }) => {
   const { appType } = useAppContext();
   const { t } = useTranslation();
   const { values } = useFormikContext<DeviceSpecConfigFormValues>();
+  const useTemplateVarsLink = useAppLinks('useTemplateVars');
+
   return (
     <Grid span={8}>
       <FlightCtlForm>
-        {isFleet && (
+        {isFleet && !isReadOnly && (
           <Alert isInline variant="info" title={t('Using template variables')} isExpandable>
             <Trans t={t}>
               Add a variable by using <strong>{templateOption1}</strong> or <strong>{templateOption2}</strong> and it
@@ -119,7 +122,7 @@ const DeviceTemplateStep = ({ isFleet }: { isFleet: boolean }) => {
             <CodeBlock className="pf-v5-u-mt-md">
               <CodeBlockCode>{exampleCode}</CodeBlockCode>
             </CodeBlock>
-            <LearnMoreLink link={USING_TEMPLATE_VARIABLES_LINK} />
+            <LearnMoreLink link={useTemplateVarsLink} />
           </Alert>
         )}
         <FormGroupWithHelperText
@@ -134,23 +137,16 @@ const DeviceTemplateStep = ({ isFleet }: { isFleet: boolean }) => {
             name="osImage"
             aria-label={t('System image')}
             value={values.osImage}
+            isDisabled={isReadOnly}
             helperText={t(
               '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.',
             )}
           />
         </FormGroupWithHelperText>
-        <FormGroup>
-          <ConfigurationTemplates />
-        </FormGroup>
-        <FormGroup>
-          <ApplicationsForm />
-        </FormGroup>
-        {isFleet && (
-          <FormGroup label={t('Tracked systemd services')}>
-            <SystemdUnitsForm />
-          </FormGroup>
-        )}
-        {appType === FlightCtlApp.OCP && <MicroShiftCheckbox isFleet={isFleet} />}
+        <ConfigurationTemplates isReadOnly={isReadOnly} />
+        <ApplicationsForm isReadOnly={isReadOnly} />
+        {isFleet && <SystemdUnitsForm isReadOnly={isReadOnly} />}
+        {appType === FlightCtlApp.OCP && <MicroShiftCheckbox isFleet={isFleet} isReadOnly={isReadOnly} />}
       </FlightCtlForm>
     </Grid>
   );

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

@@ -1,77 +1,38 @@
 import * as React from 'react';
-import { Alert, Checkbox, FormGroup, Grid, Title } from '@patternfly/react-core';
+import { Alert, 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';
+import CheckboxField from '../../../form/CheckboxField';
 
 export const deviceUpdatePolicyStepId = 'update-policy';
 
 export const isUpdatePolicyStepValid = (errors: FormikErrors<DeviceSpecConfigFormValues>) => !errors.updatePolicy;
 
-const UpdatePolicyStep = () => {
+const UpdatePolicyStep = ({ isReadOnly }: { isReadOnly?: boolean }) => {
   const { t } = useTranslation();
 
   const {
-    values: { updatePolicy },
-    setFieldValue,
-    setFieldTouched,
+    values: { useBasicUpdateConfig },
   } = 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 ? (
+        <CheckboxField name="useBasicUpdateConfig" label={t('Use basic configurations')} isDisabled={isReadOnly} />
+        {!useBasicUpdateConfig ? (
           <>
             <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 />
+              <UpdateStepUpdatePolicy isReadOnly={isReadOnly} />
             </FormGroupWithHelperText>
           </>
         ) : (
@@ -79,7 +40,6 @@ const UpdatePolicyStep = () => {
             {t('The device will download and apply updates as soon as they are available.')}
           </Alert>
         )}
-        {alertSwitchToBasic && <UpdateConfirmChangesModal setting="update-policies" onClose={onModalClose} />}
       </FlightCtlForm>
     </Grid>
   );

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

@@ -44,7 +44,7 @@ const GeneralInfoStep = () => {
       <FlightCtlForm>
         <RichValidationTextField
           fieldName="deviceAlias"
-          aria-label={t('Alias')}
+          aria-label={t('Device alias')}
           validations={getLabelValueValidations(t)}
         />
         <FormGroup label={t('Device labels')}>

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

@@ -35,7 +35,7 @@ const ReviewStep = ({ error }: { error?: string }) => {
           }}
         >
           <DescriptionListGroup>
-            <DescriptionListTerm>{t('Alias')}</DescriptionListTerm>
+            <DescriptionListTerm>{t('Device alias')}</DescriptionListTerm>
             <DescriptionListDescription>{values.deviceAlias || t('Untitled')}</DescriptionListDescription>
           </DescriptionListGroup>
           {values.labels.length > 0 && (

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

@@ -10,8 +10,8 @@ export const ReviewUpdateRolloutPolicy = ({ rolloutPolicy }: { rolloutPolicy: Ro
   const { t } = useTranslation();
 
   return rolloutPolicy.isAdvanced
-    ? '-'
-    : t('{{ count }} batches have been defined', { count: rolloutPolicy.batches.length });
+    ? t('{{ count }} batches have been defined', { count: rolloutPolicy.batches.length })
+    : '-';
 };
 
 export const ReviewUpdateDisruptionBudget = ({ disruptionBudget }: { disruptionBudget: DisruptionBudgetForm }) => {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
+import { FormGroup, Label, LabelGroup } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 
 import { DeviceSpecConfigFormValues } from '../../../../types/deviceSpec';
@@ -7,6 +7,7 @@ import { useTranslation } from '../../../../hooks/useTranslation';
 
 import ErrorHelperText from '../../../form/FieldHelperText';
 import EditableLabelControl from '../../../common/EditableLabelControl';
+import LabelsView from '../../../common/LabelsView';
 
 const SystemdUnitsForm = () => {
   const { t } = useTranslation();
@@ -74,4 +75,31 @@ const SystemdUnitsForm = () => {
   );
 };
 
-export default SystemdUnitsForm;
+const SystemdUnitsFormWrapper = ({ isReadOnly }: { isReadOnly?: boolean }) => {
+  const { values } = useFormikContext<DeviceSpecConfigFormValues>();
+  const { t } = useTranslation();
+
+  if (isReadOnly && values.systemdUnits.length === 0) {
+    return null;
+  }
+
+  if (isReadOnly) {
+    const labels: Record<string, string> = {};
+    values.systemdUnits.forEach((systemdUnit) => {
+      labels[systemdUnit.pattern] = '';
+    });
+
+    return (
+      <FormGroup label={t('Tracked systemd services')}>
+        <LabelsView prefix="systemdUnits" labels={labels} />
+      </FormGroup>
+    );
+  }
+  return (
+    <FormGroup label={t('Tracked systemd services')}>
+      <SystemdUnitsForm />
+    </FormGroup>
+  );
+};
+
+export default SystemdUnitsFormWrapper;

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

@@ -22,14 +22,14 @@ import {
 } from './deviceSpecUtils';
 
 export const getValidationSchema = (t: TFunction) =>
-  Yup.lazy(() =>
+  Yup.lazy((values: EditDeviceFormValues) =>
     Yup.object({
       deviceAlias: validKubernetesLabelValue(t, { isRequired: false, fieldName: t('Alias') }),
       osImage: validOsImage(t, { isFleet: false }),
       labels: validLabelsSchema(t),
       configTemplates: validConfigTemplatesSchema(t),
       applications: validApplicationsSchema(t),
-      updatePolicy: validUpdatePolicySchema(t),
+      updatePolicy: values.updatePolicy.isAdvanced ? validUpdatePolicySchema(t) : Yup.object(),
     }),
   );
 
@@ -85,11 +85,10 @@ export const getDevicePatches = (currentDevice: Device, updatedDevice: EditDevic
   allPatches = allPatches.concat(appPatches);
 
   // Updates
-  const updatesPatches = getUpdatePolicyPatches(
-    '/spec/updatePolicy',
-    currentDevice.spec?.updatePolicy,
-    updatedDevice.updatePolicy as Required<UpdatePolicyForm>,
-  );
+  const updatesPatches = getUpdatePolicyPatches('/spec/updatePolicy', currentDevice.spec?.updatePolicy, {
+    ...updatedDevice.updatePolicy,
+    isAdvanced: !updatedDevice.useBasicUpdateConfig,
+  } as Required<UpdatePolicyForm>);
   allPatches = allPatches.concat(updatesPatches);
 
   return allPatches;