@flightctl/ui-components 0.0.5 → 0.4.0-rc1

package/src/components/form/validations.ts

@@ -16,6 +16,7 @@ import {
 } from '../../types/deviceSpec';
 import { labelToString } from '../../utils/labels';
 import { ApplicationFormSpec } from '../Device/EditDeviceWizard/types';
+import { SystemdUnitFormValue } from '../Device/SystemdUnitsModal/TrackSystemdUnitsForm';
 
 type UnvalidatedLabel = Partial<FlightCtlLabel>;
 
@@ -32,6 +33,10 @@ const K8S_DNS_SUBDOMAIN_START_END = /^[a-z0-9](.*[a-z0-9])?$/;
 const K8S_DNS_SUBDOMAIN_ALLOWED_CHARACTERS = /^[a-z0-9.-]*$/;
 const K8S_DNS_SUBDOMAIN_VALUE_MAX_LENGTH = 253;
 
+// https://issues.redhat.com/browse/MGMT-18349 to make the validation more robust
+const BASIC_DEVICE_OS_IMAGE_REGEXP = /^[a-zA-Z0-9.\-\/:@_+]*$/;
+const BASIC_FLEET_OS_IMAGE_REGEXP = /^[a-zA-Z0-9.\-\/:@_+{}\s]*$/;
+
 const absolutePathRegex = /^\/.*$/;
 export const MAX_TARGET_REVISION_LENGTH = 244;
 
@@ -185,6 +190,14 @@ export const validKubernetesLabelValue = (
 export const maxLengthString = (t: TFunction, props: { maxLength: number; fieldName: string }) =>
   Yup.string().max(props.maxLength, t('{{ fieldName }} must not exceed {{ maxLength }} characters', props));
 
+export const validOsImage = (t: TFunction, { isFleet }: { isFleet: boolean }) =>
+  maxLengthString(t, { fieldName: t('System image'), maxLength: 2048 }).matches(
+    isFleet ? BASIC_FLEET_OS_IMAGE_REGEXP : BASIC_DEVICE_OS_IMAGE_REGEXP,
+    isFleet
+      ? t('System image contains invalid characters')
+      : t('System image contains invalid characters. Template variables are not allowed.'),
+  );
+
 export const validLabelsSchema = (t: TFunction) =>
   Yup.array()
     .of(
@@ -302,6 +315,7 @@ export const validConfigTemplatesSchema = (t: TFunction) =>
         } else if (isHttpConfigTemplate(value)) {
           return Yup.object<HttpConfigTemplate>().shape({
             type: Yup.string().required(t('Source type is required.')),
+            repository: Yup.string().required(t('Repository is required.')),
             name: validKubernetesDnsSubdomain(t, { isRequired: true }),
             filePath: Yup.string()
               .required(t('File path is required.'))
@@ -332,7 +346,7 @@ export const validConfigTemplatesSchema = (t: TFunction) =>
                     t('File path must be unique.'),
                     (path) => !path || value.files.filter((file) => file.path === path).length == 1,
                   ),
-                content: Yup.string().required(t('File content is required.')),
+                content: Yup.string(),
               }),
             ),
           });
@@ -345,33 +359,47 @@ export const validConfigTemplatesSchema = (t: TFunction) =>
       }),
     );
 
