@flightctl/ui-components 0.0.5 → 0.4.0-rc1

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

@@ -1,38 +1,28 @@
 import * as React from 'react';
-import {
-  Button,
-  EmptyStateActions,
-  EmptyStateBody,
-  EmptyStateFooter,
-  PageSection,
-  PageSectionVariants,
-  ToolbarItem,
-} from '@patternfly/react-core';
+import { Button, EmptyStateActions, EmptyStateBody, EmptyStateFooter, ToolbarItem } from '@patternfly/react-core';
 import { Tbody } from '@patternfly/react-table';
 import { MicrochipIcon } from '@patternfly/react-icons/dist/js/icons/microchip-icon';
 import { Trans } from 'react-i18next';
 import { TFunction } from 'i18next';
 
 import { useFetch } from '../../../hooks/useFetch';
-import { Device, Fleet, FleetList } from '@flightctl/types';
+import { Device } from '@flightctl/types';
 
 import ListPage from '../../ListPage/ListPage';
 import ListPageBody from '../../ListPage/ListPageBody';
 import { useDeleteListAction } from '../../ListPage/ListPageActions';
+import TablePagination from '../../Table/TablePagination';
 import AddDeviceModal from '../AddDeviceModal/AddDeviceModal';
-import { sortByAlias, sortByLastSeenDate, sortByName } from '../../../utils/sort/generic';
-import { sortDeviceStatus, sortDevicesByFleet } from '../../../utils/sort/device';
-import Table, { TableColumn } from '../../Table/Table';
+import Table, { ApiSortTableColumn } from '../../Table/Table';
 import DeviceTableToolbar from './DeviceTableToolbar';
-import { useDeviceFilters } from './useDeviceFilters';
 import DeviceTableRow from './DeviceTableRow';
 import { FlightCtlLabel } from '../../../types/extraTypes';
 import MassDeleteDeviceModal from '../../modals/massModals/MassDeleteDeviceModal/MassDeleteDeviceModal';
 import ResourceListEmptyState from '../../common/ResourceListEmptyState';
-import { useTableSort } from '../../../hooks/useTableSort';
 import { useTableSelect } from '../../../hooks/useTableSelect';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { Link, ROUTE } from '../../../hooks/useNavigate';
