@flightctl/ui-components 0.7.2 → 0.8.0-rc1

package/src/components/Fleet/CreateFleet/steps/GeneralInfoStep.tsx

@@ -10,13 +10,18 @@ import FlightCtlForm from '../../../form/FlightCtlForm';
 import { getDnsSubdomainValidations } from '../../../form/validations';
 import DeviceLabelSelector from './DeviceLabelSelector';
 
+type GeneralInfoStepProps = {
+  isReadOnly: boolean;
+  isEdit: boolean;
+};
+
 export const generalInfoStepId = 'general-info';
 
 export const isGeneralInfoStepValid = (errors: FormikErrors<FleetFormValues>) => {
   return !errors.name && !errors.labels && !errors.fleetLabels;
 };
 
-const GeneralInfoStep = ({ isEdit }: { isEdit: boolean }) => {
+const GeneralInfoStep = ({ isEdit, isReadOnly }: GeneralInfoStepProps) => {
   const { t } = useTranslation();
 
   return (
@@ -24,17 +29,17 @@ const GeneralInfoStep = ({ isEdit }: { isEdit: boolean }) => {
       <FlightCtlForm>
         <NameField
           name="name"
-          aria-label={t('Name')}
+          aria-label={t('Fleet name')}
           isRequired
-          isDisabled={isEdit}
+          isDisabled={isEdit || isReadOnly}
           resourceType="fleets"
           validations={getDnsSubdomainValidations(t)}
         />
         <FormGroup label={t('Fleet labels')}>
-          <LabelsField name="fleetLabels" />
+          <LabelsField name="fleetLabels" isDisabled={isReadOnly} />
         </FormGroup>
         <FormGroup label={t('Device selector')}>
-          <DeviceLabelSelector />
+          <DeviceLabelSelector isReadOnly={isReadOnly} />
         </FormGroup>
       </FlightCtlForm>
     </Grid>

package/src/components/Fleet/CreateFleet/steps/ReviewStep.tsx

@@ -40,7 +40,7 @@ const ReviewStep = ({ error }: { error?: unknown }) => {
           }}
         >
           <DescriptionListGroup>
-            <DescriptionListTerm>{t('Name')}</DescriptionListTerm>
+            <DescriptionListTerm>{t('Fleet name')}</DescriptionListTerm>
             <DescriptionListDescription>{values.name}</DescriptionListDescription>
           </DescriptionListGroup>
           {values.fleetLabels.length > 0 && (
@@ -92,22 +92,25 @@ const ReviewStep = ({ error }: { error?: unknown }) => {
               </DescriptionListDescription>
             </DescriptionListGroup>
           )}
-
-          {values.rolloutPolicy.isAdvanced && (
-            <DescriptionListGroup>
-              <DescriptionListTerm>{t('Rollout policy')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                <ReviewUpdateRolloutPolicy rolloutPolicy={values.rolloutPolicy} />
-              </DescriptionListDescription>
-            </DescriptionListGroup>
-          )}
-          {values.disruptionBudget.isAdvanced && (
-            <DescriptionListGroup>
-              <DescriptionListTerm>{t('Disruption budget')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                <ReviewUpdateDisruptionBudget disruptionBudget={values.disruptionBudget} />
-              </DescriptionListDescription>
-            </DescriptionListGroup>
+          {!values.useBasicUpdateConfig && (
+            <>
+              {values.rolloutPolicy.isAdvanced && (
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Rollout policy')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <ReviewUpdateRolloutPolicy rolloutPolicy={values.rolloutPolicy} />
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              )}
+              {values.disruptionBudget.isAdvanced && (
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Disruption budget')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <ReviewUpdateDisruptionBudget disruptionBudget={values.disruptionBudget} />
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              )}
+            </>
           )}
         </FlightControlDescriptionList>
       </StackItem>

package/src/components/Fleet/CreateFleet/steps/UpdatePolicyStep.tsx

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import { Alert, Checkbox, FormGroup, FormSection, Grid } from '@patternfly/react-core';
+import { Alert, FormSection, Grid } from '@patternfly/react-core';
 import { FormikErrors, useFormikContext } from 'formik';
 
-import {
-  DEFAULT_BACKEND_UPDATE_TIMEOUT_MINUTES,
-  getEmptyInitializedBatch,
-  getEmptyUpdateFormParams,
-} from '../fleetSpecUtils';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import LabelWithHelperText from '../../../common/WithHelperText';
 import { FleetFormValues } from '../../../../types/deviceSpec';
@@ -15,133 +10,42 @@ import FlightCtlForm from '../../../form/FlightCtlForm';
 import UpdateStepRolloutPolicy from './UpdateStepRolloutPolicy';
 import UpdateStepDisruptionBudget from './UpdateStepDisruptionBudget';
 import UpdateStepUpdatePolicy from './UpdateStepUpdatePolicy';
-import UpdateConfirmChangesModal, { StepSetting } from './UpdateConfirmChangesModal';
+import CheckboxField from '../../../form/CheckboxField';
 
 export const updatePolicyStepId = 'update-policy';
 
 export const isUpdatePolicyStepValid = (errors: FormikErrors<FleetFormValues>) =>
   !errors.rolloutPolicy && !errors.disruptionBudget && !errors.updatePolicy;
 
-const UpdatePolicyStep = () => {
+const UpdatePolicyStep = ({ isReadOnly }: { isReadOnly: boolean }) => {
   const { t } = useTranslation();
 
   const {
-    values: { rolloutPolicy, disruptionBudget, updatePolicy },
-    setFieldValue,
+    values: { useBasicUpdateConfig, rolloutPolicy, disruptionBudget, updatePolicy },
   } = useFormikContext<FleetFormValues>();
 
-  const [forceShowAdvancedMode, setForceShowAdvancedMode] = React.useState<boolean>(false);
-  const [alertSwitchToBasic, setAlertSwitchToBasic] = React.useState<StepSetting>();
-  const hasAdvancedMode = rolloutPolicy.isAdvanced || disruptionBudget.isAdvanced || updatePolicy.isAdvanced;
-
-  const onSettingsChange = (setting: StepSetting, toAdvanced: boolean) => {
-    if (toAdvanced) {
-      switch (setting) {
-        case 'all-settings':
-          setForceShowAdvancedMode(true);
-          break;
-        case 'rollout-policies':
-          setFieldValue('rolloutPolicy.isAdvanced', true);
-          void onChangePolicyType(true);
-          break;
-        case 'disruption-budget':
-          setFieldValue('disruptionBudget.isAdvanced', true);
-          void onChangeDisruptionBudget(true);
-          break;
-        case 'update-policies':
-          setFieldValue('updatePolicy.isAdvanced', true);
-          void onChangeUpdatePolicy(true);
-          break;
-      }
-    } else {
-      setAlertSwitchToBasic(setting);
-    }
-  };
-
-  const onChangePolicyType = async (toAdvanced: boolean) => {
-    await setFieldValue('rolloutPolicy', {
-      isAdvanced: toAdvanced,
-      batches: toAdvanced ? [getEmptyInitializedBatch()] : [],
-      updateTimeout: DEFAULT_BACKEND_UPDATE_TIMEOUT_MINUTES,
-    });
-  };
-
-  const onChangeDisruptionBudget = async (toAdvanced: boolean) => {
-    if (!toAdvanced) {
-      await setFieldValue('disruptionBudget', {
-        isAdvanced: false,
-        groupBy: [],
-        minAvailable: '',
-        maxUnavailable: '',
-      });
-    }
-  };
-
-  const onChangeUpdatePolicy = async (toAdvanced: boolean) => {
-    if (!toAdvanced) {
-      await setFieldValue('updatePolicy', getEmptyUpdateFormParams());
-    }
-  };
-
-  const onModalClose = async (doSwitch: boolean) => {
-    setAlertSwitchToBasic(undefined);
-    if (!doSwitch) {
-      return;
-    }
-
-    // When the user confirms switching a setting to its basic mode
-    switch (alertSwitchToBasic) {
-      case 'all-settings':
-        await onChangePolicyType(false);
-        await onChangeDisruptionBudget(false);
-        await onChangeUpdatePolicy(false);
-        break;
-      case 'rollout-policies':
-        void onChangePolicyType(false);
-        break;
-      case 'disruption-budget':
-        void onChangeDisruptionBudget(false);
-        break;
-      case 'update-policies':
-        void onChangeUpdatePolicy(false);
-        break;
-    }
-    setForceShowAdvancedMode(false);
-  };
-
   return (
     <Grid lg={8}>
       <FlightCtlForm>
-        <FormGroup>
-          <Checkbox
-            label={t('Use basic configurations')}
-            isChecked={!hasAdvancedMode && !forceShowAdvancedMode}
-            id="all-settings"
-            onChange={(_ev: React.FormEvent<HTMLInputElement>, toBasic: boolean) => {
-              onSettingsChange('all-settings', !toBasic);
-            }}
-          />
-        </FormGroup>
-        {hasAdvancedMode || forceShowAdvancedMode ? (
+        <CheckboxField name="useBasicUpdateConfig" label={t('Use basic configurations')} />
+        {!useBasicUpdateConfig ? (
           <FormSection title={t('Advanced configurations')} titleElement="h1" className="pf-v5-u-mt-sm">
             {/* Rollout policies */}
-            <Checkbox
+            <CheckboxField
+              name="rolloutPolicy.isAdvanced"
               label={
                 <LabelWithHelperText
                   label={t('Set rollout policies')}
                   content={t('Rollout policies allow you to control the order of updates for the fleet devices.')}
                 />
               }
-              isChecked={rolloutPolicy.isAdvanced}
-              id="advRolloutPolicy"
-              onChange={(_ev: React.FormEvent<HTMLInputElement>, toAdvanced: boolean) =>
-                onSettingsChange('rollout-policies', toAdvanced)
-              }
-              body={rolloutPolicy.isAdvanced && <UpdateStepRolloutPolicy />}
+              isDisabled={isReadOnly}
+              body={rolloutPolicy.isAdvanced && <UpdateStepRolloutPolicy isReadOnly={isReadOnly} />}
             />
 
             {/* Disruption budget */}
-            <Checkbox
+            <CheckboxField
+              name="disruptionBudget.isAdvanced"
               label={
                 <LabelWithHelperText
                   label={t('Set disruption budget')}
@@ -150,28 +54,21 @@ const UpdatePolicyStep = () => {
                   )}
                 />
               }
-              isChecked={disruptionBudget.isAdvanced}
-              id="advDisruptionBudget"
-              onChange={(_ev: React.FormEvent<HTMLInputElement>, toAdvanced: boolean) =>
-                onSettingsChange('disruption-budget', toAdvanced)
-              }
-              body={disruptionBudget.isAdvanced && <UpdateStepDisruptionBudget />}
+              isDisabled={isReadOnly}
+              body={disruptionBudget.isAdvanced && <UpdateStepDisruptionBudget isReadOnly={isReadOnly} />}
             />
 
             {/* Update (and download) policies */}
-            <Checkbox
+            <CheckboxField
+              name="updatePolicy.isAdvanced"
               label={
                 <LabelWithHelperText
                   label={t('Set update policies')}
                   content={t('Update policies allow you to control when updates should be downloaded and applied.')}
                 />
               }
-              isChecked={updatePolicy.isAdvanced}
-              id="advUpdatePolicy"
-              onChange={(_ev: React.FormEvent<HTMLInputElement>, toAdvanced: boolean) =>
-                onSettingsChange('update-policies', toAdvanced)
-              }
-              body={updatePolicy.isAdvanced && <UpdateStepUpdatePolicy />}
+              isDisabled={isReadOnly}
+              body={updatePolicy.isAdvanced && <UpdateStepUpdatePolicy isReadOnly={isReadOnly} />}
             />
           </FormSection>
         ) : (
@@ -179,7 +76,6 @@ const UpdatePolicyStep = () => {
             {t('All the devices that are part of this fleet will receive updates as soon as they are available.')}
           </Alert>
         )}
-        {alertSwitchToBasic && <UpdateConfirmChangesModal setting={alertSwitchToBasic} onClose={onModalClose} />}
       </FlightCtlForm>
     </Grid>
   );

package/src/components/Fleet/CreateFleet/steps/UpdateStepDisruptionBudget.tsx

@@ -9,7 +9,7 @@ import ErrorHelperText from '../../../form/FieldHelperText';
 import { FormGroupWithHelperText } from '../../../common/WithHelperText';
 import { DisruptionBudgetForm } from '../../../../types/deviceSpec';
 
-const UpdateStepDisruptionBudget = () => {
+const UpdateStepDisruptionBudget = ({ isReadOnly }: { isReadOnly: boolean }) => {
   const { t } = useTranslation();
 
   const [, meta] = useField<DisruptionBudgetForm>('disruptionBudget');
@@ -29,6 +29,7 @@ const UpdateStepDisruptionBudget = () => {
               <StackItem>{t("Leaving this empty will apply the disruption budget to all fleet's devices.")}</StackItem>
             </Stack>
           }
+          isReadOnly={isReadOnly}
         />
       </FormGroupWithHelperText>
       <FormGroup>
@@ -44,6 +45,7 @@ const UpdateStepDisruptionBudget = () => {
                 aria-label={t('Minimum number of available devices')}
                 name="disruptionBudget.minAvailable"
                 min={1}
+                isDisabled={isReadOnly}
               />
             </FormGroupWithHelperText>
           </FlexItem>
@@ -58,6 +60,7 @@ const UpdateStepDisruptionBudget = () => {
                 aria-label={t('Maximum number of unavailable devices')}
                 name="disruptionBudget.maxUnavailable"
                 min={1}
+                isDisabled={isReadOnly}
               />
             </FormGroupWithHelperText>
           </FlexItem>

package/src/components/Fleet/CreateFleet/steps/UpdateStepRolloutPolicy.tsx

@@ -24,7 +24,7 @@ import { FormGroupWithHelperText } from '../../../common/WithHelperText';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import { getEmptyInitializedBatch } from '../fleetSpecUtils';
 
-const RolloutPolicyBatch = ({ index }: { index: number }) => {
+const RolloutPolicyBatch = ({ index, isReadOnly }: { index: number; isReadOnly: boolean }) => {
   const { t } = useTranslation();
 
   const items = React.useMemo(
@@ -47,16 +47,20 @@ const RolloutPolicyBatch = ({ index }: { index: number }) => {
         {/* Show errors not related to an individual field */}
         {typeof meta.error === 'string' && (
           <GridItem>
-            <ErrorHelperText meta={meta} />
+            <ErrorHelperText meta={meta} touchRequired={false} />
           </GridItem>
         )}
         <FormGroup label={t('Select devices using labels')}>
-          <LabelsField aria-label={t('Label selector')} name={`rolloutPolicy.batches.${index}.selector`} />
+          <LabelsField
+            aria-label={t('Label selector')}
+            name={`rolloutPolicy.batches.${index}.selector`}
+            isDisabled={isReadOnly}
+          />
         </FormGroup>
         <FormGroup label={t('Select a subset using')}>
           <Split hasGutter>
             <SplitItem>
-              <FormSelect items={items} name={`rolloutPolicy.batches.${index}.limitType`} />
+              <FormSelect items={items} name={`rolloutPolicy.batches.${index}.limitType`} isDisabled={isReadOnly} />
             </SplitItem>
             <SplitItem>
               <NumberField
@@ -66,6 +70,7 @@ const RolloutPolicyBatch = ({ index }: { index: number }) => {
                 max={isPercent ? 100 : undefined}
                 widthChars={isPercent ? 3 : 8}
                 unit={isPercent ? '%' : undefined}
+                isDisabled={isReadOnly}
               />
             </SplitItem>
           </Split>
@@ -86,6 +91,7 @@ const RolloutPolicyBatch = ({ index }: { index: number }) => {
                 min={1}
                 max={100}
                 isRequired
+                isDisabled={isReadOnly}
               />
             </FlexItem>
             <FlexItem flex={{ lg: 'flex_1' }} style={{ minWidth: 200 }}>
@@ -100,7 +106,7 @@ const RolloutPolicyBatch = ({ index }: { index: number }) => {
   );
 };
 
-const UpdateStepRolloutPolicy = () => {
+const UpdateStepRolloutPolicy = ({ isReadOnly }: { isReadOnly: boolean }) => {
   const { t } = useTranslation();
 
   const {
@@ -108,6 +114,9 @@ const UpdateStepRolloutPolicy = () => {
   } = useFormikContext<FleetFormValues>();
 
   const batches = rolloutPolicy.batches || [];
+  if (isReadOnly && batches.length === 0) {
+    return null;
+  }
 
   return (
     <>
@@ -126,7 +135,13 @@ const UpdateStepRolloutPolicy = () => {
         <Flex>
           <FlexItem>{t('Timeout devices that fail to update after')}</FlexItem>
           <FlexItem>
-            <NumberField aria-label={t('Update timeout')} name="rolloutPolicy.updateTimeout" min={1} isRequired />
+            <NumberField
+              aria-label={t('Update timeout')}
+              name="rolloutPolicy.updateTimeout"
+              min={1}
+              isRequired
+              isDisabled={isReadOnly}
+            />
           </FlexItem>
           <FlexItem>{t('minutes')}.</FlexItem>
         </Flex>
@@ -140,35 +155,39 @@ const UpdateStepRolloutPolicy = () => {
                 <FormSection key={index}>
                   <Split hasGutter>
                     <SplitItem isFilled>
-                      <RolloutPolicyBatch index={index} />
-                    </SplitItem>
-                    <SplitItem>
-                      <Button
-                        aria-label={t('Delete batch')}
-                        variant="link"
-                        icon={<MinusCircleIcon />}
-                        iconPosition="start"
-                        onClick={() => remove(index)}
-                        isDisabled={batches.length === 1}
-                      />
+                      <RolloutPolicyBatch index={index} isReadOnly={isReadOnly} />
                     </SplitItem>
+                    {!isReadOnly && (
+                      <SplitItem>
+                        <Button
+                          aria-label={t('Delete batch')}
+                          variant="link"
+                          icon={<MinusCircleIcon />}
+                          iconPosition="start"
+                          onClick={() => remove(index)}
+                          isDisabled={batches.length === 1}
+                        />
+                      </SplitItem>
+                    )}
                   </Split>
                 </FormSection>
               ))}
-              <FormSection>
-                <FormGroup>
-                  <Button
-                    variant="link"
-                    icon={<PlusCircleIcon />}
-                    iconPosition="start"
-                    onClick={() => {
-                      push(getEmptyInitializedBatch());
-                    }}
-                  >
-                    {t('Add batch')}
-                  </Button>
-                </FormGroup>
-              </FormSection>
+              {!isReadOnly && (
+                <FormSection>
+                  <FormGroup>
+                    <Button
+                      variant="link"
+                      icon={<PlusCircleIcon />}
+                      iconPosition="start"
+                      onClick={() => {
+                        push(getEmptyInitializedBatch());
+                      }}
+                    >
+                      {t('Add batch')}
+                    </Button>
+                  </FormGroup>
+                </FormSection>
+              )}
             </>
           )}
         </FieldArray>

package/src/components/Fleet/CreateFleet/steps/UpdateStepUpdatePolicy.tsx

@@ -24,9 +24,10 @@ type ScheduleBlockProps = {
   blockType: ScheduleBlockType;
   weekDayError?: string[] | string | Weekday;
   onScheduleModeSwitch: (blockType: ScheduleBlockType) => void;
+  isReadOnly?: boolean;
 };
 
-const ScheduleTimeZone = ({ blockType }: { blockType: ScheduleBlockType }) => {
+const ScheduleTimeZone = ({ blockType, isReadOnly }: { blockType: ScheduleBlockType; isReadOnly?: boolean }) => {
   const { t } = useTranslation();
 
   const id = `updatePolicy.${blockType}TimeZone`;
@@ -49,14 +50,23 @@ const ScheduleTimeZone = ({ blockType }: { blockType: ScheduleBlockType }) => {
         id={id}
         onChange={onChangeTimezoneCheckbox}
         label={t("Use device's local timezone")}
+        isDisabled={isReadOnly}
       />
 
-      {timeZone !== timeUtils.localDeviceTimezone && <FormSelectTypeahead name={id} defaultId="" items={zones} />}
+      {timeZone !== timeUtils.localDeviceTimezone && (
+        <FormSelectTypeahead name={id} defaultId="" items={zones} isDisabled={isReadOnly} />
+      )}
     </FormGroup>
   );
 };
 
-const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayError }: ScheduleBlockProps) => {
+const ScheduleBlock = ({
+  blockType,
+  updatePolicy,
+  onScheduleModeSwitch,
+  weekDayError,
+  isReadOnly,
+}: ScheduleBlockProps) => {
   const { t } = useTranslation();
 
   let ariaLabel: string;
@@ -115,6 +125,7 @@ const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayE
                 items={selectableTimes}
                 isValidTypedItem={isValidTypedItem}
                 transformTypedItem={transformTypedItem}
+                isDisabled={isReadOnly}
               />
             </FlexItem>
             <FlexItem>
@@ -125,6 +136,7 @@ const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayE
                 items={selectableTimes}
                 isValidTypedItem={isValidTypedItem}
                 transformTypedItem={transformTypedItem}
+                isDisabled={isReadOnly}
               />
             </FlexItem>
             <FlexItem>
@@ -133,6 +145,7 @@ const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayE
                 name={`updatePolicy.${blockType}ScheduleMode`}
                 label={t('Daily')}
                 checkedValue={timeUtils.UpdateScheduleMode.Daily}
+                isDisabled={isReadOnly}
               />
             </FlexItem>
             <FlexItem>
@@ -142,6 +155,7 @@ const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayE
                 label={t('Weekly')}
                 checkedValue={timeUtils.UpdateScheduleMode.Weekly}
                 onChangeCustom={() => onScheduleModeSwitch(blockType)}
+                isDisabled={isReadOnly}
               />
             </FlexItem>
           </Flex>
@@ -153,25 +167,53 @@ const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayE
                 <StackItem>
                   <Flex>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[0]`} label={t('Sun')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[0]`}
+                        label={t('Sun')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[1]`} label={t('Mon')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[1]`}
+                        label={t('Mon')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[2]`} label={t('Tue')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[2]`}
+                        label={t('Tue')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[3]`} label={t('Wed')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[3]`}
+                        label={t('Wed')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[4]`} label={t('Thu')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[4]`}
+                        label={t('Thu')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[5]`} label={t('Fri')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[5]`}
+                        label={t('Fri')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                     <FlexItem>
-                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[6]`} label={t('Sat')} />
+                      <CheckboxFieldGroupValidation
+                        name={`updatePolicy.${blockType}WeekDays[6]`}
+                        label={t('Sat')}
+                        isDisabled={isReadOnly}
+                      />
                     </FlexItem>
                   </Flex>
                 </StackItem>
@@ -183,14 +225,14 @@ const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayE
           </FieldArray>
         )}
         <StackItem style={{ maxWidth: 500 }}>
-          <ScheduleTimeZone blockType={blockType} />
+          <ScheduleTimeZone blockType={blockType} isReadOnly={isReadOnly} />
         </StackItem>
       </Stack>
     </FormGroupWithHelperText>
   );
 };
 
-const UpdateStepUpdatePolicy = () => {
+const UpdateStepUpdatePolicy = ({ isReadOnly }: { isReadOnly?: boolean }) => {
   const { t } = useTranslation();
 
   const {
@@ -217,6 +259,7 @@ const UpdateStepUpdatePolicy = () => {
         <CheckboxField
           label={t('Use different update schedules for downloading and installing updates')}
           name="updatePolicy.downloadAndInstallDiffer"
+          isDisabled={isReadOnly}
         />
       </StackItem>
 
@@ -226,6 +269,7 @@ const UpdateStepUpdatePolicy = () => {
           updatePolicy={updatePolicy}
           weekDayError={errors.updatePolicy?.downloadWeekDays}
           onScheduleModeSwitch={onSwitchToWeeklyMode}
+          isReadOnly={isReadOnly}
         />
       </StackItem>
 
@@ -236,6 +280,7 @@ const UpdateStepUpdatePolicy = () => {
             updatePolicy={updatePolicy}
             weekDayError={errors.updatePolicy?.installWeekDays}
             onScheduleModeSwitch={onSwitchToWeeklyMode}
+            isReadOnly={isReadOnly}
           />
         </StackItem>
       )}