@flightctl/ui-components 0.10.0-rc7 → 1.0.0-rc1

package/src/components/DetailsPage/DetailsPage.tsx

@@ -26,7 +26,7 @@ export type DetailsPageProps = {
   children: React.ReactNode;
   error: unknown;
   loading: boolean;
-  resourceType: 'Fleets' | 'Devices' | 'Repositories' | 'Enrollment requests';
+  resourceType: 'Fleets' | 'Devices' | 'Repositories' | 'Enrollment requests' | 'Authentication providers';
   resourceTypeLabel: string;
   resourceLink: Route;
   actions?: React.ReactNode;

package/src/components/DetailsPage/DetailsPageActions.tsx

@@ -127,6 +127,8 @@ const DetailsPageActions = ({ children }: React.PropsWithChildren) => {
       onSelect={() => setActionsOpen(false)}
       onOpenChange={(isOpen: boolean) => setActionsOpen(isOpen)}
       popperProps={{ position: 'left', preventOverflow: true }}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
       toggle={(toggleRef) => (
         <MenuToggle
           ref={toggleRef}

package/src/components/DetailsPage/Tables/ApplicationsTable.tsx

@@ -1,74 +1,40 @@
 import * as React from 'react';
-import { Bullseye, Button, Spinner } from '@patternfly/react-core';
+import { Bullseye, Label } from '@patternfly/react-core';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
-import MinusCircleIcon from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
 
 import { DeviceApplicationStatus } from '@flightctl/types';
 import { useTranslation } from '../../../hooks/useTranslation';
 import ApplicationStatus from '../../Status/ApplicationStatus';
-import WithTooltip from '../../common/WithTooltip';
-
-import './ApplicationsTable.css';
 
 type ApplicationsTableProps = {
-  // Contains the statuses of all detected applications and systemdUnits
+  // Contains the statuses of all detected applications
   appsStatus: DeviceApplicationStatus[];
   // List of apps as defined the device / fleet spec
   specApps: string[];
-  // List of systemd units as defined in the device / fleet spec
-  specSystemdUnits: string[];
-  // Map: (systemdUnitName, timeItWasAdded)
-  addedSystemdUnitDates: Record<string, number>;
-  onSystemdDelete?: (deletedUnit: string) => void;
-  isUpdating: boolean;
-  canEdit: boolean;
 };
 
-const DELETE_SYSTED_TIMEOUT = 30000; // 30 seconds
+const emptyAppDetails: Partial<DeviceApplicationStatus> = {
+  name: '',
+  ready: '-',
+  restarts: 0,
+  embedded: false,
+};
 
-const ApplicationsTable = ({
-  appsStatus,
-  specApps,
-  specSystemdUnits,
-  addedSystemdUnitDates,
-  onSystemdDelete,
-  isUpdating,
-  canEdit,
-}: ApplicationsTableProps) => {
+const ApplicationsTable = ({ appsStatus, specApps }: ApplicationsTableProps) => {
   const { t } = useTranslation();
 
-  // Required to be able to detect removed systemd units for their correct type.
-  // It takes a bit for them to be removed from the applications list.
-  const [deletedSystemdUnits, setDeletedSystemdUnits] = React.useState<string[]>([]);
-
-  React.useEffect(() => {
-    // Remove a service from the deleted list if it was added back later
-    const filtered = deletedSystemdUnits.filter((deletedUnit) => {
-      if (addedSystemdUnitDates[deletedUnit]) {
-        return false;
-      }
-      return true;
-    });
-    if (filtered.length < deletedSystemdUnits.length) {
-      setDeletedSystemdUnits(filtered);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [addedSystemdUnitDates]);
-
-  const appsAndSystemdUnits: string[] = [];
+  // Includes applications already reported in status as well as those that are only in the spec yet
+  const allAppNames: string[] = [];
   specApps.forEach((app) => {
-    appsAndSystemdUnits.push(app);
-  });
-  specSystemdUnits.forEach((systemdUnit) => {
-    appsAndSystemdUnits.push(systemdUnit);
+    allAppNames.push(app);
   });
   appsStatus.forEach((appStatus) => {
-    if (!appsAndSystemdUnits.includes(appStatus.name)) {
-      appsAndSystemdUnits.push(appStatus.name);
+    if (!allAppNames.includes(appStatus.name)) {
+      allAppNames.push(appStatus.name);
     }
   });
 
-  return appsAndSystemdUnits.length ? (
+  return allAppNames.length ? (
     <Table aria-label={t('Device applications table')}>
       <Thead>
         <Tr>
@@ -77,100 +43,31 @@ const ApplicationsTable = ({
           <Th modifier="wrap">{t('Ready')}</Th>
           <Th modifier="wrap">{t('Restarts')}</Th>
           <Th modifier="wrap">{t('Type')}</Th>
+          <Th modifier="wrap">{t('Embedded')}</Th>
         </Tr>
       </Thead>
       <Tbody>
-        {appsAndSystemdUnits.map((appName) => {
-          const appDetails = appsStatus.find((app) => app.name === appName);
-          const isDeletedSystemdUnit = deletedSystemdUnits.includes(appName);
-          const isAddedSystemdUnit = !!addedSystemdUnitDates[appName];
-          const isApp =
-            specApps.includes(appName) ||
-            !(specSystemdUnits.includes(appName) || isDeletedSystemdUnit || isAddedSystemdUnit);
-
-          const deleteSystemdUnit = canEdit && !isDeletedSystemdUnit && onSystemdDelete && (
-            <Button
-              aria-label={t('Delete system service')}
-              isDisabled={isUpdating}
-              variant="plain"
-              icon={<MinusCircleIcon />}
-              onClick={() => {
-                setDeletedSystemdUnits(deletedSystemdUnits.concat(appName));
-                onSystemdDelete(appName);
-              }}
-            />
-          );
-
-          if (!appDetails) {
-            // It's an app or a systemd unit which has not been reported yet
-            const appAddedTime = addedSystemdUnitDates[appName] || 0;
-            // For apps there is no spinner since we don't know when the app was added to the spec
-            const showSpinner = !isApp && Date.now() - appAddedTime < DELETE_SYSTED_TIMEOUT;
-            return (
-              <Tr key={appName} className="applications-table__row">
-                <Td dataLabel={t('Name')}>{appName}</Td>
-
-                <Td dataLabel={t('Status')} colSpan={showSpinner ? 3 : 1}>
-                  {showSpinner ? (
-                    <>
-                      <Spinner size="sm" /> {t('Waiting for service to be reported...')}
-                    </>
-                  ) : (
-                    '-'
-                  )}
-                </Td>
-                {!showSpinner && <Td dataLabel={t('Ready')}>-</Td>}
-                {!showSpinner && <Td dataLabel={t('Restarts')}>-</Td>}
-                <Td dataLabel={t('Type')}>
-                  {isApp ? (
-                    <>{t('App')}</>
-                  ) : (
-                    <>
-                      {t('Systemd')} {deleteSystemdUnit}
-                    </>
-                  )}
-                </Td>
-              </Tr>
-            );
-          }
-
-          let typeColumnContent: React.ReactNode;
-
-          if (isApp) {
-            typeColumnContent = t('App');
-          } else if (onSystemdDelete) {
-            let extraContent: React.ReactNode;
-            if (isDeletedSystemdUnit) {
-              extraContent = (
-                <WithTooltip
-                  showTooltip
-                  content={t('{{ appName }} is being removed, this may take some time.', { appName })}
-                >
-                  <Spinner size="sm" />
-                </WithTooltip>
-              );
-            } else {
-              extraContent = deleteSystemdUnit;
-            }
-
-            typeColumnContent = (
-              <>
-                {t('Systemd')} {extraContent}
-              </>
-            );
-          } else {
-            typeColumnContent = t('Systemd');
+        {allAppNames.map((appName) => {
+          const appDetails = appsStatus.find((app) => app.name === appName) || emptyAppDetails;
+          let embedded = '-';
+          if (appDetails.embedded === true) {
+            embedded = t('Yes');
+          } else if (appDetails.embedded === false) {
+            embedded = t('No');
           }
 
           return (
-            <Tr key={appName} className="fctl-applications-table__row">
+            <Tr key={appName}>
               <Td dataLabel={t('Name')}>{appName}</Td>
               <Td dataLabel={t('Status')}>
-                <ApplicationStatus status={appDetails.status} />
+                {appDetails.status ? <ApplicationStatus status={appDetails.status} /> : '-'}
               </Td>
               <Td dataLabel={t('Ready')}>{appDetails.ready}</Td>
               <Td dataLabel={t('Restarts')}>{appDetails.restarts}</Td>
-              <Td dataLabel={t('Type')}>{typeColumnContent}</Td>
+              <Td dataLabel={t('Type')}>
+                {appDetails.appType ? <Label variant="outline">{appDetails.appType}</Label> : '-'}
+              </Td>
+              <Td dataLabel={t('Embedded')}>{embedded}</Td>
             </Tr>
           );
         })}

package/src/components/DetailsPage/Tables/SystemdUnitsTable.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { Bullseye, EmptyState, EmptyStateBody, EmptyStateVariant, Label } from '@patternfly/react-core';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { CogIcon } from '@patternfly/react-icons/dist/js/icons/cog-icon';
+import { ClockIcon } from '@patternfly/react-icons/dist/js/icons/clock-icon';
+
+import { SystemdUnitStatus } from '@flightctl/types';
+import FolderIcon from '@patternfly/react-icons/dist/js/icons/folder-icon';
+import { DatabaseIcon } from '@patternfly/react-icons/dist/js/icons/database-icon';
+import { NetworkIcon } from '@patternfly/react-icons/dist/js/icons/network-icon';
+import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
+import { useTranslation } from '../../../hooks/useTranslation';
+
+const unitTypeIconMap: Record<string, React.ComponentType<{ className?: string }>> = {
+  service: CogIcon,
+  timer: ClockIcon,
+  socket: ConnectedIcon,
+  target: NetworkIcon,
+  mount: DatabaseIcon,
+  path: FolderIcon,
+};
+
+const SystemdUnitStatusIcon = ({ unitName }: { unitName: string }) => {
+  const unitType = unitName.split('.').pop();
+  const IconComponent = unitType ? unitTypeIconMap[unitType] : null;
+
+  if (!IconComponent) {
+    return null;
+  }
+
+  return <IconComponent className="pf-v5-u-mr-xs" />;
+};
+
+type SystemdUnitsTableProps = {
+  systemdUnitsStatus: SystemdUnitStatus[];
+};
+
+const SystemdUnitRow = ({ unitStatus }: { unitStatus: SystemdUnitStatus }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tr key={unitStatus.unit}>
+      <Td dataLabel={t('Name')}>
+        <SystemdUnitStatusIcon unitName={unitStatus.unit} /> {unitStatus.unit}
+      </Td>
+      <Td dataLabel={t('Enable')}>
+        <Label color="blue" variant="outline">
+          {unitStatus.enableState}
+        </Label>
+      </Td>
+      <Td dataLabel={t('Load state')}>
+        <Label color="blue" variant="outline">
+          {unitStatus.loadState}
+        </Label>
+      </Td>
+      <Td dataLabel={t('Status')}>
+        <Label color="blue" variant="outline">
+          {unitStatus.activeState} {unitStatus.subState && `(${unitStatus.subState})`}
+        </Label>
+      </Td>
+    </Tr>
+  );
+};
+
+// Contrary to applications, we don't show the matchPatterns that were defined in the device spec.
+// Since these may contain glob patterns, etc, we can't reliably translate the patterns to a list of units.
+const SystemdUnitsTable = ({ systemdUnitsStatus }: SystemdUnitsTableProps) => {
+  const { t } = useTranslation();
+
+  return systemdUnitsStatus.length ? (
+    <Table aria-label={t('System services table')}>
+      <Thead>
+        <Tr>
+          <Th>{t('Name')}</Th>
+          <Th modifier="wrap">{t('Enable')}</Th>
+          <Th modifier="wrap">{t('Load state')}</Th>
+          <Th modifier="wrap">{t('Status')}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {systemdUnitsStatus.map((unitStatus) => {
+          return <SystemdUnitRow key={unitStatus.unit} unitStatus={unitStatus} />;
+        })}
+      </Tbody>
+    </Table>
+  ) : (
+    <Bullseye>
+      <EmptyState variant={EmptyStateVariant.sm}>
+        <EmptyStateBody>
+          <p>{t('No system services found')}</p>
+          <p className="pf-v5-u-font-size-sm">{t('System services can be configured via the device specification')}</p>
+        </EmptyStateBody>
+      </EmptyState>
+    </Bullseye>
+  );
+};
+
+export default SystemdUnitsTable;

package/src/components/Device/DeviceDetails/DeviceApplications.tsx

@@ -1,46 +1,19 @@
 import * as React from 'react';
-import { Button, CardTitle, Flex, FlexItem } from '@patternfly/react-core';
+import { CardTitle, Flex, FlexItem } from '@patternfly/react-core';
 
 import { Device } from '@flightctl/types';
 import { useTranslation } from '../../../hooks/useTranslation';
-import { useFetch } from '../../../hooks/useFetch';
-import { getStringListPatches } from '../../../utils/patch';
-import { getDeviceFleet } from '../../../utils/devices';
-import SystemdUnitsModal from '../SystemdUnitsModal/SystemdUnitsModal';
 import ApplicationsTable from '../../DetailsPage/Tables/ApplicationsTable';
 import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
 import { isImageAppProvider } from '../../../types/deviceSpec';
 
 type DeviceDetailsTabProps = {
   device: Required<Device>;
-  canEdit: boolean;
-  refetch?: VoidFunction;
 };
 
-const DeviceApplications = ({ device, refetch, canEdit }: React.PropsWithChildren<DeviceDetailsTabProps>) => {
+const DeviceApplications = ({ device }: DeviceDetailsTabProps) => {
   const { t } = useTranslation();
-  const { patch } = useFetch();
-  const [showSystemdModal, setShowSystemdModal] = React.useState<boolean>(false);
-  const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
-  const [addedSystemdDates, setAddedSystemdDates] = React.useState<Record<string, number>>({});
 
-  const onClose = (hasChanges?: boolean, addedUnits?: string[]) => {
-    if (hasChanges) {
-      refetch?.();
-    }
-    if (addedUnits?.length) {
-      const allAddedUnitDates = { ...addedSystemdDates };
-      const addedDate = Date.now();
-      addedUnits.forEach((newUnit) => {
-        allAddedUnitDates[newUnit] = addedDate;
-      });
-      setAddedSystemdDates(allAddedUnitDates);
-    }
-    setShowSystemdModal(false);
-  };
-
-  const isManagedDevice = !!getDeviceFleet(device.metadata);
-  const trackedSystemdUnits = device.spec?.systemd?.matchPatterns || [];
   const specApps =
     device.spec?.applications?.map((app) => {
       if (isImageAppProvider(app)) {
@@ -48,59 +21,16 @@ const DeviceApplications = ({ device, refetch, canEdit }: React.PropsWithChildre
       }
       return app.name as string;
     }) || [];
-  const apps = device.status.applications; // includes available systemdUnits
-
-  const deleteSystemdUnit = isManagedDevice
-    ? undefined
-    : (removedUnit: string) => {
-        const updateDeviceSpec = async () => {
-          const patches = getStringListPatches(
-            '/spec/systemd',
-            trackedSystemdUnits,
-            trackedSystemdUnits.filter((unit) => unit !== removedUnit),
-            (units: string[]) => ({ matchPatterns: units }),
-          );
-          if (patches.length > 0) {
-            setIsUpdating(true);
-            await patch(`devices/${device.metadata.name}`, patches);
-            refetch?.();
-            setIsUpdating(false);
-          }
-        };
-        void updateDeviceSpec();
-      };
 
   return (
     <DetailsPageCard>
       <CardTitle>
         <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
           <FlexItem>{t('Applications')}</FlexItem>
-          {!isManagedDevice && canEdit && (
-            <FlexItem>
-              <Button
-                variant="link"
-                isDisabled={isUpdating}
-                onClick={() => {
-                  setShowSystemdModal(true);
-                }}
-              >
-                {t('Track systemd services')}
-              </Button>
-            </FlexItem>
-          )}
         </Flex>
       </CardTitle>
       <DetailsPageCardBody>
-        <ApplicationsTable
-          appsStatus={apps}
-          specApps={specApps}
-          specSystemdUnits={trackedSystemdUnits}
-          onSystemdDelete={deleteSystemdUnit}
-          isUpdating={isUpdating}
-          addedSystemdUnitDates={addedSystemdDates}
-          canEdit={canEdit}
-        />
-        {showSystemdModal && <SystemdUnitsModal device={device} onClose={onClose} />}
+        <ApplicationsTable appsStatus={device.status.applications} specApps={specApps} />
       </DetailsPageCardBody>
     </DetailsPageCard>
   );

package/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx

@@ -26,7 +26,7 @@ import TerminalTab from './TerminalTab';
 import NavItem from '../../NavItem/NavItem';
 import { getEditDisabledReason, getResumeDisabledReason, isDeviceEnrolled } from '../../../utils/devices';
 import { RESOURCE, VERB } from '../../../types/rbac';
-import { useAccessReview } from '../../../hooks/useAccessReview';
+import { usePermissionsContext } from '../../common/PermissionsContext';
 import EventsCard from '../../Events/EventsCard';
 import PageWithPermissions from '../../common/PageWithPermissions';
 import YamlEditor from '../../common/CodeEditor/YamlEditor';
@@ -35,6 +35,14 @@ import { SystemRestoreBanners } from '../../SystemRestore/SystemRestoreBanners';
 
 type DeviceDetailsPageProps = React.PropsWithChildren<{ hideTerminal?: boolean }>;
 
+const deviceDetailsPermissions = [
+  { kind: RESOURCE.DEVICE_CONSOLE, verb: VERB.GET },
+  { kind: RESOURCE.DEVICE, verb: VERB.DELETE },
+  { kind: RESOURCE.DEVICE, verb: VERB.PATCH },
+  { kind: RESOURCE.DEVICE_DECOMMISSION, verb: VERB.UPDATE },
+  { kind: RESOURCE.DEVICE_RESUME, verb: VERB.UPDATE },
+];
+
 const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) => {
   const { t } = useTranslation();
   const {
@@ -50,11 +58,9 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
   const deviceNameOrAlias = deviceAlias || deviceId;
   const isEnrolled = !device || isDeviceEnrolled(device);
 
-  const [hasTerminalAccess] = useAccessReview(RESOURCE.DEVICE_CONSOLE, VERB.GET);
-  const [canDelete] = useAccessReview(RESOURCE.DEVICE, VERB.DELETE);
-  const [canEdit] = useAccessReview(RESOURCE.DEVICE, VERB.PATCH);
-  const [canDecommission] = useAccessReview(RESOURCE.DEVICE_DECOMMISSION, VERB.UPDATE);
-  const [canResume] = useAccessReview(RESOURCE.DEVICE_RESUME, VERB.UPDATE);
+  const { checkPermissions } = usePermissionsContext();
+  const [hasTerminalAccess, canDelete, canEdit, canDecommission, canResume] =
+    checkPermissions(deviceDetailsPermissions);
 
   const canOpenTerminal = hasTerminalAccess && isEnrolled;
 
@@ -85,7 +91,8 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
     onResumeComplete: refetch,
   });
 
-  const editActionProps = device ? getDisabledTooltipProps(getEditDisabledReason(device, t)) : undefined;
+  const editDisabledReason = device ? getEditDisabledReason(device, t) : undefined;
+  const editActionProps = device ? getDisabledTooltipProps(editDisabledReason) : undefined;
   const resumeDevice = {
     actionText: t('Resume device'),
     title: (
@@ -188,7 +195,9 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
           />
           <Route
             path="yaml"
-            element={<YamlEditor filename={deviceAlias || deviceId} apiObj={device} refetch={refetch} />}
+            element={
+              <YamlEditor apiObj={device} refetch={refetch} disabledEditReason={editDisabledReason} canEdit={canEdit} />
+            }
           />
           {!hideTerminal && canOpenTerminal && <Route path="terminal" element={<TerminalTab device={device} />} />}
           <Route path="events" element={<EventsCard kind={ResourceKind.DEVICE} objId={deviceId} />} />
@@ -201,7 +210,8 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
 };
 
 const DeviceDetailsPageWithPermissions = (props: DeviceDetailsPageProps) => {
-  const [allowed, loading] = useAccessReview(RESOURCE.DEVICE, VERB.GET);
+  const { checkPermissions, loading } = usePermissionsContext();
+  const [allowed] = checkPermissions([{ kind: RESOURCE.DEVICE, verb: VERB.GET }]);
   return (
     <PageWithPermissions allowed={allowed} loading={loading}>
       <DeviceDetailsPage {...props} />

package/src/components/Device/DeviceDetails/DeviceDetailsTab.tsx

@@ -26,6 +26,7 @@ import DeviceLifecycleStatus from '../../Status/DeviceLifecycleStatus';
 import DeviceFleet from './DeviceFleet';
 import DeviceOs from './DeviceOs';
 import DeviceApplications from './DeviceApplications';
+import DeviceSystemdUnits from './DeviceSystemdUnits';
 import StatusContent from './DeviceDetailsTabContent/StatusContent';
 import SystemResourcesContent from './DeviceDetailsTabContent/SystemResourcesContent';
 
@@ -157,7 +158,10 @@ const EnrolledDeviceDetails = ({
         </DetailsPageCard>
       </GridItem>
       <GridItem md={12} lg={6}>
-        <DeviceApplications device={device} refetch={refetch} canEdit={canEdit} />
+        <DeviceApplications device={device} />
+      </GridItem>
+      <GridItem md={12} lg={6}>
+        <DeviceSystemdUnits device={device} />
       </GridItem>
     </Grid>
   );
@@ -221,7 +225,7 @@ const DecommissionedDeviceDetails = ({ device, children }: React.PropsWithChildr
         </DetailsPageCard>
       </GridItem>
       <GridItem md={12} lg={6}>
-        <DeviceApplications device={device} canEdit={false} />
+        <DeviceApplications device={device} />
       </GridItem>
     </Grid>
   );

package/src/components/Device/DeviceDetails/DeviceSystemdUnits.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { CardTitle, Flex, FlexItem } from '@patternfly/react-core';
+
+import { Device } from '@flightctl/types';
+import { useTranslation } from '../../../hooks/useTranslation';
+import SystemdUnitsTable from '../../DetailsPage/Tables/SystemdUnitsTable';
+import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
+
+type DeviceSystemdUnitsProps = {
+  device: Required<Device>;
+};
+
+const DeviceSystemdUnits = ({ device }: DeviceSystemdUnitsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <DetailsPageCard>
+      <CardTitle>
+        <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+          <FlexItem>{t('System services')}</FlexItem>
+        </Flex>
+      </CardTitle>
+      <DetailsPageCardBody>
+        <SystemdUnitsTable systemdUnitsStatus={device.status.systemd || []} />
+      </DetailsPageCardBody>
+    </DetailsPageCard>
+  );
+};
+
+export default DeviceSystemdUnits;

package/src/components/Device/DeviceDetails/TerminalTab.tsx

@@ -7,7 +7,7 @@ import ErrorAlert from '../../ErrorAlert/ErrorAlert';
 import { useTranslation } from '../../../hooks/useTranslation';
 import Terminal, { ImperativeTerminalType } from '../../Terminal/Terminal';
 import PageWithPermissions from '../../common/PageWithPermissions';
-import { useAccessReview } from '../../../hooks/useAccessReview';
+import { usePermissionsContext } from '../../common/PermissionsContext';
 import { RESOURCE, VERB } from '../../../types/rbac';
 import { useOrganizationGuardContext } from '../../common/OrganizationGuard';
 
@@ -97,7 +97,8 @@ const TerminalTab = ({ device }: TerminalTabProps) => {
 };
 
 const TerminalTabWithPermissions = (props: TerminalTabProps) => {
-  const [allowed, loading] = useAccessReview(RESOURCE.DEVICE_CONSOLE, VERB.GET);
+  const { checkPermissions, loading } = usePermissionsContext();
+  const [allowed] = checkPermissions([{ kind: RESOURCE.DEVICE_CONSOLE, verb: VERB.GET }]);
   return (
     <PageWithPermissions allowed={allowed} loading={loading}>
       <TerminalTab {...props} />

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

@@ -8,7 +8,7 @@ import { Device, DeviceList } from '@flightctl/types';
 import { PaginationDetails } from '../../../hooks/useTablePagination';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { useTableSelect } from '../../../hooks/useTableSelect';
-import { useAccessReview } from '../../../hooks/useAccessReview';
+import { usePermissionsContext } from '../../common/PermissionsContext';
 import { useFetch } from '../../../hooks/useFetch';
 import { RESOURCE, VERB } from '../../../types/rbac';
 
@@ -41,6 +41,11 @@ const getDeviceColumns = (t: TFunction): ApiSortTableColumn[] => [
   },
 ];
 
+const decommissionedDevicesPermissions = [
+  { kind: RESOURCE.DEVICE, verb: VERB.DELETE },
+  { kind: RESOURCE.DEVICE, verb: VERB.PATCH },
+];
+
 const DecommissionedDevicesTable = ({
   devices,
   refetch,
@@ -67,8 +72,8 @@ const DecommissionedDevicesTable = ({
     },
   });
 
-  const [canDelete] = useAccessReview(RESOURCE.DEVICE, VERB.DELETE);
-  const [canEdit] = useAccessReview(RESOURCE.DEVICE, VERB.PATCH);
+  const { checkPermissions } = usePermissionsContext();
+  const [canDelete, canEdit] = checkPermissions(decommissionedDevicesPermissions);
 
   return (
     <>

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

@@ -4,7 +4,7 @@ import { Button, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@pa
 import MicrochipIcon from '@patternfly/react-icons/dist/js/icons/microchip-icon';
 import BanIcon from '@patternfly/react-icons/dist/js/icons/ban-icon';
 
-import { useAccessReview } from '../../../hooks/useAccessReview';
+import { usePermissionsContext } from '../../common/PermissionsContext';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { Link, ROUTE } from '../../../hooks/useNavigate';
 import { RESOURCE, VERB } from '../../../types/rbac';
@@ -16,7 +16,8 @@ type DevicesEmptyStateProps = {
 
 export const EnrolledDevicesEmptyState = ({ onAddDevice }: DevicesEmptyStateProps) => {
   const { t } = useTranslation();
-  const [canCreateFleet] = useAccessReview(RESOURCE.FLEET, VERB.CREATE);
+  const { checkPermissions } = usePermissionsContext();
+  const [canCreateFleet] = checkPermissions([{ kind: RESOURCE.FLEET, verb: VERB.CREATE }]);
   return (
     <ResourceListEmptyState icon={MicrochipIcon} titleText={t('No devices here!')}>
       <EmptyStateBody>