From fde0bf8e75f8f34c897846c302aa8254bf02fa99 Mon Sep 17 00:00:00 2001
From: Celia Amador <camadorg@redhat.com>
Date: Thu, 10 Sep 2026 09:29:22 +0200
Subject: [PATCH] EDM-5042: Small design adjustments

Made-with: Cursor
---
 libs/i18n/locales/en/translation.json         |  6 ++++--
 .../DeviceDetails/DeviceApplications.tsx      |  2 +-
 .../DeviceDetails/DeviceCustomDataCard.tsx    | 19 +++++++++++++------
 .../DeviceDetails/DeviceHealthAlert.tsx       |  2 +-
 .../src/components/common/LabelsView.tsx      |  2 +-
 .../src/components/form/LabelsField.tsx       |  1 +
 .../src/hooks/useDeviceSpecSystemInfo.tsx     |  2 +-
 7 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/libs/i18n/locales/en/translation.json b/libs/i18n/locales/en/translation.json
index e8f35ac742..f8aba0d260 100644
--- a/libs/i18n/locales/en/translation.json
+++ b/libs/i18n/locales/en/translation.json
@@ -637,9 +637,9 @@
   "Alias": "Alias",
   "Edit alias": "Edit alias",
   "Device alias could not be updated": "Device alias could not be updated",
-  "{{count}} application errors_one": "{{count}} application error",
-  "{{count}} application errors_other": "{{count}} application errors",
+  "{{appCount}} need attention": "{{appCount}} need attention",
   "Custom data": "Custom data",
+  "No value reported": "No value reported",
   "Failed to fetch owner fleet": "Failed to fetch owner fleet",
   "Delete forever": "Delete forever",
   "You are about to resume <1>{deviceNameOrAlias}</1>": "You are about to resume <1>{deviceNameOrAlias}</1>",
@@ -669,6 +669,8 @@
   "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 labels match multiple fleets:": "Device labels match multiple fleets:",
+  "{{count}} application issues_one": "{{count}} application issue",
+  "{{count}} application issues_other": "{{count}} application issues",
   "{{count}} status issues_one": "{{count}} status issue",
   "{{count}} status issues_other": "{{count}} status issues",
   "Issues detected": "Issues detected",
