EDM-3698: Better display for matching fleet name of a device

libs/i18n/locales/en/translation.json

@@ -617,7 +617,7 @@
   "None": "None",
   "Device labels don't match any fleet's selector labels": "Device labels don't match any fleet's selector labels",
   "Ownership information": "Ownership information",
-  "Device is owned by more than one fleet:": "Device is owned by more than one fleet:",
+  "Device labels match multiple fleets:": "Device labels match multiple fleets:",
   "System image mismatch": "System image mismatch",
   "Desired system image: {{ desiredOsImage }}": "Desired system image: {{ desiredOsImage }}",
   "System services": "System services",
@@ -1286,10 +1286,13 @@
   "Theme": "Theme",
   "Approve pending device": "Approve pending device",
   "Enrollment request is already approved.": "Enrollment request is already approved.",
-  "Add labels to select a fleet.": "Add labels to select a fleet.",
-  "Fleet label match cannot cannot be evaluated when there are invalid labels.": "Fleet label match cannot cannot be evaluated when there are invalid labels.",
-  "No fleet is matching the selected labels.": "No fleet is matching the selected labels.",
-  "More than one fleet is matching the selected labels. The device will ignore the fleets' configurations.": "More than one fleet is matching the selected labels. The device will ignore the fleets' configurations.",
+  "Checking for matching fleets": "Checking for matching fleets",
+  "Add labels to view matching fleet(s).": "Add labels to view matching fleet(s).",
+  "Fix invalid labels to view matching fleet(s).": "Fix invalid labels to view matching fleet(s).",
+  "Device matches fleet <1>{fleetName}</1>.": "Device matches fleet <1>{fleetName}</1>.",
+  "No fleets currently match the selected labels.": "No fleets currently match the selected labels.",
+  "Device labels match multiple fleets, therefore the device will not be bound to any fleet.": "Device labels match multiple fleets, therefore the device will not be bound to any fleet.",
+  "Device labels match multiple fleets, therefore the device ownership will remain unchanged.": "Device labels match multiple fleets, therefore the device ownership will remain unchanged.",
   "Check for matching fleet(s) failed. {{errorMessage}}": "Check for matching fleet(s) failed. {{errorMessage}}",
   "Decommission device?": "Decommission device?",
   "Are you sure you want to proceed with decommissioning this device?": "Are you sure you want to proceed with decommissioning this device?",

libs/ui-components/src/components/Device/DeviceDetails/DeviceFleet.tsx

