@flightctl/ui-components 0.0.10 → 0.4.0-rc2

package/src/components/Device/SystemdUnitsModal/TrackSystemdUnitsForm.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { Alert, Button, Label, LabelGroup, TextInput } from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import ErrorHelperText from '../../form/FieldHelperText';
+import FlightCtlActionGroup from '../../form/FlightCtlActionGroup';
+import FlightCtlForm from '../../form/FlightCtlForm';
+
+export type SystemdUnitFormValue = {
+  pattern: string;
+  exists: boolean;
+};
+
+export type SystemdUnitsFormValues = {
+  systemdUnits: SystemdUnitFormValue[];
+};
+
+export type TrackSystemdUnitsFormProps = {
+  onClose: (reload?: boolean) => void;
+  error?: string;
+};
+
+const TrackSystemdUnitsForm: React.FC<TrackSystemdUnitsFormProps> = ({ onClose, error }) => {
+  const { t } = useTranslation();
+  const {
+    values,
+    setFieldValue,
+    submitForm,
+    isSubmitting,
+    errors: formErrors,
+  } = useFormikContext<SystemdUnitsFormValues>();
+  const [currentText, setCurrentText] = React.useState<string>('');
+
+  const onDeleteSystemdUnit = (deleteIndex: number) => {
+    const newSystemdUnits = values.systemdUnits.filter((_, index) => deleteIndex !== index);
+    void setFieldValue('systemdUnits', newSystemdUnits);
+  };
+
+  const onAdd = () => {
+    if (currentText) {
+      const newSystemdUnits = [...values.systemdUnits, { pattern: currentText, exists: false }];
+      void setFieldValue('systemdUnits', newSystemdUnits);
+      setCurrentText('');
+    }
+  };
+
+  const onEdit = (editIndex: number, nextText: string) => {
+    const newSystemdUnits = [...values.systemdUnits].map((systemdUnit, index) => {
+      if (index === editIndex) {
+        return { pattern: nextText, exists: false };
+      }
+      return systemdUnit;
+    });
+    void setFieldValue('systemdUnits', newSystemdUnits);
+  };
+
+  const textError = typeof formErrors.systemdUnits === 'string' ? formErrors.systemdUnits : undefined;
+  return (
+    <FlightCtlForm>
+      <TextInput
+        aria-label={t('Systemd service name')}
+        placeholder={t('Type here')}
+        value={currentText}
+        onBlur={onAdd}
+        onKeyDown={(ev) => {
+          if (ev.key === 'Enter') {
+            onAdd();
+          }
+        }}
+        onChange={(_ev, text) => {
+          setCurrentText(text);
+        }}
+      />
+      <LabelGroup numLabels={20} defaultIsOpen>
+        {values.systemdUnits.map((systemdUnit, index) => {
+          if (systemdUnit.exists) {
+            return null;
+          }
+          return (
+            <Label
+              key={index}
+              id={`${index}`}
+              onClose={() => onDeleteSystemdUnit(index)}
+              onEditCancel={(_, prevText) => onEdit(index, prevText)}
+              onEditComplete={(_, newText) => onEdit(index, newText)}
+              isEditable
+            >
+              {systemdUnit.pattern}
+            </Label>
+          );
+        })}
+      </LabelGroup>
+      <ErrorHelperText error={textError} />
+      {error && <Alert isInline title={error} variant="danger" />}
+      <FlightCtlActionGroup>
+        <Button
+          key="confirm"
+          variant="primary"
+          onClick={submitForm}
+          isDisabled={isSubmitting || !!textError}
+          isLoading={isSubmitting}
+        >
+          {t('Track services')}
+        </Button>
+        <Button key="cancel" variant="link" onClick={() => onClose()} isDisabled={isSubmitting}>
+          {t('Cancel')}
+        </Button>
+      </FlightCtlActionGroup>
+    </FlightCtlForm>
+  );
+};
+
+export default TrackSystemdUnitsForm;

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

@@ -35,6 +35,9 @@ import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList'
 import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import { useAppContext } from '../../../hooks/useAppContext';
+import { useAccessReview } from '../../../hooks/useAccessReview';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import PageWithPermissions from '../../common/PageWithPermissions';
 
 import './EnrollmentRequestDetails.css';
 
@@ -49,6 +52,9 @@ const EnrollmentRequestDetails = () => {
   });
   const { remove } = useFetch();
   const navigate = useNavigate();
