@flightctl/ui-components 1.0.2 → 1.1.0-rc4

package/src/components/form/validations.ts

@@ -1,6 +1,7 @@
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
 import countBy from 'lodash/countBy';
+import yaml from 'js-yaml';
 
 import { AppType, ImagePullPolicy } from '@flightctl/types';
 import { FlightCtlLabel } from '../../types/extraTypes';
@@ -9,29 +10,25 @@ import {
   AppSpecType,
   BatchForm,
   BatchLimitType,
-  ComposeImageAppForm,
-  ComposeInlineAppForm,
+  ComposeAppForm,
   DisruptionBudgetForm,
   GitConfigTemplate,
+  HelmAppForm,
   HttpConfigTemplate,
   InlineConfigTemplate,
+  InlineFileForm,
   KubeSecretTemplate,
   PortMapping,
-  QuadletImageAppForm,
-  QuadletInlineAppForm,
+  QuadletAppForm,
   RolloutPolicyForm,
   SpecConfigTemplate,
   SystemdUnitFormValue,
   UpdatePolicyForm,
   getAppIdentifier,
-  isComposeImageAppForm,
   isGitConfigTemplate,
   isHttpConfigTemplate,
   isInlineConfigTemplate,
   isKubeSecretTemplate,
-  isQuadletImageAppForm,
-  isQuadletInlineAppForm,
-  isSingleContainerAppForm,
 } from '../../types/deviceSpec';
 import { labelToString } from '../../utils/labels';
 import { UpdateScheduleMode } from '../../utils/time';
@@ -50,9 +47,9 @@ 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 APPLICATION_IMAGE_REGEXP = BASIC_DEVICE_OS_IMAGE_REGEXP;
+const OCI_IMAGE_FULL_REGEXP = /^(?![./_])[a-zA-Z0-9.\-\/:@_+]*$/;
+// Accepts all characters from the above regex, but it rejects leading dot, slash, or underscore
+const OCI_IMAGE_ALLOWED_CHARS_REGEXP = /^[a-zA-Z0-9.\-\/:@_+]*$/;
 const APPLICATION_NAME_REGEXP = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/;
 const APPLICATION_VAR_NAME_REGEXP = /^[a-zA-Z_]+[a-zA-Z0-9_]*$/;
 
@@ -71,6 +68,9 @@ const relativePathRegex = /^(?!\.\.\/|\.\.\$|\.\/)(\.\/)*[\w.-]+(?:\/[\w.-]+)*\/
 export const MAX_TARGET_REVISION_LENGTH = 244;
 const MAX_FILE_PATH_LENGTH = 253;
 
+const HELM_NAMESPACE_MAX_LENGTH = 63;
+const HELM_VALUES_FILE_EXT_REGEXP = /\.(yaml|yml)$/i;
+
 const isInteger = (val: number | undefined) => val === undefined || Number.isInteger(val);
 
 const validComposeFileNames = [
@@ -230,6 +230,23 @@ export const validApplicationAndVolumeName = (t: TFunction) =>
     t('Use lowercase alphanumeric characters, or dash (-). Must start and end with an alphanumeric character.'),
   );
 
+export const getBuildNameValidations = (t: TFunction) => [
+  {
+    key: 'imageBuildName',
+    message: t(
+      'Use lowercase alphanumeric characters, or dash (-). Must start and end with an alphanumeric character.',
+    ),
+  },
+];
+
+export const validImageBuildName = (t: TFunction) =>
+  Yup.string()
+    .required(t('Build name is required'))
+    .test('imageBuildName', function (value: string | undefined) {
+      if (!value) return true;
+      return APPLICATION_NAME_REGEXP.test(value) || this.createError({ message: { imageBuildName: 'failed' } });
+    });
+
 export const maxLengthString = (t: TFunction, props: { maxLength: number; fieldName: string }) =>
   Yup.string().max(props.maxLength, t('{{ fieldName }} must not exceed {{ maxLength }} characters', props));
 
@@ -258,10 +275,52 @@ export const validOsImage = (t: TFunction, { isFleet }: { isFleet: boolean }) =>
         }
       }
 
-      return BASIC_DEVICE_OS_IMAGE_REGEXP.test(validateOsImage);
+      return OCI_IMAGE_FULL_REGEXP.test(validateOsImage);
     },
   );
 
