@flightctl/ui-components 0.0.4 → 0.0.10

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

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { useFormikContext } from 'formik';
+import {
+  Alert,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+
+import { EditDeviceFormValues } from '../types';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import LabelsView from '../../../common/LabelsView';
+import { toAPILabel } from '../../../../utils/labels';
+import { getErrorMessage } from '../../../../utils/error';
+import FlightControlDescriptionList from '../../../common/FlightCtlDescriptionList';
+import RepositorySourceList from '../../../Repository/RepositoryDetails/RepositorySourceList';
+import { getAPIConfig } from '../deviceSpecUtils';
+import ReviewApplications from './ReviewApplications';
+
+export const reviewDeviceStepId = 'review-device';
+
+const ReviewStep = ({ error }: { error?: string }) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<EditDeviceFormValues>();
+  return (
+    <Stack hasGutter>
+      <StackItem isFilled>
+        <FlightControlDescriptionList
+          isHorizontal
+          horizontalTermWidthModifier={{
+            default: '25ch',
+          }}
+        >
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Alias')}</DescriptionListTerm>
+            <DescriptionListDescription>{values.deviceAlias || t('Untitled')}</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Device labels')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <LabelsView prefix="device" labels={toAPILabel(values.labels)} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          {values.fleetMatch && (
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Device fleet')}</DescriptionListTerm>
+              <DescriptionListDescription>{values.fleetMatch}</DescriptionListDescription>
+            </DescriptionListGroup>
+          )}
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('System image')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {values.osImage || t(`Device management service will not manage system image`)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Configurations')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <RepositorySourceList configs={values.configTemplates.map(getAPIConfig)} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Applications')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <ReviewApplications apps={values.applications} />
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </FlightControlDescriptionList>
+      </StackItem>
+      {!!error && (
+        <StackItem>
+          <Alert isInline variant="danger" title={t('An error occurred')}>
+            {getErrorMessage(error)}
+          </Alert>
+        </StackItem>
+      )}
+    </Stack>
+  );
+};
+
+export default ReviewStep;

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

@@ -0,0 +1,19 @@
+import { ApplicationSpec } from '@flightctl/types';
+import { FlightCtlLabel } from '../../../types/extraTypes';
+import { SpecConfigTemplate } from '../../../types/deviceSpec';
+
+export type ApplicationFormSpec = Omit<ApplicationSpec, 'envVars'> & {
+  variables: { name: string; value: string }[];
+};
+
+export type DeviceSpecConfigFormValues = {
+  osImage?: string;
+  configTemplates: SpecConfigTemplate[];
+  applications: ApplicationFormSpec[];
+};
+
+export type EditDeviceFormValues = DeviceSpecConfigFormValues & {
+  deviceAlias: string;
+  labels: FlightCtlLabel[];
+  fleetMatch: string;
+};

