EDM-4074: Display long Catalog item names better

libs/i18n/locales/en/translation.json

@@ -201,8 +201,6 @@
   "Field": "Field",
   "Value": "Value",
   "Close": "Close",
-  "View {{ name }}": "View {{ name }}",
-  "Edit {{ name }}": "Edit {{ name }}",
   "Create": "Create",
   "General info": "General info",
   "Type and configuration": "Type and configuration",
@@ -406,8 +404,6 @@
   "Failed to find operating system": "Failed to find operating system",
   "Failed to find application": "Failed to find application",
   "Software catalog": "Software catalog",
-  "Deploy {{ name }}": "Deploy {{ name }}",
-  "Edit {{name}}": "Edit {{name}}",
   "Return to device catalog": "Return to device catalog",
   "Return to fleet catalog": "Return to fleet catalog",
   "Review update specifications": "Review update specifications",
@@ -455,7 +451,6 @@
   "Failed to find requested version {{ version }}": "Failed to find requested version {{ version }}",
   "Invalid channel {{ channel }} for version {{ version }}": "Invalid channel {{ channel }} for version {{ version }}",
   "Loading catalog item": "Loading catalog item",
-  "Deploy {{name}}": "Deploy {{name}}",
   "Application name": "Application name",
   "Application name must be unique.": "Application name must be unique.",
   "Configure via:": "Configure via:",
@@ -994,7 +989,6 @@
   "No assets available in catalog": "No assets available in catalog",
   "There are no asset catalog items to choose from. Add assets to your catalogs to select them here.": "There are no asset catalog items to choose from. Add assets to your catalogs to select them here.",
   "Select": "Select",
-  "Catalog item {{ catalogItemRef }}": "Catalog item {{ catalogItemRef }}",
   "Enter image reference or choose from catalog": "Enter image reference or choose from catalog",
   "Choose from catalog": "Choose from catalog",
   "Approve": "Approve",

libs/ui-components/src/components/Catalog/AddCatalogItemWizard/AddCatalogItemWizard.tsx

@@ -38,6 +38,8 @@ import { getErrorMessage } from '../../../utils/error';
 import { usePermissionsContext } from '../../common/PermissionsContext';
 import PageWithPermissions from '../../common/PageWithPermissions';
 import { RESOURCE, VERB } from '../../../types/rbac';
+import { CatalogItemLabel } from '../CatalogItemLabels';
+import TruncatedText from '../../common/TruncatedText';
 
 const orderedIds = [generalInfoStepId, typeConfigStepId, versionStepId, reviewStepId];
 
