@flightctl/ui-components 0.0.4 → 0.0.10

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

@@ -0,0 +1,158 @@
+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 EnrollmentRequestTableToolbar from './EnrollmentRequestTableToolbar';
+
+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 }) => {
+  const { t } = useTranslation();
+  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 refetchWithDevices = () => {
+    refetch();
+    refetchDevices();
+  };
+
+  const [approvingErId, setApprovingErId] = React.useState<string>();
+  const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
+  const [isMassApproveModalOpen, setIsMassApproveModalOpen] = React.useState(false);
+
+  const { search, setSearch, filteredData } = useTableTextSearch(pendingEnrollments, getSearchText);
+
+  const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
+
+  const { deleteAction, deleteModal } = useDeleteListAction({
+    resourceType: 'EnrollmentRequest',
+    onDelete: async (enrollmentId: string) => {
+      await remove(`enrollmentrequests/${enrollmentId}`);
+      refetch();
+    },
+  });
+
+  if (isLoading) {
+    return <Spinner size="md" />;
+  }
+
+  if (pendingEnrollments.length === 0) {
+    return null;
+  }
+
+  const currentEnrollmentRequest = pendingEnrollments.find((er) => er.metadata.name === approvingErId);
+
+  return (
+    <ListPage title={t('Devices pending approval')} headingLevel="h2">
+      <ListPageBody error={error} loading={isLoading}>
+        <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')}
+          loading={isLoading}
+          columns={enrollmentColumns}
+          emptyFilters={filteredData.length === 0}
+          emptyData={false}
+          getSortParams={getSortParams}
+          isAllSelected={isAllSelected}
+          onSelectAll={setAllSelected}
+        >
+          <Tbody>
+            {pendingEnrollments.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 && refetchWithDevices();
+            }}
+          />
+        )}
+        {isMassDeleteModalOpen && (
+          <MassDeleteDeviceModal
+            onClose={() => setIsMassDeleteModalOpen(false)}
+            resources={filteredData.filter(isRowSelected)}
+            onDeleteSuccess={() => {
+              setIsMassDeleteModalOpen(false);
+              refetch();
+            }}
+          />
+        )}
+        {isMassApproveModalOpen && (
+          <MassApproveDeviceModal
+            onClose={() => setIsMassApproveModalOpen(false)}
+            pendingEnrollments={filteredData.filter(isRowSelected)}
+            onApproveSuccess={() => {
+              setAllSelected(false);
+              setIsMassApproveModalOpen(false);
+              refetchWithDevices();
+            }}
+          />
+        )}
+      </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,130 @@
+import * as React from 'react';
+import { ApplicationsSummaryStatusType, DeviceSummaryStatusType, DeviceUpdatedStatusType } from '@flightctl/types';
+
+import { FilterSearchParams } from '../../../utils/status/devices';
+import { useAppContext } from '../../../hooks/useAppContext';
+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[];
+
+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 nameOrAlias = searchParams.get(FilterSearchParams.NameOrAlias) || 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 setNameOrAlias = React.useCallback(
+    (nameOrAlias: string) => {
+      updateSearchParams(getNewParams(paramsRef.current, { [FilterSearchParams.NameOrAlias]: [nameOrAlias] }));
+    },
+    [updateSearchParams],
+  );
+
+  const hasFiltersEnabled =
+    !!nameOrAlias ||
+    !!selectedLabels.length ||
+    !!ownerFleets.length ||
+    Object.values(activeStatuses).some((s) => !!s.length);
+
+  return {
+    nameOrAlias,
+    setNameOrAlias,
+    activeStatuses,
+    setActiveStatuses,
+    ownerFleets,
+    setOwnerFleets,
+    selectedLabels,
+    setSelectedLabels,
+    hasFiltersEnabled,
+  };
+};

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

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { useDebounce } from 'use-debounce';
+
+import { Device, DeviceList, DevicesSummary, SortOrder } from '@flightctl/types';
+import { FilterSearchParams } from '../../../utils/status/devices';
+import * as queryUtils from '../../../utils/query';
+import { fromAPILabel } from '../../../utils/labels';
+import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
+import { FlightCtlLabel } from '../../../types/extraTypes';
+import { FilterStatusMap } from './types';
+
+type DevicesEndpointArgs = {
+  nameOrAlias?: string;
+  ownerFleets?: string[];
+  activeStatuses?: FilterStatusMap;
+  labels?: FlightCtlLabel[];
+  sortField?: string;
+  direction?: string;
+  summaryOnly?: boolean;
+};
+
+const getDevicesEndpoint = ({
+  nameOrAlias,
+  ownerFleets,
+  activeStatuses,
+  labels,
+  sortField,
+  direction,
+  summaryOnly,
+}: DevicesEndpointArgs) => {
+  const filterByAppStatus = activeStatuses?.[FilterSearchParams.AppStatus];
+  const filterByDevStatus = activeStatuses?.[FilterSearchParams.DeviceStatus];
+  const filterByUpdateStatus = activeStatuses?.[FilterSearchParams.UpdatedStatus];
+
+  const fieldSelectors: string[] = [];
+  queryUtils.addQueryConditions(fieldSelectors, 'status.applicationsSummary.status', filterByAppStatus);
+  queryUtils.addQueryConditions(fieldSelectors, 'status.summary.status', filterByDevStatus);
+  queryUtils.addQueryConditions(fieldSelectors, 'status.updated.status', filterByUpdateStatus);
+
+  if (nameOrAlias) {
+    queryUtils.addTextContainsCondition(fieldSelectors, 'metadata.nameoralias', nameOrAlias);
+  }
+  if (ownerFleets?.length) {
+    queryUtils.addQueryConditions(
+      fieldSelectors,
+      'metadata.owner',
+      ownerFleets.map((fleet) => `Fleet/${fleet}`),
+    );
+  }
+
+  const params = new URLSearchParams();
+  if (fieldSelectors.length > 0) {
+    params.set('fieldSelector', fieldSelectors.join(','));
+  }
+  queryUtils.setLabelParams(params, labels);
+  if (summaryOnly) {
+    params.set('summaryOnly', 'true');
+  }
+  if (sortField) {
+    params.set('sortBy', sortField);
+    params.set('sortOrder', direction || SortOrder.ASC);
+  }
+  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 = (args: {
+  nameOrAlias?: string;
+  ownerFleets?: string[];
+  activeStatuses?: FilterStatusMap;
+  labels?: FlightCtlLabel[];
+  sortField?: string;
+  direction?: string;
+}): [Device[], boolean, unknown, boolean, VoidFunction, FlightCtlLabel[]] => {
+  const [deviceLabelList] = useFetchPeriodically<DeviceList>({
+    endpoint: 'devices',
+  });
+  const [devicesEndpoint, devicesDebouncing] = useDevicesEndpoint(args);
+  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;

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useFormikContext } from 'formik';
+import { Button, WizardFooterWrapper, useWizardContext } from '@patternfly/react-core';
+
+import { EditDeviceFormValues } from './types';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useNavigate } from '../../../hooks/useNavigate';
+import { generalInfoStepId, isGeneralInfoStepValid } from './steps/GeneralInfoStep';
+import { deviceTemplateStepId, isDeviceTemplateStepValid } from './steps/DeviceTemplateStep';
+import { reviewDeviceStepId } from './steps/ReviewDeviceStep';
+
+const EditDeviceWizardFooter = () => {
+  const { t } = useTranslation();
+  const { goToNextStep, goToPrevStep, activeStep } = useWizardContext();
+  const { submitForm, isSubmitting, errors } = useFormikContext<EditDeviceFormValues>();
+  const navigate = useNavigate();
+
+  const isSubmitStep = activeStep.id === reviewDeviceStepId;
+
+  let isStepValid = true;
+  if (activeStep.id === generalInfoStepId) {
+    isStepValid = isGeneralInfoStepValid(errors);
+  } else if (activeStep.id === deviceTemplateStepId) {
+    isStepValid = isDeviceTemplateStepValid(errors);
+  }
+
+  const primaryBtn = isSubmitStep ? (
+    <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
+      {t('Save')}
+    </Button>
+  ) : (
+    <Button variant="primary" onClick={goToNextStep} isDisabled={!isStepValid}>
+      {t('Next')}
+    </Button>
+  );
+
+  return (
+    <WizardFooterWrapper>
+      {primaryBtn}
+      {activeStep.id !== generalInfoStepId && (
+        <Button variant="secondary" onClick={goToPrevStep} isDisabled={isSubmitting}>
+          {t('Back')}
+        </Button>
+      )}
+      <Button variant="link" onClick={() => navigate(-1)} isDisabled={isSubmitting}>
+        {t('Cancel')}
+      </Button>
+    </WizardFooterWrapper>
+  );
+};
+
+export default EditDeviceWizardFooter;