diff --git a/libs/i18n/locales/en/translation.json b/libs/i18n/locales/en/translation.json index 4e9fd8818..9489a6f46 100644 --- a/libs/i18n/locales/en/translation.json +++ b/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}.": "Device matches fleet <1>{fleetName}.", + "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?", diff --git a/libs/ui-components/src/components/Device/DeviceDetails/DeviceFleet.tsx b/libs/ui-components/src/components/Device/DeviceDetails/DeviceFleet.tsx index 53468cfeb..febf3abdb 100644 --- a/libs/ui-components/src/components/Device/DeviceDetails/DeviceFleet.tsx +++ b/libs/ui-components/src/components/Device/DeviceDetails/DeviceFleet.tsx @@ -45,7 +45,7 @@ const MultipleDeviceOwners = ({ multipleOwnersCondition }: { multipleOwnersCondi - {t('Device is owned by more than one fleet:')} + {t('Device labels match multiple fleets:')} {owners.map((ownerFleet) => { diff --git a/libs/ui-components/src/components/Device/EditDeviceWizard/steps/GeneralInfoStep.tsx b/libs/ui-components/src/components/Device/EditDeviceWizard/steps/GeneralInfoStep.tsx index 94bce44c0..d865df70c 100644 --- a/libs/ui-components/src/components/Device/EditDeviceWizard/steps/GeneralInfoStep.tsx +++ b/libs/ui-components/src/components/Device/EditDeviceWizard/steps/GeneralInfoStep.tsx @@ -49,9 +49,7 @@ const GeneralInfoStep = () => { - - - + ); }; diff --git a/libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx b/libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx index 6860975e5..d1b3f3b66 100644 --- a/libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx +++ b/libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx @@ -46,9 +46,7 @@ const ApproveDeviceForm: React.FC = ({ enrollmentRequest - - - + {children} {error && } diff --git a/libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.css b/libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.css deleted file mode 100644 index 881467a8f..000000000 --- a/libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.css +++ /dev/null @@ -1,4 +0,0 @@ -/* 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); -} diff --git a/libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.tsx b/libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.tsx index cd65e018d..a1c20847b 100644 --- a/libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.tsx +++ b/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 ( + + + {t('Checking for matching fleets')} + + ); + } + switch (matchStatus.status) { case 'unchecked': return ( - ); case 'unchecked--invalid': return ( - ); - case 'checking': - return } readOnlyVariant="default" />; - case 'checked--unique': + case 'checked--unique': { + const fleetName = matchStatus.detail || ''; return ( - + Device matches fleet {fleetName}. + + } + customIcon={CheckCircleIcon} /> ); + } case 'checked--empty': - return ( - - ); + return ; 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 ; + case 'checked--error': { return ( - ); - case 'checked--error': { - const text = t('Check for matching fleet(s) failed. {{errorMessage}}', { - errorMessage: matchStatus.detail || t('Unknown error'), - }); - return ; } } };