@flightctl/ui-components 0.4.0 → 0.5.0-rc2

package/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx

@@ -50,7 +50,7 @@ const EditDeviceWizardNav = () => {
       </WizardNavItem>
       <WizardNavItem
         stepIndex={reviewDeviceStepIndex}
-        content={t('Review and update')}
+        content={t('Review and save')}
         isCurrent={activeStep?.index === reviewDeviceStepIndex + 1}
         isDisabled={isReviewDeviceDisabled}
         onClick={() => {

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

@@ -86,6 +86,7 @@ const ApplicationSection = ({ index }: { index: number }) => {
                   </SplitItem>
                   <SplitItem>
                     <Button
+                      aria-label={t('Delete variable')}
                       variant="link"
                       icon={<MinusCircleIcon />}
                       iconPosition="end"
@@ -139,6 +140,7 @@ const ApplicationTemplates = () => {
                   </SplitItem>
                   <SplitItem>
                     <Button
+                      aria-label={t('Delete application')}
                       variant="link"
                       icon={<MinusCircleIcon />}
                       iconPosition="start"

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

@@ -121,6 +121,7 @@ const ConfigInlineTemplateForm = ({ index }: ConfigInlineTemplateFormProps) => {
                 {inlineConfig.files.length > 1 && (
                   <SplitItem>
                     <Button
+                      aria-label={t('Delete file')}
                       variant="link"
                       icon={<MinusCircleIcon />}
                       iconPosition="start"

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

@@ -152,6 +152,7 @@ const ConfigurationTemplatesForm = ({ repositories, repoRefetch, canCreateRepo,
                   </SplitItem>
                   <SplitItem>
                     <Button
+                      aria-label={t('Delete configuration')}
                       variant="link"
                       icon={<MinusCircleIcon />}
                       iconPosition="start"

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

@@ -24,6 +24,7 @@ export const reviewDeviceStepId = 'review-device';
 const ReviewStep = ({ error }: { error?: string }) => {
   const { t } = useTranslation();
   const { values } = useFormikContext<EditDeviceFormValues>();
+
   return (
     <Stack hasGutter>
       <StackItem isFilled>
@@ -37,12 +38,15 @@ const ReviewStep = ({ error }: { error?: string }) => {
             <DescriptionListTerm>{t('Alias')}</DescriptionListTerm>
             <DescriptionListDescription>{values.deviceAlias || t('Untitled')}</DescriptionListDescription>
           </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>{t('Device labels')}</DescriptionListTerm>
-            <DescriptionListDescription>
-              <LabelsView prefix="device" labels={toAPILabel(values.labels)} />
-            </DescriptionListDescription>
-          </DescriptionListGroup>
+          {values.labels.length > 0 && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Device labels')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                <LabelsView prefix="device" labels={toAPILabel(values.labels)} />
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+
           {values.fleetMatch && (
             <DescriptionListGroup>
               <DescriptionListTerm>{t('Device fleet')}</DescriptionListTerm>
@@ -52,21 +56,25 @@ const ReviewStep = ({ error }: { error?: string }) => {
           <DescriptionListGroup>
             <DescriptionListTerm>{t('System image')}</DescriptionListTerm>
             <DescriptionListDescription>
-              {values.osImage || t(`Device management service will not manage system image`)}
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>{t('Configurations')}</DescriptionListTerm>
-            <DescriptionListDescription>
-              <RepositorySourceList configs={values.configTemplates.map(getAPIConfig)} />
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>{t('Applications')}</DescriptionListTerm>
-            <DescriptionListDescription>
-              <ReviewApplications apps={values.applications} />
+              {values.osImage || t(`Edge Manager will not manage system image`)}
             </DescriptionListDescription>
           </DescriptionListGroup>
+          {values.configTemplates.length > 0 && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Configurations')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                <RepositorySourceList configs={values.configTemplates.map(getAPIConfig)} />
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+          {values.applications.length > 0 && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Applications')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                <ReviewApplications apps={values.applications} />
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
         </FlightControlDescriptionList>
       </StackItem>
       {!!error && (

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+
+import { DisruptionBudgetForm, RolloutPolicyForm } from '../../../Fleet/CreateFleet/types';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import LabelsView from '../../../common/LabelsView';
+
+export const ReviewUpdateRolloutPolicy = ({ rolloutPolicy }: { rolloutPolicy: RolloutPolicyForm }) => {
+  const { t } = useTranslation();
+
+  return rolloutPolicy.isAdvanced
+    ? '-'
+    : t('{{ count }} batches have been defined', { count: rolloutPolicy.batches.length });
+};
+
+export const ReviewUpdateDisruptionBudget = ({ disruptionBudget }: { disruptionBudget: DisruptionBudgetForm }) => {
+  const { t } = useTranslation();
+  if (!disruptionBudget.isAdvanced) {
+    return '-';
+  }
+
+  const groupBy = disruptionBudget.groupBy || [];
+  const labels =
+    groupBy.length === 0
+      ? null
+      : groupBy.reduce((acc, labelKey) => {
+          acc[labelKey] = '';
+          return acc;
+        }, {});
+
+  return (
+    <Stack hasGutter>
+      {labels ? (
+        <StackItem>
+          <LabelsView labels={labels} prefix="disruption" />
+        </StackItem>
+      ) : (
+        t('Applies to all the fleet devices')
+      )}
+
+      {disruptionBudget.minAvailable && (
+        <StackItem>
+          {t('Minimum available devices: {{ minAvailable }}', { minAvailable: disruptionBudget.minAvailable })}
+        </StackItem>
+      )}
+      {disruptionBudget.maxUnavailable && (
+        <StackItem>
+          {t('Maximum unavailable devices: {{ maxUnavailable }}', {
+            maxUnavailable: disruptionBudget.maxUnavailable,
+          })}
+        </StackItem>
+      )}
+    </Stack>
+  );
+};

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

@@ -13,13 +13,15 @@ const SystemdUnitsForm = () => {
   const { values, setFieldValue, errors } = useFormikContext<DeviceSpecConfigFormValues>();
 
   const onAdd = (text: string) => {
-    void setFieldValue(
-      'systemdUnits',
-      values.systemdUnits.concat({
-        pattern: text,
-        exists: false,
-      }),
-    );
+    if (text) {
+      void setFieldValue(
+        'systemdUnits',
+        values.systemdUnits.concat({
+          pattern: text,
+          exists: false,
+        }),
+      );
+    }
   };
 
   const onEdit = (editIndex: number, text: string) => {

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

@@ -1,13 +1,4 @@
-import ConditionsTable from '../../DetailsPage/Tables/ConditionsTable';
-import DetailsPage from '../../DetailsPage/DetailsPage';
-import IntegrityDetails from '../../DetailsPage/Tables/IntegrityDetails';
-import LabelsView from '../../common/LabelsView';
-import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
-import { timeSinceText } from '../../../utils/dates';
-import {
-  EnrollmentRequestStatus as EnrollmentRequestStatusType,
-  getApprovalStatus,
-} from '../../../utils/status/enrollmentRequest';
+import * as React from 'react';
 import {
   Bullseye,
   Card,
@@ -23,8 +14,16 @@ import {
   TextArea,
 } from '@patternfly/react-core';
 import { EnrollmentRequest } from '@flightctl/types';
-import * as React from 'react';
 
+import ConditionsTable from '../../DetailsPage/Tables/ConditionsTable';
+import DetailsPage from '../../DetailsPage/DetailsPage';
+import LabelsView from '../../common/LabelsView';
+import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
+import { timeSinceText } from '../../../utils/dates';
+import {
+  EnrollmentRequestStatus as EnrollmentRequestStatusType,
+  getApprovalStatus,
+} from '../../../utils/status/enrollmentRequest';
 import { useFetch } from '../../../hooks/useFetch';
 import ApproveDeviceModal from '../../modals/ApproveDeviceModal/ApproveDeviceModal';
 import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
@@ -193,31 +192,6 @@ const EnrollmentRequestDetails = () => {
             </DetailsPageCardBody>
           </DetailsPageCard>
         </GridItem>
-        {!isPendingApproval && (
-          <GridItem md={6}>
-            <DetailsPageCard>
-              <CardTitle>{t('Device conditions')}</CardTitle>
-              <DetailsPageCardBody>
-                {er && (
-                  <ConditionsTable
-                    ariaLabel={t('Device conditions table')}
-                    conditions={er.spec.deviceStatus?.conditions}
-                  />
-                )}
-              </DetailsPageCardBody>
-            </DetailsPageCard>
-          </GridItem>
-        )}
-        {!isPendingApproval && (
-          <GridItem md={6}>
-            <DetailsPageCard>
-              <CardTitle>{t('System integrity details')}</CardTitle>
-              <DetailsPageCardBody>
-                {er && <IntegrityDetails integrity={er.spec.deviceStatus?.integrity} />}
-              </DetailsPageCardBody>
-            </DetailsPageCard>
-          </GridItem>
-        )}
       </Grid>
       {er && isApprovalModalOpen && (
         <ApproveDeviceModal

package/src/components/EnrollmentRequest/EnrollmentRequestList.tsx

@@ -65,9 +65,9 @@ const EnrollmentRequestList = ({ refetchDevices, isStandalone }: EnrollmentReque
 
   const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
 
-  const { deleteAction, deleteModal } = useDeleteListAction({
+  const { action: deleteAction, modal: deleteModal } = useDeleteListAction({
     resourceType: 'EnrollmentRequest',
-    onDelete: async (enrollmentId: string) => {
+    onConfirm: async (enrollmentId: string) => {
       await remove(`enrollmentrequests/${enrollmentId}`);
       refetch();
     },

package/src/components/EnrollmentRequest/EnrollmentRequestTableRow.tsx

@@ -4,7 +4,7 @@ import { Button } from '@patternfly/react-core';
 
 import { EnrollmentRequest } from '@flightctl/types';
 import { timeSinceText } from '../../utils/dates';
-import { DeleteListActionResult } from '../ListPage/types';
+import { ListAction } from '../ListPage/types';
 import { useTranslation } from '../../hooks/useTranslation';
 import { ROUTE } from '../../hooks/useNavigate';
 import ResourceLink from '../common/ResourceLink';
@@ -15,7 +15,7 @@ type EnrollmentRequestTableRow = {
   isRowSelected: (er: EnrollmentRequest) => boolean;
   er: EnrollmentRequest;
   onApprove: (id: string) => void;
-  deleteAction: DeleteListActionResult['deleteAction'];
+  deleteAction: ListAction;
   canApprove: boolean;
   canDelete: boolean;
 };

package/src/components/EnrollmentRequest/useEnrollmentRequests.ts

@@ -38,9 +38,10 @@ export const usePendingEnrollments = (): [
   boolean,
   unknown,
   VoidFunction,
-  pagination: Pick<PaginationDetails, 'currentPage' | 'setCurrentPage' | 'itemCount'>,
+  pagination: Pick<PaginationDetails<EnrollmentRequestList>, 'currentPage' | 'setCurrentPage' | 'itemCount'>,
 ] => {
-  const { currentPage, setCurrentPage, itemCount, nextContinue, onPageFetched } = useTablePagination();
+  const { currentPage, setCurrentPage, itemCount, nextContinue, onPageFetched } =
+    useTablePagination<EnrollmentRequestList>();
   const [pendingErEndpoint, isDebouncing] = useEnrollmentRequestsEndpoint({ nextContinue });
 
   const [erList, isLoading, error, refetch] = useFetchPeriodically<EnrollmentRequestList>(

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

@@ -13,7 +13,7 @@ import {
 } from '@patternfly/react-core';
 import * as React from 'react';
 import { Fleet } from '@flightctl/types';
-import { Formik } from 'formik';
+import { Formik, FormikErrors } from 'formik';
 import { FleetFormValues } from './types';
 import { useFetch } from '../../../hooks/useFetch';
 import { getErrorMessage } from '../../../utils/error';
@@ -25,6 +25,7 @@ import DeviceTemplateStep, {
   isDeviceTemplateStepValid,
 } from '../../Device/EditDeviceWizard/steps/DeviceTemplateStep';
 import ReviewStep, { reviewStepId } from './steps/ReviewStep';
+import UpdatePolicyStep, { isUpdatePolicyStepValid, updatePolicyStepId } from './steps/UpdatePolicyStep';
 import { getFleetPatches, getFleetResource, getInitialValues, getValidationSchema } from './utils';
 import CreateFleetWizardFooter from './CreateFleetWizardFooter';
 import { useEditFleet } from './useEditFleet';
@@ -37,6 +38,38 @@ import { useAppContext } from '../../../hooks/useAppContext';
 
 import './CreateFleetWizard.css';
 
+const orderedIds = [generalInfoStepId, deviceTemplateStepId, updatePolicyStepId, reviewStepId];
+
+const getValidStepIds = (formikErrors: FormikErrors<FleetFormValues>): string[] => {
+  const validStepIds: string[] = [];
+  if (isGeneralInfoStepValid(formikErrors)) {
+    validStepIds.push(generalInfoStepId);
+  }
+  if (isDeviceTemplateStepValid(formikErrors)) {
+    validStepIds.push(deviceTemplateStepId);
+  }
+  if (isUpdatePolicyStepValid(formikErrors)) {
+    validStepIds.push(updatePolicyStepId);
+  }
+  // Review step is always valid. We disable it if some of the previous steps are invalid
+  if (validStepIds.length === orderedIds.length - 1) {
+    validStepIds.push(reviewStepId);
+  }
+  return validStepIds;
+};
+
+const isDisabledStep = (stepId: string | undefined, validStepIds: string[]) => {
+  if (!stepId) {
+    return true;
+  }
+
+  const stepIdx = orderedIds.findIndex((stepOrderId) => stepOrderId === stepId);
+
+  return orderedIds.some((orderedId, orderedStepIdx) => {
+    return orderedStepIdx < stepIdx && !validStepIds.includes(orderedId);
+  });
+};
+
 const CreateFleetWizard = () => {
   const { t } = useTranslation();
   const { post, patch } = useFetch();
@@ -90,7 +123,8 @@ const CreateFleetWizard = () => {
         }}
       >
         {({ errors: formikErrors }) => {
-          const generalStepValid = isGeneralInfoStepValid(formikErrors);
+          const validStepIds = getValidStepIds(formikErrors);
+
           return (
             <>
               <LeaveFormConfirmation />
@@ -110,14 +144,21 @@ const CreateFleetWizard = () => {
                 <WizardStep
                   name={t('Device template')}
                   id={deviceTemplateStepId}
-                  isDisabled={(!currentStep || currentStep?.id === generalInfoStepId) && !generalStepValid}
+                  isDisabled={isDisabledStep(deviceTemplateStepId, validStepIds)}
                 >
                   {currentStep?.id === deviceTemplateStepId && <DeviceTemplateStep isFleet />}
                 </WizardStep>
                 <WizardStep
-                  name={isEdit ? t('Review and update') : t('Review and create')}
+                  name={t('Updates')}
+                  id={updatePolicyStepId}
+                  isDisabled={isDisabledStep(updatePolicyStepId, validStepIds)}
+                >
+                  {currentStep?.id === updatePolicyStepId && <UpdatePolicyStep />}
+                </WizardStep>
+                <WizardStep
+                  name={isEdit ? t('Review and save') : t('Review and create')}
                   id={reviewStepId}
-                  isDisabled={!generalStepValid || !isDeviceTemplateStepValid(formikErrors)}
+                  isDisabled={isDisabledStep(reviewStepId, validStepIds)}
                 >
                   {currentStep?.id === reviewStepId && <ReviewStep error={error} />}
                 </WizardStep>

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

@@ -10,6 +10,7 @@ import {
   deviceTemplateStepId,
   isDeviceTemplateStepValid,
 } from '../../Device/EditDeviceWizard/steps/DeviceTemplateStep';
+import { isUpdatePolicyStepValid, updatePolicyStepId } from './steps/UpdatePolicyStep';
 
 type CreateFleetWizardFooterProps = {
   isEdit: boolean;
@@ -27,7 +28,10 @@ const CreateFleetWizardFooter = ({ isEdit }: CreateFleetWizardFooterProps) => {
     isStepValid = isGeneralInfoStepValid(errors);
   } else if (activeStep.id === deviceTemplateStepId) {
     isStepValid = isDeviceTemplateStepValid(errors);
+  } else if (activeStep.id === updatePolicyStepId) {
+    isStepValid = isUpdatePolicyStepValid(errors);
   }
+
   const primaryBtn = isReviewStep ? (
     <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
       {isEdit ? t('Save') : t('Create fleet')}

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

@@ -0,0 +1,62 @@
+import { Duration, FleetSpec, Percentage } from '@flightctl/types';
+
+import { BatchLimitType } from './types';
+import { fromAPILabel } from '../../../utils/labels';
+
+export const DEFAULT_BACKEND_UPDATE_TIMEOUT_MINUTES = 1140; // 24h, expressed in minutes
+const DEFAULT_BACKEND_SUCCESS_THRESHOLD_PERCENTAGE = '90%';
+
+const numberValue = (value: Percentage | number | undefined) => {
+  if (value === undefined || typeof value === 'number') {
+    return value;
+  }
+  return Number(value.replace(/[%]/, ''));
+};
+
+export const getEmptyInitializedBatch = () => ({
+  limit: '',
+  limitType: BatchLimitType.BatchLimitPercent,
+  successThreshold: numberValue(DEFAULT_BACKEND_SUCCESS_THRESHOLD_PERCENTAGE),
+  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 getRolloutPolicyValues = (fleetSpec?: FleetSpec) => {
+  const batches = (fleetSpec?.rolloutPolicy?.deviceSelection?.sequence || []).map((batch) => ({
+    selector: fromAPILabel(batch.selector?.matchLabels || {}),
+    limit: numberValue(batch.limit),
+    limitType:
+      typeof batch.limit === 'number' ? BatchLimitType.BatchLimitAbsoluteNumber : BatchLimitType.BatchLimitPercent,
+    // If the policy does not specify the threshold, we set the backend's default as the field is required in the UI
+    successThreshold: numberValue(batch.successThreshold || DEFAULT_BACKEND_SUCCESS_THRESHOLD_PERCENTAGE),
+  }));
+
+  // 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) };
+};
+
+export const getDisruptionBudgetValues = (fleetSpec?: FleetSpec) => {
+  const budget = fleetSpec?.rolloutPolicy?.disruptionBudget || {};
+  const groupLabels = budget.groupBy || [];
+  return {
+    isAdvanced: Boolean(groupLabels.length > 0 || budget.minAvailable || budget.maxUnavailable),
+    groupBy: groupLabels,
+    minAvailable: budget.minAvailable,
+    maxUnavailable: budget.maxUnavailable,
+  };
+};

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

@@ -19,12 +19,17 @@ import { getErrorMessage } from '../../../../utils/error';
 import { getAPIConfig } from '../../../Device/EditDeviceWizard/deviceSpecUtils';
 import ReviewApplications from '../../../Device/EditDeviceWizard/steps/ReviewApplications';
 import ReviewTrackedSystemdServices from '../../../Device/EditDeviceWizard/steps/ReviewTrackedSystemdServices';
+import {
+  ReviewUpdateDisruptionBudget,
+  ReviewUpdateRolloutPolicy,
+} from '../../../Device/EditDeviceWizard/steps/ReviewUpdatePolicy';
 
 export const reviewStepId = 'review';
 
 const ReviewStep = ({ error }: { error?: unknown }) => {
   const { t } = useTranslation();
   const { values } = useFormikContext<FleetFormValues>();
+
   return (
     <Stack hasGutter>
       <StackItem isFilled>
@@ -38,42 +43,72 @@ const ReviewStep = ({ error }: { error?: unknown }) => {
             <DescriptionListTerm>{t('Name')}</DescriptionListTerm>
             <DescriptionListDescription>{values.name}</DescriptionListDescription>
           </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>{t('Fleet labels')}</DescriptionListTerm>
-            <DescriptionListDescription>
-              <LabelsView prefix="fleet" labels={toAPILabel(values.fleetLabels)} />
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>{t('Device selector')}</DescriptionListTerm>
-            <DescriptionListDescription>
-              <LabelsView prefix="device" labels={toAPILabel(values.labels)} />
-            </DescriptionListDescription>
-          </DescriptionListGroup>
+          {values.fleetLabels.length > 0 && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Fleet labels')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                <LabelsView prefix="fleet" labels={toAPILabel(values.fleetLabels)} />
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+
+          {values.labels.length > 0 && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Device selector')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                <LabelsView prefix="device" labels={toAPILabel(values.labels)} />
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+
           <DescriptionListGroup>
             <DescriptionListTerm>{t('System image')}</DescriptionListTerm>
             <DescriptionListDescription>
               {values.osImage || t(`The fleet will not manage system image`)}
             </DescriptionListDescription>
           </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>{t('Configurations')}</DescriptionListTerm>
-            <DescriptionListDescription>
-              <RepositorySourceList configs={values.configTemplates.map(getAPIConfig)} />
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>{t('Applications')}</DescriptionListTerm>
-            <DescriptionListDescription>
-              <ReviewApplications apps={values.applications} />
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>{t('Tracked systemd services')}</DescriptionListTerm>
-            <DescriptionListDescription>
-              <ReviewTrackedSystemdServices systemdUnits={values.systemdUnits} />
-            </DescriptionListDescription>
-          </DescriptionListGroup>
+          {values.configTemplates.length > 0 && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Configurations')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                <RepositorySourceList configs={values.configTemplates.map(getAPIConfig)} />
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+          {values.applications.length > 0 && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Applications')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                <ReviewApplications apps={values.applications} />
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+
+          {values.systemdUnits.length > 0 && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Tracked systemd services')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                <ReviewTrackedSystemdServices systemdUnits={values.systemdUnits} />
+              </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>
+          )}
         </FlightControlDescriptionList>
       </StackItem>
       {!!error && (