@flightctl/ui-components 0.0.3 → 0.0.5

package/src/components/ResourceSync/RepositoryResourceSyncList.tsx

@@ -0,0 +1,322 @@
+import * as React from 'react';
+import { ActionsColumn, Tbody, Td, Tr } from '@patternfly/react-table';
+import {
+  Alert,
+  Button,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  Modal,
+  SelectList,
+  SelectOption,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import { TFunction } from 'i18next';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { CodeBranchIcon } from '@patternfly/react-icons/dist/js/icons/code-branch-icon';
+import { Formik, useFormikContext } from 'formik';
+
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import { useFetch } from '../../hooks/useFetch';
+import { ResourceSync, ResourceSyncList } from '@flightctl/types';
+import { getObservedHash } from '../../utils/status/repository';
+import { useDeleteListAction } from '../ListPage/ListPageActions';
+import { useTableSort } from '../../hooks/useTableSort';
+import { sortByName } from '../../utils/sort/generic';
+import {
+  sortResourceSyncsByHash,
+  sortResourceSyncsByPath,
+  sortResourceSyncsByRevision,
+  sortResourceSyncsByStatus,
+} from '../../utils/sort/resourceSync';
+import Table, { TableColumn } from '../Table/Table';
+import { useTableTextSearch } from '../../hooks/useTableTextSearch';
+import TableTextSearch from '../Table/TableTextSearch';
+import { useTableSelect } from '../../hooks/useTableSelect';
+import TableActions from '../Table/TableActions';
+
+import MassDeleteResourceSyncModal from '../modals/massModals/MassDeleteResourceSyncModal/MassDeleteResourceSyncModal';
+import ResourceSyncStatus from './ResourceSyncStatus';
+import { useTranslation } from '../../hooks/useTranslation';
+import { useAppContext } from '../../hooks/useAppContext';
+import { getErrorMessage } from '../../utils/error';
+
+import {
+  SingleResourceSyncValues,
+  getResourceSync,
+  singleResourceSyncSchema,
+} from '../Repository/CreateRepository/utils';
+import { CreateResourceSyncForm } from '../Repository/CreateRepository/CreateResourceSyncsForm';
+import FlightCtlActionGroup from '../form/FlightCtlActionGroup';
+import FlightCtlForm from '../form/FlightCtlForm';
+import ResourceListEmptyState from '../common/ResourceListEmptyState';
+import ListPageBody from '../ListPage/ListPageBody';
+
+import './RepositoryResourceSyncList.css';
+
+const getColumns = (t: TFunction): TableColumn<ResourceSync>[] => [
+  {
+    name: t('Name'),
+    onSort: sortByName,
+  },
+  {
+    name: t('Path'),
+    onSort: sortResourceSyncsByPath,
+  },
+  {
+    name: t('Target revision'),
+    onSort: sortResourceSyncsByRevision,
+  },
+  {
+    name: t('Status'),
+    onSort: sortResourceSyncsByStatus,
+  },
+  {
+    name: t('Observed hash'),
+    onSort: sortResourceSyncsByHash,
+  },
+];
+
+const createRefs = (rsList: ResourceSync[]): { [key: string]: React.RefObject<HTMLTableRowElement> } => {
+  const rsRefs = {};
+  rsList.forEach((rs) => {
+    if (rs.metadata.name) {
+      rsRefs[rs.metadata.name] = React.createRef();
+    }
+  });
+  return rsRefs;
+};
+
+const getSearchText = (resourceSync: ResourceSync) => [resourceSync.metadata.name];
+
+const ResourceSyncEmptyState = ({ addResourceSync }: { addResourceSync: VoidFunction }) => {
+  const { t } = useTranslation();
+  return (
+    <ResourceListEmptyState icon={CodeBranchIcon} titleText={t('No resource syncs here!')}>
+      <EmptyStateBody>
+        {t(
+          "A resource sync is an automated Gitops way to manage imported fleets. The resource syncs monitors changes made to the source repository and updates the fleets' configurations accordingly.",
+        )}
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="secondary" onClick={addResourceSync}>
+            {t('Add a resource sync')}
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </ResourceListEmptyState>
+  );
+};
+
+const CreateResourceSyncModalForm = ({ onClose }: { onClose: VoidFunction }) => {
+  const { t } = useTranslation();
+  const { values, submitForm, errors, dirty, isSubmitting } = useFormikContext<SingleResourceSyncValues>();
+  const rsToAdd = values.resourceSyncs[0];
+  const isSubmitDisabled = !dirty || Object.keys(errors).length > 0;
+
+  return (
+    <FlightCtlForm>
+      <CreateResourceSyncForm rs={rsToAdd} index={0} />
+      <FlightCtlActionGroup>
+        <Button variant="primary" onClick={submitForm} isLoading={isSubmitting} isDisabled={isSubmitDisabled}>
+          {t('Add a resource sync')}
+        </Button>
+        <Button variant="link" isDisabled={isSubmitting} onClick={onClose}>
+          {t('Cancel')}
+        </Button>
+      </FlightCtlActionGroup>
+    </FlightCtlForm>
+  );
+};
+
+const CreateResourceSyncModal = ({
+  repositoryId,
+  storedRSs,
+  onClose,
+}: {
+  repositoryId: string;
+  storedRSs: ResourceSync[];
+  onClose: (isAdded?: boolean) => void;
+}) => {
+  const { t } = useTranslation();
+  const { post } = useFetch();
+  const [submitError, setSubmitError] = React.useState<string | undefined>();
+
+  return (
+    <Modal variant="medium" title={t('Add a resource sync')} onClose={() => onClose()} isOpen>
+      <Formik<SingleResourceSyncValues>
+        initialValues={{ resourceSyncs: [{ name: '', targetRevision: '', path: '' }] }}
+        validationSchema={singleResourceSyncSchema(t, storedRSs)}
+        onSubmit={async (values: SingleResourceSyncValues) => {
+          const rsToAdd = getResourceSync(repositoryId, values.resourceSyncs[0]);
+          try {
+            await post<ResourceSync>('resourcesyncs', rsToAdd);
+            setSubmitError(undefined);
+            onClose(true);
+          } catch (e) {
+            setSubmitError(getErrorMessage(e));
+          }
+        }}
+      >
+        <>
+          <CreateResourceSyncModalForm onClose={onClose} />
+          {submitError && (
+            <Alert variant="danger" title={t('Unexpected error occurred')} isInline>
+              {submitError}
+            </Alert>
+          )}
+        </>
+      </Formik>
+    </Modal>
+  );
+};
+
+const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string }) => {
+  const [rsList, isLoading, error, refetch] = useFetchPeriodically<ResourceSyncList>({
+    endpoint: `resourcesyncs?repository=${repositoryId}`,
+  });
+
+  const resourceSyncs = rsList?.items || [];
+
+  const { t } = useTranslation();
+  const { remove } = useFetch();
+  const {
+    router: { useLocation },
+  } = useAppContext();
+  const { hash = '#' } = useLocation();
+  const rsRefs = createRefs(resourceSyncs);
+  const selectedRs = hash.split('#')[1];
+
+  React.useEffect(() => {
+    const rsRow = rsRefs[selectedRs]?.current;
+    if (rsRow) {
+      rsRow.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    }
+    // Needs to be run only at the beginning
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const { filteredData, search, setSearch } = useTableTextSearch(resourceSyncs, getSearchText);
+
+  const columns = React.useMemo(() => getColumns(t), [t]);
+  const { getSortParams, sortedData } = useTableSort(filteredData, columns);
+
+  const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
+
+  const { deleteAction, deleteModal } = useDeleteListAction({
+    resourceType: 'ResourceSync',
+    onDelete: async (resourceId: string) => {
+      await remove(`resourcesyncs/${resourceId}`);
+      refetch();
+    },
+  });
+  const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
+  const [isAddRsModalOpen, setIsAddRsModalOpen] = React.useState(false);
+
+  return (
+    <ListPageBody error={error} loading={isLoading}>
+      <Toolbar id="resource-sync-toolbar" inset={{ default: 'insetNone' }}>
+        <ToolbarContent>
+          <ToolbarGroup>
+            <ToolbarItem variant="search-filter">
+              <TableTextSearch value={search} setValue={setSearch} placeholder={t('Search by name')} />
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem>
+            <TableActions isDisabled={!hasSelectedRows}>
+              <SelectList>
+                <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
+              </SelectList>
+            </TableActions>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      {resourceSyncs.length > 0 && (
+        <Button
+          variant="link"
+          icon={<PlusCircleIcon />}
+          className="fctl-rslist__addrsbutton"
+          onClick={() => {
+            setIsAddRsModalOpen(true);
+          }}
+        >
+          {t('Add a resource sync')}
+        </Button>
+      )}
+      <Table
+        aria-label={t('Resource syncs table')}
+        isAllSelected={isAllSelected}
+        onSelectAll={setAllSelected}
+        columns={columns}
+        emptyFilters={filteredData.length === 0}
+        emptyData={resourceSyncs.length === 0}
+        getSortParams={getSortParams}
+      >
+        <Tbody>
+          {sortedData.map((resourceSync, rowIndex) => {
+            const rsName = resourceSync.metadata.name as string;
+            const rsRef = rsRefs[rsName];
+            const isSelected = rsName === selectedRs;
+            return (
+              <Tr key={rsName} ref={rsRef} className={isSelected ? 'fctl-rslist-row--selected' : ''}>
+                <Td
+                  select={{
+                    rowIndex,
+                    onSelect: onRowSelect(resourceSync),
+                    isSelected: isRowSelected(resourceSync),
+                  }}
+                />
+                <Td dataLabel={t('Name')}>{rsName}</Td>
+                <Td dataLabel={t('Path')}>{resourceSync.spec.path || ''}</Td>
+                <Td dataLabel={t('Target revision')}>{resourceSync.spec.targetRevision}</Td>
+                <Td dataLabel={t('Status')}>
+                  <ResourceSyncStatus resourceSync={resourceSync} />
+                </Td>
+                <Td dataLabel={t('Observed hash')}>{getObservedHash(resourceSync)}</Td>
+                <Td isActionCell>
+                  <ActionsColumn items={[deleteAction({ resourceId: resourceSync.metadata.name || '' })]} />
+                </Td>
+              </Tr>
+            );
+          })}
+        </Tbody>
+      </Table>
+      {resourceSyncs.length === 0 && (
+        <ResourceSyncEmptyState
+          addResourceSync={() => {
+            setIsAddRsModalOpen(true);
+          }}
+        />
+      )}
+      {deleteModal}
+      {isMassDeleteModalOpen && (
+        <MassDeleteResourceSyncModal
+          onClose={() => setIsMassDeleteModalOpen(false)}
+          resources={sortedData.filter(isRowSelected)}
+          onDeleteSuccess={() => {
+            setIsMassDeleteModalOpen(false);
+            refetch();
+          }}
+        />
+      )}
+      {isAddRsModalOpen && (
+        <CreateResourceSyncModal
+          repositoryId={repositoryId}
+          storedRSs={resourceSyncs}
+          onClose={(isAdded?: boolean) => {
+            setIsAddRsModalOpen(false);
+            if (isAdded) {
+              refetch();
+            }
+          }}
+        />
+      )}
+    </ListPageBody>
+  );
+};
+
+export default RepositoryResourceSyncList;

package/src/components/ResourceSync/ResourceSyncStatus.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { Trans } from 'react-i18next';
+import { LabelProps, Popover, Stack, StackItem } from '@patternfly/react-core';
+
+import { ConditionType, ResourceSync } from '@flightctl/types';
+import { getRepositorySyncStatus, repositoryStatusLabels } from '../../utils/status/repository';
+import { StatusLevel } from '../../utils/status/common';
+import { useTranslation } from '../../hooks/useTranslation';
+import { Link, ROUTE } from '../../hooks/useNavigate';
+import { StatusDisplayContent } from '../Status/StatusDisplay';
+
+type ResourceSyncStatusProps = {
+  resourceSync: ResourceSync;
+  showLinksOnError?: boolean;
+};
+
+const ResourceSyncStatus = ({ resourceSync, showLinksOnError = false }: ResourceSyncStatusProps) => {
+  const { t } = useTranslation();
+  const statusType = getRepositorySyncStatus(resourceSync, t);
+  const statusLabels = repositoryStatusLabels(t);
+
+  let color: LabelProps['color'];
+  let status: StatusLevel;
+
+  switch (statusType.status) {
+    case ConditionType.ResourceSyncResourceParsed:
+    case 'Sync pending':
+      status = 'warning';
+      break;
+    case ConditionType.ResourceSyncSynced:
+    case ConditionType.RepositoryAccessible:
+      status = 'success';
+      break;
+    case 'Not parsed':
+    case 'Not synced':
+    case 'Not accessible':
+      status = 'danger';
+      break;
+    default:
+      status = 'unknown';
+      break;
+  }
+
+  if (color === 'red' && showLinksOnError) {
+    const repositoryName = resourceSync.spec.repository;
+    const rsName = resourceSync.metadata.name;
+    return (
+      <Popover
+        triggerAction="hover"
+        aria-label={t('Invalid resource sync configuration')}
+        headerContent={t('Invalid resource sync configuration')}
+        bodyContent={
+          <Stack hasGutter>
+            <StackItem>
+              <Trans t={t}>
+                An error occurred when trying to apply the resource sync <strong>{rsName}</strong> from repository{' '}
+                <strong>{repositoryName}</strong>:
+              </Trans>
+            </StackItem>
+            <StackItem>{statusType.message}</StackItem>
+            <StackItem>
+              <Link to={{ route: ROUTE.RESOURCE_SYNC_DETAILS, postfix: resourceSync.metadata.name }}>
+                Review and fix the configuration
+              </Link>
+            </StackItem>
+          </Stack>
+        }
+      >
+        <StatusDisplayContent label={statusLabels[statusType.status]} level={status} message={statusType.message} />
+      </Popover>
+    );
+  }
+
+  return <StatusDisplayContent label={statusLabels[statusType.status]} level={status} message={statusType.message} />;
+};
+
+export default ResourceSyncStatus;

package/src/components/ResourceSync/ResourceSyncToRepository.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { useFetch } from '../../hooks/useFetch';
+import {
+  Bullseye,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  PageSection,
+  Spinner,
+  Title,
+} from '@patternfly/react-core';
+import { ResourceSync } from '@flightctl/types';
+import { Trans } from 'react-i18next';
+import { useTranslation } from '../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../hooks/useNavigate';
+import { useAppContext } from '../../hooks/useAppContext';
+
+const ResourceSyncToRepository = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { get } = useFetch();
+
+  const [error, setError] = React.useState<string>();
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { rsId } = useParams() as { rsId: string };
+
+  React.useEffect(() => {
+    const fetchDetails = async () => {
+      try {
+        const rsDetails = await get<ResourceSync>(`resourcesyncs/${rsId}`);
+
+        const repository = rsDetails.spec.repository;
+        if (repository) {
+          setError(undefined);
+          navigate({ route: ROUTE.REPO_DETAILS, postfix: `${repository}#${rsId}` });
+        } else {
+          setError(t('Resource sync {{rsId}} is not linked to a repository', { rsId }));
+        }
+      } catch (e) {
+        setError(t('Resource sync {{rsId}} could not be found', { rsId }));
+      }
+    };
+
+    void fetchDetails();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [get, navigate, rsId]);
+
+  return (
+    <PageSection variant="light">
+      <Title headingLevel="h1" size="3xl">
+        {t('Resource sync {{rsId}}', { rsId })}
+      </Title>
+      {error ? (
+        <EmptyState>
+          <EmptyStateHeader>
+            <Trans t={t}>
+              Could not find the details for the resource sync <strong>{rsId}</strong>
+            </Trans>
+          </EmptyStateHeader>
+          <EmptyStateBody>{error}</EmptyStateBody>
+        </EmptyState>
+      ) : (
+        <Bullseye>
+          <Spinner />
+        </Bullseye>
+      )}
+    </PageSection>
+  );
+};
+
+export default ResourceSyncToRepository;

package/src/components/Status/ApplicationStatus.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { ApplicationStatusType } from '@flightctl/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import { getApplicationStatusItems } from '../../utils/status/applications';
+import StatusDisplay from './StatusDisplay';
+
+/**
+ * Refers to the summary status of all applications in one device
+ *
+ * @param status the summary application status
+ * @constructor
+ */
+const ApplicationStatus = ({ status }: { status?: ApplicationStatusType }) => {
+  const { t } = useTranslation();
+
+  const statusItems = getApplicationStatusItems(t);
+
+  const item = statusItems.find((statusItem) => {
+    return statusItem.id === status;
+  });
+  return <StatusDisplay item={item} />;
+};
+
+export default ApplicationStatus;

package/src/components/Status/ApplicationSummaryStatus.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { DeviceApplicationsSummaryStatus } from '@flightctl/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import { getApplicationSummaryStatusItems } from '../../utils/status/applications';
+import StatusDisplay from './StatusDisplay';
+
+/**
+ * Refers to the summary status of all applications in one device
+ *
+ * @param status the summary application status
+ * @constructor
+ */
+const ApplicationSummaryStatus = ({ statusSummary }: { statusSummary?: DeviceApplicationsSummaryStatus }) => {
+  const { t } = useTranslation();
+
+  const statusItems = getApplicationSummaryStatusItems(t);
+
+  const item = statusItems.find((statusItem) => {
+    return statusItem.id === statusSummary?.status;
+  });
+  return <StatusDisplay item={item} message={statusSummary?.info} />;
+};
+export default ApplicationSummaryStatus;

package/src/components/Status/DeviceResourceStatus.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { TFunction } from 'react-i18next';
+
+import {
+  Device,
+  DeviceResourceStatus,
+  DeviceResourceStatusType,
+  ResourceAlertSeverityType,
+  ResourceMonitorSpec,
+} from '@flightctl/types';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import { StatusLevel } from '../../utils/status/common';
+import { StatusDisplayContent } from './StatusDisplay';
+
+type MonitorType = keyof DeviceResourceStatus; /* cpu / disk / memory */
+
+const getMonitorTypeLabel = (monitorType: MonitorType, t: TFunction) => {
+  switch (monitorType) {
+    case 'cpu':
+      return t('CPU');
+    case 'memory':
+      return t('Memory');
+    case 'disk':
+      return t('Disk');
+  }
+};
+
+const getTriggeredResourceAlert = (
+  resourcesInfo: Array<ResourceMonitorSpec>,
+  monitorType: MonitorType,
+  monitorStatus?: DeviceResourceStatusType,
+) => {
+  if (
+    !monitorStatus ||
+    [
+      DeviceResourceStatusType.DeviceResourceStatusHealthy,
+      DeviceResourceStatusType.DeviceResourceStatusUnknown,
+    ].includes(monitorStatus)
+  ) {
+    return null;
+  }
+  const monitorDetails = resourcesInfo.find((item) => item.monitorType === monitorType && item.alertRules.length > 0);
+  if (!monitorDetails) {
+    return null;
+  }
+
+  // Attempt to find the rule matching exactly the monitor's status
+  return monitorDetails.alertRules.find((alertRule) => {
+    switch (monitorStatus) {
+      case DeviceResourceStatusType.DeviceResourceStatusWarning:
+        return alertRule.severity === ResourceAlertSeverityType.ResourceAlertSeverityTypeWarning;
+      case DeviceResourceStatusType.DeviceResourceStatusCritical:
+        return alertRule.severity === ResourceAlertSeverityType.ResourceAlertSeverityTypeCritical;
+    }
+    return false;
+  });
+};
+
+const DeviceResourceStatus = ({ device, monitorType }: { device: Device | undefined; monitorType: MonitorType }) => {
+  const { t } = useTranslation();
+
+  if (!device) {
+    return <StatusDisplayContent level="unknown" label={t('Unknown')} />;
+  }
+
+  let level: StatusLevel;
+  let label: string;
+  let messageTitle: string = '';
+  const status = device.status?.resources[monitorType];
+  const triggeredAlert = getTriggeredResourceAlert(device.spec?.resources ?? [], monitorType, status);
+
+  if (triggeredAlert) {
+    label = t('Past threshold ({{ percent }}%)', { percent: triggeredAlert.percentage });
+    messageTitle = t('{{ monitorType }} pressure - {{ status }}', {
+      monitorType: getMonitorTypeLabel(monitorType, t),
+      status,
+    }); // eg CPU pressure - critical
+  } else if (status === DeviceResourceStatusType.DeviceResourceStatusHealthy) {
+    label = t('Within limits');
+  } else {
+    label = status || t('Unknown');
+  }
+
+  switch (status) {
+    case DeviceResourceStatusType.DeviceResourceStatusHealthy:
+      level = 'success';
+      break;
+    case DeviceResourceStatusType.DeviceResourceStatusWarning:
+      level = 'warning';
+      break;
+    case DeviceResourceStatusType.DeviceResourceStatusCritical:
+    case DeviceResourceStatusType.DeviceResourceStatusError:
+      level = 'danger';
+      break;
+    case DeviceResourceStatusType.DeviceResourceStatusUnknown:
+    case undefined:
+      level = 'unknown';
+      break;
+  }
+
+  return (
+    <StatusDisplayContent
+      level={level}
+      label={label}
+      messageTitle={messageTitle}
+      message={triggeredAlert?.description}
+    />
+  );
+};
+
+export default DeviceResourceStatus;

package/src/components/Status/DeviceStatus.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import { DeviceStatus } from '@flightctl/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import { getDeviceStatusItems, getDeviceSummaryStatus } from '../../utils/status/devices';
+import StatusDisplay from './StatusDisplay';
+
+const DeviceStatus = ({ deviceStatus }: { deviceStatus?: DeviceStatus }) => {
+  const { t } = useTranslation();
+
+  const status = getDeviceSummaryStatus(deviceStatus?.summary);
+  const statusItems = getDeviceStatusItems(t);
+
+  const item = statusItems.find((statusItem) => {
+    return statusItem.id === status;
+  });
+  return <StatusDisplay item={item} message={deviceStatus?.summary.info} />;
+};
+
+export default DeviceStatus;

package/src/components/Status/EnrollmentRequestStatus.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { EnrollmentRequest } from '@flightctl/types';
+import {
+  EnrollmentRequestStatus as EnrollmentRequestStatusType,
+  getApprovalStatus,
+  getEnrollmentRequestsStatusItems,
+} from '../../utils/status/enrollmentRequest';
+import { useTranslation } from '../../hooks/useTranslation';
+import StatusDisplay from './StatusDisplay';
+
+const EnrollmentRequestStatus = ({ er }: { er?: EnrollmentRequest }) => {
+  const { t } = useTranslation();
+
+  const status = er ? getApprovalStatus(er) : EnrollmentRequestStatusType.Unknown;
+  const statusItems = getEnrollmentRequestsStatusItems(t);
+
+  const item = statusItems.find((statusItem) => {
+    return statusItem.id === status;
+  });
+  return <StatusDisplay item={item} />;
+};
+
+export default EnrollmentRequestStatus;