+  const [canApprove] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST_APPROVAL, VERB.POST);
+  const [canDelete] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST, VERB.DELETE);
+
   const [isApprovalModalOpen, setIsApprovalModalOpen] = React.useState(false);
 
   const { deleteAction, deleteModal } = useDeleteAction({
@@ -72,14 +78,18 @@ const EnrollmentRequestDetails = () => {
       resourceType="Devices"
       resourceTypeLabel={t('Devices')}
       actions={
-        <DetailsPageActions>
-          <DropdownList>
-            <DropdownItem onClick={() => setIsApprovalModalOpen(true)} isDisabled={!isPendingApproval}>
-              {t('Approve')}
-            </DropdownItem>
-            {deleteAction}
-          </DropdownList>
-        </DetailsPageActions>
+        (canApprove || canApprove) && (
+          <DetailsPageActions>
+            <DropdownList>
+              {canApprove && (
+                <DropdownItem onClick={() => setIsApprovalModalOpen(true)} isDisabled={!isPendingApproval}>
+                  {t('Approve')}
+                </DropdownItem>
+              )}
+              {canDelete && deleteAction}
+            </DropdownList>
+          </DetailsPageActions>
+        )
       }
     >
       <Grid hasGutter>
@@ -223,4 +233,13 @@ const EnrollmentRequestDetails = () => {
   );
 };
 
-export default EnrollmentRequestDetails;
+const EnrollmentRequestDetailsWithPermissions = () => {
+  const [allowed, loading] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST, VERB.GET);
+  return (
+    <PageWithPermissions allowed={allowed} loading={loading}>
+      <EnrollmentRequestDetails />
+    </PageWithPermissions>
+  );
+};
+
+export default EnrollmentRequestDetailsWithPermissions;

package/src/components/{Device/DevicesPage → EnrollmentRequest}/EnrollmentRequestList.tsx

@@ -1,56 +1,60 @@
 import * as React from 'react';
 import { TFunction } from 'react-i18next';
 import { Tbody } from '@patternfly/react-table';
-import { SelectList, SelectOption, Spinner, ToolbarItem } from '@patternfly/react-core';
-
-import { EnrollmentRequest, EnrollmentRequestList as EnrollmentRequestListType } from '@flightctl/types';
-
-import Table, { ApiSortTableColumn } from '../../Table/Table';
-import TableActions from '../../Table/TableActions';
-import ListPage from '../../ListPage/ListPage';
-import ListPageBody from '../../ListPage/ListPageBody';
-import { useDeleteListAction } from '../../ListPage/ListPageActions';
-import { useFetch } from '../../../hooks/useFetch';
-import { useTranslation } from '../../../hooks/useTranslation';
-import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
-import { useTableSelect } from '../../../hooks/useTableSelect';
-import { useApiTableSort } from '../../../hooks/useApiTableSort';
-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';
-import EnrollmentRequestTableRow from '../../EnrollmentRequest/EnrollmentRequestTableRow';
+import { SelectList, SelectOption, ToolbarItem } from '@patternfly/react-core';
+import { MicrochipIcon } from '@patternfly/react-icons/dist/js/icons';
+
+import { EnrollmentRequest, EnrollmentRequestList } from '@flightctl/types';
+
+import Table, { ApiSortTableColumn } from '../Table/Table';
+import TableActions from '../Table/TableActions';
+import ListPage from '../ListPage/ListPage';
+import ListPageBody from '../ListPage/ListPageBody';
+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';
+import EnrollmentRequestTableRow from '../EnrollmentRequest/EnrollmentRequestTableRow';
 import EnrollmentRequestTableToolbar from './EnrollmentRequestTableToolbar';
+import { RESOURCE, VERB } from '../../types/rbac';
+import { useAccessReview } from '../../hooks/useAccessReview';
+import ResourceListEmptyState from '../common/ResourceListEmptyState';
+import { usePendingEnrollments } from './useEnrollmentRequests';
+import TablePagination from '../Table/TablePagination';
+
+const EnrollmentRequestEmptyState = () => {
+  const { t } = useTranslation();
+  return <ResourceListEmptyState icon={MicrochipIcon} titleText={t('No enrollment requests here!')} />;
+};
 
 const getEnrollmentColumns = (t: TFunction): ApiSortTableColumn[] => [
   {
     name: t('Name'),
-    sortableField: 'metadata.name',
-    defaultSort: true,
   },
   {
     name: t('Created'),
-    sortableField: 'metadata.creationTimestamp',
   },
 ];
 
 const getSearchText = (er: EnrollmentRequest) => [er.metadata.name];
 
-const EnrollmentRequestList = ({ refetchDevices }: { refetchDevices: VoidFunction }) => {
+type EnrollmentRequestListProps = { refetchDevices?: VoidFunction; isStandalone?: boolean };
+
+const EnrollmentRequestList = ({ 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 enrollmentColumns = React.useMemo(() => getEnrollmentColumns(t), [t]);
-  const { getSortParams, sortField, direction } = useApiTableSort(enrollmentColumns);
-
-  const [erList, isLoading, error, refetch] = useFetchPeriodically<EnrollmentRequestListType>({
-    endpoint: `enrollmentrequests?fieldSelector=!status.approval.approved${sortField ? `&sortBy=${sortField}&sortOrder=${direction}` : ''}`,
-  });
-  const pendingEnrollments = erList?.items || [];
+  const [pendingEnrollments, isLoading, error, refetch, pagination] = usePendingEnrollments();
 
   const refetchWithDevices = () => {
     refetch();
-    refetchDevices();
+    refetchDevices?.();
   };
 
   const [approvingErId, setApprovingErId] = React.useState<string>();
@@ -69,11 +73,8 @@ const EnrollmentRequestList = ({ refetchDevices }: { refetchDevices: VoidFunctio
     },
   });
 
-  if (isLoading) {
-    return <Spinner size="md" />;
-  }
-
-  if (pendingEnrollments.length === 0) {
+  // In non-standalone mode, hide the entire component when there are no pending enrollments
+  if (!isStandalone && pendingEnrollments.length === 0) {
     return null;
   }
 
@@ -81,24 +82,29 @@ const EnrollmentRequestList = ({ refetchDevices }: { refetchDevices: VoidFunctio
 
   return (
     <ListPage title={t('Devices pending approval')} headingLevel="h2">
-      <ListPageBody error={error} loading={isLoading}>
+      <ListPageBody error={error} loading={false}>
         <EnrollmentRequestTableToolbar search={search} setSearch={setSearch} enrollments={pendingEnrollments}>
-          <ToolbarItem>
-            <TableActions isDisabled={!hasSelectedRows}>
-              <SelectList>
-                <SelectOption onClick={() => setIsMassApproveModalOpen(true)}>{t('Approve')}</SelectOption>
-                <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
-              </SelectList>
-            </TableActions>
-          </ToolbarItem>
+          {(canApprove || canDelete) && (
+            <ToolbarItem>
+              <TableActions isDisabled={!hasSelectedRows}>
+                <SelectList>
+                  {canApprove && (
+                    <SelectOption onClick={() => setIsMassApproveModalOpen(true)}>{t('Approve')}</SelectOption>
+                  )}
+                  {canDelete && (
+                    <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
+                  )}
+                </SelectList>
+              </TableActions>
+            </ToolbarItem>
+          )}
         </EnrollmentRequestTableToolbar>
         <Table
           aria-label={t('Table for devices pending approval')}
-          loading={isLoading}
+          loading={!!isStandalone && isLoading && pendingEnrollments.length === 0}
           columns={enrollmentColumns}
           emptyFilters={filteredData.length === 0}
           emptyData={false}
-          getSortParams={getSortParams}
           isAllSelected={isAllSelected}
           onSelectAll={setAllSelected}
         >
@@ -114,11 +120,14 @@ const EnrollmentRequestList = ({ refetchDevices }: { refetchDevices: VoidFunctio
                 onApprove={() => {
                   setApprovingErId(er.metadata.name as string);
                 }}
+                canApprove={canApprove}
+                canDelete={canDelete}
               />
             ))}
           </Tbody>
         </Table>
-
+        <TablePagination pagination={pagination} isUpdating={isLoading} />
+        {isStandalone && pendingEnrollments.length === 0 && !isLoading && <EnrollmentRequestEmptyState />}
         {deleteModal}
         {currentEnrollmentRequest && (
           <ApproveDeviceModal

package/src/components/EnrollmentRequest/EnrollmentRequestTableRow.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ActionsColumn, OnSelect, Td, Tr } from '@patternfly/react-table';
+import { ActionsColumn, IAction, OnSelect, Td, Tr } from '@patternfly/react-table';
 import { Button } from '@patternfly/react-core';
 
 import { EnrollmentRequest } from '@flightctl/types';
@@ -16,6 +16,8 @@ type EnrollmentRequestTableRow = {
   er: EnrollmentRequest;
   onApprove: (id: string) => void;
   deleteAction: DeleteListActionResult['deleteAction'];
+  canApprove: boolean;
+  canDelete: boolean;
 };
 
 const EnrollmentRequestTableRow: React.FC<EnrollmentRequestTableRow> = ({
@@ -25,6 +27,8 @@ const EnrollmentRequestTableRow: React.FC<EnrollmentRequestTableRow> = ({
   onRowSelect,
   isRowSelected,
   onApprove,
+  canApprove,
+  canDelete,
 }) => {
   const { t } = useTranslation();
   const erName = er.metadata.name as string;
@@ -33,6 +37,17 @@ const EnrollmentRequestTableRow: React.FC<EnrollmentRequestTableRow> = ({
     onApprove(erName);
   };
 
+  const actionItems: IAction[] = [];
+  if (canApprove) {
+    actionItems.push({
+      title: t('Approve'),
+      onClick: approveEnrollment,
+    });
+  }
+  if (canDelete) {
+    actionItems.push(deleteAction({ resourceId: erName }));
+  }
+
   return (
     <Tr data-testid={`enrollment-request-${rowIndex}`}>
       <Td
@@ -46,22 +61,18 @@ const EnrollmentRequestTableRow: React.FC<EnrollmentRequestTableRow> = ({
         <ResourceLink id={erName} routeLink={ROUTE.ENROLLMENT_REQUEST_DETAILS} />
       </Td>
       <Td dataLabel={t('Created')}>{timeSinceText(t, er.metadata.creationTimestamp)}</Td>
-      <Td dataLabel={t('Approve')}>
-        <Button variant="link" onClick={approveEnrollment}>
-          {t('Approve')}
-        </Button>
-      </Td>
-      <Td isActionCell>
-        <ActionsColumn
-          items={[
-            {
-              title: t('Approve'),
-              onClick: approveEnrollment,
-            },
-            deleteAction({ resourceId: erName }),
-          ]}
-        />
-      </Td>
+      {canApprove && (
+        <Td dataLabel={t('Approve')}>
+          <Button variant="link" onClick={approveEnrollment}>
+            {t('Approve')}
+          </Button>
+        </Td>
+      )}
+      {!!actionItems.length && (
+        <Td isActionCell>
+          <ActionsColumn items={actionItems} />
+        </Td>
+      )}
     </Tr>
   );
 };

package/src/components/{Device/DevicesPage → EnrollmentRequest}/EnrollmentRequestTableToolbar.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
 
-import TableTextSearch, { TableTextSearchProps } from '../../Table/TableTextSearch';
-import { useTranslation } from '../../../hooks/useTranslation';
 import { EnrollmentRequest } from '@flightctl/types';
+import { useTranslation } from '../../hooks/useTranslation';
+
+import TableTextSearch, { TableTextSearchProps } from '../Table/TableTextSearch';
 
 type EnrollmentRequestTableToolbarProps = {
   enrollments: EnrollmentRequest[];

package/src/components/EnrollmentRequest/useEnrollmentRequests.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+
+import { useDebounce } from 'use-debounce';
+
+import { EnrollmentRequest, EnrollmentRequestList } from '@flightctl/types';
+
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import { PaginationDetails, useTablePagination } from '../../hooks/useTablePagination';
+
+import { PAGE_SIZE } from '../../constants';
+
+type EnrollmentRequestsEndpointArgs = {
+  nextContinue?: string;
+};
+
+const getPendingEnrollmentsEndpoint = ({ nextContinue }: EnrollmentRequestsEndpointArgs) => {
+  const params = new URLSearchParams({
+    fieldSelector: '!status.approval.approved',
+  });
+
+  if (nextContinue !== undefined) {
+    params.set('limit', `${PAGE_SIZE}`);
+  }
+  if (nextContinue) {
+    params.set('continue', nextContinue);
+  }
+  return `enrollmentrequests?${params.toString()}`;
+};
+
+export const useEnrollmentRequestsEndpoint = (args: EnrollmentRequestsEndpointArgs): [string, boolean] => {
+  const endpoint = getPendingEnrollmentsEndpoint(args);
+  const [pendingErEndpointDebounced] = useDebounce(endpoint, 1000);
+  return [pendingErEndpointDebounced, endpoint !== pendingErEndpointDebounced];
+};
+
+export const usePendingEnrollments = (): [
+  EnrollmentRequest[],
+  boolean,
+  unknown,
+  VoidFunction,
+  pagination: Pick<PaginationDetails, 'currentPage' | 'setCurrentPage' | 'itemCount'>,
+] => {
+  const { currentPage, setCurrentPage, itemCount, nextContinue, onPageFetched } = useTablePagination();
+  const [pendingErEndpoint, isDebouncing] = useEnrollmentRequestsEndpoint({ nextContinue });
+
+  const [erList, isLoading, error, refetch] = useFetchPeriodically<EnrollmentRequestList>(
+    {
+      endpoint: pendingErEndpoint,
+    },
+    onPageFetched,
+  );
+
+  const pagination = React.useMemo(
+    () => ({
+      currentPage,
+      setCurrentPage,
+      itemCount,
+    }),
+    [currentPage, setCurrentPage, itemCount],
+  );
+
+  return [erList?.items || [], isLoading || isDebouncing, error, refetch, pagination];
+};

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

@@ -30,6 +30,10 @@ import CreateFleetWizardFooter from './CreateFleetWizardFooter';
 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';
 
 import './CreateFleetWizard.css';
 
@@ -92,7 +96,12 @@ const CreateFleetWizard = () => {
               <LeaveFormConfirmation />
               <Wizard
                 footer={<CreateFleetWizardFooter isEdit={isEdit} />}
-                onStepChange={(_, step) => setCurrentStep(step)}
+                onStepChange={(_, step) => {
+                  if (error) {
+                    setError(undefined);
+                  }
+                  setCurrentStep(step);
+                }}
                 className="fctl-create-fleet"
               >
                 <WizardStep name={t('General info')} id={generalInfoStepId}>
@@ -149,4 +158,21 @@ const CreateFleetWizard = () => {
   );
 };
 
-export default CreateFleetWizard;
+const CreateFleetWizardWithPermissions = () => {
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { fleetId } = useParams<{ fleetId: string }>();
+  const [createAllowed, createLoading] = useAccessReview(RESOURCE.FLEET, VERB.CREATE);
+  const [patchAllowed, patchLoading] = useAccessReview(RESOURCE.FLEET, VERB.PATCH);
+  return (
+    <PageWithPermissions
+      allowed={fleetId ? patchAllowed : createAllowed}
+      loading={fleetId ? patchLoading : createLoading}
+    >
+      <CreateFleetWizard />
+    </PageWithPermissions>
+  );
+};
+
+export default CreateFleetWizardWithPermissions;

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

@@ -12,7 +12,7 @@ import { useFetch } from '../../../../hooks/useFetch';
 import { FlightCtlLabel } from '../../../../types/extraTypes';
 import { getApiListCount } from '../../../../utils/api';
 import { getErrorMessage } from '../../../../utils/error';
-import { labelToString } from '../../../../utils/labels';
+import { commonQueries } from '../../../../utils/query';
 
 const validateLabels = (labels: FlightCtlLabel[]) =>
   hasUniqueLabelKeys(labels) && getInvalidKubernetesLabels(labels).length === 0;
@@ -27,12 +27,9 @@ const DeviceLabelSelector = () => {
   const [deviceCount, setDeviceCount] = React.useState<number>(0);
 
   const updateDeviceCount = async (matchLabels: FlightCtlLabel[]) => {
-    const labelSelector = matchLabels.map(labelToString);
-
     try {
-      // TODO remove sortBy when https://issues.redhat.com/browse/EDM-624 is fixed. Otherwise the device count can be wrong.
       const deviceListResp = await get<DeviceList>(
-        `devices?labelSelector=${labelSelector.join(',')}&limit=1&sortBy=metadata.name`,
+        commonQueries.getDevicesWithExactLabelMatching(matchLabels, { limit: 1 }),
       );
       const num = getApiListCount(deviceListResp);
       setDeviceCount(num || 0);

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

@@ -18,6 +18,7 @@ import RepositorySourceList from '../../../Repository/RepositoryDetails/Reposito
 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';
 
 export const reviewStepId = 'review';
 
@@ -67,6 +68,12 @@ const ReviewStep = ({ error }: { error?: unknown }) => {
               <ReviewApplications apps={values.applications} />
             </DescriptionListDescription>
           </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Tracked systemd services')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <ReviewTrackedSystemdServices systemdUnits={values.systemdUnits} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
         </FlightControlDescriptionList>
       </StackItem>
       {!!error && (