@flightctl/ui-components 0.0.5 → 0.0.10

package/src/components/EnrollmentRequest/PendingEnrollmentRequestsBadge.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Badge } from '@patternfly/react-core';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import { usePendingEnrollmentRequestsCount } from '../../hooks/usePendingEnrollmentRequestsCount';
+import WithTooltip from '../common/WithTooltip';
+
+import './PendingEnrollmentRequestsBadge.css';
+
+const PendingEnrollmentRequestsBadge = () => {
+  const { t } = useTranslation();
+  const [count] = usePendingEnrollmentRequestsCount();
+  if (count === 0) {
+    return null;
+  }
+
+  const text = t('{{ count }} devices pending approval', { count });
+  return (
+    <Badge className="fctl-pending-ers-badge pf-v5-u-ml-lg" screenReaderText={text}>
+      <WithTooltip showTooltip content={text}>
+        <span>{count}</span>
+      </WithTooltip>
+    </Badge>
+  );
+};
+
+export default PendingEnrollmentRequestsBadge;

package/src/components/Fleet/FleetDetails/FleetDevices.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Grid, GridItem } from '@patternfly/react-core';
+import { Flex, FlexItem } from '@patternfly/react-core';
 
 import { DevicesSummary } from '@flightctl/types';
 import { useTranslation } from '../../../hooks/useTranslation';
