EDM-5042: Small design adjustments

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",

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>
           )
         }
       />

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

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import {
   CardBody,
+  Content,
   DescriptionList,
   DescriptionListDescription,
   DescriptionListGroup,
   DescriptionListTerm,
 } 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>

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>
   );

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>
       ))}

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)}

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();
 };