@flightctl/ui-components 0.5.1 → 0.6.0-rc2

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

@@ -6,8 +6,8 @@ import { useTranslation } from '../../../../hooks/useTranslation';
 import NumberField from '../../../form/NumberField';
 import TextListField from '../../../form/TextListField';
 import ErrorHelperText from '../../../form/FieldHelperText';
-import WithHelperText from '../../../common/WithHelperText';
-import { DisruptionBudgetForm } from '../types';
+import { FormGroupWithHelperText } from '../../../common/WithHelperText';
+import { DisruptionBudgetForm } from '../../../../types/deviceSpec';
 
 const UpdateStepDisruptionBudget = () => {
   const { t } = useTranslation();
@@ -16,14 +16,9 @@ const UpdateStepDisruptionBudget = () => {
 
   return (
     <>
-      <FormGroup
-        label={
-          <WithHelperText
-            ariaLabel={t('Group devices by label keys')}
-            content={t('The disruption budget will be applied to all group combinations independently.')}
-            showLabel
-          />
-        }
+      <FormGroupWithHelperText
+        label={t('Group devices by label keys')}
+        content={t('The disruption budget will be applied to all group combinations independently.')}
       >
         <TextListField
           name="disruptionBudget.groupBy"
@@ -35,46 +30,36 @@ const UpdateStepDisruptionBudget = () => {
             </Stack>
           }
         />
-      </FormGroup>
+      </FormGroupWithHelperText>
       <FormGroup>
         <Flex>
           <FlexItem>
-            <FormGroup
-              label={
-                <WithHelperText
-                  ariaLabel={t('Minimum number of available devices')}
-                  content={t(
-                    'At least this number of devices will be available at any given moment, for each group defined above.',
-                  )}
-                  showLabel
-                />
-              }
+            <FormGroupWithHelperText
+              label={t('Minimum number of available devices')}
+              content={t(
+                'At least this number of devices will be available at any given moment, for each group defined above.',
+              )}
             >
               <NumberField
                 aria-label={t('Minimum number of available devices')}
                 name="disruptionBudget.minAvailable"
                 min={1}
               />
-            </FormGroup>
+            </FormGroupWithHelperText>
           </FlexItem>
           <FlexItem>
-            <FormGroup
-              label={
-                <WithHelperText
-                  ariaLabel={t('Maximum number of unavailable devices')}
-                  content={t(
-                    'No more than this number of devices will be unavailable at any given moment, for each group defined above.',
-                  )}
-                  showLabel
-                />
-              }
+            <FormGroupWithHelperText
+              label={t('Maximum number of unavailable devices')}
+              content={t(
+                'No more than this number of devices will be unavailable at any given moment, for each group defined above.',
+              )}
             >
               <NumberField
                 aria-label={t('Maximum number of unavailable devices')}
                 name="disruptionBudget.maxUnavailable"
                 min={1}
               />
-            </FormGroup>
+            </FormGroupWithHelperText>
           </FlexItem>
           {/* Show error when both numeric values are unset */}
           {typeof meta.error === 'string' && <ErrorHelperText meta={meta} />}

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

@@ -14,13 +14,13 @@ import {
 import { FieldArray, useField, useFormikContext } from 'formik';
 import { MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons';
 
-import { BatchForm, BatchLimitType, FleetFormValues } from '../types';
+import { BatchForm, BatchLimitType, FleetFormValues } from '../../../../types/deviceSpec';
 import ErrorHelperText from '../../../form/FieldHelperText';
 import ExpandableFormSection from '../../../form/ExpandableFormSection';
 import LabelsField from '../../../form/LabelsField';
 import FormSelect from '../../../form/FormSelect';
 import NumberField from '../../../form/NumberField';
-import WithHelperText from '../../../common/WithHelperText';
+import { FormGroupWithHelperText } from '../../../common/WithHelperText';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import { getEmptyInitializedBatch } from '../fleetSpecUtils';
 
@@ -70,17 +70,12 @@ const RolloutPolicyBatch = ({ index }: { index: number }) => {
             </SplitItem>
           </Split>
         </FormGroup>
-        <FormGroup
+        <FormGroupWithHelperText
+          label={t('Success threshold')}
+          content={t(
+            'The minimum percentage of devices that must be updated successfully in order to continue updating the next batch of devices.',
+          )}
           isRequired
-          label={
-            <WithHelperText
-              ariaLabel={t('Success threshold')}
-              content={t(
-                'The minimum percentage of devices that must be updated successfully in order to continue updating the next batch of devices.',
-              )}
-              showLabel
-            />
-          }
         >
           <Flex flexWrap={{ default: 'wrap' }}>
             <FlexItem>{t('If')} </FlexItem>
@@ -99,7 +94,7 @@ const RolloutPolicyBatch = ({ index }: { index: number }) => {
               )}
             </FlexItem>
           </Flex>
-        </FormGroup>
+        </FormGroupWithHelperText>
       </Grid>
     </ExpandableFormSection>
   );
@@ -121,17 +116,12 @@ const UpdateStepRolloutPolicy = () => {
         <br />
         {t('Devices that are not part of any batch will be updated last.')}
       </Alert>
-      <FormGroup
+      <FormGroupWithHelperText
+        label={t('Update timeout')}
+        content={t(
+          "The time-frame within which a device must be updated. If it exceeds it, device will be counted as a 'failed to update' in the batch success threshold.",
+        )}
         isRequired
-        label={
-          <WithHelperText
-            ariaLabel={t('Update timeout')}
-            content={t(
-              "The time-frame within which a device must be updated. If it exceeds it, device will be counted as a 'failed to update' in the batch success threshold.",
-            )}
-            showLabel
-          />
-        }
       >
         <Flex>
           <FlexItem>{t('Timeout devices that fail to update after')}</FlexItem>
@@ -140,7 +130,7 @@ const UpdateStepRolloutPolicy = () => {
           </FlexItem>
           <FlexItem>{t('minutes')}.</FlexItem>
         </Flex>
-      </FormGroup>
+      </FormGroupWithHelperText>
 
       <FormGroup>
         <FieldArray name="rolloutPolicy.batches">

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

@@ -0,0 +1,3 @@
+.fctl-policy-timezone .pf-v5-c-form__helper-text {
+  margin-top: 0.5rem;
+}

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

@@ -0,0 +1,246 @@
+import * as React from 'react';
+import { Checkbox, Flex, FlexItem, FormGroup, Stack, StackItem, Weekday } from '@patternfly/react-core';
+import { FieldArray, useField, useFormikContext } from 'formik';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import useTimeZones from '../../../../hooks/useTimeZones';
+import * as timeUtils from '../../../../utils/time';
+import { FleetFormValues, UpdatePolicyForm } from '../../../../types/deviceSpec';
+import { FormGroupWithHelperText } from '../../../common/WithHelperText';
+import CheckboxField, { CheckboxFieldGroupValidation } from '../../../form/CheckboxField';
+import FormSelectTypeahead from '../../../form/FormSelectTypeahead';
+import RadioField from '../../../form/RadioField';
+import ErrorHelperText from '../../../form/FieldHelperText';
+
+import './UpdateStepUpdatePolicy.css';
+
+export enum ScheduleBlockType {
+  Download = 'download',
+  Install = 'install',
+}
+
+type ScheduleBlockProps = {
+  updatePolicy: UpdatePolicyForm;
+  blockType: ScheduleBlockType;
+  weekDayError?: string[] | string | Weekday;
+  onScheduleModeSwitch: (blockType: ScheduleBlockType) => void;
+};
+
+const ScheduleTimeZone = ({ blockType }: { blockType: ScheduleBlockType }) => {
+  const { t } = useTranslation();
+
+  const id = `updatePolicy.${blockType}TimeZone`;
+
+  const [{ value: timeZone, ...rest }, , { setValue }] = useField<string>({
+    name: id,
+  });
+
+  const zones = useTimeZones();
+
+  const onChangeTimezoneCheckbox = (_, isChecked: boolean) => {
+    setValue(isChecked ? timeUtils.localDeviceTimezone : '');
+  };
+
+  return (
+    <FormGroup id={`form-control__${id}`} fieldId={id} isStack className="fctl-policy-timezone">
+      <Checkbox
+        {...rest}
+        isChecked={timeZone === timeUtils.localDeviceTimezone}
+        id={id}
+        onChange={onChangeTimezoneCheckbox}
+        label={t("Use device's local timezone")}
+      />
+
+      {timeZone !== timeUtils.localDeviceTimezone && <FormSelectTypeahead name={id} defaultId="" items={zones} />}
+    </FormGroup>
+  );
+};
+
+const ScheduleBlock = ({ blockType, updatePolicy, onScheduleModeSwitch, weekDayError }: ScheduleBlockProps) => {
+  const { t } = useTranslation();
+
+  let ariaLabel: string;
+  let helperContent: string;
+
+  switch (blockType) {
+    case ScheduleBlockType.Download:
+      {
+        if (updatePolicy.downloadAndInstallDiffer) {
+          ariaLabel = t('Downloading schedule');
+          helperContent = t('Time frame during which devices can start downloading their new configurations.');
+        } else {
+          ariaLabel = t('Downloading and installing schedule');
+          helperContent = t(
+            'Time frame during which devices can start downloading and installing their new configurations.',
+          );
+        }
+      }
+
+      break;
+    case ScheduleBlockType.Install:
+      ariaLabel = t('Installing schedule');
+      helperContent = t('Time frame during which devices can start installing their new configurations.');
+      break;
+  }
+
+  const selectableTimes = React.useMemo(() => timeUtils.getSelectableTimes(), []);
+
+  const isValidTypedItem = React.useCallback((value: string) => timeUtils.valid24HourClockRegExp.test(value), []);
+
+  const transformTypedItem = React.useCallback((time: string) => {
+    if (timeUtils.formatted24HourClockRegExp.test(time)) {
+      return time;
+    }
+
+    // We "fix" the value when it misses the optional leading 0, or the semicolon
+    // The value is known to be valid at this point, so there should always be a match.
+    const match = time.match(/^(\d{1,2})?:?(\d{2})?$/);
+    return match ? `${timeUtils.formatTimePart(match[1])}:${match[2]}` : timeUtils.defaultStartTime;
+  }, []);
+
+  const scheduleMode =
+    blockType === ScheduleBlockType.Download ? updatePolicy.downloadScheduleMode : updatePolicy.installScheduleMode;
+  const isWeekly = scheduleMode === timeUtils.UpdateScheduleMode.Weekly;
+
+  return (
+    <FormGroupWithHelperText isRequired label={ariaLabel} content={helperContent}>
+      <Stack hasGutter>
+        <StackItem>
+          <Flex>
+            <FlexItem>
+              <FormSelectTypeahead
+                name={`updatePolicy.${blockType}StartsAt`}
+                placeholderText={t('hh:mm', { nsSeparator: '|' })}
+                defaultId={timeUtils.defaultStartTime}
+                items={selectableTimes}
+                isValidTypedItem={isValidTypedItem}
+                transformTypedItem={transformTypedItem}
+              />
+            </FlexItem>
+            <FlexItem>
+              <FormSelectTypeahead
+                name={`updatePolicy.${blockType}EndsAt`}
+                placeholderText={t('hh:mm', { nsSeparator: '|' })}
+                defaultId={timeUtils.defaultEndTime}
+                items={selectableTimes}
+                isValidTypedItem={isValidTypedItem}
+                transformTypedItem={transformTypedItem}
+              />
+            </FlexItem>
+            <FlexItem>
+              <RadioField
+                id={`daily-${blockType}`}
+                name={`updatePolicy.${blockType}ScheduleMode`}
+                label={t('Daily')}
+                checkedValue={timeUtils.UpdateScheduleMode.Daily}
+              />
+            </FlexItem>
+            <FlexItem>
+              <RadioField
+                id={`weekly-${blockType}`}
+                name={`updatePolicy.${blockType}ScheduleMode`}
+                label={t('Weekly')}
+                checkedValue={timeUtils.UpdateScheduleMode.Weekly}
+                onChangeCustom={() => onScheduleModeSwitch(blockType)}
+              />
+            </FlexItem>
+          </Flex>
+        </StackItem>
+        {isWeekly && (
+          <FieldArray name={`updatePolicy.${blockType}WeekDays`}>
+            {() => (
+              <>
+                <StackItem>
+                  <Flex>
+                    <FlexItem>
+                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[0]`} label={t('Sun')} />
+                    </FlexItem>
+                    <FlexItem>
+                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[1]`} label={t('Mon')} />
+                    </FlexItem>
+                    <FlexItem>
+                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[2]`} label={t('Tue')} />
+                    </FlexItem>
+                    <FlexItem>
+                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[3]`} label={t('Wed')} />
+                    </FlexItem>
+                    <FlexItem>
+                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[4]`} label={t('Thu')} />
+                    </FlexItem>
+                    <FlexItem>
+                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[5]`} label={t('Fri')} />
+                    </FlexItem>
+                    <FlexItem>
+                      <CheckboxFieldGroupValidation name={`updatePolicy.${blockType}WeekDays[6]`} label={t('Sat')} />
+                    </FlexItem>
+                  </Flex>
+                </StackItem>
+                <StackItem>
+                  <ErrorHelperText error={weekDayError} />
+                </StackItem>
+              </>
+            )}
+          </FieldArray>
+        )}
+        <StackItem style={{ maxWidth: 500 }}>
+          <ScheduleTimeZone blockType={blockType} />
+        </StackItem>
+      </Stack>
+    </FormGroupWithHelperText>
+  );
+};
+
+const UpdateStepUpdatePolicy = () => {
+  const { t } = useTranslation();
+
+  const {
+    values: { updatePolicy },
+    errors,
+    setFieldValue,
+  } = useFormikContext<FleetFormValues>();
+
+  // When switching to "daily" mode, we keep the selected weekdays, as they will be ignored.
+  // By doing this, if users switch to "weekly" again, we can show the weekdays they selected previously instead of all/none
+  const onSwitchToWeeklyMode = (blockType: ScheduleBlockType) => {
+    const selectedDays =
+      blockType === ScheduleBlockType.Download ? updatePolicy.downloadWeekDays : updatePolicy.installWeekDays;
+
+    const isAllWeekSelected = selectedDays.every(Boolean);
+    if (isAllWeekSelected) {
+      setFieldValue(`updatePolicy.${blockType}WeekDays`, [false, false, false, false, false, false, false]);
+    }
+  };
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <CheckboxField
+          label={t('Use different update schedules for downloading and installing updates')}
+          name="updatePolicy.downloadAndInstallDiffer"
+        />
+      </StackItem>
+
+      <StackItem>
+        <ScheduleBlock
+          blockType={ScheduleBlockType.Download}
+          updatePolicy={updatePolicy}
+          weekDayError={errors.updatePolicy?.downloadWeekDays}
+          onScheduleModeSwitch={onSwitchToWeeklyMode}
+        />
+      </StackItem>
+
+      {updatePolicy.downloadAndInstallDiffer && (
+        <StackItem>
+          <ScheduleBlock
+            blockType={ScheduleBlockType.Install}
+            updatePolicy={updatePolicy}
+            weekDayError={errors.updatePolicy?.installWeekDays}
+            onScheduleModeSwitch={onSwitchToWeeklyMode}
+          />
+        </StackItem>
+      )}
+    </Stack>
+  );
+};
+
+export default UpdateStepUpdatePolicy;

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

@@ -1,7 +1,6 @@
 import { Fleet, PatchRequest } from '@flightctl/types';
 import { TFunction } from 'i18next';
 import * as Yup from 'yup';
-import { FleetFormValues } from './types';
 import { API_VERSION } from '../../../constants';
 import { toAPILabel } from '../../../utils/labels';
 import {
@@ -13,27 +12,31 @@ import {
   validKubernetesDnsSubdomain,
   validLabelsSchema,
   validOsImage,
+  validUpdatePolicySchema,
 } from '../../form/validations';
 import {
   appendJSONPatch,
-  getApplicationPatches,
   getLabelPatches,
   getRolloutPolicyData,
   getRolloutPolicyPatches,
   getStringListPatches,
-  toAPIApplication,
+  getUpdatePolicyPatches,
+  updatePolicyFormToApi,
 } from '../../../utils/patch';
 import {
   ACMCrdConfig,
   ACMImportConfig,
   MicroshiftRegistrationHook,
-  getAPIConfig,
+  getApiConfig,
+  getApplicationPatches,
   getApplicationValues,
   getConfigTemplatesValues,
   getDeviceSpecConfigPatches,
   hasMicroshiftRegistrationConfig,
+  toAPIApplication,
 } from '../../Device/EditDeviceWizard/deviceSpecUtils';
-import { getDisruptionBudgetValues, getRolloutPolicyValues } from './fleetSpecUtils';
+import { getDisruptionBudgetValues, getRolloutPolicyValues, getUpdatePolicyValues } from './fleetSpecUtils';
+import { FleetFormValues, UpdatePolicyForm } from '../../../types/deviceSpec';
 
 export const getValidationSchema = (t: TFunction) => {
   return Yup.object<FleetFormValues>({
@@ -46,6 +49,7 @@ export const getValidationSchema = (t: TFunction) => {
     systemdUnits: systemdUnitListValidationSchema(t),
     rolloutPolicy: validFleetRolloutPolicySchema(t),
     disruptionBudget: validFleetDisruptionBudgetSchema(t),
+    updatePolicy: validUpdatePolicySchema(t),
   });
 };
 
@@ -113,7 +117,7 @@ export const getFleetPatches = (currentFleet: Fleet, updatedFleet: FleetFormValu
 
   // Configurations
   const currentConfigs = currentFleet.spec.template.spec.config || [];
-  const newConfigs = updatedFleet.configTemplates.map(getAPIConfig);
+  const newConfigs = updatedFleet.configTemplates.map(getApiConfig);
   if (updatedFleet.registerMicroShift) {
     newConfigs.push(ACMCrdConfig, ACMImportConfig, MicroshiftRegistrationHook);
   }
@@ -141,6 +145,13 @@ export const getFleetPatches = (currentFleet: Fleet, updatedFleet: FleetFormValu
   const rolloutPolicyPatches = getRolloutPolicyPatches(currentFleet.spec.rolloutPolicy, updatedFleet);
   allPatches = allPatches.concat(rolloutPolicyPatches);
 
+  // Update policies
+  const updatePolicyPatches = getUpdatePolicyPatches(
+    '/spec/template/spec/updatePolicy',
+    currentFleet.spec.template.spec.updatePolicy,
+    updatedFleet.updatePolicy as Required<UpdatePolicyForm>,
+  );
+  allPatches = allPatches.concat(updatePolicyPatches);
   return allPatches;
 };
 
@@ -172,7 +183,7 @@ export const getFleetResource = (values: FleetFormValues): Fleet => {
         },
         spec: {
           os: values.osImage ? { image: values.osImage || '' } : undefined,
-          config: values.configTemplates.map(getAPIConfig),
+          config: values.configTemplates.map(getApiConfig),
           applications: values.applications.map(toAPIApplication),
           ...systemdPatterns,
         },
@@ -186,6 +197,9 @@ export const getFleetResource = (values: FleetFormValues): Fleet => {
   if (values.rolloutPolicy.isAdvanced || values.disruptionBudget.isAdvanced) {
     fleet.spec.rolloutPolicy = getRolloutPolicyData(values);
   }
+  if (values.updatePolicy.isAdvanced) {
+    fleet.spec.template.spec.updatePolicy = updatePolicyFormToApi(values.updatePolicy as Required<UpdatePolicyForm>);
+  }
 
   return fleet;
 };
@@ -213,6 +227,7 @@ export const getInitialValues = (fleet?: Fleet): FleetFormValues => {
       registerMicroShift,
       rolloutPolicy: getRolloutPolicyValues(fleet.spec),
       disruptionBudget: getDisruptionBudgetValues(fleet.spec),
+      updatePolicy: getUpdatePolicyValues(fleet.spec.template?.spec?.updatePolicy),
     };
   }
 
@@ -227,5 +242,6 @@ export const getInitialValues = (fleet?: Fleet): FleetFormValues => {
     registerMicroShift: false,
     rolloutPolicy: getRolloutPolicyValues(undefined),
     disruptionBudget: getDisruptionBudgetValues(undefined),
+    updatePolicy: getUpdatePolicyValues(undefined),
   };
 };

package/src/components/Fleet/FleetsPage.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import {
+  Button,
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
-  SelectList,
-  SelectOption,
   Split,
   SplitItem,
+  Stack,
+  StackItem,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -14,7 +15,6 @@ import {
 } from '@patternfly/react-core';
 import { Tbody } from '@patternfly/react-table';
 import { TopologyIcon } from '@patternfly/react-icons/dist/js/icons/topology-icon';
-import { Trans } from 'react-i18next';
 import { TFunction } from 'i18next';
 
 import ListPage from '../ListPage/ListPage';
@@ -23,7 +23,6 @@ import TablePagination from '../Table/TablePagination';
 import TableTextSearch from '../Table/TableTextSearch';
 import Table, { ApiSortTableColumn } from '../Table/Table';
 import { useTableSelect } from '../../hooks/useTableSelect';
-import TableActions from '../Table/TableActions';
 import { getResourceId } from '../../utils/resource';
 import MassDeleteFleetModal from '../modals/massModals/MassDeleteFleetModal/MassDeleteFleetModal';
 import FleetRow from './FleetRow';
@@ -72,13 +71,13 @@ const FleetPageActions = ({ createText }: { createText?: string }) => {
 const FleetEmptyState = () => {
   const { t } = useTranslation();
   return (
-    <ResourceListEmptyState icon={TopologyIcon} titleText={t('No fleets here!')}>
+    <ResourceListEmptyState icon={TopologyIcon} titleText={t('No fleets yet')}>
       <EmptyStateBody>
-        <Trans t={t}>
-          Fleets are an easy way to manage multiple devices that share the same configurations.
-          <br />
-          With fleets you will be able to edit and update devices in mass.
-        </Trans>
+        <Stack>
+          <StackItem>{t('Fleets make it easier to manage multiple devices with shared configurations.')}</StackItem>
+          <StackItem>{t('Fleets allow you to edit and update your devices at once.')}</StackItem>
+          <StackItem>{t('To get started, create a new fleet or import an existing configuration.')}</StackItem>
+        </Stack>
       </EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -137,11 +136,9 @@ const FleetTable = () => {
           )}
           {canDelete && (
             <ToolbarItem>
-              <TableActions isDisabled={!hasSelectedRows}>
-                <SelectList>
-                  <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
-                </SelectList>
-              </TableActions>
+              <Button isDisabled={!hasSelectedRows} onClick={() => setIsMassDeleteModalOpen(true)} variant="secondary">
+                {t('Delete fleets')}
+              </Button>
             </ToolbarItem>
           )}
         </ToolbarContent>
@@ -150,8 +147,9 @@ const FleetTable = () => {
         aria-label={t('Fleets table')}
         loading={isUpdating}
         columns={fleetColumns}
-        emptyFilters={!hasFiltersEnabled}
+        hasFilters={hasFiltersEnabled}
         emptyData={fleets.length === 0}
+        clearFilters={() => setName('')}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
       >
@@ -173,7 +171,7 @@ const FleetTable = () => {
         </Tbody>
       </Table>
       <TablePagination pagination={pagination} isUpdating={isUpdating} />
-      {fleets.length === 0 && <FleetEmptyState />}
+      {!isUpdating && fleets.length === 0 && !name && <FleetEmptyState />}
       {fleetToDeleteId && (
         <DeleteFleetModal
           fleetId={fleetToDeleteId}

package/src/components/Fleet/ImportFleetWizard/steps/ResourceSyncStep.tsx

@@ -23,7 +23,7 @@ const ResourceSyncStep = () => {
         <TextContent>
           <Text>
             {t(
-              "A resource sync is an automated Gitops way to manage imported fleets. The resource sync monitors changes made to the source repository and update the fleet's configurations accordingly.",
+              'A resource sync is an automated Gitops method that helps manage your imported fleets by monitoring source repository changes and updating your fleet configuration accordingly.',
             )}
           </Text>
         </TextContent>

package/src/components/ListPage/ListPage.tsx

@@ -7,9 +7,10 @@ type ListPageProps = {
   title: string;
   headingLevel?: TitleProps['headingLevel'];
   children: React.ReactNode;
+  withBadge?: boolean;
 };
 
-const ListPage: React.FC<ListPageProps> = ({ title, headingLevel = 'h1', children }) => {
+const ListPage: React.FC<ListPageProps> = ({ title, headingLevel = 'h1', withBadge = true, children }) => {
   return (
     <PageSection variant={PageSectionVariants.light}>
       <Flex gap={{ default: 'gapMd' }} alignItems={{ default: 'alignItemsCenter' }}>
@@ -18,9 +19,11 @@ const ListPage: React.FC<ListPageProps> = ({ title, headingLevel = 'h1', childre
             {title}
           </Title>
         </FlexItem>
-        <FlexItem>
-          <TechPreviewBadge />
-        </FlexItem>
+        {withBadge && (
+          <FlexItem>
+            <TechPreviewBadge />
+          </FlexItem>
+        )}
       </Flex>
       {children}
     </PageSection>