@flightctl/ui-components 0.0.4 → 0.0.5

package/src/components/Device/DevicesPage/EnrollmentRequestList.tsx

@@ -0,0 +1,183 @@
+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, { TableColumn } 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 { useTableSort } from '../../../hooks/useTableSort';
+import { useTableTextSearch } from '../../../hooks/useTableTextSearch';
+import { sortByCreationDate, sortByName } from '../../../utils/sort/generic';
+
+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';
+
+const getEnrollmentColumns = (t: TFunction): TableColumn<EnrollmentRequest>[] => [
+  {
+    name: t('Name'),
+    onSort: sortByName,
+  },
+  {
+    name: t('Created'),
+    onSort: sortByCreationDate,
+  },
+];
+
+interface EnrollmentRequestTableProps {
+  pendingEnrollments: Array<EnrollmentRequest>;
+  approveRefetch: VoidFunction;
+  deleteRefetch: VoidFunction;
+}
+
+const getSearchText = (er: EnrollmentRequest) => [er.metadata.name];
+
+export const EnrollmentRequestTable = ({
+  pendingEnrollments,
+  approveRefetch,
+  deleteRefetch,
+}: EnrollmentRequestTableProps) => {
+  const { t } = useTranslation();
+  const { remove } = useFetch();
+
+  const [approvingErId, setApprovingErId] = React.useState<string>();
+  const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
+  const [isMassApproveModalOpen, setIsMassApproveModalOpen] = React.useState(false);
+
+  const enrollmentColumns = React.useMemo(() => getEnrollmentColumns(t), [t]);
+
+  const { search, setSearch, filteredData } = useTableTextSearch(pendingEnrollments, getSearchText);
+  const { getSortParams, sortedData } = useTableSort(filteredData, enrollmentColumns);
+
+  const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
+
+  const { deleteAction, deleteModal } = useDeleteListAction({
+    resourceType: 'EnrollmentRequest',
+    onDelete: async (enrollmentId: string) => {
+      await remove(`enrollmentrequests/${enrollmentId}`);
+      deleteRefetch();
+    },
+  });
+
+  const currentEnrollmentRequest = pendingEnrollments.find((er) => er.metadata.name === approvingErId);
+
+  return (
+    <>
+      <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>
+      </EnrollmentRequestTableToolbar>
+      <Table
+        aria-label={t('Table for devices pending approval')}
+        columns={enrollmentColumns}
+        emptyFilters={filteredData.length === 0}
+        emptyData={false}
+        getSortParams={getSortParams}
+        isAllSelected={isAllSelected}
+        onSelectAll={setAllSelected}
+      >
+        <Tbody>
+          {sortedData.map((er, index) => (
+            <EnrollmentRequestTableRow
+              key={er.metadata.name || ''}
+              er={er}
+              deleteAction={deleteAction}
+              onRowSelect={onRowSelect}
+              isRowSelected={isRowSelected}
+              rowIndex={index}
+              onApprove={() => {
+                setApprovingErId(er.metadata.name as string);
+              }}
+            />
+          ))}
+        </Tbody>
+      </Table>
+
+      {deleteModal}
+      {currentEnrollmentRequest && (
+        <ApproveDeviceModal
+          enrollmentRequest={currentEnrollmentRequest}
+          onClose={(updateList) => {
+            setApprovingErId(undefined);
+            updateList && approveRefetch();
+          }}
+        />
+      )}
+      {isMassDeleteModalOpen && (
+        <MassDeleteDeviceModal
+          onClose={() => setIsMassDeleteModalOpen(false)}
+          resources={filteredData.filter(isRowSelected)}
+          onDeleteSuccess={() => {
+            setIsMassDeleteModalOpen(false);
+            deleteRefetch();
+          }}
+        />
+      )}
+      {isMassApproveModalOpen && (
+        <MassApproveDeviceModal
+          onClose={() => setIsMassApproveModalOpen(false)}
+          pendingEnrollments={filteredData.filter(isRowSelected)}
+          onApproveSuccess={() => {
+            setAllSelected(false);
+            setIsMassApproveModalOpen(false);
+            approveRefetch();
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+const EnrollmentRequestList = ({ refetchDevices }: { refetchDevices: VoidFunction }) => {
+  const { t } = useTranslation();
+  const [erList, isLoading, error, refetch] = useFetchPeriodically<EnrollmentRequestListType>({
+    endpoint: 'enrollmentrequests',
+  });
+
+  if (isLoading) {
+    return <Spinner size="md" />;
+  }
+
+  // The content only appears if there are pending enrollment requests
+  // TODO move the filter as part of the query once it's available via the API
+  const pendingEnrollments = (erList?.items || []).filter((er) => er.status?.approval?.approved !== true);
+
+  if (pendingEnrollments.length === 0) {
+    return null;
+  }
+
+  const approveRefetch = () => {
+    refetch();
+    refetchDevices();
+  };
+  return (
+    <ListPage title={t('Devices pending approval')} headingLevel="h2">
+      <ListPageBody error={error} loading={false}>
+        <EnrollmentRequestTable
+          pendingEnrollments={pendingEnrollments}
+          approveRefetch={approveRefetch}
+          deleteRefetch={refetch}
+        />
+      </ListPageBody>
+    </ListPage>
+  );
+};
+
+export default EnrollmentRequestList;

package/src/components/Device/DevicesPage/EnrollmentRequestTableToolbar.tsx

@@ -0,0 +1,35 @@
+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';
+
+type EnrollmentRequestTableToolbarProps = {
+  enrollments: EnrollmentRequest[];
+  search: TableTextSearchProps['value'];
+  setSearch: TableTextSearchProps['setValue'];
+};
+
+const EnrollmentRequestTableToolbar = ({
+  search,
+  setSearch,
+  children,
+}: React.PropsWithChildren<EnrollmentRequestTableToolbarProps>) => {
+  const { t } = useTranslation();
+
+  return (
+    <Toolbar id="enrollment-requests-toolbar" inset={{ default: 'insetNone' }}>
+      <ToolbarContent>
+        <ToolbarGroup>
+          <ToolbarItem variant="search-filter">
+            <TableTextSearch value={search} setValue={setSearch} placeholder={t('Search by name')} />
+          </ToolbarItem>
+        </ToolbarGroup>
+        {children}
+      </ToolbarContent>
+    </Toolbar>
+  );
+};
+
+export default EnrollmentRequestTableToolbar;

package/src/components/Device/DevicesPage/types.ts

@@ -0,0 +1,22 @@
+import { DeviceSummaryStatus, FilterSearchParams } from '../../../utils/status/devices';
+import { StatusItem } from '../../../utils/status/common';
+import { ApplicationsSummaryStatusType, DeviceSummaryStatusType, DeviceUpdatedStatusType } from '@flightctl/types';
+
+type FilterOptionsProps<T extends DeviceSummaryStatus> = {
+  filter: string;
+  items: Array<StatusItem<T>>;
+  selectedFilters: Array<T>;
+  onClick: (value: string) => void;
+};
+
+export type FilterOptionsFC = <T extends DeviceSummaryStatus>(
+  props: FilterOptionsProps<T>,
+) => JSX.Element | JSX.Element[];
+
+export type FilterStatusMap = {
+  [FilterSearchParams.AppStatus]: ApplicationsSummaryStatusType[];
+  [FilterSearchParams.DeviceStatus]: DeviceSummaryStatusType[];
+  [FilterSearchParams.UpdatedStatus]: DeviceUpdatedStatusType[];
+};
+
+export type UpdateStatus = (statusType?: keyof FilterStatusMap, status?: string) => void;

package/src/components/Device/DevicesPage/useDeviceBackendFilters.ts

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { ApplicationsSummaryStatusType, DeviceSummaryStatusType, DeviceUpdatedStatusType } from '@flightctl/types';
+
+import { FilterSearchParams } from '../../../utils/status/devices';
+import { useAppContext } from '../../../hooks/useAppContext';
+import { EnrollmentRequestStatus } from '../../../utils/status/enrollmentRequest';
+import { FilterStatusMap } from './types';
+import { FlightCtlLabel } from '../../../types/extraTypes';
+import { labelToString } from '../../../utils/labels';
+
+const validAppStatuses = Object.values(ApplicationsSummaryStatusType) as string[];
+const validUpdatedStatuses = Object.values(DeviceUpdatedStatusType) as string[];
+const validDeviceStatuses = Object.values(DeviceSummaryStatusType) as string[];
+validDeviceStatuses.push(EnrollmentRequestStatus.Pending);
+
+const getNewParams = (currentParams: URLSearchParams, newValues: { [key: string]: string[] }) => {
+  let newParams = [...currentParams.entries()];
+  const keys = Object.keys(newValues);
+  newParams = newParams.filter(([key]) => !keys.includes(key));
+  keys.forEach((key) => {
+    newValues[key].forEach((v) => v && newParams.push([key, v]));
+  });
+  return newParams;
+};
+
+export const useDeviceBackendFilters = () => {
+  const {
+    router: { useSearchParams },
+  } = useAppContext();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const paramsRef = React.useRef(searchParams);
+  const ownerFleets = searchParams.getAll(FilterSearchParams.Fleet) || undefined;
+
+  const updateSearchParams = React.useCallback(
+    (params: [string, string][]) => {
+      const urlParams = new URLSearchParams(params);
+      paramsRef.current = urlParams;
+      setSearchParams(urlParams);
+    },
+    [setSearchParams],
+  );
+
+  const activeStatuses = React.useMemo(() => {
+    const activeStatuses: FilterStatusMap = {
+      [FilterSearchParams.AppStatus]: [],
+      [FilterSearchParams.DeviceStatus]: [],
+      [FilterSearchParams.UpdatedStatus]: [],
+    };
+    const deviceStatuses = searchParams.getAll(FilterSearchParams.DeviceStatus) || [];
+    deviceStatuses.forEach((status) => {
+      if (validDeviceStatuses.includes(status)) {
+        activeStatuses[FilterSearchParams.DeviceStatus].push(status as DeviceSummaryStatusType);
+      }
+    });
+    const appStatuses = searchParams.getAll(FilterSearchParams.AppStatus) || [];
+    appStatuses.forEach((status) => {
+      if (validAppStatuses.includes(status)) {
+        activeStatuses[FilterSearchParams.AppStatus].push(status as ApplicationsSummaryStatusType);
+      }
+    });
+
+    const updateStatuses = searchParams.getAll(FilterSearchParams.UpdatedStatus) || [];
+    updateStatuses.forEach((status) => {
+      if (validUpdatedStatuses.includes(status)) {
+        activeStatuses[FilterSearchParams.UpdatedStatus].push(status as DeviceUpdatedStatusType);
+      }
+    });
+
+    return activeStatuses;
+  }, [searchParams]);
+
+  const selectedLabels = (searchParams.getAll(FilterSearchParams.Label) || []).map<FlightCtlLabel>((l) => {
+    const labelParts = l.split('=');
+    if (labelParts.length === 1) {
+      return {
+        key: labelParts[0],
+        value: '',
+      };
+    }
+    return {
+      key: labelParts[0],
+      value: labelParts[1],
+    };
+  });
+
+  const setOwnerFleets = React.useCallback(
+    (ownerFleets: string[]) => {
+      updateSearchParams(getNewParams(paramsRef.current, { [FilterSearchParams.Fleet]: ownerFleets }));
+    },
+    [updateSearchParams],
+  );
+
+  const setActiveStatuses = React.useCallback(
+    (activeStatuses: FilterStatusMap) => {
+      updateSearchParams(getNewParams(paramsRef.current, activeStatuses));
+    },
+    [updateSearchParams],
+  );
+
+  const setSelectedLabels = React.useCallback(
+    (labels: FlightCtlLabel[]) => {
+      updateSearchParams(getNewParams(paramsRef.current, { [FilterSearchParams.Label]: labels.map(labelToString) }));
+    },
+    [updateSearchParams],
+  );
+
+  const hasFiltersEnabled =
+    !!selectedLabels.length || !!ownerFleets.length || Object.values(activeStatuses).some((s) => !!s.length);
+
+  return {
+    activeStatuses,
+    setActiveStatuses,
+    ownerFleets,
+    setOwnerFleets,
+    selectedLabels,
+    setSelectedLabels,
+    hasFiltersEnabled,
+  };
+};

package/src/components/Device/DevicesPage/useDeviceFilters.ts

@@ -0,0 +1,15 @@
+import { Device } from '@flightctl/types';
+import { useTableTextSearch } from '../../../hooks/useTableTextSearch';
+
+const getSearchText = (device: Device) => [device.metadata.name, device.metadata.labels?.alias];
+
+export const useDeviceFilters = (devices: Array<Device>) => {
+  const { search, setSearch, filteredData } = useTableTextSearch(devices, getSearchText);
+
+  return {
+    filteredData,
+    search,
+    setSearch,
+    hasFiltersEnabled: !!search,
+  };
+};

package/src/components/Device/DevicesPage/useDevices.ts

@@ -0,0 +1,112 @@
+import React from 'react';
+import { useDebounce } from 'use-debounce';
+
+import { Device, DeviceList, DevicesSummary } from '@flightctl/types';
+import { FilterSearchParams } from '../../../utils/status/devices';
+import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
+import { FlightCtlLabel } from '../../../types/extraTypes';
+import { FilterStatusMap } from './types';
+
+import { fromAPILabel } from '../../../utils/labels';
+
+const setLabelParams = (params: URLSearchParams, labels?: FlightCtlLabel[]) => {
+  if (labels?.length) {
+    const labelSelector = labels.reduce((acc, curr) => {
+      if (!acc) {
+        acc = `${curr.key}=${curr.value || ''}`;
+      } else {
+        acc += `,${curr.key}=${curr.value || ''}`;
+      }
+      return acc;
+    }, '');
+    params.append('labelSelector', labelSelector);
+  }
+};
+
+type DevicesEndpointArgs = {
+  ownerFleets?: string[];
+  activeStatuses?: FilterStatusMap;
+  labels?: FlightCtlLabel[];
+  summaryOnly?: boolean;
+};
+
+const getDevicesEndpoint = ({ ownerFleets, activeStatuses, labels, summaryOnly }: DevicesEndpointArgs) => {
+  const filterByAppStatus = activeStatuses?.[FilterSearchParams.AppStatus];
+  const filterByDevStatus = activeStatuses?.[FilterSearchParams.DeviceStatus];
+  const filterByUpdateStatus = activeStatuses?.[FilterSearchParams.UpdatedStatus];
+
+  const params = new URLSearchParams();
+  if (ownerFleets?.length) {
+    params.set('owner', ownerFleets.map((fleet) => `Fleet/${fleet}`).join(','));
+  }
+  filterByAppStatus?.forEach((appSt) => params.append('statusFilter', `applications.summary.status=${appSt}`));
+  filterByDevStatus?.forEach((devSt) => params.append('statusFilter', `summary.status=${devSt}`));
+  filterByUpdateStatus?.forEach((updSt) => params.append('statusFilter', `updated.status=${updSt}`));
+
+  setLabelParams(params, labels);
+
+  if (summaryOnly) {
+    params.set('summaryOnly', 'true');
+  }
+  return params.size ? `devices?${params.toString()}` : 'devices';
+};
+
+export const useDevicesEndpoint = (args: DevicesEndpointArgs): [string, boolean] => {
+  const endpoint = getDevicesEndpoint(args);
+  const [devicesEndpointDebounced] = useDebounce(endpoint, 1000);
+  return [devicesEndpointDebounced, endpoint !== devicesEndpointDebounced];
+};
+
+export const useDevicesSummary = ({
+  ownerFleets,
+  labels,
+}: {
+  ownerFleets?: string[];
+  labels?: FlightCtlLabel[];
+}): [DevicesSummary | undefined, boolean] => {
+  const [devicesEndpoint] = useDevicesEndpoint({ ownerFleets, labels, summaryOnly: true });
+  const [deviceList, listLoading] = useFetchPeriodically<DeviceList>({
+    endpoint: devicesEndpoint,
+  });
+
+  return [deviceList?.summary, listLoading];
+};
+
+export const useDevices = ({
+  ownerFleets,
+  activeStatuses,
+  labels,
+}: {
+  ownerFleets?: string[];
+  activeStatuses?: FilterStatusMap;
+  labels?: FlightCtlLabel[];
+}): [Device[], boolean, unknown, boolean, VoidFunction, FlightCtlLabel[]] => {
+  const [deviceLabelList] = useFetchPeriodically<DeviceList>({
+    endpoint: 'devices',
+  });
+  const [devicesEndpoint, devicesDebouncing] = useDevicesEndpoint({ ownerFleets, activeStatuses, labels });
+  const [devicesList, devicesLoading, devicesError, devicesRefetch, updating] = useFetchPeriodically<DeviceList>({
+    endpoint: devicesEndpoint,
+  });
+
+  const allLabels = React.useMemo(() => {
+    const labelsSet = new Set<FlightCtlLabel>();
+
+    deviceLabelList?.items.forEach((device) => {
+      const deviceLabels = fromAPILabel(device.metadata.labels || {}).filter((label) => label.key !== 'alias');
+      deviceLabels.forEach((label) => {
+        labelsSet.add(label);
+      });
+    });
+    return Array.from(labelsSet);
+  }, [deviceLabelList]);
+
+  return [
+    devicesList?.items || [],
+    devicesLoading,
+    devicesError,
+    updating || devicesDebouncing,
+    devicesRefetch,
+    allLabels || [],
+  ];
+};

package/src/components/Device/EditDeviceWizard/EditDeviceWizard.css

@@ -0,0 +1,4 @@
+.fctl-edit-device__wizard .pf-v5-c-wizard__nav-item {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { Formik } from 'formik';
+import {
+  Alert,
+  Breadcrumb,
+  BreadcrumbItem,
+  Bullseye,
+  PageSection,
+  PageSectionVariants,
+  Spinner,
+  Title,
+  Wizard,
+  WizardStep,
+} from '@patternfly/react-core';
+
+import { Device } from '@flightctl/types';
+import { EditDeviceFormValues } from './types';
+import { getErrorMessage } from '../../../utils/error';
+import { fromAPILabel } from '../../../utils/labels';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { Link, ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
+import ErrorBoundary from '../../common/ErrorBoundary';
+import GeneralInfoStep, { generalInfoStepId, isGeneralInfoStepValid } from './steps/GeneralInfoStep';
+import DeviceTemplateStep, { deviceTemplateStepId, isDeviceTemplateStepValid } from './steps/DeviceTemplateStep';
+import ReviewDeviceStep, { reviewDeviceStepId } from './steps/ReviewDeviceStep';
+import { getDevicePatches, getValidationSchema } from './utils';
+import { getApplicationValues, getConfigTemplatesValues } from './deviceSpecUtils';
+import { useFetch } from '../../../hooks/useFetch';
+import { useEditDevice } from './useEditDevice';
+import EditDeviceWizardNav from './EditDeviceWizardNav';
+import EditDeviceWizardFooter from './EditDeviceWizardFooter';
+
+import './EditDeviceWizard.css';
+
+const EditDeviceWizard = () => {
+  const { t } = useTranslation();
+  const [submitError, setSubmitError] = React.useState<string | undefined>();
+  const navigate = useNavigate();
+
+  const { patch } = useFetch();
+
+  const [deviceId, device, isLoading, loadError] = useEditDevice();
+  const deviceAlias = device?.metadata.labels?.alias || '';
+  const displayText = device ? deviceAlias || t('Untitled') : deviceId;
+
+  let body: React.ReactNode;
+  if (isLoading) {
+    body = (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  } else if (loadError) {
+    body = (
+      <Alert isInline variant="danger" title={t('An error occurred')}>
+        {getErrorMessage(loadError)}
+      </Alert>
+    );
+  } else if (!!device?.metadata.owner) {
+    body = (
+      <Alert isInline variant="info" title={t('Device is non-editable')}>
+        {t('This device is managed by a fleet and it cannot be edited directly.')}
+      </Alert>
+    );
+  } else if (device) {
+    body = (
+      <Formik<EditDeviceFormValues>
+        initialValues={{
+          deviceAlias,
+          osImage: device.spec?.os?.image,
+          labels: fromAPILabel(device.metadata.labels || {}).filter((label) => label.key !== 'alias'),
+          configTemplates: getConfigTemplatesValues(device.spec),
+          fleetMatch: '', // Initially this is always a fleetless device
+          applications: getApplicationValues(device.spec),
+        }}
+        validationSchema={getValidationSchema(t)}
+        validateOnMount
+        onSubmit={async (values) => {
+          setSubmitError(undefined);
+          try {
+            const patches = getDevicePatches(device, values);
+            if (patches.length > 0) {
+              await patch<Device>(`devices/${deviceId}`, patches);
+            }
+            navigate({ route: ROUTE.DEVICE_DETAILS, postfix: deviceId });
+          } catch (e) {
+            setSubmitError(getErrorMessage(e));
+          }
+        }}
+      >
+        {({ values, errors: formikErrors }) => {
+          const generalStepValid = isGeneralInfoStepValid(formikErrors);
+          const templateStepValid = isDeviceTemplateStepValid(formikErrors);
+
+          const canEditTemplate = !values.fleetMatch;
+          const isTemplateStepDisabled = !(generalStepValid && canEditTemplate);
+          return (
+            <>
+              <LeaveFormConfirmation />
+              <Wizard
+                className="fctl-edit-device__wizard"
+                footer={<EditDeviceWizardFooter />}
+                nav={<EditDeviceWizardNav />}
+              >
+                <WizardStep name={t('General info')} id={generalInfoStepId}>
+                  <GeneralInfoStep />
+                </WizardStep>
+                <WizardStep name={t('Device template')} id={deviceTemplateStepId} isDisabled={isTemplateStepDisabled}>
+                  <DeviceTemplateStep isFleet={false} />
+                </WizardStep>
+                <WizardStep name={t('Review and update')} id={reviewDeviceStepId} isDisabled={!templateStepValid}>
+                  <ReviewDeviceStep error={submitError} />
+                </WizardStep>
+              </Wizard>
+            </>
+          );
+        }}
+      </Formik>
+    );
+  }
+
+  return (
+    <>
+      <PageSection variant="light" type="breadcrumb">
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link to={ROUTE.DEVICES}>{t('Devices')}</Link>
+          </BreadcrumbItem>
+          {deviceId && (
+            <BreadcrumbItem>
+              <Link to={{ route: ROUTE.DEVICE_DETAILS, postfix: deviceId }}>{displayText}</Link>
+            </BreadcrumbItem>
+          )}
+          <BreadcrumbItem isActive>{t('Edit device')}</BreadcrumbItem>
+        </Breadcrumb>
+      </PageSection>
+      <PageSection variant={PageSectionVariants.light}>
+        <Title headingLevel="h1" size="3xl">
+          {t('Edit device')}
+        </Title>
+      </PageSection>
+      <PageSection variant={PageSectionVariants.light} type="wizard">
+        <ErrorBoundary>{body}</ErrorBoundary>
+      </PageSection>
+    </>
+  );
+};
+
+export default EditDeviceWizard;