@flightctl/ui-components 0.7.2 → 0.8.0-rc2

package/src/components/Fleet/CreateFleet/fleetSpecUtils.ts

@@ -1,6 +1,6 @@
 import { type DeviceUpdatePolicySpec, FleetSpec, Percentage } from '@flightctl/types';
 
-import { BatchLimitType, UpdatePolicyForm } from './../../../types/deviceSpec';
+import { BatchForm, BatchLimitType, RolloutPolicyForm, UpdatePolicyForm } from './../../../types/deviceSpec';
 import { fromAPILabel } from '../../../utils/labels';
 import * as timeUtils from '../../../utils/time';
 import { schedulesAreEqual } from '../../../utils/patch';
@@ -15,32 +15,14 @@ const numberValue = (value: Percentage | number | undefined) => {
   return Number(value.replace(/[%]/, ''));
 };
 
-export const getEmptyInitializedBatch = () => ({
-  limit: '',
+export const getEmptyInitializedBatch = (): BatchForm => ({
+  limit: undefined,
   limitType: BatchLimitType.BatchLimitPercent,
   successThreshold: numberValue(DEFAULT_BACKEND_SUCCESS_THRESHOLD_PERCENTAGE),
   selector: [],
 });
 
-export const getEmptyUpdateFormParams = () => ({
-  isEditable: true,
-  isAdvanced: false,
-  downloadAndInstallDiffer: false,
-  // Download schedule
-  downloadStartsAt: timeUtils.defaultStartTime,
-  downloadEndsAt: timeUtils.defaultEndTime,
-  downloadScheduleMode: timeUtils.UpdateScheduleMode.Daily,
-  downloadWeekDays: [false, false, false, false, false, false, false],
-  downloadTimeZone: timeUtils.localDeviceTimezone,
-  // Install schedule (updateSchedule in the API)
-  installStartsAt: timeUtils.defaultStartTime,
-  installEndsAt: timeUtils.defaultEndTime,
-  installScheduleMode: timeUtils.UpdateScheduleMode.Daily,
-  installWeekDays: [false, false, false, false, false, false, false],
-  installTimeZone: timeUtils.localDeviceTimezone,
-});
-
-export const getRolloutPolicyValues = (fleetSpec?: FleetSpec) => {
+export const getRolloutPolicyValues = (fleetSpec?: FleetSpec): RolloutPolicyForm => {
   const batches = (fleetSpec?.rolloutPolicy?.deviceSelection?.sequence || []).map((batch) => ({
     selector: fromAPILabel(batch.selector?.matchLabels || {}),
     limit: numberValue(batch.limit),
@@ -52,7 +34,11 @@ export const getRolloutPolicyValues = (fleetSpec?: FleetSpec) => {
 
   // If the policy does not specify the timeout, we set the backend's default as the field is required in the UI
   const updateTimeout = fleetSpec?.rolloutPolicy?.defaultUpdateTimeout || `${DEFAULT_BACKEND_UPDATE_TIMEOUT_MINUTES}m`;
-  return { isAdvanced: batches.length > 0, batches, updateTimeout: timeUtils.durationToMinutes(updateTimeout) };
+  return {
+    isAdvanced: batches.length > 0,
+    batches: batches.length ? batches : [getEmptyInitializedBatch()],
+    updateTimeout: timeUtils.durationToMinutes(updateTimeout),
+  };
 };
 
 export const getDisruptionBudgetValues = (fleetSpec?: FleetSpec) => {

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

@@ -13,6 +13,8 @@ import { FlightCtlLabel } from '../../../../types/extraTypes';
 import { getApiListCount } from '../../../../utils/api';
 import { getErrorMessage } from '../../../../utils/error';
 import { commonQueries } from '../../../../utils/query';
+import LabelsView from '../../../common/LabelsView';
+import { toAPILabel } from '../../../../utils/labels';
 
 const validateLabels = (labels: FlightCtlLabel[]) =>
   hasUniqueLabelKeys(labels) && getInvalidKubernetesLabels(labels).length === 0;
@@ -108,4 +110,13 @@ const DeviceLabelSelector = () => {
   );
 };
 
-export default DeviceLabelSelector;
+const DeviceLabelSelectorWrapper = ({ isReadOnly }: { isReadOnly: boolean }) => {
+  const [{ value: labels }] = useField<FlightCtlLabel[]>('labels');
+
+  if (isReadOnly) {
+    return <LabelsView prefix="device-selector" labels={toAPILabel(labels)} />;
+  }
+  return <DeviceLabelSelector />;
+};
+
+export default DeviceLabelSelectorWrapper;

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>