+export const validHelmNamespace = (t: TFunction) =>
+  Yup.string()
+    .max(
+      HELM_NAMESPACE_MAX_LENGTH,
+      t('Namespace must not exceed {{ max }} characters.', { max: HELM_NAMESPACE_MAX_LENGTH }),
+    )
+    .test(
+      'helm-namespace-format',
+      t(
+        'Namespace must only include lowercase letters, numbers, and hyphens. It must start and end with a letter or number.',
+      ),
+      (value) => {
+        return !value || APPLICATION_NAME_REGEXP.test(value);
+      },
+    );
+
+export const validHelmValuesFile = (t: TFunction) =>
+  Yup.string().test('helm-values-file', function (filename) {
+    if (!filename) {
+      return true;
+    }
+    if (filename.length > MAX_FILE_PATH_LENGTH) {
+      return this.createError({
+        message: t('Values file path must not exceed {{ max }} characters.', {
+          max: MAX_FILE_PATH_LENGTH,
+        }),
+      });
+    }
+    if (filename.startsWith('/') || filename.includes('..')) {
+      return this.createError({
+        message: t('Values file path must be relative and cannot contain parent directory references (..).'),
+      });
+    }
+
+    if (!HELM_VALUES_FILE_EXT_REGEXP.test(filename)) {
+      return this.createError({
+        message: t('Values file must have .yaml or .yml extension.'),
+      });
+    }
+    return true;
+  });
+
 export const validLabelsSchema = (t: TFunction, forbiddenLabels?: string[]) =>
   Yup.array()
     .of(
@@ -367,11 +426,7 @@ const inlineAppFileSchema = (t: TFunction) =>
 
 // Common test for unique file paths in inline applications
 const uniqueFilePathsTest =
-  (t: TFunction) =>
-  (
-    files: (QuadletInlineAppForm | ComposeInlineAppForm)['files'] | undefined,
-    testContext: Yup.TestContext<Yup.AnyObject>,
-  ) => {
+  (t: TFunction) => (files: InlineFileForm[] | undefined, testContext: Yup.TestContext<Yup.AnyObject>) => {
     if (!files || files.length === 0) {
       return true;
     }
@@ -409,34 +464,33 @@ const uniqueFilePathsTest =
     });
   };
 