@@ -45,7 +45,7 @@ const MultipleDeviceOwners = ({ multipleOwnersCondition }: { multipleOwnersCondi
     <Popover
       bodyContent={
         <span>
-          {t('Device is owned by more than one fleet:')}
+          {t('Device labels match multiple fleets:')}
           <span>
             <List>
               {owners.map((ownerFleet) => {

libs/ui-components/src/components/Device/EditDeviceWizard/steps/GeneralInfoStep.tsx

@@ -49,9 +49,7 @@ const GeneralInfoStep = () => {
       <FormGroup label={t('Device labels')}>
         <LabelsField name="labels" onChangeCallback={matchLabelsOnChange} />
       </FormGroup>
-      <FormGroup label={t('Fleet name')}>
-        <DeviceLabelMatch matchStatus={matchStatus} />
-      </FormGroup>
+      <DeviceLabelMatch isApproval={false} matchStatus={matchStatus} />
     </FlightCtlForm>
   );
 };

libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx

@@ -46,9 +46,7 @@ const ApproveDeviceForm: React.FC<ApproveDeviceFormProps> = ({ enrollmentRequest
       <FormGroup label={t('Labels')}>
         <LabelsField name="labels" onChangeCallback={matchLabelsOnChange} />
       </FormGroup>
-      <FormGroup label={t('Fleet name')}>
-        <DeviceLabelMatch matchStatus={matchStatus} />
-      </FormGroup>
+      <DeviceLabelMatch isApproval matchStatus={matchStatus} />
       {children}
       {error && <Alert isInline title={error} variant="danger" />}
       <ActionGroup>

libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.tsx

@@ -1,68 +1,80 @@
 import * as React from 'react';
-import { Spinner, TextInput } from '@patternfly/react-core';
+import { Trans } from 'react-i18next';
+import { Flex, 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 { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 
 import { useTranslation } from '../../../hooks/useTranslation';
 import { DeviceMatchStatus } from '../../../hooks/useDeviceLabelMatch';
+import { StatusDisplayContent } from '../../Status/StatusDisplay';
 
-import './DeviceLabelMatch.css';
-
-export const DeviceLabelMatch = ({ matchStatus }: { matchStatus: DeviceMatchStatus }) => {
+export const DeviceLabelMatch = ({
+  isApproval,
+  matchStatus,
+}: {
+  isApproval: boolean;
+  matchStatus: DeviceMatchStatus;
+}) => {
   const { t } = useTranslation();
 
+  if (matchStatus.status === 'checking') {
+    return (
+      <Flex gap={{ default: 'gapSm' }} role="status" aria-live="polite">
+        <Spinner size="sm" aria-label={t('Checking for matching fleets')} />
+        {t('Checking for matching fleets')}
+      </Flex>
+    );
+  }
+
   switch (matchStatus.status) {
     case 'unchecked':
       return (
-        <TextInput
-          value=""
-          aria-label={t('Add labels to select a fleet.')}
-          placeholder={t('Add labels to select a fleet.')}
-          readOnlyVariant="default"
+        <StatusDisplayContent
+          level="info"
+          label={t('Add labels to view matching fleet(s).')}
+          customIcon={InfoCircleIcon}
         />
       );
     case 'unchecked--invalid':
       return (
-        <TextInput
-          value={t('Fleet label match cannot cannot be evaluated when there are invalid labels.')}
-          type="text"
-          validated="warning"
-          readOnlyVariant="default"
+        <StatusDisplayContent
+          level="warning"
+          label={t('Fix invalid labels to view matching fleet(s).')}
+          customIcon={ExclamationTriangleIcon}
         />
       );
-    case 'checking':
-      return <TextInput value="" customIcon={<Spinner size="sm" />} readOnlyVariant="default" />;
-    case 'checked--unique':
+    case 'checked--unique': {
+      const fleetName = matchStatus.detail || '';
       return (
-        <TextInput
-          className="fctl-device-label-match"
-          type="text"
-          readOnlyVariant="default"
-          value={matchStatus.detail || ''}
-          validated="success"
+        <StatusDisplayContent
+          level="success"
+          label={
+            <Trans t={t} values={{ fleetName }}>
+              Device matches fleet <strong>{fleetName}</strong>.
+            </Trans>
+          }
+          customIcon={CheckCircleIcon}
         />
       );
+    }
     case 'checked--empty':
-      return (
-        <TextInput
-          value={t('No fleet is matching the selected labels.')}
-          validated="warning"
-          readOnlyVariant="default"
-        />
-      );
+      return <StatusDisplayContent level="warning" label={t('No fleets currently match the selected labels.')} />;
     case 'checked--multiple':
+      const msg = isApproval
+        ? t('Device labels match multiple fleets, therefore the device will not be bound to any fleet.')
+        : t('Device labels match multiple fleets, therefore the device ownership will remain unchanged.');
+      return <StatusDisplayContent level="danger" label={msg} customIcon={ExclamationTriangleIcon} />;
+    case 'checked--error': {
       return (
-        <TextInput
-          readOnlyVariant="default"
-          value={t(
-            "More than one fleet is matching the selected labels. The device will ignore the fleets' configurations.",
-          )}
-          validated="error"
+        <StatusDisplayContent
+          level="danger"
+          label={t('Check for matching fleet(s) failed. {{errorMessage}}', {
+            errorMessage: matchStatus.detail || t('Unknown error'),
+          })}
+          customIcon={ExclamationTriangleIcon}
         />
       );
-    case 'checked--error': {
-      const text = t('Check for matching fleet(s) failed. {{errorMessage}}', {
-        errorMessage: matchStatus.detail || t('Unknown error'),
-      });
-      return <TextInput value={text} validated="error" readOnlyVariant="default" />;
     }
   }
 };