flightctl · talhil-rh · Apr 1, 2026
diff --git a/libs/ui-components/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx b/libs/ui-components/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx
@@ -152,11 +152,13 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
       resourceTypeLabel={t('Devices')}
       nav={
         <TabsNav aria-label="Device details tabs" tabKeys={['details', 'catalog', 'yaml', 'terminal', 'events']}>
-          <Tab eventKey="details" title={t('Details')} />
-          {isEnrolled && <Tab eventKey="catalog" title={t('Catalog')} />}
-          <Tab eventKey="yaml" title={t('YAML')} />
-          {!hideTerminal && canOpenTerminal && <Tab eventKey="terminal" title={t('Terminal')} />}
-          <Tab eventKey="events" title={t('Events')} />
+          <Tab eventKey="details" title={t('Details')} data-testid="device-details-tab-details" />
+          {isEnrolled && <Tab eventKey="catalog" title={t('Catalog')} data-testid="device-details-tab-catalog" />}
+          <Tab eventKey="yaml" title={t('YAML')} data-testid="device-details-tab-yaml" />
+          {!hideTerminal && canOpenTerminal && (
+            <Tab eventKey="terminal" title={t('Terminal')} data-testid="device-details-tab-terminal" />
+          )}
+          <Tab eventKey="events" title={t('Events')} data-testid="device-details-tab-events" />
         </TabsNav>
       }
       actions={

diff --git a/libs/ui-components/src/components/Device/DeviceDetails/TerminalTab.tsx b/libs/ui-components/src/components/Device/DeviceDetails/TerminalTab.tsx
@@ -90,7 +90,7 @@ const TerminalTab = ({ device }: TerminalTabProps) => {
 
   if (isConnecting) {
     return (
-      <Bullseye>
+      <Bullseye data-testid="device-terminal-loading">
         <Spinner />
       </Bullseye>
     );
@@ -109,7 +109,11 @@ const TerminalTab = ({ device }: TerminalTabProps) => {
   }
 
   return (
-    <div ref={containerRef} style={{ height: containerHeight, display: 'flex', flexDirection: 'column' }}>
+    <div
+      ref={containerRef}
+      data-testid="device-terminal-panel"
+      style={{ height: containerHeight, display: 'flex', flexDirection: 'column' }}
+    >
       <Stack hasGutter style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
         {isClosed && (
           <Alert

diff --git a/libs/ui-components/src/components/Device/DevicesPage/DecommissionedDevicesTable.tsx b/libs/ui-components/src/components/Device/DevicesPage/DecommissionedDevicesTable.tsx
@@ -124,6 +124,7 @@ const DecommissionedDevicesTable = ({
         emptyData={devices.length === 0}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
+        data-testid="decommissioned-devices-table"
       >
         <Tbody>
           {devices.map((device, index) => (

diff --git a/libs/ui-components/src/components/Device/DevicesPage/EnrolledDeviceTableRow.tsx b/libs/ui-components/src/components/Device/DevicesPage/EnrolledDeviceTableRow.tsx
@@ -94,7 +94,7 @@ const EnrolledDeviceTableRow = ({
         </Td>
       )}
       {columnIds.includes('updateStatus') && (
-        <Td dataLabel={t('Update status')}>
+        <Td dataLabel={t('Update status')} data-testid={`device-update-status-${rowIndex}`}>
           <SystemUpdateStatus deviceStatus={device.status} />
         </Td>
       )}

diff --git a/libs/ui-components/src/components/Events/EventsCard.tsx b/libs/ui-components/src/components/Events/EventsCard.tsx
@@ -130,6 +130,7 @@ const EventsCard = ({ kind, objId, type = Event.type.WARNING }: EventListProps)
             <MenuToggle
               ref={toggleRef}
               isExpanded
+              data-testid="events-type-filter-toggle"
               onClick={() => {
                 setIsTypeOpen((open) => !open);
               }}
@@ -139,14 +140,20 @@ const EventsCard = ({ kind, objId, type = Event.type.WARNING }: EventListProps)
           )}
         >
           <SelectList>
-            <SelectOption value="all">{t('All types')}</SelectOption>
-            <SelectOption value={Event.type.NORMAL}>{t('Normal')}</SelectOption>
-            <SelectOption value={Event.type.WARNING}>{t('Warning')}</SelectOption>
+            <SelectOption value="all" data-testid="events-filter-option-all-types">
+              {t('All types')}
+            </SelectOption>
+            <SelectOption value={Event.type.NORMAL} data-testid="events-filter-option-normal">
+              {t('Normal')}
+            </SelectOption>
+            <SelectOption value={Event.type.WARNING} data-testid="events-filter-option-warning">
+              {t('Warning')}
+            </SelectOption>
           </SelectList>
         </Select>
       </CardBody>
       <Divider />
-      <CardBody isFilled className="fctl-events-container">
+      <CardBody isFilled className="fctl-events-container" data-testid="device-events-list">
         {content}
       </CardBody>
     </Card>

diff --git a/libs/ui-components/src/components/Repository/CreateRepository/CreateRepositoryForm.tsx b/libs/ui-components/src/components/Repository/CreateRepository/CreateRepositoryForm.tsx
@@ -443,10 +443,16 @@ const CreateRepositoryFormContent = ({ isEdit, onClose, options, children }: Cre
       </fieldset>
       {children}
       <ActionGroup>
-        <Button variant="primary" onClick={submitForm} isLoading={isSubmitting} isDisabled={isSubmitDisabled}>
+        <Button
+          variant="primary"
+          onClick={submitForm}
+          isLoading={isSubmitting}
+          isDisabled={isSubmitDisabled}
+          data-testid={isEdit ? 'repository-form-save' : 'repository-form-submit'}
+        >
           {isEdit ? t('Save') : t('Create repository')}
         </Button>
-        <Button variant="link" isDisabled={isSubmitting} onClick={onClose}>
+        <Button variant="link" isDisabled={isSubmitting} onClick={onClose} data-testid="repository-form-cancel">
           {t('Cancel')}
         </Button>
       </ActionGroup>

diff --git a/libs/ui-components/src/components/Repository/CreateRepository/CreateResourceSyncsForm.tsx b/libs/ui-components/src/components/Repository/CreateRepository/CreateResourceSyncsForm.tsx
@@ -120,6 +120,7 @@ const CreateResourceSyncsForm = ({
             variant="link"
             icon={<PlusCircleIcon />}
             iconPosition="left"
+            data-testid="repository-add-resource-sync-button"
             onClick={() =>
               arrayHelpers.push({
                 name: '',

diff --git a/...i-components/src/components/Repository/RepositoryDetails/RepositoryGeneralDetailsCard.tsx b/...i-components/src/components/Repository/RepositoryDetails/RepositoryGeneralDetailsCard.tsx
@@ -84,7 +84,11 @@ const DetailsTab = ({ repoDetails }: { repoDetails: Repository }) => {
             <DescriptionListTerm>{t('Status')}</DescriptionListTerm>
             <DescriptionListDescription>
               {' '}
-              {repoDetails ? <RepositoryStatus repository={repoDetails} /> : '-'}
+              {repoDetails ? (
+                <RepositoryStatus repository={repoDetails} data-testid="repository-details-sync-status" />
+              ) : (
+                '-'
+              )}
             </DescriptionListDescription>
           </DescriptionListGroup>
           <DescriptionListGroup>

diff --git a/libs/ui-components/src/components/Repository/RepositoryList.tsx b/libs/ui-components/src/components/Repository/RepositoryList.tsx
@@ -4,11 +4,13 @@ import {
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
+  MenuToggle,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/js/icons/ellipsis-v-icon';
 import { ActionsColumn, IAction, OnSelect, Tbody, Td, Tr } from '@patternfly/react-table';
 import { RepositoryIcon } from '@patternfly/react-icons/dist/js/icons/repository-icon';
 import { TFunction } from 'i18next';
@@ -43,7 +45,7 @@ const CreateRepositoryButton = ({ buttonText }: { buttonText?: string }) => {
 
   return (
     canCreate && (
-      <Button variant="primary" onClick={() => navigate(ROUTE.REPO_CREATE)}>
+      <Button variant="primary" data-testid="toolbar-create-repository" onClick={() => navigate(ROUTE.REPO_CREATE)}>
         {buttonText || t('Create a repository')}
       </Button>
     )
@@ -113,16 +115,18 @@ const RepositoryTableRow = ({
     actions.push({
       title: t('Edit repository'),
       onClick: () => navigate({ route: ROUTE.REPO_EDIT, postfix: repository.metadata.name }),
-    });
+      'data-testid': `repository-dropdown-edit-${rowIndex}`,
+    } as IAction);
   }
   if (canDelete) {
     actions.push({
       title: t('Delete repository'),
       onClick: () => setDeleteModalRepoId(repository.metadata.name),
-    });
+      'data-testid': `repository-dropdown-delete-${rowIndex}`,
+    } as IAction);
   }
   return (
-    <Tr>
+    <Tr data-testid={`repository-row-${rowIndex}`}>
       <Td
         select={{
           rowIndex,
@@ -131,7 +135,11 @@ const RepositoryTableRow = ({
         }}
       />
       <Td dataLabel={t('Name')}>
-        <ResourceLink id={repository.metadata.name as string} routeLink={ROUTE.REPO_DETAILS} />
+        <ResourceLink
+          id={repository.metadata.name as string}
+          routeLink={ROUTE.REPO_DETAILS}
+          data-testid={`repository-name-link-${rowIndex}`}
+        />
       </Td>
       <Td dataLabel={t('Type')}>{getRepoTypeLabel(t, repository.spec.type)}</Td>
       <Td dataLabel={t('URL')}>{getRepoUrlOrRegistry(repository.spec) || '-'}</Td>
@@ -140,8 +148,22 @@ const RepositoryTableRow = ({
       </Td>
       <Td dataLabel={t('Last transition')}>{getLastTransitionTimeText(repository, t).text}</Td>
       {!!actions.length && (
-        <Td isActionCell>
-          <ActionsColumn items={actions} />
+        <Td isActionCell data-testid={`repository-row-actions-${rowIndex}`}>
+          <ActionsColumn
+            items={actions}
+            actionsToggle={({ onToggle, isOpen, isDisabled, toggleRef }) => (
+              <MenuToggle
+                aria-label="Kebab toggle"
+                ref={toggleRef}
+                data-testid={`repository-row-kebab-${rowIndex}`}
+                onClick={onToggle}
+                isExpanded={isOpen}
+                isDisabled={isDisabled}
+                variant="plain"
+                icon={<EllipsisVIcon />}
+              />
+            )}
+          />
         </Td>
       )}
     </Tr>
@@ -185,14 +207,20 @@ const RepositoryTable = () => {
           </ToolbarItem>
           {canDelete && (
             <ToolbarItem>
-              <Button isDisabled={!hasSelectedRows} onClick={() => setIsMassDeleteModalOpen(true)} variant="secondary">
+              <Button
+                isDisabled={!hasSelectedRows}
+                onClick={() => setIsMassDeleteModalOpen(true)}
+                variant="secondary"
+                data-testid="toolbar-delete-repositories"
+              >
                 {t('Delete repositories')}
               </Button>
             </ToolbarItem>
           )}
         </ToolbarContent>
       </Toolbar>
       <Table
+        data-testid="repositories-table"
         aria-label={t('Repositories table')}
         loading={isUpdating}
         hasFilters={!!search}

diff --git a/libs/ui-components/src/components/Status/RepositoryStatus.tsx b/libs/ui-components/src/components/Status/RepositoryStatus.tsx
@@ -8,7 +8,13 @@ import { useTranslation } from '../../hooks/useTranslation';
 import { StatusDisplayContent } from './StatusDisplay';
 import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
 
-const RepositoryStatus = ({ repository }: { repository: Repository }) => {
+const RepositoryStatus = ({
+  repository,
+  'data-testid': dataTestId,
+}: {
+  repository: Repository;
+  'data-testid'?: string;
+}) => {
   const statusInfo = getRepositorySyncStatus(repository);
   const statusType = statusInfo.status;
   const { t } = useTranslation();
@@ -44,6 +50,7 @@ const RepositoryStatus = ({ repository }: { repository: Repository }) => {
       level={status}
       customIcon={customIcon}
       message={statusInfo.message}
+      data-testid={dataTestId}
     />
   );
 };

diff --git a/libs/ui-components/src/components/Status/StatusDisplay.tsx b/libs/ui-components/src/components/Status/StatusDisplay.tsx
@@ -15,6 +15,7 @@ type StatusLabelProps = {
   level: StatusLevel;
   customIcon?: React.ComponentClass<SVGIconProps>;
   customColor?: string;
+  'data-testid'?: string;
 };
 
 export const StatusDisplayContent = ({
@@ -24,6 +25,7 @@ export const StatusDisplayContent = ({
   level,
   customIcon,
   customColor,
+  'data-testid': dataTestId,
 }: StatusLabelProps) => {
   const overrideStatus = level === 'unknown' || (level === 'custom' && customColor);
   const IconComponent = customIcon || getDefaultStatusIcon(level);
@@ -47,15 +49,15 @@ export const StatusDisplayContent = ({
         className="fctl-status-display-content__popover"
         hasAutoWidth={false}
       >
-        <Button variant="link" isInline icon={icon}>
+        <Button variant="link" isInline icon={icon} data-testid={dataTestId}>
           {label}
         </Button>
       </Popover>
     );
   }
 
   return (
-    <Flex className="ftcl_status-label">
+    <Flex className="ftcl_status-label" data-testid={dataTestId}>
       <FlexItem>{icon}</FlexItem>
       <FlexItem>{label}</FlexItem>
     </Flex>

diff --git a/libs/ui-components/src/components/form/RichValidationTextField.tsx b/libs/ui-components/src/components/form/RichValidationTextField.tsx
@@ -96,6 +96,7 @@ const RichValidationTextField = React.forwardRef(
               id={fieldId}
               ref={ref}
               isRequired={isRequired}
+              data-testid={fieldId}
               aria-describedby={`${fieldId}-helper`}
               onChange={async (event, val) => {
                 !popoverOpen && setPopoverOpen(true);
@@ -143,6 +144,7 @@ const RichValidationTextField = React.forwardRef(
                 }
                 variant="plain"
                 aria-label="Validation"
+                data-testid={`${fieldId}-validation-button`}
               />
             </Popover>
           </InputGroupItem>
@@ -162,7 +164,7 @@ const RichValidationTextFieldWrapper = React.forwardRef(
     if (isDisabled) {
       return (
         <FormGroup label={rest?.['aria-label']} isRequired={rest.isRequired}>
-          <TextInput value={field.value} {...rest} isDisabled />
+          <TextInput value={field.value} {...rest} isDisabled data-testid={`rich-validation-field-${fieldName}`} />
         </FormGroup>
       );
     }

diff --git a/libs/ui-components/src/components/form/TextField.tsx b/libs/ui-components/src/components/form/TextField.tsx
@@ -33,6 +33,7 @@ const TextField = React.forwardRef(
           {...props}
           ref={ref}
           id={fieldId}
+          data-testid={fieldId}
           onChange={onChange}
           validated={hasError ? 'error' : 'default'}
         />

diff --git a/libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx b/libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx
@@ -63,7 +63,13 @@ const ApproveDeviceForm: React.FC<ApproveDeviceFormProps> = ({ enrollmentRequest
         >
           {t('Approve')}
         </Button>
-        <Button key="cancel" variant="link" onClick={() => onClose()} isDisabled={isSubmitting}>
+        <Button
+          key="cancel"
+          variant="link"
+          onClick={() => onClose()}
+          isDisabled={isSubmitting}
+          data-testid="approve-device-form-cancel"
+        >
           {t('Cancel')}
         </Button>
       </ActionGroup>

diff --git a/.../src/components/modals/massModals/MassDeleteRepositoryModal/MassDeleteRepositoryModal.tsx b/.../src/components/modals/massModals/MassDeleteRepositoryModal/MassDeleteRepositoryModal.tsx
@@ -171,6 +171,7 @@ const MassDeleteRepositoryModal: React.FC<MassDeleteRepositoryModalProps> = ({
           onClick={deleteRepositories}
           isLoading={isLoading || isDeleting}
           isDisabled={isLoading || isDeleting}
+          data-testid="modal-delete-repositories-confirm"
         >
           {t('Delete repositories')}
         </Button>