diff --git a/libs/ui-components/src/components/Device/DeviceDetails/DeviceApplications.tsx b/libs/ui-components/src/components/Device/DeviceDetails/DeviceApplications.tsx
index 832cb8ecea..4423d65fdb 100644
--- a/libs/ui-components/src/components/Device/DeviceDetails/DeviceApplications.tsx
+++ b/libs/ui-components/src/components/Device/DeviceDetails/DeviceApplications.tsx
@@ -41,7 +41,7 @@ const DeviceApplications = ({ device, health, refetch = () => undefined }: Devic
         icon={<CubesIcon />}
         badge={
           health.level !== null && (
-            <Label status={health.level}>{t('{{count}} application errors', { count: health.itemCount })}</Label>
+            <Label status={health.level}>{t('{{appCount}} need attention', { appCount: health.itemCount })}</Label>
           )
         }
       />
diff --git a/libs/ui-components/src/components/Device/DeviceDetails/DeviceCustomDataCard.tsx b/libs/ui-components/src/components/Device/DeviceDetails/DeviceCustomDataCard.tsx
index 1bfd9471e1..0974b3d00d 100644
--- a/libs/ui-components/src/components/Device/DeviceDetails/DeviceCustomDataCard.tsx
+++ b/libs/ui-components/src/components/Device/DeviceDetails/DeviceCustomDataCard.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   CardBody,
+  Content,
   DescriptionList,
   DescriptionListDescription,
   DescriptionListGroup,
@@ -8,6 +9,7 @@ import {
 } from '@patternfly/react-core';
 import TagIcon from '@patternfly/react-icons/dist/js/icons/tag-icon';
 
+import { propNameToTitle } from '../../../hooks/useDeviceSpecSystemInfo';
 import { useTranslation } from '../../../hooks/useTranslation';
 import DetailsPageCard, { DetailsPageCardTitle } from '../../DetailsPage/DetailsPageCard';
 
@@ -21,12 +23,17 @@ const DeviceCustomDataCard = ({ customInfo }: { customInfo: [string, string][] }
       <DetailsPageCardTitle title={t('Custom data')} icon={<TagIcon />} />
       <CardBody>
         <DescriptionList isHorizontal isCompact horizontalTermWidthModifier={{ default: '12ch' }}>
-          {customInfo.map((entry, index) => (
-            <DescriptionListGroup key={index}>
-              <DescriptionListTerm>{entry[0]}</DescriptionListTerm>
-              <DescriptionListDescription>{entry[1]}</DescriptionListDescription>
-            </DescriptionListGroup>
-          ))}
+          {customInfo.map((entry, index) => {
+            const value = entry[1];
+            return (
+              <DescriptionListGroup key={index}>
+                <DescriptionListTerm>{propNameToTitle(entry[0])}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {value || <Content component="small">{t('No value reported')}</Content>}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            );
+          })}
         </DescriptionList>
       </CardBody>
     </DetailsPageCard>
diff --git a/libs/ui-components/src/components/Device/DeviceDetails/DeviceHealthAlert.tsx b/libs/ui-components/src/components/Device/DeviceDetails/DeviceHealthAlert.tsx
index ef75c7f889..16a568a6e4 100644
--- a/libs/ui-components/src/components/Device/DeviceDetails/DeviceHealthAlert.tsx
+++ b/libs/ui-components/src/components/Device/DeviceDetails/DeviceHealthAlert.tsx
@@ -23,7 +23,7 @@ const DeviceHealthAlertLink = ({ healthItem }: { healthItem: DeviceHealthItem })
   return (
     <Button variant="link" isInline onClick={() => scrollToSection(targetId)}>
       {type === 'apps'
-        ? t('{{count}} application errors', { count: itemCount })
+        ? t('{{count}} application issues', { count: itemCount })
         : t('{{count}} status issues', { count: itemCount })}
     </Button>
   );
diff --git a/libs/ui-components/src/components/common/LabelsView.tsx b/libs/ui-components/src/components/common/LabelsView.tsx
index ed979070a1..15fea75e8b 100644
--- a/libs/ui-components/src/components/common/LabelsView.tsx
+++ b/libs/ui-components/src/components/common/LabelsView.tsx
@@ -18,7 +18,7 @@ const LabelsView = ({ prefix, labels }: LabelsViewProps) => {
   return (
     <LabelGroup numLabels={5} expandedText={t('Show less')} collapsedText={'${remaining} ' + t('more')}>
       {labelItems.map(([key, value], index: number) => (
-        <Label key={`${prefix}_${index}`} id={`${prefix}_${index}`}>
+        <Label color="blue" key={`${prefix}_${index}`} id={`${prefix}_${index}`}>
           {value ? `${key}=${value}` : key}
         </Label>
       ))}
diff --git a/libs/ui-components/src/components/form/LabelsField.tsx b/libs/ui-components/src/components/form/LabelsField.tsx
index c0b89a4082..1c52df3941 100644
--- a/libs/ui-components/src/components/form/LabelsField.tsx
+++ b/libs/ui-components/src/components/form/LabelsField.tsx
@@ -84,6 +84,7 @@ const LabelsField = ({
             return (
               <Label
                 key={elKey}
+                color="blue"
                 textMaxWidth={maxLabelWidth}
                 closeBtnProps={closeButtonProps}
                 onClose={(e) => onDelete(e, originalIndex)}
diff --git a/libs/ui-components/src/hooks/useDeviceSpecSystemInfo.tsx b/libs/ui-components/src/hooks/useDeviceSpecSystemInfo.tsx
index 94a8e74d86..d4608325a0 100644
--- a/libs/ui-components/src/hooks/useDeviceSpecSystemInfo.tsx
+++ b/libs/ui-components/src/hooks/useDeviceSpecSystemInfo.tsx
@@ -10,7 +10,7 @@ export type SystemInfoEntry = {
 
 // Converts a camelCase variable into words. Example: "someInfoData" --> "Some info data"
 // Keeps acronyms together, converted to lowercase. Example: "bootID" --> Boot id
-const propNameToTitle = (input: string) => {
+export const propNameToTitle = (input: string) => {
   const words = input.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2');
   return words.charAt(0).toUpperCase() + words.slice(1).toLowerCase();
 };