-const composeFileName =
-  (t: TFunction) => (files: ComposeInlineAppForm['files'], testContext: Yup.TestContext<Yup.AnyObject>) => {
-    const invalidFiles = files
-      .map((file, index) => {
-        if (!file.path) {
-          return null;
-        }
-        // Extract filename from relative path (get last part after slash, or use whole path if no slash)
-        const fileName = file.path.includes('/') ? file.path.split('/').pop() || file.path : file.path;
-        if (!validComposeFileNames.includes(fileName)) {
-          return index;
-        }
+const composeFileName = (t: TFunction) => (files: InlineFileForm[], testContext: Yup.TestContext<Yup.AnyObject>) => {
+  const invalidFiles = files
+    .map((file, index) => {
+      if (!file.path) {
         return null;
-      })
-      .filter((index): index is number => index !== null);
+      }
+      // Extract filename from relative path (get last part after slash, or use whole path if no slash)
+      const fileName = file.path.includes('/') ? file.path.split('/').pop() || file.path : file.path;
+      if (!validComposeFileNames.includes(fileName)) {
+        return index;
+      }
+      return null;
+    })
+    .filter((index): index is number => index !== null);
 
-    if (invalidFiles.length > 0) {
-      const firstInvalidIndex = invalidFiles[0];
-      return testContext.createError({
-        path: `${testContext.path}[${firstInvalidIndex}].path`,
-        message: () =>
-          t('File name must be one of: {{ allowedFileNames }}', {
-            allowedFileNames: validComposeFileNameDisplay,
-          }),
-      });
-    }
-    return true;
-  };
+  if (invalidFiles.length > 0) {
+    const firstInvalidIndex = invalidFiles[0];
+    return testContext.createError({
+      path: `${testContext.path}[${firstInvalidIndex}].path`,
+      message: () =>
+        t('File name must be one of: {{ allowedFileNames }}', {
+          allowedFileNames: validComposeFileNameDisplay,
+        }),
+    });
+  }
+  return true;
+};
 
 // Helper to extract file extension from a path
 const getFileExtension = (path: string): string => {
@@ -451,7 +505,7 @@ const isAtRoot = (path: string): boolean => {
 
 // Validation for quadlet applications: checks for unsupported types first, then requires at least one supported type
 const quadletFileTypesValidation =
-  (t: TFunction) => (files: QuadletInlineAppForm['files'], testContext: Yup.TestContext<Yup.AnyObject>) => {
+  (t: TFunction) => (files: InlineFileForm[], testContext: Yup.TestContext<Yup.AnyObject>) => {
     if (!files || files.length === 0) {
       return true; // This is handled by the min(1) requirement
     }
@@ -509,36 +563,35 @@ const quadletFileTypesValidation =
   };
 
 // Validation for quadlet applications: quadlet files must be at root level
-const quadletFilesAtRoot =
-  (t: TFunction) => (files: QuadletInlineAppForm['files'], testContext: Yup.TestContext<Yup.AnyObject>) => {
-    if (!files || files.length === 0) {
-      return true;
-    }
+const quadletFilesAtRoot = (t: TFunction) => (files: InlineFileForm[], testContext: Yup.TestContext<Yup.AnyObject>) => {
+  if (!files || files.length === 0) {
+    return true;
+  }
 
-    const invalidFiles = files
-      .map((file, index) => {
-        if (!file.path) {
-          return null;
-        }
-        const ext = getFileExtension(file.path);
-        // Only check files with supported quadlet extensions
-        if (supportedQuadletExtensions.includes(ext) && !isAtRoot(file.path)) {
-          return index;
-        }
+  const invalidFiles = files
+    .map((file, index) => {
+      if (!file.path) {
         return null;
-      })
-      .filter((index): index is number => index !== null);
+      }
+      const ext = getFileExtension(file.path);
+      // Only check files with supported quadlet extensions
+      if (supportedQuadletExtensions.includes(ext) && !isAtRoot(file.path)) {
+        return index;
+      }
+      return null;
+    })
+    .filter((index): index is number => index !== null);
 
-    if (invalidFiles.length > 0) {
-      const firstInvalidIndex = invalidFiles[0];
-      return testContext.createError({
-        path: `${testContext.path}[${firstInvalidIndex}].path`,
-        message: () => t('Quadlet files must be at root level (no subdirectories)'),
-      });
-    }
+  if (invalidFiles.length > 0) {
+    const firstInvalidIndex = invalidFiles[0];
+    return testContext.createError({
+      path: `${testContext.path}[${firstInvalidIndex}].path`,
+      message: () => t('Quadlet files must be at root level (no subdirectories)'),
+    });
+  }
 
-    return true;
-  };
+  return true;
+};
 
 const PORT_NUMBER_REGEXP = /^\d+$/;
 const MAX_PORT = 65535;
@@ -596,11 +649,11 @@ export const validateCPULimit = (cpu: string | undefined): boolean => {
   if (!cpu) {
     return true;
   }
-  const trimmed = cpu.trim();
-  if (!trimmed) {
-    return true;
+
+  if (!/^\d+(\.\d+)?$/.test(cpu)) {
+    return false;
   }
-  const val = Number.parseFloat(trimmed);
+  const val = Number.parseFloat(cpu);
   if (Number.isNaN(val) || val < 0) {
     return false;
   }
@@ -611,27 +664,34 @@ export const validateMemoryLimit = (memory: string | undefined): boolean => {
   if (!memory) {
     return true;
   }
-  const trimmed = memory.trim();
-  if (!trimmed) {
-    return true;
-  }
-  if (!MEMORY_LIMIT_REGEXP.test(trimmed)) {
+
+  if (!MEMORY_LIMIT_REGEXP.test(memory)) {
     return false;
   }
   return true;
 };
 
-// Common volume validation helpers
-const volumeNameSchema = (t: TFunction) => validApplicationAndVolumeName(t).required(t('Volume name is required'));
-
-const optionalImageRefSchema = (t: TFunction) =>
-  Yup.string().test('image-ref-format', t('Image reference includes invalid characters.'), (value) => {
-    if (!value || value.length === 0) {
-      return true; // Empty is allowed
+const ociImageSchema = (t: TFunction) =>
+  Yup.string().test('oci-image-format', (value, testContext) => {
+    if (!value) return true;
+    if (!OCI_IMAGE_ALLOWED_CHARS_REGEXP.test(value)) {
+      return testContext.createError({
+        message: t('Image includes invalid characters.'),
+      });
     }
-    return APPLICATION_IMAGE_REGEXP.test(value);
+    if (!OCI_IMAGE_FULL_REGEXP.test(value)) {
+      return testContext.createError({
+        message: t('Image must not start with a dot (.), slash (/), or underscore (_).'),
+      });
+    }
+    return true;
   });
 
+const requiredOciImageSchema = (t: TFunction, requiredMessage?: string) =>
+  ociImageSchema(t).required(requiredMessage || t('Image is required.'));
+
+const volumeNameSchema = (t: TFunction) => validApplicationAndVolumeName(t).required(t('Volume name is required'));
+
 const imagePullPolicySchema = (t: TFunction) =>
   Yup.string()
     .oneOf(
@@ -645,12 +705,11 @@ const mountPathSchema = (t: TFunction, isRequired: boolean = true) => {
   return isRequired ? schema.required(t('Mount path is required for this volume type')) : schema;
 };
 
-// Volume validation schemas
 const singleContainerVolumesSchema = (t: TFunction) =>
   Yup.array().of(
     Yup.object().shape({
       name: volumeNameSchema(t),
-      imageRef: optionalImageRefSchema(t),
+      imageRef: ociImageSchema(t),
       imagePullPolicy: Yup.string(),
       mountPath: mountPathSchema(t, true),
     }),
@@ -660,7 +719,7 @@ const composeQuadletVolumesSchema = (t: TFunction) =>
   Yup.array().of(
     Yup.object().shape({
       name: volumeNameSchema(t),
-      imageRef: optionalImageRefSchema(t).required(t('Image reference is required for this volume type')),
+      imageRef: requiredOciImageSchema(t, t('Image reference is required for this volume type')),
       imagePullPolicy: imagePullPolicySchema(t),
     }),
   );
@@ -670,16 +729,14 @@ export const validApplicationsSchema = (t: TFunction) => {
     .of(
       Yup.lazy((value: AppForm) => {
         // Container applications (image-based with ports and resources)
-        if (isSingleContainerAppForm(value)) {
+        if (value.appType === AppType.AppTypeContainer) {
           return Yup.object().shape({
             specType: Yup.string()
               .oneOf([AppSpecType.OCI_IMAGE])
               .required(t('Definition source must be image for this type of applications')),
             appType: Yup.string().oneOf([AppType.AppTypeContainer]).required(t('Application type is required')),
-            name: validApplicationAndVolumeName(t).required(t('Name is required for single container applications.')),
-            image: Yup.string()
-              .required(t('Image is required.'))
-              .matches(APPLICATION_IMAGE_REGEXP, t('Application image includes invalid characters.')),
+            name: validApplicationAndVolumeName(t),
+            image: requiredOciImageSchema(t),
             ports: Yup.array().of(
               Yup.object()
                 .shape({
@@ -704,12 +761,38 @@ export const validApplicationsSchema = (t: TFunction) => {
             }),
             volumes: singleContainerVolumesSchema(t),
             variables: appVariablesSchema(t),
+            runAs: Yup.string(),
+          });
+        }
+
+        // Helm applications
+        if (value.appType === AppType.AppTypeHelm) {
+          return Yup.object<HelmAppForm>().shape({
+            specType: Yup.string()
+              .oneOf([AppSpecType.OCI_IMAGE])
+              .required(t('Definition source must be image for this type of applications')),
+            appType: Yup.string().oneOf([AppType.AppTypeHelm]).required(t('Application type is required')),
+            name: validApplicationAndVolumeName(t),
+            image: requiredOciImageSchema(t),
+            namespace: validHelmNamespace(t),
+            valuesYaml: Yup.string().test('valid-yaml', t('YAML content is invalid.'), (value) => {
+              if (!value || value.trim() === '') {
+                return true;
+              }
+              try {
+                yaml.load(value);
+              } catch (error) {
+                return false;
+              }
+              return true;
+            }),
+            valuesFiles: Yup.array().of(validHelmValuesFile(t)),
           });
         }
 
         // Image applications (Quadlet or Compose)
-        if (isQuadletImageAppForm(value) || isComposeImageAppForm(value)) {
-          return Yup.object<QuadletImageAppForm | ComposeImageAppForm>().shape({
+        if (value.specType === AppSpecType.OCI_IMAGE) {
+          return Yup.object<QuadletAppForm | ComposeAppForm>().shape({
             specType: Yup.string()
               .oneOf([AppSpecType.OCI_IMAGE])
               .required(t('Definition source must be image for this type of applications')),
@@ -717,17 +800,15 @@ export const validApplicationsSchema = (t: TFunction) => {
               .oneOf([AppType.AppTypeCompose, AppType.AppTypeQuadlet])
               .required(t('Application type is required')),
             name: validApplicationAndVolumeName(t),
-            image: Yup.string()
-              .required(t('Image is required.'))
-              .matches(APPLICATION_IMAGE_REGEXP, t('Application image includes invalid characters.')),
+            image: requiredOciImageSchema(t),
             volumes: composeQuadletVolumesSchema(t),
             variables: appVariablesSchema(t),
           });
         }
 
         // Inline quadlet applications
-        if (isQuadletInlineAppForm(value)) {
-          return Yup.object<QuadletInlineAppForm>().shape({
+        if (value.appType === AppType.AppTypeQuadlet && value.specType === AppSpecType.INLINE) {
+          return Yup.object<QuadletAppForm>().shape({
             specType: appSpecTypeSchema(t),
             appType: Yup.string().oneOf([AppType.AppTypeQuadlet]).required(t('Application type is required')),
             name: validApplicationAndVolumeName(t).required(t('Name is required for quadlet applications.')),
@@ -741,7 +822,7 @@ export const validApplicationsSchema = (t: TFunction) => {
         }
 
         // Inline compose applications
-        return Yup.object<ComposeInlineAppForm>().shape({
+        return Yup.object<ComposeAppForm>().shape({
           specType: appSpecTypeSchema(t),
           appType: Yup.string().oneOf([AppType.AppTypeCompose]).required(t('Application type is required')),
           name: validApplicationAndVolumeName(t).required(t('Name is required for compose applications.')),
@@ -770,7 +851,7 @@ export const validApplicationsSchema = (t: TFunction) => {
       }
 
       const errors = apps.reduce((errors, app, appIndex) => {
-        if (duplicateIds.includes(appIds[appIndex])) {
+        if (duplicateIds.includes(appIds[appIndex] || '')) {
           const error = app.name
             ? new Yup.ValidationError(t('Application name must be unique.'), '', `applications[${appIndex}].name`)
             : new Yup.ValidationError(

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

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { useFormikContext } from 'formik';
-import { Alert, Button, FormGroup } from '@patternfly/react-core';
+import { ActionGroup, Alert, Button, FormGroup } from '@patternfly/react-core';
 
 import { EnrollmentRequest } from '@flightctl/types';
 import RichValidationTextField from '../../form/RichValidationTextField';
 import LabelsField from '../../form/LabelsField';
 import { getLabelValueValidations } from '../../form/validations';
-import FlightCtlActionGroup from '../../form/FlightCtlActionGroup';
 import FlightCtlForm from '../../form/FlightCtlForm';
 import { FlightCtlLabel } from '../../../types/extraTypes';
 import { useTranslation } from '../../../hooks/useTranslation';
@@ -53,7 +52,7 @@ const ApproveDeviceForm: React.FC<ApproveDeviceFormProps> = ({ enrollmentRequest
       </FormGroup>
       {children}
       {error && <Alert isInline title={error} variant="danger" />}
-      <FlightCtlActionGroup>
+      <ActionGroup>
         <Button
           key="confirm"
           variant="primary"
@@ -66,7 +65,7 @@ const ApproveDeviceForm: React.FC<ApproveDeviceFormProps> = ({ enrollmentRequest
         <Button key="cancel" variant="link" onClick={() => onClose()} isDisabled={isSubmitting}>
           {t('Cancel')}
         </Button>
-      </FlightCtlActionGroup>
+      </ActionGroup>
     </FlightCtlForm>
   );
 };

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { EnrollmentRequestApproval } from '@flightctl/types';
-import { Alert } from '@patternfly/react-core';
-import { Modal, ModalBody, ModalHeader } from '@patternfly/react-core/next';
+import { Alert, Modal, ModalBody, ModalHeader } from '@patternfly/react-core';
 
 import { Formik } from 'formik';
 

package/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.css

@@ -1,24 +1,4 @@
-/* Style to get the appearance of a disabled Input with messages spanning multiple lines */
-.fctl-device-label-match {
-  display: flex;
-  align-items: center;
-  background-color: var(--pf-v5-global--disabled-color--300);
-  padding: 0.5rem;
+/* Prevent the border from disappearing when the input is hovered */
+.pf-v6-c-form-control.pf-m-readonly.pf-m-warning:hover {
+  --pf-v6-c-form-control--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
 }
-
-.fctl-device-label-match__icon  {
-  margin-right: 0.5rem;
-}
-
-.fctl-device-label-match__placeholder {
-  color: var(--pf-v5-global--disabled-color--100);
-}
-
-/* Dark theme variations */
-.pf-v5-theme-dark .fctl-device-label-match {
-  background-color: var(--pf-v5-global--disabled-color--200);
-}
-
-.pf-v5-theme-dark .fctl-device-label-match__placeholder {
-  color: var(--pf-v5-global--Color--light-100);
-}

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

@@ -1,99 +1,68 @@
 import * as React from 'react';
-import { Icon, Spinner } from '@patternfly/react-core';
-import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { Spinner, TextInput } from '@patternfly/react-core';
 
 import { useTranslation } from '../../../hooks/useTranslation';
 import { DeviceMatchStatus } from '../../../hooks/useDeviceLabelMatch';
 
 import './DeviceLabelMatch.css';
 
-const DeviceLabelMatchContent = ({
-  iconStatus,
-  text,
-  isPlaceholder,
-}: {
-  iconStatus?: 'success' | 'warning' | 'danger' | 'loader';
-  text?: string;
-  isPlaceholder?: boolean;
-}) => {
-  let icon: React.ReactNode;
-  switch (iconStatus) {
-    case 'warning':
-      icon = (
-        <Icon status="warning">
-          <ExclamationTriangleIcon />
-        </Icon>
-      );
-      break;
-    case 'danger':
-      icon = (
-        <Icon status="danger">
-          <ExclamationCircleIcon />
-        </Icon>
-      );
-      break;
-    case 'success':
-      icon = (
-        <Icon status="success">
-          <CheckCircleIcon />
-        </Icon>
-      );
-      break;
-    case 'loader':
-      icon = <Spinner size="sm" />;
-      break;
-  }
-
-  return (
-    <div className="fctl-device-label-match">
-      {icon && <span className="fctl-device-label-match__icon">{icon}</span>}
-      <span className={isPlaceholder ? 'fctl-device-label-match__placeholder' : ''}>{text}</span>
-    </div>
-  );
-};
-
 export const DeviceLabelMatch = ({ matchStatus }: { matchStatus: DeviceMatchStatus }) => {
   const { t } = useTranslation();
 
   switch (matchStatus.status) {
     case 'unchecked':
-      return <DeviceLabelMatchContent text={t('Add labels to select a fleet.')} isPlaceholder />;
+      return (
+        <TextInput
+          value=""
+          aria-label={t('Add labels to select a fleet.')}
+          placeholder={t('Add labels to select a fleet.')}
+          readOnlyVariant="default"
+        />
+      );
     case 'unchecked--invalid':
       return (
-        <DeviceLabelMatchContent
-          iconStatus="warning"
-          text={t('Fleet label match cannot cannot be evaluated when there are invalid labels.')}
-          isPlaceholder
+        <TextInput
+          value={t('Fleet label match cannot cannot be evaluated when there are invalid labels.')}
+          type="text"
+          validated="warning"
+          readOnlyVariant="default"
         />
       );
     case 'checking':
-      return <DeviceLabelMatchContent iconStatus="loader" />;
+      return <TextInput value="" customIcon={<Spinner size="sm" />} readOnlyVariant="default" />;
     case 'checked--unique':
       return (
-        <DeviceLabelMatchContent
-          iconStatus="success"
-          /* The matching fleet's name */
-          text={matchStatus.detail}
+        <TextInput
+          className="fctl-device-label-match"
+          type="text"
+          readOnlyVariant="default"
+          value={matchStatus.detail || ''}
+          validated="success"
         />
       );
     case 'checked--empty':
-      return <DeviceLabelMatchContent iconStatus="warning" text={t('No fleet is matching the selected labels.')} />;
+      return (
+        <TextInput
+          value={t('No fleet is matching the selected labels.')}
+          validated="warning"
+          readOnlyVariant="default"
+        />
+      );
     case 'checked--multiple':
       return (
-        <DeviceLabelMatchContent
-          iconStatus="danger"
-          text={t(
+        <TextInput
+          readOnlyVariant="default"
+          value={t(
             "More than one fleet is matching the selected labels. The device will ignore the fleets' configurations.",
           )}
+          validated="error"
         />
       );
     case 'checked--error': {
       const text = t('Check for matching fleet(s) failed. {{errorMessage}}', {
         errorMessage: matchStatus.detail || t('Unknown error'),
       });
-      return <DeviceLabelMatchContent iconStatus="danger" text={text} />;
+      return <TextInput value={text} validated="error" readOnlyVariant="default" />;
     }
   }
 };