-export const deviceSystemdUnitsValidationSchema = (t: TFunction) =>
-  Yup.object({
-    matchPatterns: Yup.array()
-      .max(
-        SYSTEMD_UNITS_MAX_PATTERNS,
-        t('The maximum number of systemd units is {{maxSystemUnits}}.', { maxSystemUnits: SYSTEMD_UNITS_MAX_PATTERNS }),
-      )
-      .of(Yup.string().required('Unit name is required.'))
-      .test('invalid patterns', (patterns: string[] | undefined, testContext) => {
-        // TODO analyze https://github.com/systemd/systemd/blob/9cebda59e818cdb89dc1e53ab5bb51b91b3dc3ff/src/basic/unit-name.c#L42
-        // and adjust the regular expression and / or the validation to accommodate for it
-        const invalidPatterns = (patterns || []).filter((pattern) => {
+export const systemdUnitListValidationSchema = (t: TFunction) =>
+  Yup.array()
+    .max(
+      SYSTEMD_UNITS_MAX_PATTERNS,
+      t('The maximum number of systemd units is {{maxSystemUnits}}.', { maxSystemUnits: SYSTEMD_UNITS_MAX_PATTERNS }),
+    )
+    .of(
+      Yup.object<SystemdUnitFormValue>().shape({
+        pattern: Yup.string().required('Service name is required'),
+        exists: Yup.boolean().required(),
+      }),
+    )
+    .test('invalid patterns', (systemdUnits: SystemdUnitFormValue[] | undefined, testContext) => {
+      // TODO analyze https://github.com/systemd/systemd/blob/9cebda59e818cdb89dc1e53ab5bb51b91b3dc3ff/src/basic/unit-name.c#L42
+      // and adjust the regular expression and / or the validation to accommodate for it
+      const invalidSystemdUnits = (systemdUnits || [])
+        .map((unit) => unit.pattern)
+        .filter((pattern) => {
           return pattern.length > SYSTEMD_UNITS_MAX_PATTERNS || !SYSTEMD_PATTERNS_REGEXP.test(pattern);
         });
-        if (invalidPatterns.length === 0) {
-          return true;
-        }
-        return testContext.createError({
-          message: t('Invalid systemd unit names: {{invalidPatterns}}', {
-            invalidPatterns: invalidPatterns.join(', '),
-          }),
-        });
-      })
-      .test('unique patterns', t('Systemd unit names must be unique'), (patterns: string[] | undefined) => {
-        const uniqueKeys = new Set(patterns || []);
+      if (invalidSystemdUnits.length === 0) {
+        return true;
+      }
+      return testContext.createError({
+        message: t('Invalid systemd service names: {{invalidPatterns}}', {
+          invalidPatterns: invalidSystemdUnits.join(', '),
+        }),
+      });
+    })
+    .test(
+      'unique patterns',
+      t('Systemd service names must be unique'),
+      (patterns: SystemdUnitFormValue[] | undefined) => {
+        const uniqueKeys = new Set(patterns?.map((p) => p.pattern) || []);
         return uniqueKeys.size === (patterns?.length || 0);
-      }),
+      },
+    );
+
+export const deviceSystemdUnitsValidationSchema = (t: TFunction) =>
+  Yup.object({
+    systemdUnits: systemdUnitListValidationSchema(t),
   });
 
 export const deviceApprovalValidationSchema = (t: TFunction, conf: { isSingleDevice: boolean }) =>

package/src/components/modals/ApproveDeviceModal/ApproveDeviceModal.tsx

@@ -14,15 +14,13 @@ import { useTranslation } from '../../../hooks/useTranslation';
 import { deviceApprovalValidationSchema } from '../../form/validations';
 
 import { fromAPILabel, toAPILabel } from '../../../utils/labels';
-import { useAppContext } from '../../../hooks/useAppContext';
 
 type DeviceEnrollmentModalProps = Omit<ApproveDeviceFormProps, 'error'>;
 
 const DeviceEnrollmentModal: React.FC<DeviceEnrollmentModalProps> = ({ enrollmentRequest, onClose }) => {
   const { t } = useTranslation();
-  const { post } = useFetch();
+  const { put } = useFetch();
   const [error, setError] = React.useState<string>();
-  const { user } = useAppContext();
   return (
     <Formik<ApproveDeviceFormValues>
       initialValues={{
@@ -38,10 +36,9 @@ const DeviceEnrollmentModal: React.FC<DeviceEnrollmentModalProps> = ({ enrollmen
         }
 
         try {
-          await post<EnrollmentRequestApproval>(`enrollmentrequests/${enrollmentRequest.metadata.name}/approval`, {
+          await put<EnrollmentRequestApproval>(`enrollmentrequests/${enrollmentRequest.metadata.name}/approval`, {
             approved: true,
             labels: deviceLabels,
-            approvedBy: user,
           });
           onClose(true);
         } catch (e) {

package/src/components/modals/EditLabelsModal/EditLabelsForm.tsx

@@ -23,6 +23,7 @@ type EditLabelsFormValues = {
 type EditLabelsFormContentProps = {
   isSubmitting: FormikProps<EditLabelsFormValues>['isSubmitting'];
   submitForm: (values: EditLabelsFormValues) => Promise<string>;
+  canEdit: boolean;
 };
 
 const getValidationSchema = (t: TFunction) => {
@@ -33,7 +34,7 @@ const getValidationSchema = (t: TFunction) => {
 
 const delayResponse = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-const EditLabelsFormContent = ({ isSubmitting, submitForm }: EditLabelsFormContentProps) => {
+const EditLabelsFormContent = ({ isSubmitting, submitForm, canEdit }: EditLabelsFormContentProps) => {
   const { t } = useTranslation();
   const [submitError, setSubmitError] = React.useState<string>();
 
@@ -53,8 +54,9 @@ const EditLabelsFormContent = ({ isSubmitting, submitForm }: EditLabelsFormConte
       <LabelsField
         name="labels"
         addButtonText={isSubmitting ? t('Saving...') : undefined}
-        isFormEditable={!isSubmitting}
+        isLoading={isSubmitting}
         onChangeCallback={debouncedSubmit}
+        canEdit={canEdit}
       />
       {submitError && <Alert isInline title={submitError} variant="danger" />}
     </FlightCtlForm>
@@ -64,9 +66,10 @@ const EditLabelsFormContent = ({ isSubmitting, submitForm }: EditLabelsFormConte
 type EditLabelsFormProps = {
   device: Device;
   onDeviceUpdate: () => void;
+  canEdit: boolean;
 };
 
-const EditLabelsForm = ({ device, onDeviceUpdate }: EditLabelsFormProps) => {
+const EditLabelsForm = ({ device, onDeviceUpdate, canEdit }: EditLabelsFormProps) => {
   const { t } = useTranslation();
   const { patch } = useFetch();
 
@@ -93,7 +96,9 @@ const EditLabelsForm = ({ device, onDeviceUpdate }: EditLabelsFormProps) => {
       }}
       validationSchema={getValidationSchema(t)}
     >
-      {({ isSubmitting, submitForm }) => <EditLabelsFormContent isSubmitting={isSubmitting} submitForm={submitForm} />}
+      {({ isSubmitting, submitForm }) => (
+        <EditLabelsFormContent canEdit={canEdit} isSubmitting={isSubmitting} submitForm={submitForm} />
+      )}
     </Formik>
   );
 };

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

@@ -49,8 +49,7 @@ const MassApproveDeviceModal: React.FC<MassApproveDeviceModalProps> = ({
   const [totalProgress, setTotalProgress] = React.useState(0);
   const [errors, setErrors] = React.useState<string[]>();
   const {
-    user,
-    fetch: { post },
+    fetch: { put },
   } = useAppContext();
 
   const approveEnrollments = async (values: MassApproveDeviceFormValues) => {
@@ -63,10 +62,9 @@ const MassApproveDeviceModal: React.FC<MassApproveDeviceModalProps> = ({
         labels.alias = aliasLabel;
       }
 
-      await post<EnrollmentRequestApproval>(`enrollmentrequests/${r.metadata.name}/approval`, {
+      await put<EnrollmentRequestApproval>(`enrollmentrequests/${r.metadata.name}/approval`, {
         approved: true,
         labels,
-        approvedBy: user,
       });
       setProgress((p) => p + 1);
     });

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

@@ -1,12 +1,15 @@
-import { useFetch } from '../../../../hooks/useFetch';
-import { getErrorMessage } from '../../../../utils/error';
+import * as React from 'react';
 import { Alert, Button, Modal, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+
 import { Repository, ResourceSyncList } from '@flightctl/types';
-import * as React from 'react';
+
+import { useFetch } from '../../../../hooks/useFetch';
+import { getErrorMessage } from '../../../../utils/error';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import { isPromiseRejected } from '../../../../types/typeUtils';
 import { getApiListCount } from '../../../../utils/api';
+import { commonQueries } from '../../../../utils/query';
 
 type MassDeleteRepositoryModalProps = {
   onClose: VoidFunction;
@@ -37,7 +40,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>(
+        commonQueries.getResourceSyncsByRepo(repositoryId, { limit: 1 }),
+      );
       rsCount[repositoryId] = getApiListCount(resourceSyncs);
     });
     await Promise.allSettled(promises);
@@ -51,7 +56,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>(commonQueries.getResourceSyncsByRepo(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/constants.ts

@@ -1,4 +1,5 @@
 const APP_TITLE = 'Device management service';
 const API_VERSION = 'v1alpha1';
+const PAGE_SIZE = 15;
 
-export { APP_TITLE, API_VERSION };
+export { APP_TITLE, API_VERSION, PAGE_SIZE };

package/src/hooks/useAccessReview.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { useAppContext } from './useAppContext';
+import { getErrorMessage } from '../utils/error';
+import { RESOURCE, VERB } from '../types/rbac';
+
+export type AccessReviewResult = [boolean, boolean, string | undefined];
+
+export const useAccessReview = (kind: RESOURCE, verb: VERB): AccessReviewResult => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<string>();
+  const [isAllowed, setIsAllowed] = React.useState(false);
+
+  const {
+    fetch: { checkPermissions },
+  } = useAppContext();
+  React.useEffect(() => {
+    const doItAsync = async () => {
+      setIsLoading(true);
+      try {
+        const allowed = await checkPermissions(kind, verb);
+        setIsAllowed(allowed);
+      } catch (err) {
+        setError(getErrorMessage(err));
+        setIsAllowed(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    doItAsync();
+  }, [kind, verb, checkPermissions]);
+
+  return [isAllowed, isLoading, error];
+};

package/src/hooks/useAppContext.tsx

@@ -12,8 +12,9 @@ import {
   useParams,
   useSearchParams,
 } from 'react-router-dom';
-import { ROUTE } from './useNavigate';
 import { PatchRequest } from '@flightctl/types';
+import { ROUTE } from './useNavigate';
+import { RESOURCE, VERB } from '../types/rbac';
 
 export const appRoutes = {
   [ROUTE.ROOT]: '/',
@@ -39,8 +40,6 @@ export type PromptFC = React.FC<{ message: string }>;
 
 export type AppContextProps = {
   appType: 'standalone' | 'ocp' | 'aap';
-  qcow2ImgUrl: string | undefined;
-  bootcImgUrl: string | undefined;
   user?: string; // auth?.user?.profile.preferred_username
   i18n: {
     transNamespace?: string;
@@ -63,8 +62,10 @@ export type AppContextProps = {
     getWsEndpoint: () => { wsEndpoint: string; protocols: string[] };
     get: <R>(kind: string, abortSignal?: AbortSignal) => Promise<R>;
     post: <R>(kind: string, data: R, abortSignal?: AbortSignal) => Promise<R>;
+    put: <R>(kind: string, data: R, abortSignal?: AbortSignal) => Promise<R>;
     remove: <R>(kind: string, abortSignal?: AbortSignal) => Promise<R>;
     patch: <R>(kind: string, patches: PatchRequest, abortSignal?: AbortSignal) => Promise<R>;
+    checkPermissions: (resource: RESOURCE, verb: VERB) => Promise<boolean>;
   };
   metrics: {
     get: <R>(query: string, abortSignal?: AbortSignal) => Promise<R>;
@@ -73,8 +74,6 @@ export type AppContextProps = {
 
 export const AppContext = React.createContext<AppContextProps>({
   appType: 'standalone',
-  qcow2ImgUrl: undefined,
-  bootcImgUrl: undefined,
   router: {
     useNavigate,
     Link,
@@ -96,8 +95,10 @@ export const AppContext = React.createContext<AppContextProps>({
     getWsEndpoint: () => ({ wsEndpoint: '', protocols: [''] }),
     get: async () => ({}) as any,
     post: async () => ({}) as any,
+    put: async () => ({}) as any,
     remove: async () => ({}) as any,
     patch: async () => ({}) as any,
+    checkPermissions: async () => true,
   },
   metrics: {
     get: async () => ({}) as any,

package/src/hooks/useFetchPeriodically.ts

@@ -8,6 +8,7 @@ const TIMEOUT = 10000;
 
 export const useFetchPeriodically = <R>(
   query: FlightControlQuery,
+  onFetchComplete?: (data: R) => void,
 ): [R | undefined, boolean, unknown, VoidFunction, boolean] => {
   const [isLoading, setIsLoading] = React.useState(true);
   const [isUpdating, setIsUpdating] = React.useState(false);
@@ -48,6 +49,9 @@ export const useFetchPeriodically = <R>(
             // eslint-disable-next-line
             setData(isAPI ? data : (data as any).data.result);
             setError(undefined);
+            if (isAPI && onFetchComplete) {
+              onFetchComplete(data as R);
+            }
           } catch (err) {
             // aborting fetch trows 'AbortError', we can ignore it
             if (abortController.signal.aborted) {

package/src/hooks/useFleetImportAccessReview.ts

@@ -0,0 +1,8 @@
+import { AccessReviewResult, useAccessReview } from './useAccessReview';
+import { RESOURCE, VERB } from '../types/rbac';
+
+export const useFleetImportAccessReview = (): AccessReviewResult => {
+  const canCreateRs = useAccessReview(RESOURCE.RESOURCE_SYNC, VERB.CREATE);
+  const canReadRepo = useAccessReview(RESOURCE.REPOSITORY, VERB.LIST);
+  return [canCreateRs[0] && canReadRepo[0], canCreateRs[1] || canReadRepo[1], canCreateRs[2] || canReadRepo[2]];
+};

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/hooks/useTablePagination.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import { ApiList } from '../utils/api';
+import { PAGE_SIZE } from '../constants';
+
+export type PaginationDetails = {
+  onPageFetched: (list: ApiList<unknown>) => void;
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  nextContinue: string;
+  itemCount: number;
+};
+
+export const useTablePagination = (): PaginationDetails => {
+  const [currentPage, setCurrentPage] = React.useState<number>(1);
+  const [continueTokens, setContinueTokens] = React.useState<string[]>([]);
+  const [itemCount, setItemCount] = React.useState<number>(0);
+
+  const nextContinue = currentPage <= 1 ? '' : continueTokens[currentPage - 2];
+
+  const onPageFetched = React.useCallback(
+    (apiList: ApiList<unknown>) => {
+      const prevItems = (currentPage - 1) * PAGE_SIZE;
+      setItemCount(prevItems + (apiList?.items.length || 0) + (apiList.metadata.remainingItemCount || 0));
+
+      const nextToken = apiList.metadata?.continue || '';
+      if (currentPage === 1) {
+        // Always reset the list when at first page
+        setContinueTokens([nextToken]);
+      } else if (continueTokens.length < currentPage) {
+        // Visiting current page for the first time
+        setContinueTokens((prevList: string[]) => prevList.concat(nextToken));
+      } else {
+        // Re-visiting current page, token is updated in case the list of items changed
+        setContinueTokens((prevList: string[]) =>
+          prevList.map((token, index) => (index === currentPage - 1 ? nextToken : token)),
+        );
+      }
+    },
+    [setContinueTokens, continueTokens, setItemCount, currentPage],
+  );
+
+  return { onPageFetched, currentPage, setCurrentPage, nextContinue, itemCount };
+};

package/src/hooks/useWebSocket.ts

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { useTranslation } from './useTranslation';
 import { useAppContext } from './useAppContext';
 
-export const useWebSocket = <T extends string>(
+export const useWebSocket = <T>(
   endpoint: string,
-  onMsgReceived: (msg: T) => void,
+  onMsgReceived: (msg: T) => Promise<void>,
 ): {
-  sendMessage: (msg: T) => void;
+  sendMessage: (msg: string) => void;
   isConnecting: boolean;
   isClosed: boolean;
   error: unknown;
@@ -22,7 +22,7 @@ export const useWebSocket = <T extends string>(
   const [error, setError] = React.useState<unknown>();
   const [reset, setReset] = React.useState<number>(0);
 
-  const sendMessage = React.useCallback((data: T) => {
+  const sendMessage = React.useCallback((data: string) => {
     wsRef.current?.send(data);
   }, []);
 

package/src/links.ts

@@ -0,0 +1,5 @@
+export const CREATING_APPLICATIONS_LINK =
+  'https://github.com/flightctl/flightctl/blob/main/docs/user/managing-devices.md#creating-applications';
+
+export const USING_TEMPLATE_VARIABLES_LINK =
+  'https://github.com/flightctl/flightctl/blob/main/docs/user/managing-fleets.md#defining-device-templates';

package/src/types/rbac.ts

@@ -0,0 +1,18 @@
+export enum VERB {
+  CREATE = 'create',
+  DELETE = 'delete',
+  LIST = 'list',
+  GET = 'get',
+  PATCH = 'patch',
+  POST = 'post',
+}
+
+export enum RESOURCE {
+  FLEET = 'fleets',
+  DEVICE = 'devices',
+  DEVICE_CONSOLE = 'devices/console',
+  REPOSITORY = 'repositories',
+  RESOURCE_SYNC = 'resourcesyncs',
+  ENROLLMENT_REQUEST = 'enrollmentrequests',
+  ENROLLMENT_REQUEST_APPROVAL = 'enrollmentrequests/approval',
+}

package/src/utils/api.ts

@@ -42,12 +42,12 @@ const getRequestQueryString = (queryObj: FlightControlQuery) => {
   return getMetricsQueryString(queryObj);
 };
 
-interface ApiList {
-  items: Array<unknown>;
+export interface ApiList<R> {
+  items: Array<R>;
   metadata: ListMeta;
 }
 
-const getApiListCount = (listResponse: ApiList | undefined): number | undefined => {
+const getApiListCount = <T>(listResponse: ApiList<T> | undefined): number | undefined => {
   if (listResponse === undefined) {
     return undefined;
   }

package/src/utils/labels.ts

@@ -22,6 +22,9 @@ export const toAPILabel = (labels: FlightCtlLabel[]): Record<string, string> =>
     {} as Record<string, string>,
   );
 
+// Used to force the API to perform an exact match check for labels
+export const labelToExactApiMatchString = (label: FlightCtlLabel) => `${label.key}=${label.value || ''}`;
+
 export const labelToString = (label: FlightCtlLabel) => `${label.key}${label.value ? `=${label.value}` : ''}`;
 
 export const stringToLabel = (labelStr: string): FlightCtlLabel => {
@@ -31,10 +34,3 @@ export const stringToLabel = (labelStr: string): FlightCtlLabel => {
     value: labelParts.length > 1 ? labelParts[1] : undefined,
   };
 };
-
-export const filterDevicesLabels = (allLabels: FlightCtlLabel[], selectedLabels: FlightCtlLabel[], filter: string) => {
-  const filteredLabels = [...new Set(allLabels.concat(selectedLabels).map(labelToString))]
-    .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' })) // ignore case
-    .filter((label) => label.includes(filter));
-  return filteredLabels;
-};

package/src/utils/query.ts

@@ -0,0 +1,70 @@
+import { FlightCtlLabel } from '../types/extraTypes';
+import { labelToExactApiMatchString } from './labels';
+
+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);
+  }
+};
+
+type CommonQueryOptions = {
+  limit: number | undefined;
+};
+
+export const commonQueries = {
+  // We can't specify a sorting, as every entity has a default sorting which is always applied implicitly.
+  getDevicesWithExactLabelMatching: (labels: FlightCtlLabel[], options?: CommonQueryOptions) => {
+    const searchParams = new URLSearchParams();
+
+    // By default (without the "equal" sign), the API returns a partial match, but only on the label keys
+    // To prevent this confusing behaviour, we query for exact matches in all cases (for both keys and values)
+    const exactLabelsMatch = labels.map(labelToExactApiMatchString).join(',');
+    searchParams.set('labelSelector', exactLabelsMatch);
+
+    if (options?.limit) {
+      searchParams.set('limit', `${options.limit}`);
+    }
+    return `devices?${searchParams.toString()}`;
+  },
+  getFleetsWithNameMatching: (matchName: string, options?: CommonQueryOptions) => {
+    const searchParams = new URLSearchParams();
+    searchParams.set('fieldSelector', `metadata.name contains ${matchName}`);
+
+    if (options?.limit) {
+      searchParams.set('limit', `${options.limit}`);
+    }
+    return `fleets?${searchParams.toString()}`;
+  },
+  getResourceSyncsByRepo: (repositoryId: string, options?: CommonQueryOptions) => {
+    const searchParams = new URLSearchParams();
+    searchParams.set('fieldSelector', `spec.repository=${repositoryId}`);
+
+    if (options?.limit) {
+      searchParams.set('limit', `${options.limit}`);
+    }
+    return `resourcesyncs?${searchParams.toString()}`;
+  },
+  getRepositoryById: (repositoryId: string) => `repositories/${repositoryId}`,
+};
+
+export { addQueryConditions, addTextContainsCondition, setLabelParams };

package/src/utils/search.ts

@@ -1,7 +1,7 @@
 import fuzzy from 'fuzzysearch';
 
 // Must be an even number for "getSearchResultsCount" to work
-const MAX_TOTAL_SEARCH_RESULTS = 10;
+export const MAX_TOTAL_SEARCH_RESULTS = 10;
 
 export const fuzzySeach = (filter: string | undefined, value?: string): boolean => {
   if (!filter) {

package/src/utils/status/devices.ts

@@ -18,6 +18,7 @@ export enum FilterSearchParams {
   AppStatus = 'appSt',
   UpdatedStatus = 'updSt',
   Label = 'label',
+  NameOrAlias = 'nameOrAlias',
 }
 
 export type DeviceSummaryStatus =

package/dist/src/components/DetailsPage/Tables/SystemdDetailsTable.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-interface DeviceSystemdUnitStatus {
-    name: string;
-    status: string;
-}
-type SystemdDetailsTableProps = {
-    matchPatterns?: Array<string>;
-    systemdUnits: DeviceSystemdUnitStatus[] | undefined;
-};
-declare const SystemdDetailsTable: ({ matchPatterns, systemdUnits }: SystemdDetailsTableProps) => React.JSX.Element;
-export default SystemdDetailsTable;
-//# sourceMappingURL=SystemdDetailsTable.d.ts.map