@@ -92,23 +92,17 @@ const DevicesByDeviceStatusChart = ({
 
 const FleetDevices = ({ devicesSummary, fleetId }: FleetDevicesProps) => {
   return (
-    <Grid hasGutter>
-      {devicesSummary.applicationStatus && (
-        <GridItem md={6}>
-          <DevicesByAppStatusChart fleetId={fleetId} applicationStatus={devicesSummary.applicationStatus} />
-        </GridItem>
-      )}
-      {devicesSummary.summaryStatus && (
-        <GridItem md={6}>
-          <DevicesByDeviceStatusChart fleetId={fleetId} deviceStatus={devicesSummary.summaryStatus} />
-        </GridItem>
-      )}
-      {devicesSummary.updateStatus && (
-        <GridItem md={6}>
-          <DevicesByUpdateStatusChart fleetId={fleetId} updateStatus={devicesSummary.updateStatus} />
-        </GridItem>
-      )}
-    </Grid>
+    <Flex justifyContent={{ default: 'justifyContentSpaceAround' }}>
+      <FlexItem>
+        <DevicesByAppStatusChart fleetId={fleetId} applicationStatus={devicesSummary.applicationStatus} />
+      </FlexItem>
+      <FlexItem>
+        <DevicesByDeviceStatusChart fleetId={fleetId} deviceStatus={devicesSummary.summaryStatus} />
+      </FlexItem>
+      <FlexItem>
+        <DevicesByUpdateStatusChart fleetId={fleetId} updateStatus={devicesSummary.updateStatus} />
+      </FlexItem>
+    </Flex>
   );
 };
 

package/src/components/Fleet/FleetsPage.tsx

@@ -13,21 +13,16 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { Tbody } from '@patternfly/react-table';
+import { Tbody, ThProps } from '@patternfly/react-table';
 import { TopologyIcon } from '@patternfly/react-icons/dist/js/icons/topology-icon';
 import { Trans } from 'react-i18next';
 import { TFunction } from 'i18next';
 
-import { Fleet, FleetList } from '@flightctl/types';
-import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import { Fleet } from '@flightctl/types';
 import ListPage from '../ListPage/ListPage';
 import ListPageBody from '../ListPage/ListPageBody';
-import { sortByName } from '../../utils/sort/generic';
-import { sortByStatus, sortFleetsByOSImg } from '../../utils/sort/fleet';
 import TableTextSearch from '../Table/TableTextSearch';
-import Table, { TableColumn } from '../Table/Table';
-import { useTableTextSearch } from '../../hooks/useTableTextSearch';
-import { useTableSort } from '../../hooks/useTableSort';
+import Table, { ApiSortTableColumn } from '../Table/Table';
 import { useTableSelect } from '../../hooks/useTableSelect';
 import TableActions from '../Table/TableActions';
 import { getResourceId } from '../../utils/resource';
@@ -38,6 +33,8 @@ import { useTranslation } from '../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../hooks/useNavigate';
 import DeleteFleetModal from './DeleteFleetModal/DeleteFleetModal';
 import FleetResourceSyncs from './FleetResourceSyncs';
+import { useApiTableSort } from '../../hooks/useApiTableSort';
+import { useFleetBackendFilters, useFleets } from './useFleets';
 
 const FleetPageActions = ({ createText }: { createText?: string }) => {
   const { t } = useTranslation();
@@ -78,37 +75,40 @@ const FleetEmptyState = () => {
   );
 };
 
-const getColumns = (t: TFunction): TableColumn<Fleet>[] => [
+const getColumns = (t: TFunction): ApiSortTableColumn[] => [
   {
     name: t('Name'),
-    onSort: sortByName,
+    sortableField: 'metadata.name',
+    defaultSort: true,
   },
   {
     name: t('System image'),
-    onSort: sortFleetsByOSImg,
+    sortableField: 'spec.template.spec.os.image',
   },
   {
     name: t('Devices'),
   },
   {
     name: t('Status'),
-    onSort: sortByStatus,
   },
 ];
 
-const getSearchText = (fleet: Fleet) => [fleet.metadata.name];
+type FleetTableProps = {
+  fleetColumns: ApiSortTableColumn[];
+  fleetLoad: FleetLoad;
+  getSortParams: (columnIndex: number) => ThProps['sort'];
+  hasFiltersEnabled: boolean;
+  name: string | undefined;
+  setName: (name: string) => void;
+};
 
-const FleetTable = ({ fleetLoad }: { fleetLoad: FleetLoad }) => {
+const FleetTable = ({ name, setName, hasFiltersEnabled, getSortParams, fleetColumns, fleetLoad }: FleetTableProps) => {
   const { t } = useTranslation();
 
   const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
   const [fleetToDeleteId, setFleetToDeleteId] = React.useState<string>();
+  const [fleets, loading, error, isFilterUpdating, refetch] = fleetLoad;
 
-  const [fleetList, loading, error, refetch] = fleetLoad;
-  const columns = React.useMemo(() => getColumns(t), [t]);
-  const fleets = fleetList?.items || [];
-  const { search, setSearch, filteredData } = useTableTextSearch(fleets, getSearchText);
-  const { getSortParams, sortedData: sortedFleets } = useTableSort(filteredData, columns);
   const { onRowSelect, isAllSelected, hasSelectedRows, isRowSelected, setAllSelected } = useTableSelect();
 
   return (
@@ -117,7 +117,7 @@ const FleetTable = ({ fleetLoad }: { fleetLoad: FleetLoad }) => {
         <ToolbarContent>
           <ToolbarGroup>
             <ToolbarItem variant="search-filter">
-              <TableTextSearch value={search} setValue={setSearch} placeholder={t('Search by name')} />
+              <TableTextSearch value={name} setValue={setName} placeholder={t('Search by name')} />
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem>
@@ -134,15 +134,16 @@ const FleetTable = ({ fleetLoad }: { fleetLoad: FleetLoad }) => {
       </Toolbar>
       <Table
         aria-label={t('Fleets table')}
-        columns={columns}
-        emptyFilters={filteredData.length === 0}
+        loading={isFilterUpdating}
+        columns={fleetColumns}
+        emptyFilters={!hasFiltersEnabled}
         emptyData={fleets.length === 0}
         getSortParams={getSortParams}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
       >
         <Tbody>
-          {sortedFleets.map((fleet, rowIndex) => (
+          {fleets.map((fleet, rowIndex) => (
             <FleetRow
               key={getResourceId(fleet)}
               fleet={fleet}
@@ -171,7 +172,7 @@ const FleetTable = ({ fleetLoad }: { fleetLoad: FleetLoad }) => {
       {isMassDeleteModalOpen && (
         <MassDeleteFleetModal
           onClose={() => setIsMassDeleteModalOpen(false)}
-          fleets={sortedFleets.filter(isRowSelected)}
+          fleets={fleets.filter(isRowSelected)}
           onDeleteSuccess={() => {
             setIsMassDeleteModalOpen(false);
             refetch();
@@ -182,20 +183,30 @@ const FleetTable = ({ fleetLoad }: { fleetLoad: FleetLoad }) => {
   );
 };
 
-type FleetLoad = [FleetList | undefined, boolean, unknown, VoidFunction, boolean];
+type FleetLoad = [Fleet[], boolean, unknown, boolean, VoidFunction];
 
 const FleetsPage = () => {
   const { t } = useTranslation();
 
   // TODO move the fetch down to FleetTable when the API includes the filter for pending / errored resource syncs
-  const fleetLoad = useFetchPeriodically<FleetList>({ endpoint: 'fleets?addDevicesCount=true' });
+  const columns = React.useMemo(() => getColumns(t), [t]);
+  const { name, setName, hasFiltersEnabled } = useFleetBackendFilters();
+  const { getSortParams, sortField, direction } = useApiTableSort(columns);
+  const fleetLoad = useFleets({ name, addDevicesCount: true, sortField, direction });
 
   return (
     <>
-      <FleetResourceSyncs fleets={fleetLoad[0]?.items || []} />
+      <FleetResourceSyncs fleets={fleetLoad[0] || []} />
 
       <ListPage title={t('Fleets')}>
-        <FleetTable fleetLoad={fleetLoad} />
+        <FleetTable
+          name={name}
+          setName={setName}
+          hasFiltersEnabled={hasFiltersEnabled}
+          getSortParams={getSortParams}
+          fleetLoad={fleetLoad}
+          fleetColumns={columns}
+        />
       </ListPage>
     </>
   );

package/src/components/Fleet/useFleets.ts

@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+import { useAppContext } from '../../hooks/useAppContext';
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import { Fleet, FleetList, SortOrder } from '@flightctl/types';
+import { useDebounce } from 'use-debounce';
+
+export enum FleetSearchParams {
+  Name = 'name',
+}
+
+type FleetsEndpointArgs = {
+  name?: string;
+  addDevicesCount?: boolean;
+  sortField?: string;
+  direction?: string;
+};
+
+export const useFleetBackendFilters = () => {
+  const {
+    router: { useSearchParams },
+  } = useAppContext();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const paramsRef = React.useRef(searchParams);
+  const name = searchParams.get(FleetSearchParams.Name) || undefined;
+
+  const setName = React.useCallback(
+    (nameVal: string) => {
+      const newParams = new URLSearchParams({
+        [FleetSearchParams.Name]: nameVal,
+      });
+      paramsRef.current = newParams;
+      setSearchParams(newParams);
+    },
+    [setSearchParams],
+  );
+
+  const hasFiltersEnabled = !!name;
+
+  return {
+    name,
+    setName,
+    hasFiltersEnabled,
+  };
+};
+
+const getFleetsEndpoint = ({
+  addDevicesCount,
+  name,
+  sortField,
+  direction,
+}: {
+  addDevicesCount?: boolean;
+  name?: string;
+  sortField?: string;
+  direction?: string;
+}) => {
+  const params = new URLSearchParams();
+  if (name) {
+    params.set('fieldSelector', `metadata.name contains ${name}`);
+  }
+  if (addDevicesCount) {
+    params.set('addDevicesCount', 'true');
+  }
+
+  if (sortField) {
+    params.set('sortBy', sortField);
+    params.set('sortOrder', direction || SortOrder.ASC);
+  }
+  return params.size ? `fleets?${params.toString()}` : 'fleets';
+};
+
+const useFleetsEndpoint = (args: FleetsEndpointArgs): [string, boolean] => {
+  const endpoint = getFleetsEndpoint(args);
+  const [fleetsEndpointDebounced] = useDebounce(endpoint, 1000);
+  return [fleetsEndpointDebounced, endpoint !== fleetsEndpointDebounced];
+};
+
+export const useFleets = (args: FleetsEndpointArgs): [Fleet[], boolean, unknown, boolean, VoidFunction] => {
+  const [fleetsEndpoint, fleetsDebouncing] = useFleetsEndpoint(args);
+  const [fleetsList, fleetsLoading, fleetsError, fleetsRefetch, updating] = useFetchPeriodically<FleetList>({
+    endpoint: fleetsEndpoint,
+  });
+
+  return [fleetsList?.items || [], fleetsLoading, fleetsError, updating || fleetsDebouncing, fleetsRefetch];
+};

package/src/components/OverviewPage/Cards/Status/StatusCard.tsx

@@ -35,12 +35,13 @@ const StatusCard = () => {
     labels,
   });
 
-  // TODO remove "useDevices" (to fetch labels), and fetching of fleets when the new API endpoints are available
-  const [devices, loading, error, , , allLabels] = useDevices({
+  // TODO https://issues.redhat.com/browse/EDM-684 Use the new API endpoint to retrieve device labels
+  const [, /* devices */ loading, error, , , allLabels] = useDevices({
     ownerFleets: fleets,
     labels,
   });
 
+  // TODO https://issues.redhat.com/browse/EDM-683 Use the new API endpoint to retrieve fleet names
   const [fleetsList, flLoading, flError] = useFetchPeriodically<FleetList>({
     endpoint: 'fleets',
   });
@@ -59,7 +60,7 @@ const StatusCard = () => {
       <Stack>
         <StackItem>
           <TextContent>
-            <Text component={TextVariants.small}>{t('{{count}} Devices', { count: devices.length || 0 })}</Text>
+            <Text component={TextVariants.small}>{t('{{count}} Devices', { count: devicesSummary?.total || 0 })}</Text>
           </TextContent>
         </StackItem>
         <StackItem>

package/src/components/OverviewPage/Cards/ToDo/ToDoCard.tsx

@@ -13,18 +13,15 @@ import {
   TextContent,
   TextVariants,
 } from '@patternfly/react-core';
-import { EnrollmentRequestList } from '@flightctl/types';
 import { useTranslation } from '../../../../hooks/useTranslation';
-import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
-import { EnrollmentRequestStatus, getApprovalStatus } from '../../../../utils/status/enrollmentRequest';
+import { usePendingEnrollmentRequestsCount } from '../../../../hooks/usePendingEnrollmentRequestsCount';
 import { Link, ROUTE } from '../../../../hooks/useNavigate';
 import ErrorAlert from '../../../ErrorAlert/ErrorAlert';
 
 const ToDoCard = () => {
   const { t } = useTranslation();
-  const [erList, loading, error] = useFetchPeriodically<EnrollmentRequestList>({
-    endpoint: 'enrollmentrequests',
-  });
+
+  const [pendingErCount, loading, error] = usePendingEnrollmentRequestsCount();
 
   let content: React.ReactNode;
   if (loading) {
@@ -36,15 +33,14 @@ const ToDoCard = () => {
   } else if (error) {
     content = <ErrorAlert error={error} />;
   } else {
-    const pendingErs = erList?.items.filter((er) => getApprovalStatus(er) === EnrollmentRequestStatus.Pending);
-    if (pendingErs?.length) {
+    if (pendingErCount) {
       content = (
         <List>
           <ListItem>
             <Split hasGutter>
-              <SplitItem isFilled>{t('{{ count }} devices pending approval', { count: pendingErs.length })}</SplitItem>
+              <SplitItem isFilled>{t('{{ count }} devices pending approval', { count: pendingErCount })}</SplitItem>
               <SplitItem>
-                <Link to={ROUTE.DEVICES}>{t('Review pending devices', { count: pendingErs.length })}</Link>
+                <Link to={ROUTE.DEVICES}>{t('Review pending devices', { count: pendingErCount })}</Link>
               </SplitItem>
             </Split>
           </ListItem>

package/src/components/OverviewPage/Overview.tsx

@@ -9,7 +9,7 @@ const Overview = () => {
       <GridItem>
         <StatusCard />
       </GridItem>
-      <GridItem span={4}>
+      <GridItem md={6} lg={4}>
         <ToDoCard />
       </GridItem>
     </Grid>

package/src/components/Repository/CreateRepository/CreateRepository.tsx

@@ -44,7 +44,7 @@ const CreateRepository = () => {
       try {
         const results = await Promise.allSettled([
           get<Repository>(`repositories/${repositoryId}`),
-          get<ResourceSyncList>(`resourcesyncs?repository=${repositoryId}`),
+          get<ResourceSyncList>(`resourcesyncs?fieldSelector=spec.repository=${repositoryId}`),
         ]);
 
         if (isPromiseFulfilled(results[0])) {
@@ -70,7 +70,7 @@ const CreateRepository = () => {
     const reload = async () => {
       try {
         setIsLoading(true);
-        const rsList = await get<ResourceSyncList>(`resourcesyncs?labelSelector=repository=${repositoryId}`);
+        const rsList = await get<ResourceSyncList>(`resourcesyncs?fieldSelector=spec.repository${repositoryId}`);
         setResourceSyncs(rsList.items);
         setRsError(undefined);
       } catch (e) {

package/src/components/Repository/RepositoryDetails/DeleteRepositoryModal.tsx

@@ -46,7 +46,7 @@ const DeleteRepositoryModal = ({ repositoryId, onClose, onDeleteSuccess }: Delet
 
   const loadRS = React.useCallback(async () => {
     try {
-      const resourceSyncs = await get<ResourceSyncList>(`resourcesyncs?repository=${repositoryId}`);
+      const resourceSyncs = await get<ResourceSyncList>(`resourcesyncs?fieldSelector=spec.repository=${repositoryId}`);
       setResourceSyncIds(resourceSyncs.items.map((rs) => rs.metadata.name || ''));
       setRsError(undefined);
     } catch (e) {

package/src/components/Repository/RepositoryList.tsx

@@ -136,6 +136,7 @@ const RepositoryTable = () => {
       </Toolbar>
       <Table
         aria-label={t('Repositories table')}
+        loading={loading}
         emptyFilters={filteredData.length === 0}
         emptyData={(repositoryList?.items.length || 0) === 0}
         isAllSelected={isAllSelected}

package/src/components/ResourceSync/RepositoryResourceSyncList.tsx

@@ -177,7 +177,7 @@ const CreateResourceSyncModal = ({
 
 const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string }) => {
   const [rsList, isLoading, error, refetch] = useFetchPeriodically<ResourceSyncList>({
-    endpoint: `resourcesyncs?repository=${repositoryId}`,
+    endpoint: `resourcesyncs?fieldSelector=spec.repository=${repositoryId}`,
   });
 
   const resourceSyncs = rsList?.items || [];
@@ -249,6 +249,7 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
       )}
       <Table
         aria-label={t('Resource syncs table')}
+        loading={isLoading}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
         columns={columns}

package/src/components/Table/Table.tsx

@@ -1,9 +1,19 @@
 import * as React from 'react';
-import { Bullseye, PageSection } from '@patternfly/react-core';
+import { Bullseye, PageSection, Spinner } from '@patternfly/react-core';
 import { Table as PFTable, Td, Th, ThProps, Thead, Tr } from '@patternfly/react-table';
 import { useTranslation } from '../../hooks/useTranslation';
 import WithHelperText from '../common/WithHelperText';
 
+export type ApiSortTableColumn = {
+  name: string;
+  sortableField?: string;
+  defaultSort?: boolean;
+  helperText?: string;
+  thProps?: Omit<ThProps, 'sort'> & {
+    ref?: React.Ref<HTMLTableCellElement> | undefined;
+  };
+};
+
 export type TableColumn<D> = {
   name: string;
   onSort?: (data: D[]) => D[];
@@ -17,8 +27,9 @@ export type TableColumn<D> = {
 type TableProps<D> = {
   columns: TableColumn<D>[];
   children: React.ReactNode;
-  emptyFilters: boolean;
-  emptyData: boolean;
+  loading: boolean;
+  emptyFilters?: boolean;
+  emptyData?: boolean;
   'aria-label': string;
   getSortParams: (columnIndex: number) => ThProps['sort'];
   onSelectAll?: (isSelected: boolean) => void;
@@ -30,6 +41,7 @@ type TableFC = <D>(props: TableProps<D>) => JSX.Element;
 const Table: TableFC = ({
   columns,
   children,
+  loading,
   emptyFilters,
   emptyData,
   getSortParams,
@@ -38,8 +50,10 @@ const Table: TableFC = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  if (emptyFilters && !emptyData) {
-    return (
+  if (emptyData && !emptyFilters) {
+    return loading ? (
+      <Spinner size="md" />
+    ) : (
       <PageSection variant="light">
         <Bullseye>{t('No resources are matching the current filters.')}</Bullseye>
       </PageSection>

package/src/components/charts/DonutChart.css

@@ -3,6 +3,11 @@
     justify-content: center;
 }
 
+.fctl-charts__donut-container {
+    width: 100%;
+    height: 100%;
+}
+
 .fctl-charts__title {
     height: 100%;
     color: var(--pf-v5-global--Color--200);

package/src/components/charts/DonutChart.tsx

@@ -75,7 +75,7 @@ const DonutChart = ({ data, title, helperText }: { data: Data[]; title: string;
     >
       <FlexItem className="fctl-charts__donut">
         <div style={{ height: '230px', width: '230px' }}>
-          <ChartContainer>
+          <ChartContainer className="fctl-charts__donut-container">
             <foreignObject x="0" y="0" width="230px" height="230px">
               <Flex
                 alignItems={{ default: 'alignItemsCenter' }}

package/src/components/modals/massModals/MassDeleteRepositoryModal/MassDeleteRepositoryModal.tsx

@@ -37,7 +37,9 @@ const MassDeleteRepositoryModal: React.FC<MassDeleteRepositoryModalProps> = ({
     const rsCount = {};
     const promises = repositories.map(async (r) => {
       const repositoryId = r.metadata.name || '';
-      const resourceSyncs = await get<ResourceSyncList>(`resourcesyncs?repository=${repositoryId}&limit=1`);
+      const resourceSyncs = await get<ResourceSyncList>(
+        `resourcesyncs?fieldSelector=spec.repository=${repositoryId}&limit=1`,
+      );
       rsCount[repositoryId] = getApiListCount(resourceSyncs);
     });
     await Promise.allSettled(promises);
@@ -51,7 +53,7 @@ const MassDeleteRepositoryModal: React.FC<MassDeleteRepositoryModalProps> = ({
     setProgress(0);
     const promises = repositories.map(async (r) => {
       const repositoryId = r.metadata.name || '';
-      const resourceSyncs = await get<ResourceSyncList>(`resourcesyncs?repository=${repositoryId}`);
+      const resourceSyncs = await get<ResourceSyncList>(`resourcesyncs?fieldSelector=spec.repository=${repositoryId}`);
       const rsyncPromises = resourceSyncs.items.map((rsync) => remove(`resourcesyncs/${rsync.metadata.name}`));
       const rsyncResults = await Promise.allSettled(rsyncPromises);
       const rejectedResults = rsyncResults.filter(isPromiseRejected);

package/src/hooks/useApiTableSort.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { ThProps } from '@patternfly/react-table';
+
+import { ApiSortTableColumn } from '../components/Table/Table';
+import { SortOrder } from '@flightctl/types';
+
+const getDefaultSortField = (columns: ApiSortTableColumn[]) => {
+  let defaultSortCol = columns.find((c) => c.defaultSort);
+  if (!defaultSortCol) {
+    defaultSortCol = columns.find((c) => !!c.sortableField);
+  }
+  return defaultSortCol?.sortableField || '';
+};
+
+export const useApiTableSort = (columns: ApiSortTableColumn[]) => {
+  const [activeSortField, setActiveSortField] = React.useState<string>(getDefaultSortField(columns));
+  const [activeSortDirection, setActiveSortDirection] = React.useState<SortOrder>(SortOrder.ASC);
+
+  const getSortParams = React.useCallback(
+    (columnIndex: number): ThProps['sort'] => {
+      const columnData = columns[columnIndex];
+      if (!columnData.sortableField) {
+        return undefined;
+      }
+
+      const activeColumnIndex = columns.findIndex((column) => column.sortableField === activeSortField);
+      return {
+        sortBy: {
+          index: activeColumnIndex === -1 ? 0 : activeColumnIndex,
+          direction: activeSortDirection === SortOrder.ASC ? 'asc' : 'desc',
+          defaultDirection: 'asc',
+        },
+        onSort: (_, index, direction) => {
+          const column = columns[index];
+          setActiveSortField(column.sortableField || '');
+          setActiveSortDirection(direction === 'asc' ? SortOrder.ASC : SortOrder.DESC);
+        },
+        columnIndex,
+      };
+    },
+    [columns, activeSortField, activeSortDirection],
+  );
+
+  return {
+    getSortParams,
+    sortField: activeSortField,
+    direction: activeSortField ? activeSortDirection : '',
+  };
+};

package/src/hooks/useNavigate.tsx

@@ -12,7 +12,7 @@ export enum ROUTE {
   FLEETS = 'FLEETS',
   FLEET_CREATE = 'FLEET_CREATE',
   FLEET_IMPORT = 'FLEET_IMPORT',
-  FLEET_DETAILS = ' FLEET_DETAILS',
+  FLEET_DETAILS = 'FLEET_DETAILS',
   FLEET_EDIT = 'FLEET_EDIT',
   DEVICES = 'DEVICES',
   DEVICE_DETAILS = 'DEVICE_DETAILS',
@@ -20,8 +20,8 @@ export enum ROUTE {
   REPOSITORIES = 'REPOSITORIES',
   REPO_CREATE = 'REPO_CREATE',
   REPO_EDIT = 'REPO_EDIT',
-  REPO_DETAILS = ' REPO_DETAILS',
-  RESOURCE_SYNC_DETAILS = ' RESOURCE_SYNC_DETAILS',
+  REPO_DETAILS = 'REPO_DETAILS',
+  RESOURCE_SYNC_DETAILS = 'RESOURCE_SYNC_DETAILS',
   ENROLLMENT_REQUESTS = 'ENROLLMENT_REQUESTS',
   ENROLLMENT_REQUEST_DETAILS = 'ENROLLMENT_REQUEST_DETAILS',
 }

package/src/hooks/usePendingEnrollmentRequestsCount.ts

@@ -0,0 +1,12 @@
+import { EnrollmentRequestList } from '@flightctl/types';
+
+import { useFetchPeriodically } from './useFetchPeriodically';
+import { getApiListCount } from '../utils/api';
+
+export const usePendingEnrollmentRequestsCount = (): [number, boolean, unknown] => {
+  const [erList, loading, error] = useFetchPeriodically<EnrollmentRequestList>({
+    endpoint: 'enrollmentrequests?fieldSelector=!status.approval.approved&limit=1',
+  });
+
+  return [getApiListCount(erList) || 0, loading, error];
+};

package/src/utils/query.ts

@@ -0,0 +1,29 @@
+import { FlightCtlLabel } from '../types/extraTypes';
+
+const addQueryConditions = (fieldSelectors: string[], fieldSelector: string, values?: string[]) => {
+  if (values?.length === 1) {
+    fieldSelectors.push(`${fieldSelector}=${values[0]}`);
+  } else if (values?.length) {
+    fieldSelectors.push(`${fieldSelector} in (${values.join(',')})`);
+  }
+};
+
+const addTextContainsCondition = (fieldSelectors: string[], fieldSelector: string, value: string) => {
+  fieldSelectors.push(`${fieldSelector} contains ${value}`); // contains operator
+};
+
+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);
+  }
+};
+
+export { addQueryConditions, addTextContainsCondition, setLabelParams };