+import { PaginationDetails, useTablePagination } from '../../../hooks/useTablePagination';
 import { useDevices } from './useDevices';
 import { useDeviceBackendFilters } from './useDeviceBackendFilters';
 import {
@@ -40,9 +30,11 @@ import {
   getDeviceStatusHelperText,
   getUpdateStatusHelperText,
 } from '../../Status/utils';
+import EnrollmentRequestList from '../../EnrollmentRequest/EnrollmentRequestList';
 import { FilterStatusMap } from './types';
-import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
-import EnrollmentRequestList from './EnrollmentRequestList';
+import PageWithPermissions from '../../common/PageWithPermissions';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import { useAccessReview } from '../../../hooks/useAccessReview';
 
 type DeviceEmptyStateProps = {
   onAddDevice: VoidFunction;
@@ -50,13 +42,18 @@ type DeviceEmptyStateProps = {
 
 const DeviceEmptyState: React.FC<DeviceEmptyStateProps> = ({ onAddDevice }) => {
   const { t } = useTranslation();
+  const [canCreateFleet] = useAccessReview(RESOURCE.FLEET, VERB.CREATE);
   return (
     <ResourceListEmptyState icon={MicrochipIcon} titleText={t('No devices here!')}>
       <EmptyStateBody>
-        <Trans t={t}>
-          You can add devices and label them to match fleets, or your can{' '}
-          <Link to={ROUTE.FLEET_CREATE}>start with a fleet</Link> and add devices into it.
-        </Trans>
+        {canCreateFleet ? (
+          <Trans t={t}>
+            You can add devices and label them to match fleets, or you can{' '}
+            <Link to={ROUTE.FLEET_CREATE}>start with a fleet</Link> and add devices into it.
+          </Trans>
+        ) : (
+          t('You can add devices and label them to match fleets')
+        )}
       </EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -67,38 +64,30 @@ const DeviceEmptyState: React.FC<DeviceEmptyStateProps> = ({ onAddDevice }) => {
   );
 };
 
-const getDeviceColumns = (t: TFunction): TableColumn<Device>[] => [
+const getDeviceColumns = (t: TFunction): ApiSortTableColumn[] => [
   {
     name: t('Alias'),
-    onSort: sortByAlias,
   },
   {
     name: t('Name'),
-    onSort: sortByName,
   },
   {
     name: t('Fleet'),
-    onSort: sortDevicesByFleet,
   },
   {
     name: t('Application status'),
     helperText: getApplicationStatusHelperText(t),
-    onSort: (devices: Array<Device>) => sortDeviceStatus(devices, 'ApplicationStatus'),
   },
   {
     name: t('Device status'),
     helperText: getDeviceStatusHelperText(t),
-    onSort: (devices: Array<Device>) => sortDeviceStatus(devices, 'DeviceStatus'),
-    defaultSort: true,
   },
   {
     name: t('Update status'),
     helperText: getUpdateStatusHelperText(t),
-    onSort: (devices: Array<Device>) => sortDeviceStatus(devices, 'SystemUpdateStatus'),
   },
   {
     name: t('Last seen'),
-    onSort: sortByLastSeenDate,
   },
 ];
 
@@ -108,39 +97,39 @@ interface DeviceTableProps {
   ownerFleets: string[];
   activeStatuses: FilterStatusMap;
   hasFiltersEnabled: boolean;
+  nameOrAlias: string | undefined;
+  setNameOrAlias: (text: string) => void;
   setOwnerFleets: (ownerFleets: string[]) => void;
   setActiveStatuses: (activeStatuses: FilterStatusMap) => void;
-  allLabels: FlightCtlLabel[];
   selectedLabels: FlightCtlLabel[];
   setSelectedLabels: (labels: FlightCtlLabel[]) => void;
-  fleets: Fleet[];
   isFilterUpdating: boolean;
+  deviceColumns: ApiSortTableColumn[];
+  pagination: Pick<PaginationDetails, 'currentPage' | 'setCurrentPage' | 'itemCount'>;
+  // getSortParams: (columnIndex: number) => ThProps['sort'];
 }
 
 export const DeviceTable = ({
   devices,
   refetch,
+  nameOrAlias,
+  setNameOrAlias,
   ownerFleets,
   setOwnerFleets,
   activeStatuses,
   setActiveStatuses,
-  allLabels,
   selectedLabels,
   setSelectedLabels,
   hasFiltersEnabled,
-  fleets,
   isFilterUpdating,
+  deviceColumns,
+  pagination,
 }: DeviceTableProps) => {
   const { t } = useTranslation();
   const [addDeviceModal, setAddDeviceModal] = React.useState(false);
   const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
   const { remove } = useFetch();
 
-  const deviceColumns = React.useMemo(() => getDeviceColumns(t), [t]);
-
-  const { filteredData, hasFiltersEnabled: hasUIFiltersEnabled, ...rest } = useDeviceFilters(devices);
-  const { getSortParams, sortedData } = useTableSort(filteredData, deviceColumns);
-
   const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
 
   const { deleteAction: deleteDeviceAction, deleteModal: deleteDeviceModal } = useDeleteListAction({
@@ -151,40 +140,44 @@ export const DeviceTable = ({
     },
   });
 
+  const [canDelete] = useAccessReview(RESOURCE.DEVICE, VERB.DELETE);
+  const [canEdit] = useAccessReview(RESOURCE.DEVICE, VERB.PATCH);
+
   return (
     <>
       <DeviceTableToolbar
-        {...rest}
+        nameOrAlias={nameOrAlias}
+        setNameOrAlias={setNameOrAlias}
         ownerFleets={ownerFleets}
         setOwnerFleets={setOwnerFleets}
         activeStatuses={activeStatuses}
         setActiveStatuses={setActiveStatuses}
-        allLabels={allLabels}
         selectedLabels={selectedLabels}
         setSelectedLabels={setSelectedLabels}
-        fleets={fleets}
         isFilterUpdating={isFilterUpdating}
       >
         <ToolbarItem>
           <Button onClick={() => setAddDeviceModal(true)}>{t('Add devices')}</Button>
         </ToolbarItem>
-        <ToolbarItem>
-          <Button isDisabled={!hasSelectedRows} onClick={() => setIsMassDeleteModalOpen(true)} variant="secondary">
-            {t('Delete devices')}
-          </Button>
-        </ToolbarItem>
+        {canDelete && (
+          <ToolbarItem>
+            <Button isDisabled={!hasSelectedRows} onClick={() => setIsMassDeleteModalOpen(true)} variant="secondary">
+              {t('Delete devices')}
+            </Button>
+          </ToolbarItem>
+        )}
       </DeviceTableToolbar>
       <Table
         aria-label={t('Devices table')}
+        loading={isFilterUpdating}
         columns={deviceColumns}
-        emptyFilters={filteredData.length === 0 && (hasFiltersEnabled || hasUIFiltersEnabled)}
+        emptyFilters={!hasFiltersEnabled}
         emptyData={devices.length === 0}
-        getSortParams={getSortParams}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
       >
         <Tbody>
-          {sortedData.map((device, index) => (
+          {devices.map((device, index) => (
             <DeviceTableRow
               key={device.metadata.name || ''}
               device={device}
@@ -192,19 +185,20 @@ export const DeviceTable = ({
               onRowSelect={onRowSelect}
               isRowSelected={isRowSelected}
               rowIndex={index}
+              canDelete={canDelete}
+              canEdit={canEdit}
             />
           ))}
         </Tbody>
       </Table>
-      {!hasFiltersEnabled && !hasUIFiltersEnabled && devices.length === 0 && (
-        <DeviceEmptyState onAddDevice={() => setAddDeviceModal(true)} />
-      )}
+      <TablePagination isUpdating={isFilterUpdating} pagination={pagination} />
+      {!hasFiltersEnabled && devices.length === 0 && <DeviceEmptyState onAddDevice={() => setAddDeviceModal(true)} />}
       {deleteDeviceModal}
       {addDeviceModal && <AddDeviceModal onClose={() => setAddDeviceModal(false)} />}
       {isMassDeleteModalOpen && (
         <MassDeleteDeviceModal
           onClose={() => setIsMassDeleteModalOpen(false)}
-          resources={sortedData.filter(isRowSelected)}
+          resources={devices.filter(isRowSelected)}
           onDeleteSuccess={() => {
             setIsMassDeleteModalOpen(false);
             refetch();
@@ -215,9 +209,13 @@ export const DeviceTable = ({
   );
 };
 
-const DevicesPage = () => {
+const DevicesPage = ({ canListER }: { canListER: boolean }) => {
   const { t } = useTranslation();
+  const deviceColumns = React.useMemo(() => getDeviceColumns(t), [t]);
+
   const {
+    nameOrAlias,
+    setNameOrAlias,
     ownerFleets,
     activeStatuses,
     hasFiltersEnabled,
@@ -226,26 +224,36 @@ const DevicesPage = () => {
     selectedLabels,
     setSelectedLabels,
   } = useDeviceBackendFilters();
-  const [data, loading, error, updating, refetch, allLabels] = useDevices({
+  const { currentPage, setCurrentPage, onPageFetched, nextContinue, itemCount } = useTablePagination();
+  const [data, loading, error, updating, refetch] = useDevices({
+    nameOrAlias,
     ownerFleets,
     activeStatuses,
     labels: selectedLabels,
+    nextContinue,
+    onPageFetched,
   });
 
-  const [fleetsList, flLoading, flError] = useFetchPeriodically<FleetList>({
-    endpoint: 'fleets',
-  });
+  const pagination = React.useMemo(
+    () => ({
+      currentPage,
+      setCurrentPage,
+      itemCount,
+    }),
+    [currentPage, setCurrentPage, itemCount],
+  );
 
   return (
-    <PageSection variant={PageSectionVariants.light}>
-      <EnrollmentRequestList refetchDevices={refetch} />
+    <>
+      {canListER && <EnrollmentRequestList refetchDevices={refetch} />}
 
       <ListPage title={t('Devices')}>
-        <ListPageBody error={error || flError} loading={loading || flLoading}>
+        <ListPageBody error={error} loading={loading}>
           <DeviceTable
             devices={data}
-            allLabels={allLabels}
             refetch={refetch}
+            nameOrAlias={nameOrAlias}
+            setNameOrAlias={setNameOrAlias}
             hasFiltersEnabled={hasFiltersEnabled || updating}
             ownerFleets={ownerFleets}
             activeStatuses={activeStatuses}
@@ -253,13 +261,25 @@ const DevicesPage = () => {
             setActiveStatuses={setActiveStatuses}
             selectedLabels={selectedLabels}
             setSelectedLabels={setSelectedLabels}
-            fleets={fleetsList?.items || []}
             isFilterUpdating={updating}
+            deviceColumns={deviceColumns}
+            pagination={pagination}
           />
         </ListPageBody>
       </ListPage>
-    </PageSection>
+    </>
+  );
+};
+
+const DevicesPageWithPermissions = () => {
+  const [canListDevice, deviceLoading] = useAccessReview(RESOURCE.DEVICE, VERB.LIST);
+  const [canListER, erLoading] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST, VERB.LIST);
+
+  return (
+    <PageWithPermissions loading={deviceLoading || erLoading} allowed={canListDevice || canListER}>
+      {canListDevice ? <DevicesPage canListER={canListER} /> : <EnrollmentRequestList isStandalone />}
+    </PageWithPermissions>
   );
 };
 
-export default DevicesPage;
+export default DevicesPageWithPermissions;

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

@@ -1,18 +1,6 @@
-import { DeviceSummaryStatus, FilterSearchParams } from '../../../utils/status/devices';
-import { StatusItem } from '../../../utils/status/common';
+import { FilterSearchParams } from '../../../utils/status/devices';
 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[];

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

@@ -3,7 +3,6 @@ import { ApplicationsSummaryStatusType, DeviceSummaryStatusType, DeviceUpdatedSt
 
 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';
@@ -11,7 +10,6 @@ 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()];
@@ -30,6 +28,7 @@ export const useDeviceBackendFilters = () => {
   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][]) => {
@@ -104,10 +103,22 @@ export const useDeviceBackendFilters = () => {
     [updateSearchParams],
   );
 
+  const setNameOrAlias = React.useCallback(
+    (nameOrAlias: string) => {
+      updateSearchParams(getNewParams(paramsRef.current, { [FilterSearchParams.NameOrAlias]: [nameOrAlias] }));
+    },
+    [updateSearchParams],
+  );
+
   const hasFiltersEnabled =
-    !!selectedLabels.length || !!ownerFleets.length || Object.values(activeStatuses).some((s) => !!s.length);
+    !!nameOrAlias ||
+    !!selectedLabels.length ||
+    !!ownerFleets.length ||
+    Object.values(activeStatuses).some((s) => !!s.length);
 
   return {
+    nameOrAlias,
+    setNameOrAlias,
     activeStatuses,
     setActiveStatuses,
     ownerFleets,

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

@@ -1,53 +1,64 @@
-import React from 'react';
 import { useDebounce } from 'use-debounce';
 
 import { Device, DeviceList, DevicesSummary } from '@flightctl/types';
 import { FilterSearchParams } from '../../../utils/status/devices';
+import * as queryUtils from '../../../utils/query';
 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);
-  }
-};
+import { PAGE_SIZE } from '../../../constants';
 
 type DevicesEndpointArgs = {
+  nameOrAlias?: string;
   ownerFleets?: string[];
   activeStatuses?: FilterStatusMap;
   labels?: FlightCtlLabel[];
   summaryOnly?: boolean;
+  nextContinue?: string;
 };
 
-const getDevicesEndpoint = ({ ownerFleets, activeStatuses, labels, summaryOnly }: DevicesEndpointArgs) => {
+const getDevicesEndpoint = ({
+  nameOrAlias,
+  ownerFleets,
+  activeStatuses,
+  labels,
+  nextContinue,
+  summaryOnly,
+}: DevicesEndpointArgs) => {
   const filterByAppStatus = activeStatuses?.[FilterSearchParams.AppStatus];
   const filterByDevStatus = activeStatuses?.[FilterSearchParams.DeviceStatus];
   const filterByUpdateStatus = activeStatuses?.[FilterSearchParams.UpdatedStatus];
 
-  const params = new URLSearchParams();
+  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) {
-    params.set('owner', ownerFleets.map((fleet) => `Fleet/${fleet}`).join(','));
+    queryUtils.addQueryConditions(
+      fieldSelectors,
+      'metadata.owner',
+      ownerFleets.map((fleet) => `Fleet/${fleet}`),
+    );
   }
-  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);
 
+  const params = new URLSearchParams();
+  if (fieldSelectors.length > 0) {
+    params.set('fieldSelector', fieldSelectors.join(','));
+  }
+  queryUtils.setLabelParams(params, labels);
   if (summaryOnly) {
     params.set('summaryOnly', 'true');
   }
+  if (nextContinue !== undefined) {
+    params.set('limit', `${PAGE_SIZE}`);
+  }
+  if (nextContinue) {
+    params.set('continue', nextContinue);
+  }
   return params.size ? `devices?${params.toString()}` : 'devices';
 };
 
@@ -72,41 +83,22 @@ export const useDevicesSummary = ({
   return [deviceList?.summary, listLoading];
 };
 
-export const useDevices = ({
-  ownerFleets,
-  activeStatuses,
-  labels,
-}: {
+export const useDevices = (args: {
+  nameOrAlias?: string;
   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>();
+  nextContinue?: string;
+  onPageFetched?: (data: DeviceList) => void;
+}): [Device[], boolean, unknown, boolean, VoidFunction] => {
+  const [devicesEndpoint, devicesDebouncing] = useDevicesEndpoint(args);
 
-    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]);
+  const [devicesList, devicesLoading, devicesError, devicesRefetch, updating] = useFetchPeriodically<DeviceList>(
+    {
+      endpoint: devicesEndpoint,
+    },
+    args.onPageFetched,
+  );
 
-  return [
-    devicesList?.items || [],
-    devicesLoading,
-    devicesError,
-    updating || devicesDebouncing,
-    devicesRefetch,
-    allLabels || [],
-  ];
+  return [devicesList?.items || [], devicesLoading, devicesError, updating || devicesDebouncing, devicesRefetch];
 };

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

@@ -25,11 +25,14 @@ import GeneralInfoStep, { generalInfoStepId, isGeneralInfoStepValid } from './st
 import DeviceTemplateStep, { deviceTemplateStepId, isDeviceTemplateStepValid } from './steps/DeviceTemplateStep';
 import ReviewDeviceStep, { reviewDeviceStepId } from './steps/ReviewDeviceStep';
 import { getDevicePatches, getValidationSchema } from './utils';
-import { getApplicationValues, getConfigTemplatesValues } from './deviceSpecUtils';
+import { getApplicationValues, getConfigTemplatesValues, hasMicroshiftRegistrationConfig } from './deviceSpecUtils';
 import { useFetch } from '../../../hooks/useFetch';
 import { useEditDevice } from './useEditDevice';
 import EditDeviceWizardNav from './EditDeviceWizardNav';
 import EditDeviceWizardFooter from './EditDeviceWizardFooter';
+import PageWithPermissions from '../../common/PageWithPermissions';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import { useAccessReview } from '../../../hooks/useAccessReview';
 
 import './EditDeviceWizard.css';
 
@@ -64,15 +67,18 @@ const EditDeviceWizard = () => {
       </Alert>
     );
   } else if (device) {
+    const registerMicroShift = hasMicroshiftRegistrationConfig(device.spec);
     body = (
       <Formik<EditDeviceFormValues>
         initialValues={{
           deviceAlias,
-          osImage: device.spec?.os?.image,
+          osImage: device.spec?.os?.image || '',
           labels: fromAPILabel(device.metadata.labels || {}).filter((label) => label.key !== 'alias'),
-          configTemplates: getConfigTemplatesValues(device.spec),
+          configTemplates: getConfigTemplatesValues(device.spec, registerMicroShift),
           fleetMatch: '', // Initially this is always a fleetless device
           applications: getApplicationValues(device.spec),
+          systemdUnits: [],
+          registerMicroShift,
         }}
         validationSchema={getValidationSchema(t)}
         validateOnMount
@@ -102,6 +108,11 @@ const EditDeviceWizard = () => {
                 className="fctl-edit-device__wizard"
                 footer={<EditDeviceWizardFooter />}
                 nav={<EditDeviceWizardNav />}
+                onStepChange={() => {
+                  if (submitError) {
+                    setSubmitError(undefined);
+                  }
+                }}
               >
                 <WizardStep name={t('General info')} id={generalInfoStepId}>
                   <GeneralInfoStep />
@@ -147,4 +158,13 @@ const EditDeviceWizard = () => {
   );
 };
 
-export default EditDeviceWizard;
+const EditDeviceWizardWithPermissions = () => {
+  const [allowed, loading] = useAccessReview(RESOURCE.DEVICE, VERB.PATCH);
+  return (
+    <PageWithPermissions allowed={allowed} loading={loading}>
+      <EditDeviceWizard />
+    </PageWithPermissions>
+  );
+};
+
+export default EditDeviceWizardWithPermissions;