@@ -109,13 +111,20 @@ const AddCatalogItemWizard = () => {
   const initialValues = editItem ? getInitialValuesFromItem(editItem) : getInitialValues();
   const isReadOnly = !!editItem?.metadata?.owner;
 
-  let pageTitle: string;
-  if (isReadOnly) {
-    pageTitle = t('View {{ name }}', { name: editItem?.spec.displayName || editItem?.metadata.name });
-  } else if (isEdit) {
-    pageTitle = t('Edit {{ name }}', { name: editItem?.spec.displayName || editItem?.metadata.name });
+  let titleEl: React.ReactNode;
+  if (isReadOnly || isEdit) {
+    const title = editItem ? (
+      <CatalogItemLabel item={editItem} shortened />
+    ) : (
+      <TruncatedText text={itemId || ''} maxChars={30} />
+    );
+    titleEl = (
+      <>
+        {isReadOnly ? t('View') : t('Edit')} {title}
+      </>
+    );
   } else {
-    pageTitle = t('Create catalog item');
+    titleEl = t('Create catalog item');
   }
 
   let content: React.ReactNode = (
@@ -230,12 +239,12 @@ const AddCatalogItemWizard = () => {
           <BreadcrumbItem>
             <Link to={ROUTE.CATALOG}>{t('Software Catalog')}</Link>
           </BreadcrumbItem>
-          <BreadcrumbItem isActive>{pageTitle}</BreadcrumbItem>
+          <BreadcrumbItem isActive>{titleEl}</BreadcrumbItem>
         </Breadcrumb>
       </PageSection>
       <PageSection hasBodyWrapper={false}>
         <Title headingLevel="h1" size="3xl">
-          {pageTitle}
+          {titleEl}
         </Title>
       </PageSection>
       {content}

libs/ui-components/src/components/Catalog/CatalogItemCard.tsx

@@ -15,7 +15,8 @@ import * as React from 'react';
 import { type CatalogItem, CatalogItemCategory } from '@flightctl/types/alpha';
 
 import { useTranslation } from '../../hooks/useTranslation';
-import { getCatalogItemBadge, getCatalogItemIcon } from '../../utils/catalog';
+import { getCatalogItemBadge, getCatalogItemIcon, getCatalogItemLabel } from '../../utils/catalog';
+import { CatalogItemLabel } from './CatalogItemLabels';
 
 export type CatalogItemCardProps = {
   catalogItem: CatalogItem;
@@ -31,7 +32,7 @@ const CatalogItemCard: React.FC<CatalogItemCardProps> = ({ catalogItem, onSelect
           onClickAction: onSelect,
           onChange: onSelect,
           selectableActionAriaLabel: t('Select {{ name }}', {
-            name: catalogItem.spec.displayName || catalogItem.metadata.name,
+            name: getCatalogItemLabel(catalogItem),
           }),
         }}
       >
@@ -57,8 +58,10 @@ const CatalogItemCard: React.FC<CatalogItemCardProps> = ({ catalogItem, onSelect
         <Stack hasGutter>
           <StackItem>
             <Stack>
-              <StackItem>
-                <Title headingLevel="h3">{catalogItem.spec.displayName || catalogItem.metadata.name}</Title>
+              <StackItem isFilled>
+                <Title headingLevel="h3">
+                  <CatalogItemLabel item={catalogItem} shortened />
+                </Title>
               </StackItem>
               {catalogItem.spec.provider && (
                 <StackItem>

libs/ui-components/src/components/Catalog/CatalogItemDetails.tsx

@@ -35,9 +35,10 @@ import { ROUTE, useNavigate } from '../../hooks/useNavigate';
 import { useItemIsInUse } from './useCatalogItems';
 import FlightCtlForm from '../form/FlightCtlForm';
 import { DeprecateModal, RestoreModal } from './DeprecateModal';
-import { getCatalogItemIcon, getFullContainerURI } from '../../utils/catalog';
+import { getCatalogItemIcon, getCatalogItemLabel, getFullContainerURI } from '../../utils/catalog';
 import DeleteModal from '../modals/DeleteModal/DeleteModal';
 import WithTooltip from '../common/WithTooltip';
+import { CatalogItemLabel } from './CatalogItemLabels';
 import { buildAllDropdownActions } from '../common/ActionsDropdownList';
 import FlightCtlPageDrawer from '../common/FlightCtlPageDrawer';
 import { InstallSpec } from './InstallWizard/steps/SpecificationsStep';
@@ -73,7 +74,9 @@ export const CatalogItemDetailsHeader = ({ item }: CatalogItemDetailsHeaderProps
         <img src={getCatalogItemIcon(item)} alt={`${item.metadata.name} icon`} style={{ maxWidth: '40px' }} />
       </SplitItem>
       <SplitItem isFilled>
-        <Title headingLevel="h1">{item.spec.displayName || item.metadata.name}</Title>
+        <Title headingLevel="h1">
+          <CatalogItemLabel item={item} shortened />
+        </Title>
         {item.spec.provider && (
           <Content component={ContentVariants.small}>
             {t('Provided by {{provider}}', { provider: item.spec.provider })}
@@ -102,7 +105,7 @@ const CatalogItemDetailsModal = ({
   const { t } = useTranslation();
   const { patch, remove } = useFetch();
 
-  const displayName = item.spec.displayName || (item.metadata.name as string);
+  const displayName = getCatalogItemLabel(item);
   const itemEndpoint = `catalogs/${item.metadata.catalog}/items/${item.metadata.name}`;
 
   switch (itemModalOpen) {

libs/ui-components/src/components/Catalog/CatalogItemLabels.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import type { CatalogItem } from '@flightctl/types/alpha';
+import type { CatalogItemRefSpec } from '@flightctl/types';
+
+import { formatCatalogItemRef, getCatalogItemLabel } from '../../utils/catalog';
+import TruncatedText from '../common/TruncatedText';
+
+export const CatalogItemLabel = ({ item, shortened }: { item: CatalogItem; shortened?: boolean }) => (
+  <TruncatedText text={getCatalogItemLabel(item)} maxChars={shortened ? 30 : undefined} />
+);
+
+export const CatalogItemRefLabel = ({ catalogItemRef }: { catalogItemRef: CatalogItemRefSpec }) => {
+  const { version, catalog, item } = catalogItemRef;
+  const text = version ? formatCatalogItemRef(catalogItemRef) : `${catalog}/${item}`;
+  return <TruncatedText text={text} maxChars={50} leadingChars={16} />;
+};

libs/ui-components/src/components/Catalog/CatalogItemTitle.tsx

@@ -7,6 +7,7 @@ import type { CatalogItemRefSpec } from '@flightctl/types';
 import type { CatalogItem } from '@flightctl/types/alpha';
 import { useTranslation } from '../../hooks/useTranslation';
 import { getCatalogItemIcon } from '../../utils/catalog';
+import { CatalogItemLabel, CatalogItemRefLabel } from './CatalogItemLabels';
 
 const formatVersionLine = (t: TFunction, version?: string, channel?: string) => {
   if (!version) {
@@ -79,7 +80,9 @@ export const BrokenCatalogItemTitle = ({
               )}
             />
           </StackItem>
-          <StackItem>{`${catalogRef.catalog}/${catalogRef.item}`}</StackItem>
+          <StackItem>
+            <CatalogItemRefLabel catalogItemRef={catalogRef} />
+          </StackItem>
         </Stack>
       }
       description={description}
@@ -102,7 +105,7 @@ const CatalogItemTitle = ({
 }) => (
   <CatalogTitleLayout
     icon={<img src={getCatalogItemIcon(item)} alt={`${item.metadata.name} icon`} style={{ maxWidth: '40px' }} />}
-    title={item.spec.displayName || item.metadata.name || ''}
+    title={<CatalogItemLabel item={item} />}
     description={description}
     version={version}
     channel={channel}

libs/ui-components/src/components/Catalog/EditWizard/EditWizard.tsx

@@ -34,6 +34,8 @@ import { hasPackageModeCapability } from '../../../utils/capabilities';
 import { appendJSONPatch } from '../../../utils/patch';
 import EditOsWizard from './EditOsWizard';
 import EditAppWizard from './EditAppWizard';
+import { CatalogItemLabel } from '../CatalogItemLabels';
+import TruncatedText from '../../common/TruncatedText';
 
 type EditWizardProps = {
   specPath: string;
@@ -188,7 +190,11 @@ const EditWizard = ({
     }
   }
 
-  const catalogDisplayName = catalogItem?.spec.displayName || params.itemId;
+  const titleEl = catalogItem ? (
+    <CatalogItemLabel item={catalogItem} shortened />
+  ) : (
+    <TruncatedText text={params.itemId} maxChars={30} />
+  );
 
   return (
     <>
@@ -209,16 +215,17 @@ const EditWizard = ({
               {t('Software catalog')}
             </Link>
           </BreadcrumbItem>
-          <BreadcrumbItem isActive>{`${catalogDisplayName}${appName ? ` (${appName})` : ''}`}</BreadcrumbItem>
+          <BreadcrumbItem isActive>
+            {titleEl}
+            {appName ? ` (${appName})` : ''}
+          </BreadcrumbItem>
         </Breadcrumb>
       </PageSection>
       <PageSection hasBodyWrapper={false}>
         <Stack>
           <StackItem>
             <Title headingLevel="h1" size="3xl">
-              {version
-                ? t('Deploy {{ name }}', { name: catalogDisplayName })
-                : t('Edit {{name}}', { name: catalogDisplayName })}
+              {version ? t('Deploy') : t('Edit')} {titleEl}
             </Title>
           </StackItem>
           <StackItem>

libs/ui-components/src/components/Catalog/InstallWizard/InstallWizard.tsx

@@ -25,6 +25,8 @@ import { getErrorMessage } from '../../../utils/error';
 import { usePermissionsContext } from '../../common/PermissionsContext';
 import PageWithPermissions from '../../common/PageWithPermissions';
 import { RESOURCE, VERB } from '../../../types/rbac';
+import { CatalogItemLabel } from '../CatalogItemLabels';
+import TruncatedText from '../../common/TruncatedText';
 
 const InstallWizard = () => {
   const { t } = useTranslation();
@@ -49,21 +51,27 @@ const InstallWizard = () => {
     content = <InstallAppWizard catalogItem={catalogItem} />;
   }
 
+  const titleEl = catalogItem ? (
+    <CatalogItemLabel item={catalogItem} shortened />
+  ) : (
+    <TruncatedText text={params.itemId} maxChars={30} />
+  );
+
   return (
     <>
       <PageSection hasBodyWrapper={false} type="breadcrumb">
         <Breadcrumb>
           <BreadcrumbItem>
             <Link to={ROUTE.CATALOG}>{t('Software Catalog')}</Link>
           </BreadcrumbItem>
-          <BreadcrumbItem isActive>{catalogItem?.spec.displayName || params.itemId}</BreadcrumbItem>
+          <BreadcrumbItem isActive>{titleEl}</BreadcrumbItem>
         </Breadcrumb>
       </PageSection>
       <PageSection hasBodyWrapper={false}>
         <Stack>
           <StackItem>
             <Title headingLevel="h1" size="3xl">
-              {t('Deploy {{name}}', { name: catalogItem?.spec.displayName || params.itemId })}
+              {t('Deploy')} {titleEl}
             </Title>
           </StackItem>
           <StackItem>

libs/ui-components/src/components/Device/EditDeviceWizard/SystemImageDescriptionGroup.tsx

@@ -11,7 +11,7 @@ import {
 
 import type { CatalogItemRefSpec, ImageOrCatalogItemRefSpec } from '@flightctl/types';
 import { useTranslation } from '../../../hooks/useTranslation';
-import { formatCatalogItemRef } from '../../../utils/catalog';
+import { CatalogItemRefLabel } from '../../Catalog/CatalogItemLabels';
 import { useSystemImage } from './useSystemImage';
 
 export const SystemImageCatalogLabel = () => {
@@ -23,28 +23,24 @@ export const SystemImageCatalogLabel = () => {
   );
 };
 
-export const SystemImageDisplay = ({
-  catalogItemRef,
-  imageUri,
-}: {
-  catalogItemRef: CatalogItemRefSpec | undefined;
-  imageUri?: string;
-}) => {
-  if (catalogItemRef) {
-    return (
-      <Flex
-        alignItems={{ default: 'alignItemsCenter' }}
-        spaceItems={{ default: 'spaceItemsSm' }}
-        flexWrap={{ default: 'nowrap' }}
-      >
-        <FlexItem>
-          <SystemImageCatalogLabel />
-        </FlexItem>
-        <FlexItem>{imageUri || formatCatalogItemRef(catalogItemRef)}</FlexItem>
-      </Flex>
-    );
+export const SystemImageDisplay = ({ catalogItemRef }: { catalogItemRef: CatalogItemRefSpec | undefined }) => {
+  if (!catalogItemRef) {
+    return '-';
   }
-  return imageUri || '-';
+  return (
+    <Flex
+      alignItems={{ default: 'alignItemsCenter' }}
+      spaceItems={{ default: 'spaceItemsSm' }}
+      flexWrap={{ default: 'nowrap' }}
+    >
+      <FlexItem>
+        <SystemImageCatalogLabel />
+      </FlexItem>
+      <FlexItem>
+        <CatalogItemRefLabel catalogItemRef={catalogItemRef} />
+      </FlexItem>
+    </Flex>
+  );
 };
 
 const SystemImageDescriptionGroup = ({
@@ -62,7 +58,9 @@ const SystemImageDescriptionGroup = ({
   if (imageResult.isLoading) {
     osContent = <Spinner size="sm" />;
   } else if (imageResult.imageUri || isCatalogItemRef) {
-    osContent = imageResult.imageUri || formatCatalogItemRef(osSpec?.catalogItemRef as CatalogItemRefSpec);
+    osContent = imageResult.imageUri || (
+      <CatalogItemRefLabel catalogItemRef={osSpec?.catalogItemRef as CatalogItemRefSpec} />
+    );
   } else {
     osContent = isFleet ? t('The fleet will not manage system image') : t('The device will not manage system image');
   }

libs/ui-components/src/components/DynamicForm/VolumeImageField.tsx

@@ -48,11 +48,12 @@ import {
 import FlightCtlForm from '../form/FlightCtlForm';
 import { type PaginationDetails } from '../../hooks/useTablePagination';
 import { getErrorMessage } from '../../utils/error';
-import { buildCatalogItemRef, formatCatalogItemRef } from '../../utils/catalog';
+import { buildCatalogItemRef } from '../../utils/catalog';
 import ResourceListEmptyState from '../common/ResourceListEmptyState';
 import FlightCtlModal from '../common/FlightCtlModal';
 import { InstallSpec } from '../Catalog/InstallWizard/steps/SpecificationsStep';
 import CatalogItemTitle from '../Catalog/CatalogItemTitle';
+import { CatalogItemRefLabel } from '../Catalog/CatalogItemLabels';
 import { type InstallSpecFormik } from '../Catalog/InstallWizard/types';
 import { useCatalogItems } from '../Catalog/useCatalogItems';
 import { useResolvedCatalogRef } from '../Catalog/useResolvedCatalogRef';
@@ -330,9 +331,7 @@ const VolumeImageField = ({ idSchema, formData, onChange, rawErrors, formContext
             {catalogItem ? (
               <CatalogItemTitle item={catalogItem} channel={catalogRef.channel || ''} version={catalogRef.version} />
             ) : (
-              t('Catalog item {{ catalogItemRef }}', {
-                catalogItemRef: formatCatalogItemRef(catalogRef),
-              })
+              <CatalogItemRefLabel catalogItemRef={catalogRef} />
             )}
           </SplitItem>
           <SplitItem>

libs/ui-components/src/components/Fleet/FleetRow.tsx

@@ -103,7 +103,7 @@ const FleetRow: React.FC<FleetRowProps> = ({
         </FleetOwnerLinkIcon>
       </Td>
       <Td dataLabel={t('System image')}>
-        <SystemImageDisplay catalogItemRef={fleetOsSpec?.catalogItemRef} imageUri={fleetOsSpec?.image} />
+        {fleetOsSpec?.image || <SystemImageDisplay catalogItemRef={fleetOsSpec?.catalogItemRef} />}
       </Td>
       <Td dataLabel={t('Up-to-date/devices')}>
         <FleetDevicesCount

libs/ui-components/src/components/ImageBuilds/ImageBuildDetails/ImageBuildDetailsTab.tsx

@@ -28,6 +28,7 @@ import ImagePromotionStatus from '../../ImagePromotion/ImagePromotionStatus';
 import { getDateDisplay } from '../../../utils/dates';
 import { getExportFormatLabel, getImageReference } from '../../../utils/imageBuilds';
 import { useTranslation } from '../../../hooks/useTranslation';
+import TruncatedText from '../../common/TruncatedText';
 import { useAppContext } from '../../../hooks/useAppContext';
 import DetailsPageCard from '../../DetailsPage/DetailsPageCard';
 import { CERTIFICATE_VALIDITY_IN_YEARS } from '../../../constants';
@@ -89,7 +90,9 @@ const ImagePromotionRow = ({
     <Tr>
       <Td dataLabel={t('Name')}>{imagePromotion.metadata.name || ''}</Td>
       <Td dataLabel={t('Target catalog')}>{imagePromotion.spec.target.catalogName}</Td>
-      <Td dataLabel={t('Target catalog item')}>{imagePromotion.spec.target.catalogItemName}</Td>
+      <Td dataLabel={t('Target catalog item')}>
+        <TruncatedText text={imagePromotion.spec.target.catalogItemName || ''} />
+      </Td>
 
       <Td dataLabel={t('Status')}>
         <ImagePromotionStatus promotion={imagePromotion} />