@flightctl/ui-components 0.5.1 → 0.6.0-rc2

package/src/components/EnrollmentRequest/EnrollmentRequestDetails/EnrollmentRequestDetails.tsx

@@ -29,7 +29,7 @@ import ApproveDeviceModal from '../../modals/ApproveDeviceModal/ApproveDeviceMod
 import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
 import DetailsPageActions, { useDeleteAction } from '../../DetailsPage/DetailsPageActions';
 import EnrollmentRequestStatus from '../../Status/EnrollmentRequestStatus';
-import WithHelperText from '../../common/WithHelperText';
+import LabelWithHelperText from '../../common/WithHelperText';
 import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
@@ -67,7 +67,6 @@ const EnrollmentRequestDetails = () => {
 
   const approvalStatus = er ? getApprovalStatus(er) : '-';
   const isPendingApproval = approvalStatus === EnrollmentRequestStatusType.Pending;
-
   return (
     <DetailsPage
       loading={loading}
@@ -77,7 +76,7 @@ const EnrollmentRequestDetails = () => {
       resourceType="Devices"
       resourceTypeLabel={t('Devices')}
       actions={
-        (canApprove || canApprove) && (
+        (canApprove || canDelete) && (
           <DetailsPageActions>
             <DropdownList>
               {canApprove && (
@@ -120,9 +119,9 @@ const EnrollmentRequestDetails = () => {
                   </DescriptionListDescription>
                 </DescriptionListGroup>
                 <DescriptionListGroup>
-                  <DescriptionListTerm>{t('Labels')}</DescriptionListTerm>
+                  <DescriptionListTerm>{t('Default labels')}</DescriptionListTerm>
                   <DescriptionListDescription>
-                    <LabelsView prefix="er" labels={er?.metadata.labels} />
+                    <LabelsView prefix="er" labels={er?.spec.labels} />
                   </DescriptionListDescription>
                 </DescriptionListGroup>
                 <DescriptionListGroup>
@@ -138,9 +137,8 @@ const EnrollmentRequestDetails = () => {
         <GridItem md={6}>
           <DetailsPageCard>
             <CardTitle>
-              <WithHelperText
-                showLabel
-                ariaLabel={t('Certificate signing request')}
+              <LabelWithHelperText
+                label={t('Certificate signing request')}
                 content={t('A PEM-encoded PKCS#10 certificate signing request.')}
               />
             </CardTitle>
@@ -162,7 +160,7 @@ const EnrollmentRequestDetails = () => {
         <GridItem md={6}>
           <DetailsPageCard>
             <CardTitle>
-              <WithHelperText showLabel ariaLabel={t('Certificate')} content={t('A PEM-encoded signed certificate.')} />
+              <LabelWithHelperText label={t('Certificate')} content={t('A PEM-encoded signed certificate.')} />
             </CardTitle>
             <DetailsPageCardBody>
               {er?.status?.certificate ? (

package/src/components/EnrollmentRequest/EnrollmentRequestList.tsx

@@ -4,7 +4,7 @@ import { Tbody } from '@patternfly/react-table';
 import { SelectList, SelectOption, ToolbarItem } from '@patternfly/react-core';
 import { MicrochipIcon } from '@patternfly/react-icons/dist/js/icons';
 
-import { EnrollmentRequest, EnrollmentRequestList } from '@flightctl/types';
+import { EnrollmentRequestList } from '@flightctl/types';
 
 import Table, { ApiSortTableColumn } from '../Table/Table';
 import TableActions from '../Table/TableActions';
@@ -14,7 +14,6 @@ import { useDeleteListAction } from '../ListPage/ListPageActions';
 import { useFetch } from '../../hooks/useFetch';
 import { useTranslation } from '../../hooks/useTranslation';
 import { useTableSelect } from '../../hooks/useTableSelect';
-import { useTableTextSearch } from '../../hooks/useTableTextSearch';
 import ApproveDeviceModal from '../modals/ApproveDeviceModal/ApproveDeviceModal';
 import MassDeleteDeviceModal from '../modals/massModals/MassDeleteDeviceModal/MassDeleteDeviceModal';
 import MassApproveDeviceModal from '../modals/massModals/MassApproveDeviceModal/MassApproveDeviceModal';
@@ -32,6 +31,9 @@ const EnrollmentRequestEmptyState = () => {
 };
 
 const getEnrollmentColumns = (t: TFunction): ApiSortTableColumn[] => [
+  {
+    name: t('Alias'),
+  },
   {
     name: t('Name'),
   },
@@ -40,17 +42,22 @@ const getEnrollmentColumns = (t: TFunction): ApiSortTableColumn[] => [
   },
 ];
 
-const getSearchText = (er: EnrollmentRequest) => [er.metadata.name];
-
-type EnrollmentRequestListProps = { refetchDevices?: VoidFunction; isStandalone?: boolean };
+type EnrollmentRequestListProps = {
+  refetchDevices?: VoidFunction;
+  onEmptyListChanged?: (isEmpty: boolean) => void;
+  isStandalone?: boolean;
+};
 
-const EnrollmentRequestList = ({ refetchDevices, isStandalone }: EnrollmentRequestListProps) => {
+const EnrollmentRequestList = ({ onEmptyListChanged, refetchDevices, isStandalone }: EnrollmentRequestListProps) => {
   const { t } = useTranslation();
   const [canApprove] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST_APPROVAL, VERB.POST);
   const [canDelete] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST, VERB.DELETE);
   const { remove } = useFetch();
+  const [search, setSearch] = React.useState<string>('');
+
   const enrollmentColumns = React.useMemo(() => getEnrollmentColumns(t), [t]);
-  const [pendingEnrollments, isLoading, error, refetch, pagination] = usePendingEnrollments();
+  const [pendingEnrollments, isLoading, error, refetch, pagination] = usePendingEnrollments(search);
+  const itemCount = pendingEnrollments.length;
 
   const refetchWithDevices = () => {
     refetch();
@@ -61,8 +68,6 @@ const EnrollmentRequestList = ({ refetchDevices, isStandalone }: EnrollmentReque
   const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
   const [isMassApproveModalOpen, setIsMassApproveModalOpen] = React.useState(false);
 
-  const { search, setSearch, filteredData } = useTableTextSearch(pendingEnrollments, getSearchText);
-
   const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
 
   const { action: deleteAction, modal: deleteModal } = useDeleteListAction({
@@ -73,8 +78,15 @@ const EnrollmentRequestList = ({ refetchDevices, isStandalone }: EnrollmentReque
     },
   });
 
-  // In non-standalone mode, hide the entire component when there are no pending enrollments
-  if (!isStandalone && pendingEnrollments.length === 0) {
+  React.useEffect(() => {
+    if (onEmptyListChanged && !search && !isLoading) {
+      onEmptyListChanged?.(itemCount === 0);
+    }
+  }, [search, itemCount, isLoading, onEmptyListChanged]);
+
+  // In non-standalone mode, hide the entire component when the search result is empty (and not due to filtering)
+  const isLastUnfilteredListEmpty = !search && itemCount === 0;
+  if (!isStandalone && isLastUnfilteredListEmpty) {
     return null;
   }
 
@@ -101,10 +113,11 @@ const EnrollmentRequestList = ({ refetchDevices, isStandalone }: EnrollmentReque
         </EnrollmentRequestTableToolbar>
         <Table
           aria-label={t('Table for devices pending approval')}
-          loading={!!isStandalone && isLoading && pendingEnrollments.length === 0}
+          loading={!!isStandalone && isLoading && isLastUnfilteredListEmpty}
           columns={enrollmentColumns}
-          emptyFilters={filteredData.length === 0}
-          emptyData={false}
+          emptyData={itemCount === 0}
+          clearFilters={() => setSearch('')}
+          hasFilters={!!search}
           isAllSelected={isAllSelected}
           onSelectAll={setAllSelected}
         >
@@ -127,7 +140,7 @@ const EnrollmentRequestList = ({ refetchDevices, isStandalone }: EnrollmentReque
           </Tbody>
         </Table>
         <TablePagination pagination={pagination} isUpdating={isLoading} />
-        {isStandalone && pendingEnrollments.length === 0 && !isLoading && <EnrollmentRequestEmptyState />}
+        {isStandalone && itemCount === 0 && !isLoading && <EnrollmentRequestEmptyState />}
         {deleteModal}
         {currentEnrollmentRequest && (
           <ApproveDeviceModal
@@ -141,7 +154,7 @@ const EnrollmentRequestList = ({ refetchDevices, isStandalone }: EnrollmentReque
         {isMassDeleteModalOpen && (
           <MassDeleteDeviceModal
             onClose={() => setIsMassDeleteModalOpen(false)}
-            resources={filteredData.filter(isRowSelected)}
+            resources={pendingEnrollments.filter(isRowSelected)}
             onDeleteSuccess={() => {
               setIsMassDeleteModalOpen(false);
               refetch();
@@ -151,7 +164,7 @@ const EnrollmentRequestList = ({ refetchDevices, isStandalone }: EnrollmentReque
         {isMassApproveModalOpen && (
           <MassApproveDeviceModal
             onClose={() => setIsMassApproveModalOpen(false)}
-            pendingEnrollments={filteredData.filter(isRowSelected)}
+            pendingEnrollments={pendingEnrollments.filter(isRowSelected)}
             onApproveSuccess={() => {
               setAllSelected(false);
               setIsMassApproveModalOpen(false);

package/src/components/EnrollmentRequest/EnrollmentRequestTableRow.tsx

@@ -32,6 +32,7 @@ const EnrollmentRequestTableRow: React.FC<EnrollmentRequestTableRow> = ({
 }) => {
   const { t } = useTranslation();
   const erName = er.metadata.name as string;
+  const erAlias = er.spec.labels?.alias;
 
   const approveEnrollment = () => {
     onApprove(erName);
@@ -57,8 +58,11 @@ const EnrollmentRequestTableRow: React.FC<EnrollmentRequestTableRow> = ({
           isSelected: isRowSelected(er),
         }}
       />
+      <Td dataLabel={t('Alias')}>
+        <ResourceLink id={erName} name={erAlias || t('Untitled')} routeLink={ROUTE.ENROLLMENT_REQUEST_DETAILS} />
+      </Td>
       <Td dataLabel={t('Name')}>
-        <ResourceLink id={erName} routeLink={ROUTE.ENROLLMENT_REQUEST_DETAILS} />
+        <ResourceLink id={erName} />
       </Td>
       <Td dataLabel={t('Created')}>{timeSinceText(t, er.metadata.creationTimestamp)}</Td>
       {canApprove && (

package/src/components/EnrollmentRequest/useEnrollmentRequests.ts

@@ -10,12 +10,18 @@ import { PaginationDetails, useTablePagination } from '../../hooks/useTablePagin
 import { PAGE_SIZE } from '../../constants';
 
 type EnrollmentRequestsEndpointArgs = {
+  search?: string;
   nextContinue?: string;
 };
 
-const getPendingEnrollmentsEndpoint = ({ nextContinue }: EnrollmentRequestsEndpointArgs) => {
+const getPendingEnrollmentsEndpoint = ({ search, nextContinue }: EnrollmentRequestsEndpointArgs) => {
+  const fieldSelector = ['!status.approval.approved'];
+  if (search) {
+    fieldSelector.push(`metadata.name contains ${search}`);
+  }
+
   const params = new URLSearchParams({
-    fieldSelector: '!status.approval.approved',
+    fieldSelector: fieldSelector.join(','),
   });
 
   if (nextContinue !== undefined) {
@@ -33,7 +39,9 @@ export const useEnrollmentRequestsEndpoint = (args: EnrollmentRequestsEndpointAr
   return [pendingErEndpointDebounced, endpoint !== pendingErEndpointDebounced];
 };
 
-export const usePendingEnrollments = (): [
+export const usePendingEnrollments = (
+  search?: string,
+): [
   EnrollmentRequest[],
   boolean,
   unknown,
@@ -42,7 +50,7 @@ export const usePendingEnrollments = (): [
 ] => {
   const { currentPage, setCurrentPage, itemCount, nextContinue, onPageFetched } =
     useTablePagination<EnrollmentRequestList>();
-  const [pendingErEndpoint, isDebouncing] = useEnrollmentRequestsEndpoint({ nextContinue });
+  const [pendingErEndpoint, isDebouncing] = useEnrollmentRequestsEndpoint({ search, nextContinue });
 
   const [erList, isLoading, error, refetch] = useFetchPeriodically<EnrollmentRequestList>(
     {

package/src/components/Fleet/CreateFleet/CreateFleetWizard.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   Alert,
   Breadcrumb,
@@ -11,10 +12,11 @@ import {
   WizardStep,
   WizardStepType,
 } from '@patternfly/react-core';
-import * as React from 'react';
 import { Fleet } from '@flightctl/types';
 import { Formik, FormikErrors } from 'formik';
-import { FleetFormValues } from './types';
+
+import { FleetFormValues } from './../../../types/deviceSpec';
+import { RESOURCE, VERB } from '../../../types/rbac';
 import { useFetch } from '../../../hooks/useFetch';
 import { getErrorMessage } from '../../../utils/error';
 import { useTranslation } from '../../../hooks/useTranslation';
@@ -32,7 +34,6 @@ import { useEditFleet } from './useEditFleet';
 import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
 import ErrorBoundary from '../../common/ErrorBoundary';
 import { useAccessReview } from '../../../hooks/useAccessReview';
-import { RESOURCE, VERB } from '../../../types/rbac';
 import PageWithPermissions from '../../common/PageWithPermissions';
 import { useAppContext } from '../../../hooks/useAppContext';
 

package/src/components/Fleet/CreateFleet/CreateFleetWizardFooter.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { Button, WizardFooterWrapper, useWizardContext } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
-import { FleetFormValues } from './types';
+import { FleetFormValues } from './../../../types/deviceSpec';
 import { useNavigate } from '../../../hooks/useNavigate';
 import { reviewStepId } from './steps/ReviewStep';
 import { generalInfoStepId, isGeneralInfoStepValid } from './steps/GeneralInfoStep';
@@ -21,6 +21,7 @@ const CreateFleetWizardFooter = ({ isEdit }: CreateFleetWizardFooterProps) => {
   const { goToNextStep, goToPrevStep, activeStep } = useWizardContext();
   const { submitForm, isSubmitting, errors } = useFormikContext<FleetFormValues>();
   const navigate = useNavigate();
+  const buttonRef = React.useRef<HTMLButtonElement>();
 
   const isReviewStep = activeStep.id === reviewStepId;
   let isStepValid = true;
@@ -32,12 +33,18 @@ const CreateFleetWizardFooter = ({ isEdit }: CreateFleetWizardFooterProps) => {
     isStepValid = isUpdatePolicyStepValid(errors);
   }
 
+  const onMoveNext = () => {
+    goToNextStep();
+    // Blur the button, otherwise it keeps the focus from the previous click
+    buttonRef.current?.blur();
+  };
+
   const primaryBtn = isReviewStep ? (
     <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
       {isEdit ? t('Save') : t('Create fleet')}
     </Button>
   ) : (
-    <Button variant="primary" onClick={goToNextStep} isDisabled={!isStepValid}>
+    <Button variant="primary" onClick={onMoveNext} isDisabled={!isStepValid} ref={buttonRef}>
       {t('Next')}
     </Button>
   );

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

@@ -1,7 +1,9 @@
-import { Duration, FleetSpec, Percentage } from '@flightctl/types';
+import { type DeviceUpdatePolicySpec, FleetSpec, Percentage } from '@flightctl/types';
 
-import { BatchLimitType } from './types';
+import { BatchLimitType, UpdatePolicyForm } from './../../../types/deviceSpec';
 import { fromAPILabel } from '../../../utils/labels';
+import * as timeUtils from '../../../utils/time';
+import { schedulesAreEqual } from '../../../utils/patch';
 
 export const DEFAULT_BACKEND_UPDATE_TIMEOUT_MINUTES = 1140; // 24h, expressed in minutes
 const DEFAULT_BACKEND_SUCCESS_THRESHOLD_PERCENTAGE = '90%';
@@ -20,20 +22,23 @@ export const getEmptyInitializedBatch = () => ({
   selector: [],
 });
 
-const durationToMinutes = (duration: Duration) => {
-  const timeoutVal = Number(duration.replace(/[shm]/, ''));
-  if (!timeoutVal) {
-    return 0;
-  }
-
-  if (duration.includes('s')) {
-    return Math.round(timeoutVal / 60);
-  }
-  if (duration.includes('h')) {
-    return Math.round(timeoutVal * 60);
-  }
-  return timeoutVal;
-};
+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) => {
   const batches = (fleetSpec?.rolloutPolicy?.deviceSelection?.sequence || []).map((batch) => ({
@@ -47,7 +52,7 @@ 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: durationToMinutes(updateTimeout) };
+  return { isAdvanced: batches.length > 0, batches, updateTimeout: timeUtils.durationToMinutes(updateTimeout) };
 };
 
 export const getDisruptionBudgetValues = (fleetSpec?: FleetSpec) => {
@@ -60,3 +65,32 @@ export const getDisruptionBudgetValues = (fleetSpec?: FleetSpec) => {
     maxUnavailable: budget.maxUnavailable,
   };
 };
+
+export const getUpdatePolicyValues = (updateSpec?: DeviceUpdatePolicySpec): UpdatePolicyForm => {
+  const isEqual = schedulesAreEqual(updateSpec?.updateSchedule, updateSpec?.downloadSchedule);
+
+  const downloadStartsAt = timeUtils.getTime(updateSpec?.downloadSchedule?.at);
+  const installStartsAt = timeUtils.getTime(updateSpec?.updateSchedule?.at);
+
+  const downloadWeekDays = timeUtils.getWeekDays(updateSpec?.downloadSchedule?.at);
+  const installWeekDays = timeUtils.getWeekDays(updateSpec?.updateSchedule?.at);
+
+  return {
+    isAdvanced: Boolean(updateSpec?.downloadSchedule?.at || updateSpec?.updateSchedule?.at),
+    downloadAndInstallDiffer: !isEqual,
+    downloadStartsAt,
+    downloadEndsAt: timeUtils.getEndTime(downloadStartsAt, updateSpec?.downloadSchedule?.startGraceDuration),
+    downloadWeekDays: downloadWeekDays.selectedDays,
+    downloadScheduleMode: downloadWeekDays.allSelected
+      ? timeUtils.UpdateScheduleMode.Daily
+      : timeUtils.UpdateScheduleMode.Weekly,
+    downloadTimeZone: updateSpec?.downloadSchedule?.timeZone || timeUtils.localDeviceTimezone,
+    installStartsAt,
+    installEndsAt: timeUtils.getEndTime(installStartsAt, updateSpec?.updateSchedule?.startGraceDuration),
+    installWeekDays: installWeekDays.selectedDays,
+    installScheduleMode: installWeekDays.allSelected
+      ? timeUtils.UpdateScheduleMode.Daily
+      : timeUtils.UpdateScheduleMode.Weekly,
+    installTimeZone: updateSpec?.updateSchedule?.timeZone || timeUtils.localDeviceTimezone,
+  };
+};

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

@@ -95,7 +95,7 @@ const DeviceLabelSelector = () => {
       />
     );
   } else {
-    message = t('Add labels to select devices to be included in this fleet.');
+    message = t('Labels used to select devices for your fleet. If not specified, no devices will be added.');
   }
 
   return (

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

@@ -2,13 +2,12 @@ import * as React from 'react';
 import { FormGroup, Grid } from '@patternfly/react-core';
 import { FormikErrors } from 'formik';
 
-import { FleetFormValues } from '../types';
+import { FleetFormValues } from '../../../../types/deviceSpec';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import NameField from '../../../form/NameField';
 import LabelsField from '../../../form/LabelsField';
 import FlightCtlForm from '../../../form/FlightCtlForm';
 import { getDnsSubdomainValidations } from '../../../form/validations';
-import WithHelperText from '../../../common/WithHelperText';
 import DeviceLabelSelector from './DeviceLabelSelector';
 
 export const generalInfoStepId = 'general-info';
@@ -34,17 +33,7 @@ const GeneralInfoStep = ({ isEdit }: { isEdit: boolean }) => {
         <FormGroup label={t('Fleet labels')}>
           <LabelsField name="fleetLabels" />
         </FormGroup>
-        <FormGroup
-          label={
-            <WithHelperText
-              content={t(
-                'Devices matching these labels will be selected by the fleet. If left empty, no devices will be selected.',
-              )}
-              ariaLabel={t('Device selector')}
-              showLabel
-            />
-          }
-        >
+        <FormGroup label={t('Device selector')}>
           <DeviceLabelSelector />
         </FormGroup>
       </FlightCtlForm>

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

@@ -10,13 +10,13 @@ import {
 import { useFormikContext } from 'formik';
 
 import { useTranslation } from '../../../../hooks/useTranslation';
-import { FleetFormValues } from '../types';
+import { FleetFormValues } from '../../../../types/deviceSpec';
 import LabelsView from '../../../common/LabelsView';
 import FlightControlDescriptionList from '../../../common/FlightCtlDescriptionList';
 import { toAPILabel } from '../../../../utils/labels';
 import RepositorySourceList from '../../../Repository/RepositoryDetails/RepositorySourceList';
 import { getErrorMessage } from '../../../../utils/error';
-import { getAPIConfig } from '../../../Device/EditDeviceWizard/deviceSpecUtils';
+import { getApiConfig } from '../../../Device/EditDeviceWizard/deviceSpecUtils';
 import ReviewApplications from '../../../Device/EditDeviceWizard/steps/ReviewApplications';
 import ReviewTrackedSystemdServices from '../../../Device/EditDeviceWizard/steps/ReviewTrackedSystemdServices';
 import {
@@ -71,7 +71,7 @@ const ReviewStep = ({ error }: { error?: unknown }) => {
             <DescriptionListGroup>
               <DescriptionListTerm>{t('Configurations')}</DescriptionListTerm>
               <DescriptionListDescription>
-                <RepositorySourceList configs={values.configTemplates.map(getAPIConfig)} />
+                <RepositorySourceList configs={values.configTemplates.map(getApiConfig)} />
               </DescriptionListDescription>
             </DescriptionListGroup>
           )}

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

@@ -4,7 +4,7 @@ import { TFunction } from 'react-i18next';
 
 import { useTranslation } from '../../../../hooks/useTranslation';
 
-export type StepSetting = 'all-settings' | 'rollout-policies' | 'disruption-budget';
+export type StepSetting = 'all-settings' | 'rollout-policies' | 'update-policies' | 'disruption-budget';
 
 type UpdateConfirmChangesModalProps = {
   setting: StepSetting;
@@ -39,6 +39,15 @@ const getModalContent = (setting: StepSetting, t: TFunction) => {
         result: t('If you confirm, all disruption budget configurations will be lost.'),
       };
     }
+    case 'update-policies': {
+      const title = t("Don't use update policies");
+      return {
+        title,
+        primaryAction: title,
+        question: t('Are you sure you want to remove the update policy configurations?'),
+        result: t('If you confirm, all update policy configurations will be lost.'),
+      };
+    }
   }
 };
 

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

@@ -2,32 +2,37 @@ import * as React from 'react';
 import { Alert, Checkbox, FormGroup, FormSection, Grid } from '@patternfly/react-core';
 import { FormikErrors, useFormikContext } from 'formik';
 
-import { FleetFormValues } from '../types';
-import { DEFAULT_BACKEND_UPDATE_TIMEOUT_MINUTES, getEmptyInitializedBatch } from '../fleetSpecUtils';
+import {
+  DEFAULT_BACKEND_UPDATE_TIMEOUT_MINUTES,
+  getEmptyInitializedBatch,
+  getEmptyUpdateFormParams,
+} from '../fleetSpecUtils';
 import { useTranslation } from '../../../../hooks/useTranslation';
-import WithHelperText from '../../../common/WithHelperText';
+import LabelWithHelperText from '../../../common/WithHelperText';
+import { FleetFormValues } from '../../../../types/deviceSpec';
 
 import FlightCtlForm from '../../../form/FlightCtlForm';
 import UpdateStepRolloutPolicy from './UpdateStepRolloutPolicy';
 import UpdateStepDisruptionBudget from './UpdateStepDisruptionBudget';
+import UpdateStepUpdatePolicy from './UpdateStepUpdatePolicy';
 import UpdateConfirmChangesModal, { StepSetting } from './UpdateConfirmChangesModal';
 
 export const updatePolicyStepId = 'update-policy';
 
 export const isUpdatePolicyStepValid = (errors: FormikErrors<FleetFormValues>) =>
-  !errors.rolloutPolicy && !errors.disruptionBudget;
+  !errors.rolloutPolicy && !errors.disruptionBudget && !errors.updatePolicy;
 
 const UpdatePolicyStep = () => {
   const { t } = useTranslation();
 
   const {
-    values: { rolloutPolicy, disruptionBudget },
+    values: { rolloutPolicy, disruptionBudget, updatePolicy },
     setFieldValue,
   } = useFormikContext<FleetFormValues>();
 
   const [forceShowAdvancedMode, setForceShowAdvancedMode] = React.useState<boolean>(false);
   const [alertSwitchToBasic, setAlertSwitchToBasic] = React.useState<StepSetting>();
-  const hasAdvancedMode = rolloutPolicy.isAdvanced || disruptionBudget.isAdvanced;
+  const hasAdvancedMode = rolloutPolicy.isAdvanced || disruptionBudget.isAdvanced || updatePolicy.isAdvanced;
 
   const onSettingsChange = (setting: StepSetting, toAdvanced: boolean) => {
     if (toAdvanced) {
@@ -37,11 +42,15 @@ const UpdatePolicyStep = () => {
           break;
         case 'rollout-policies':
           setFieldValue('rolloutPolicy.isAdvanced', true);
-          onChangePolicyType(true);
+          void onChangePolicyType(true);
           break;
         case 'disruption-budget':
           setFieldValue('disruptionBudget.isAdvanced', true);
-          onChangeDisruptionBudget(true);
+          void onChangeDisruptionBudget(true);
+          break;
+        case 'update-policies':
+          setFieldValue('updatePolicy.isAdvanced', true);
+          void onChangeUpdatePolicy(true);
           break;
       }
     } else {
@@ -68,6 +77,12 @@ const UpdatePolicyStep = () => {
     }
   };
 
+  const onChangeUpdatePolicy = async (toAdvanced: boolean) => {
+    if (!toAdvanced) {
+      await setFieldValue('updatePolicy', getEmptyUpdateFormParams());
+    }
+  };
+
   const onModalClose = async (doSwitch: boolean) => {
     setAlertSwitchToBasic(undefined);
     if (!doSwitch) {
@@ -79,6 +94,7 @@ const UpdatePolicyStep = () => {
       case 'all-settings':
         await onChangePolicyType(false);
         await onChangeDisruptionBudget(false);
+        await onChangeUpdatePolicy(false);
         break;
       case 'rollout-policies':
         void onChangePolicyType(false);
@@ -86,6 +102,9 @@ const UpdatePolicyStep = () => {
       case 'disruption-budget':
         void onChangeDisruptionBudget(false);
         break;
+      case 'update-policies':
+        void onChangeUpdatePolicy(false);
+        break;
     }
     setForceShowAdvancedMode(false);
   };
@@ -108,9 +127,8 @@ const UpdatePolicyStep = () => {
             {/* Rollout policies */}
             <Checkbox
               label={
-                <WithHelperText
-                  showLabel
-                  ariaLabel={t('Set rollout policies')}
+                <LabelWithHelperText
+                  label={t('Set rollout policies')}
                   content={t('Rollout policies allow you to control the order of updates for the fleet devices.')}
                 />
               }
@@ -119,15 +137,14 @@ const UpdatePolicyStep = () => {
               onChange={(_ev: React.FormEvent<HTMLInputElement>, toAdvanced: boolean) =>
                 onSettingsChange('rollout-policies', toAdvanced)
               }
+              body={rolloutPolicy.isAdvanced && <UpdateStepRolloutPolicy />}
             />
-            {rolloutPolicy.isAdvanced && <UpdateStepRolloutPolicy />}
 
             {/* Disruption budget */}
             <Checkbox
               label={
-                <WithHelperText
-                  showLabel
-                  ariaLabel={t('Set disruption budget')}
+                <LabelWithHelperText
+                  label={t('Set disruption budget')}
                   content={t(
                     'Disruption budget allows you to limit the number of similar devices that may be updating simultaneously.',
                   )}
@@ -138,8 +155,24 @@ const UpdatePolicyStep = () => {
               onChange={(_ev: React.FormEvent<HTMLInputElement>, toAdvanced: boolean) =>
                 onSettingsChange('disruption-budget', toAdvanced)
               }
+              body={disruptionBudget.isAdvanced && <UpdateStepDisruptionBudget />}
+            />
+
+            {/* Update (and download) policies */}
+            <Checkbox
+              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 />}
             />
-            {disruptionBudget.isAdvanced && <UpdateStepDisruptionBudget />}
           </FormSection>
         ) : (
           <Alert isInline variant="info" title={t('Default update policy')}>