package/src/components/Device/EditDeviceWizard/useEditDevice.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Device } from '@flightctl/types';
+import { useAppContext } from '../../../hooks/useAppContext';
+import { useFetch } from '../../../hooks/useFetch';
+
+export const useEditDevice = (): [string | undefined, Device | undefined, boolean, unknown] => {
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { deviceId } = useParams<{ deviceId: string }>();
+
+  const { get } = useFetch();
+  const [device, setDevice] = React.useState<Device>();
+  const [isLoading, setIsLoading] = React.useState<boolean>(!!deviceId);
+  const [error, setError] = React.useState<unknown>();
+
+  React.useEffect(() => {
+    const fetch = async () => {
+      try {
+        const result = await get<Device>(`devices/${deviceId}`);
+
+        setDevice(result);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (deviceId && !device) {
+      fetch();
+    }
+  }, [deviceId, get, device]);
+
+  return [deviceId, device, isLoading, error];
+};

package/src/components/Device/EditDeviceWizard/utils.ts

@@ -0,0 +1,79 @@
+import { TFunction } from 'i18next';
+import * as Yup from 'yup';
+
+import {
+  maxLengthString,
+  validApplicationsSchema,
+  validConfigTemplatesSchema,
+  validKubernetesLabelValue,
+  validLabelsSchema,
+} from '../../form/validations';
+import { appendJSONPatch, getApplicationPatches, getLabelPatches } from '../../../utils/patch';
+import { Device, PatchRequest } from '@flightctl/types';
+import { EditDeviceFormValues } from './types';
+import { getAPIConfig, getDeviceSpecConfigPatches } from './deviceSpecUtils';
+
+export const getValidationSchema = (t: TFunction) =>
+  Yup.lazy(() =>
+    Yup.object({
+      deviceAlias: validKubernetesLabelValue(t, { isRequired: false, fieldName: t('Alias') }),
+      osImage: maxLengthString(t, { fieldName: t('System image'), maxLength: 2048 }),
+      labels: validLabelsSchema(t),
+      configTemplates: validConfigTemplatesSchema(t),
+      applications: validApplicationsSchema(t),
+    }),
+  );
+
+export const getDevicePatches = (currentDevice: Device, updatedDevice: EditDeviceFormValues) => {
+  let allPatches: PatchRequest = [];
+
+  // Device labels
+  const currentLabels = currentDevice.metadata.labels || {};
+  const updatedLabels = updatedDevice.labels || [];
+  if (updatedDevice.deviceAlias) {
+    updatedLabels.push({ key: 'alias', value: updatedDevice.deviceAlias });
+  }
+
+  const deviceLabelPatches = getLabelPatches('/metadata/labels', currentLabels, updatedLabels);
+  allPatches = allPatches.concat(deviceLabelPatches);
+
+  if (updatedDevice.fleetMatch) {
+    // The change in device labels makes the device bound to a fleet. Only the labels can be updated.
+    return allPatches;
+  }
+
+  // OS image
+  const currentOsImage = currentDevice.spec?.os?.image;
+  const newOsImage = updatedDevice.osImage;
+  if (!currentOsImage && newOsImage) {
+    allPatches.push({
+      path: '/spec/os',
+      op: 'add',
+      value: { image: newOsImage },
+    });
+  } else if (!newOsImage && currentOsImage) {
+    allPatches.push({
+      path: '/spec/os',
+      op: 'remove',
+    });
+  } else if (newOsImage && currentOsImage !== newOsImage) {
+    appendJSONPatch({
+      path: '/spec/os/image',
+      patches: allPatches,
+      newValue: newOsImage,
+      originalValue: currentOsImage,
+    });
+  }
+
+  // Configurations
+  const currentConfigs = currentDevice.spec?.config || [];
+  const newConfigs = updatedDevice.configTemplates.map(getAPIConfig);
+  const configPatches = getDeviceSpecConfigPatches(currentConfigs, newConfigs, '/spec/config');
+  allPatches = allPatches.concat(configPatches);
+
+  // Applications
+  const appPatches = getApplicationPatches('/spec', currentDevice.spec?.applications || [], updatedDevice.applications);
+  allPatches = allPatches.concat(appPatches);
+
+  return allPatches;
+};

package/src/components/Device/MatchPatternsModal/MatchPatternsForm.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { Alert, Button, Label, LabelGroup } from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+
+import ErrorHelperText from '../../form/FieldHelperText';
+import FlightCtlActionGroup from '../../form/FlightCtlActionGroup';
+import FlightCtlForm from '../../form/FlightCtlForm';
+import { useTranslation } from '../../../hooks/useTranslation';
+import EditableLabelControl from '../../common/EditableLabelControl';
+
+export type MatchPatternsFormValues = {
+  matchPatterns: string[];
+};
+
+export type MatchPatternsFormProps = {
+  onClose: (reload?: boolean) => void;
+  error?: string;
+};
+
+const MatchPatternsForm: React.FC<MatchPatternsFormProps> = ({ onClose, error }) => {
+  const { t } = useTranslation();
+  const {
+    values,
+    setFieldValue,
+    submitForm,
+    isSubmitting,
+    errors: formErrors,
+  } = useFormikContext<MatchPatternsFormValues>();
+
+  const onPatternClose = (e: React.MouseEvent<Element, MouseEvent>, index: number) => {
+    const newMatchPatterns = [...values.matchPatterns];
+    newMatchPatterns.splice(index, 1);
+    void setFieldValue('matchPatterns', newMatchPatterns);
+  };
+
+  const onAdd = (text: string) => {
+    const newMatchPatterns = [...values.matchPatterns, text];
+    void setFieldValue('matchPatterns', newMatchPatterns);
+  };
+
+  const onEdit = (index: number, nextText: string) => {
+    const newMatchPatterns = [...values.matchPatterns];
+    newMatchPatterns.splice(index, 1, nextText);
+    void setFieldValue('matchPatterns', newMatchPatterns);
+  };
+
+  const hasFormErrors = !!formErrors.matchPatterns;
+
+  return (
+    <FlightCtlForm>
+      <LabelGroup
+        isEditable
+        addLabelControl={
+          <EditableLabelControl defaultLabel="name.service" addButtonText={t('Add match pattern')} onAddLabel={onAdd} />
+        }
+        numLabels={20}
+        defaultIsOpen
+      >
+        {values.matchPatterns.map((pattern, index) => (
+          <Label
+            key={index}
+            id={`${index}`}
+            onClose={(e) => onPatternClose(e, index)}
+            onEditCancel={(_, prevText) => onEdit(index, prevText)}
+            onEditComplete={(_, newText) => onEdit(index, newText)}
+            isEditable
+          >
+            {pattern}
+          </Label>
+        ))}
+      </LabelGroup>
+      <ErrorHelperText error={formErrors.matchPatterns} />
+      {error && <Alert isInline title={error} variant="danger" />}
+      <FlightCtlActionGroup>
+        <Button
+          key="confirm"
+          variant="primary"
+          onClick={submitForm}
+          isDisabled={isSubmitting || hasFormErrors}
+          isLoading={isSubmitting}
+        >
+          {t('Update match patterns')}
+        </Button>
+        <Button key="cancel" variant="link" onClick={() => onClose()} isDisabled={isSubmitting}>
+          {t('Cancel')}
+        </Button>
+      </FlightCtlActionGroup>
+    </FlightCtlForm>
+  );
+};
+
+export default MatchPatternsForm;

package/src/components/Device/MatchPatternsModal/MatchPatternsModal.tsx

@@ -0,0 +1,62 @@
+import { Modal } from '@patternfly/react-core';
+import { Device } from '@flightctl/types';
+import { Formik } from 'formik';
+import * as React from 'react';
+import MatchPatternsForm, { MatchPatternsFormValues } from './MatchPatternsForm';
+import { useFetch } from '../../../hooks/useFetch';
+import { getErrorMessage } from '../../../utils/error';
+import { getStringListPatches } from '../../../utils/patch';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { deviceSystemdUnitsValidationSchema } from '../../form/validations';
+
+type MatchPatternsModalProps = {
+  onClose: (reload?: boolean) => void;
+  device: Device;
+};
+
+/**
+ * Modal for editing the Systemd units matchPatterns of a Device.
+ * This operation is only supported for devices that are NOT bound to fleets, in which case
+ * the systemd units definition are defined in the `device.spec` itself, not via a templateVersion.
+
+ * @param device FlightCtl device
+ * @param onClose on close callback
+ */
+const MatchPatternsModal: React.FC<MatchPatternsModalProps> = ({ onClose, device }) => {
+  const { t } = useTranslation();
+  const { patch } = useFetch();
+  const [error, setError] = React.useState<string>();
+
+  const currentPatterns = device.spec?.systemd?.matchPatterns || [];
+  return (
+    <Modal title={t('Edit match patterns')} isOpen onClose={() => onClose()} variant="small">
+      <Formik<MatchPatternsFormValues>
+        validationSchema={deviceSystemdUnitsValidationSchema(t)}
+        initialValues={{ matchPatterns: currentPatterns }}
+        onSubmit={async ({ matchPatterns: updatedPatterns }) => {
+          try {
+            const patternPatchBuilder = (value: string[]) => ({
+              matchPatterns: value,
+            });
+            const patches = getStringListPatches(
+              '/spec/systemd',
+              currentPatterns,
+              updatedPatterns,
+              patternPatchBuilder,
+            );
+            if (patches.length > 0) {
+              await patch(`devices/${device.metadata.name}`, patches);
+            }
+            onClose(true);
+          } catch (err) {
+            setError(getErrorMessage(err));
+          }
+        }}
+      >
+        <MatchPatternsForm onClose={onClose} error={error} />
+      </Formik>
+    </Modal>
+  );
+};
+
+export default MatchPatternsModal;

package/src/components/EnrollmentRequest/EnrollmentRequestDetails/EnrollmentRequestDetails.css

@@ -0,0 +1,3 @@
+.fctl-enrollment-details__text-area {
+    resize: none;
+}

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

@@ -0,0 +1,226 @@
+import ConditionsTable from '../../DetailsPage/Tables/ConditionsTable';
+import DetailsPage from '../../DetailsPage/DetailsPage';
+import IntegrityDetails from '../../DetailsPage/Tables/IntegrityDetails';
+import LabelsView from '../../common/LabelsView';
+import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
+import { timeSinceText } from '../../../utils/dates';
+import {
+  EnrollmentRequestStatus as EnrollmentRequestStatusType,
+  getApprovalStatus,
+} from '../../../utils/status/enrollmentRequest';
+import {
+  Bullseye,
+  Card,
+  CardBody,
+  CardTitle,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DropdownItem,
+  DropdownList,
+  Grid,
+  GridItem,
+  TextArea,
+} from '@patternfly/react-core';
+import { EnrollmentRequest } from '@flightctl/types';
+import * as React from 'react';
+
+import { useFetch } from '../../../hooks/useFetch';
+import ApproveDeviceModal from '../../modals/ApproveDeviceModal/ApproveDeviceModal';
+import DetailsPageCard, { DetailsPageCardBody } from '../../DetailsPage/DetailsPageCard';
+import DetailsPageActions, { useDeleteAction } from '../../DetailsPage/DetailsPageActions';
+import EnrollmentRequestStatus from '../../Status/EnrollmentRequestStatus';
+import WithHelperText from '../../common/WithHelperText';
+import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { useAppContext } from '../../../hooks/useAppContext';
+
+import './EnrollmentRequestDetails.css';
+
+const EnrollmentRequestDetails = () => {
+  const { t } = useTranslation();
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { enrollmentRequestId } = useParams() as { enrollmentRequestId: string };
+  const [er, loading, error, refetch] = useFetchPeriodically<EnrollmentRequest>({
+    endpoint: `enrollmentrequests/${enrollmentRequestId}`,
+  });
+  const { remove } = useFetch();
+  const navigate = useNavigate();
+  const [isApprovalModalOpen, setIsApprovalModalOpen] = React.useState(false);
+
+  const { deleteAction, deleteModal } = useDeleteAction({
+    resourceName: enrollmentRequestId,
+    resourceType: 'Enrollment request',
+    onDelete: async () => {
+      await remove(`enrollmentrequests/${enrollmentRequestId}`);
+      navigate(ROUTE.DEVICES);
+    },
+  });
+
+  const approvalStatus = er ? getApprovalStatus(er) : '-';
+  const isPendingApproval = approvalStatus === EnrollmentRequestStatusType.Pending;
+
+  return (
+    <DetailsPage
+      loading={loading}
+      error={error}
+      id={er?.metadata.name as string}
+      resourceLink={ROUTE.DEVICES}
+      resourceType="Devices"
+      resourceTypeLabel={t('Devices')}
+      actions={
+        <DetailsPageActions>
+          <DropdownList>
+            <DropdownItem onClick={() => setIsApprovalModalOpen(true)} isDisabled={!isPendingApproval}>
+              {t('Approve')}
+            </DropdownItem>
+            {deleteAction}
+          </DropdownList>
+        </DetailsPageActions>
+      }
+    >
+      <Grid hasGutter>
+        <GridItem md={12}>
+          <Card>
+            <CardTitle>{t('Details')}</CardTitle>
+            <CardBody>
+              <FlightControlDescriptionList columnModifier={{ lg: '3Col' }}>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Name')}</DescriptionListTerm>
+                  <DescriptionListDescription>{er?.metadata.name || '-'}</DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Last seen')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    {timeSinceText(t, er?.metadata.creationTimestamp)}
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('OS')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    {er?.spec?.deviceStatus?.systemInfo?.operatingSystem || '-'}
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Architecture')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    {er?.spec?.deviceStatus?.systemInfo?.architecture || '-'}
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Labels')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <LabelsView prefix="er" labels={er?.metadata.labels} />
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Status')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <EnrollmentRequestStatus er={er} />
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              </FlightControlDescriptionList>
+            </CardBody>
+          </Card>
+        </GridItem>
+        <GridItem md={6}>
+          <DetailsPageCard>
+            <CardTitle>
+              <WithHelperText
+                showLabel
+                ariaLabel={t('Certificate signing request')}
+                content={t('A PEM-encoded PKCS#10 certificate signing request.')}
+              />
+            </CardTitle>
+            <DetailsPageCardBody>
+              {er?.spec.csr ? (
+                <TextArea
+                  aria-label={t('Certificate Signing Request')}
+                  value={er.spec.csr}
+                  readOnlyVariant="plain"
+                  autoResize
+                  className="fctl-enrollment-details__text-area"
+                />
+              ) : (
+                <Bullseye>{t('Not available')}</Bullseye>
+              )}
+            </DetailsPageCardBody>
+          </DetailsPageCard>
+        </GridItem>
+        <GridItem md={6}>
+          <DetailsPageCard>
+            <CardTitle>
+              <WithHelperText showLabel ariaLabel={t('Certificate')} content={t('A PEM-encoded signed certificate.')} />
+            </CardTitle>
+            <DetailsPageCardBody>
+              {er?.status?.certificate ? (
+                <TextArea
+                  aria-label={t('Certificate')}
+                  value={er.status.certificate}
+                  readOnlyVariant="plain"
+                  autoResize
+                  className="fctl-enrollment-details__text-area"
+                />
+              ) : (
+                <Bullseye>{t('Not available')}</Bullseye>
+              )}
+            </DetailsPageCardBody>
+          </DetailsPageCard>
+        </GridItem>
+        <GridItem md={6}>
+          <DetailsPageCard>
+            <CardTitle>{t('Conditions')}</CardTitle>
+            <DetailsPageCardBody>
+              {er && (
+                <ConditionsTable
+                  ariaLabel={t('Enrollment request conditions table')}
+                  conditions={er.status?.conditions}
+                />
+              )}
+            </DetailsPageCardBody>
+          </DetailsPageCard>
+        </GridItem>
+        {!isPendingApproval && (
+          <GridItem md={6}>
+            <DetailsPageCard>
+              <CardTitle>{t('Device conditions')}</CardTitle>
+              <DetailsPageCardBody>
+                {er && (
+                  <ConditionsTable
+                    ariaLabel={t('Device conditions table')}
+                    conditions={er.spec.deviceStatus?.conditions}
+                  />
+                )}
+              </DetailsPageCardBody>
+            </DetailsPageCard>
+          </GridItem>
+        )}
+        {!isPendingApproval && (
+          <GridItem md={6}>
+            <DetailsPageCard>
+              <CardTitle>{t('System integrity details')}</CardTitle>
+              <DetailsPageCardBody>
+                {er && <IntegrityDetails integrity={er.spec.deviceStatus?.integrity} />}
+              </DetailsPageCardBody>
+            </DetailsPageCard>
+          </GridItem>
+        )}
+      </Grid>
+      {er && isApprovalModalOpen && (
+        <ApproveDeviceModal
+          enrollmentRequest={er}
+          onClose={(updateList) => {
+            setIsApprovalModalOpen(false);
+            updateList && refetch();
+          }}
+        />
+      )}
+      {deleteModal}
+    </DetailsPage>
+  );
+};
+
+export default EnrollmentRequestDetails;

package/src/components/EnrollmentRequest/EnrollmentRequestTableRow.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { ActionsColumn, OnSelect, Td, Tr } from '@patternfly/react-table';
+import { Button } from '@patternfly/react-core';
+
+import { EnrollmentRequest } from '@flightctl/types';
+import { timeSinceText } from '../../utils/dates';
+import { DeleteListActionResult } from '../ListPage/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import { ROUTE } from '../../hooks/useNavigate';
+import ResourceLink from '../common/ResourceLink';
+
+type EnrollmentRequestTableRow = {
+  rowIndex: number;
+  onRowSelect: (er: EnrollmentRequest) => OnSelect;
+  isRowSelected: (er: EnrollmentRequest) => boolean;
+  er: EnrollmentRequest;
+  onApprove: (id: string) => void;
+  deleteAction: DeleteListActionResult['deleteAction'];
+};
+
+const EnrollmentRequestTableRow: React.FC<EnrollmentRequestTableRow> = ({
+  er,
+  deleteAction,
+  rowIndex,
+  onRowSelect,
+  isRowSelected,
+  onApprove,
+}) => {
+  const { t } = useTranslation();
+  const erName = er.metadata.name as string;
+
+  const approveEnrollment = () => {
+    onApprove(erName);
+  };
+
+  return (
+    <Tr data-testid={`enrollment-request-${rowIndex}`}>
+      <Td
+        select={{
+          rowIndex,
+          onSelect: onRowSelect(er),
+          isSelected: isRowSelected(er),
+        }}
+      />
+      <Td dataLabel={t('Name')}>
+        <ResourceLink id={erName} routeLink={ROUTE.ENROLLMENT_REQUEST_DETAILS} />
+      </Td>
+      <Td dataLabel={t('Created')}>{timeSinceText(t, er.metadata.creationTimestamp)}</Td>
+      <Td dataLabel={t('Approve')}>
+        <Button variant="link" onClick={approveEnrollment}>
+          {t('Approve')}
+        </Button>
+      </Td>
+      <Td isActionCell>
+        <ActionsColumn
+          items={[
+            {
+              title: t('Approve'),
+              onClick: approveEnrollment,
+            },
+            deleteAction({ resourceId: erName }),
+          ]}
+        />
+      </Td>
+    </Tr>
+  );
+};
+
+export default EnrollmentRequestTableRow;

package/src/components/EnrollmentRequest/PendingEnrollmentRequestsBadge.css

@@ -0,0 +1,10 @@
+
+/* The default color is too light */
+.fctl-pendingdevices-badge {
+  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--active-color--100)
+}
+
+/* For the dark theme, we need to put it back to the correct value */
+.pf-v5-theme-dark .fctl-pendingdevices-badge {
+  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--active-color--300)
+}