EDM-4074: Display long Catalog item names better

libs/i18n/locales/en/translation.json

@@ -205,8 +205,8 @@
   "Field": "Field",
   "Value": "Value",
   "Close": "Close",
-  "View {{ name }}": "View {{ name }}",
-  "Edit {{ name }}": "Edit {{ name }}",
+  "View {catalogItemEl}": "View {catalogItemEl}",
+  "Edit {catalogItemEl}": "Edit {catalogItemEl}",
   "Create": "Create",
   "General info": "General info",
   "Type and configuration": "Type and configuration",
@@ -414,9 +414,8 @@
   "Device is in package mode. The catalog item cannot be deployed to this device.": "Device is in package mode. The catalog item cannot be deployed to this device.",
   "Failed to find operating system": "Failed to find operating system",
   "Failed to find application": "Failed to find application",
+  "Deploy {catalogItemEl}": "Deploy {catalogItemEl}",
   "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",
@@ -462,7 +461,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:",

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

@@ -11,6 +11,7 @@ import {
   WizardStep,
   type WizardStepType,
 } from '@patternfly/react-core';
+import { Trans } from 'react-i18next';
 import { type CatalogItem } from '@flightctl/types/alpha';
 import { Formik, type FormikErrors } from 'formik';
 
@@ -38,6 +39,7 @@ import { getErrorMessage } from '../../../utils/error';
 import { usePermissionsContext } from '../../common/PermissionsContext';
 import PageWithPermissions from '../../common/PageWithPermissions';
 import { RESOURCE, VERB } from '../../../types/rbac';
+import { CatalogItemLabel } from '../CatalogItemDetails';
 
 const orderedIds = [generalInfoStepId, typeConfigStepId, versionStepId, reviewStepId];
 
@@ -109,13 +111,22 @@ const AddCatalogItemWizard = () => {
   const initialValues = editItem ? getInitialValuesFromItem(editItem) : getInitialValues();
   const isReadOnly = !!editItem?.metadata?.owner;
 
-  let pageTitle: string;
+  const catalogItemEl = <CatalogItemLabel item={editItem} />;
+  let titleEl: React.ReactNode;
   if (isReadOnly) {
-    pageTitle = t('View {{ name }}', { name: editItem?.spec.displayName || editItem?.metadata.name });
+    titleEl = (
+      <Trans t={t} values={{ catalogItemEl }}>
+        View {catalogItemEl}
+      </Trans>
+    );
   } else if (isEdit) {
-    pageTitle = t('Edit {{ name }}', { name: editItem?.spec.displayName || editItem?.metadata.name });
+    titleEl = (
+      <Trans t={t} values={{ catalogItemEl }}>
+        Edit {catalogItemEl}
+      </Trans>
+    );
   } else {
-    pageTitle = t('Create catalog item');
+    titleEl = t('Create catalog item');
   }
 
   let content: React.ReactNode = (
@@ -230,12 +241,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/CatalogItemDetails.tsx

@@ -41,6 +41,7 @@ import DeleteModal from '../modals/DeleteModal/DeleteModal';
 import WithTooltip from '../common/WithTooltip';
 import { buildAllDropdownActions } from '../common/ActionsDropdownList';
 import FlightCtlPageDrawer from '../common/FlightCtlPageDrawer';
+import TruncatedText from '../common/TruncatedText';
 import CatalogItemIcon from './CatalogItemIcon';
 import { InstallSpec } from './InstallWizard/steps/SpecificationsStep';
 import { type InstallSpecFormik } from './InstallWizard/types';
@@ -67,6 +68,21 @@ type CatalogItemDetailsHeaderProps = {
   item: CatalogItem;
 };
 
+export const CatalogItemLabel = ({
+  item,
+  fallbackId,
+  shortened,
+}: {
+  item?: CatalogItem;
+  fallbackId?: string;
+  shortened?: boolean;
+}) => (
+  <TruncatedText
+    text={item?.spec.displayName || item?.metadata.name || fallbackId || ''}
+    maxChars={shortened ? 30 : undefined}
+  />
+);
+
 export const CatalogItemDetailsHeader = ({ item }: CatalogItemDetailsHeaderProps) => {
   const { t } = useTranslation();
   return (
@@ -75,7 +91,9 @@ export const CatalogItemDetailsHeader = ({ item }: CatalogItemDetailsHeaderProps
         <CatalogItemIcon catalogItem={item} />
       </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 })}

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 CatalogItemIcon from './CatalogItemIcon';
+import { CatalogItemLabel } from './CatalogItemDetails';
 
 const formatVersionLine = (t: TFunction, version?: string, channel?: string) => {
   if (!version) {
@@ -90,25 +91,26 @@ export const BrokenCatalogItemTitle = ({
 };
 
 const CatalogItemTitle = ({
-  headerTitle,
   item,
+  title,
   version,
   channel,
-  description,
 }: {
   item: CatalogItem;
-  headerTitle: string;
+  title?: string;
   version?: string;
   channel?: string;
-  description?: string;
-}) => (
-  <CatalogTitleLayout
-    icon={<CatalogItemIcon catalogItem={item} />}
-    title={headerTitle}
-    description={description}
-    version={version}
-    channel={channel}
-  />
-);
+}) => {
+  const nameEl = <CatalogItemLabel item={item} shortened />;
+  return (
+    <CatalogTitleLayout
+      icon={<CatalogItemIcon catalogItem={item} />}
+      title={title || nameEl}
+      description={title ? nameEl : undefined}
+      version={version}
+      channel={channel}
+    />
+  );
+};
 
 export default CatalogItemTitle;

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

@@ -7,6 +7,8 @@ import {
   Content,
   ContentVariants,
   EmptyState,
+  Flex,
+  FlexItem,
   PageSection,
   Spinner,
   Stack,
@@ -15,6 +17,7 @@ import {
 } from '@patternfly/react-core';
 import { CatalogItemCategory } from '@flightctl/types/alpha';
 import { load } from 'js-yaml';
+import { Trans } from 'react-i18next';
 
 import type { ApplicationProviderSpec, Device, Fleet, ImageOrCatalogItemRefSpec, PatchRequest } from '@flightctl/types';
 import ErrorBoundary from '../../common/ErrorBoundary';
@@ -35,6 +38,7 @@ import { appendJSONPatch } from '../../../utils/patches/patch';
 import { type CatalogEditWizardMode, getEditWizardMode } from '../../../utils/catalog';
 import EditOsWizard from './EditOsWizard';
 import EditAppWizard from './EditAppWizard';
+import { CatalogItemLabel } from '../CatalogItemDetails';
 
 type EditWizardProps = {
   mode: CatalogEditWizardMode;
@@ -192,7 +196,21 @@ const EditWizard = ({
     }
   }
 
-  const catalogDisplayName = catalogItem?.spec.displayName || params.itemId;
+  const catalogItemEl = <CatalogItemLabel item={catalogItem} fallbackId={params.itemId} shortened />;
+  let titleEl: React.ReactNode;
+  if (version) {
+    titleEl = (
+      <Trans t={t} values={{ catalogItemEl }}>
+        Deploy {catalogItemEl}
+      </Trans>
+    );
+  } else {
+    titleEl = (
+      <Trans t={t} values={{ catalogItemEl }}>
+        Edit {catalogItemEl}
+      </Trans>
+    );
+  }
 
   return (
     <>
@@ -213,16 +231,19 @@ const EditWizard = ({
               {t('Software catalog')}
             </Link>
           </BreadcrumbItem>
-          <BreadcrumbItem isActive>{`${catalogDisplayName}${appName ? ` (${appName})` : ''}`}</BreadcrumbItem>
+          <BreadcrumbItem isActive>
+            <Flex gap={{ default: 'gapSm' }}>
+              <FlexItem>{appName ? `(${appName}) ` : ''}</FlexItem>
+              <FlexItem>{titleEl}</FlexItem>
+            </Flex>
+          </BreadcrumbItem>
         </Breadcrumb>
       </PageSection>
       <PageSection hasBodyWrapper={false}>
         <Stack>
           <StackItem>
             <Title headingLevel="h1" size="3xl">
-              {version
-                ? t('Deploy {{ name }}', { name: catalogDisplayName })
-                : t('Edit {{name}}', { name: catalogDisplayName })}
+              {titleEl}
             </Title>
           </StackItem>
           <StackItem>

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

@@ -25,6 +25,7 @@ import { getErrorMessage } from '../../../utils/error';
 import { usePermissionsContext } from '../../common/PermissionsContext';
 import PageWithPermissions from '../../common/PageWithPermissions';
 import { RESOURCE, VERB } from '../../../types/rbac';
+import { CatalogItemLabel } from '../CatalogItemDetails';
 
 const InstallWizard = () => {
   const { t } = useTranslation();
@@ -49,21 +50,23 @@ const InstallWizard = () => {
     content = <InstallAppWizard catalogItem={catalogItem} />;
   }
 
+  const titleEl = <CatalogItemLabel item={catalogItem} fallbackId={params.itemId} shortened />;
+
   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/Catalog/InstallWizard/steps/SpecificationsStep.tsx

@@ -25,7 +25,6 @@ import {
 import FlightCtlModal from '@flightctl/ui-components/src/components/common/FlightCtlModal';
 import * as React from 'react';
 import { type FormikErrors, useFormikContext } from 'formik';
-import * as semver from 'semver';
 import ReactMarkdown from 'react-markdown';
 import { type TFunction } from 'react-i18next';
 
@@ -42,6 +41,7 @@ import { applyInitialConfig, getInitialAppConfig } from '../utils';
 import { type InstallAppFormik, type InstallSpecFormik, type TargetPickerFormik } from '../types';
 import WithTooltip from '../../../common/WithTooltip';
 import { getFullContainerURI } from '../../../../utils/catalog';
+import { getSortedChannelVersions } from '../../../CatalogComposition/catalogCompositionUtils';
 
 type VersionDropdownProps = {
   catalogItem: CatalogItem;
@@ -106,14 +106,11 @@ export const InstallSpec = ({
     return acc;
   }, {});
 
-  const versions = catalogItem.spec.versions.sort((v1, v2) => semver.compare(v2.version, v1.version));
-
-  const channelVersions = versions.filter(
-    (v) =>
-      v.channels.includes(values.channel) && (targetSet ? !!getFullContainerURI(catalogItem.spec.artifacts, v) : true),
+  const channelVersions = getSortedChannelVersions(catalogItem, values.channel).filter((v) =>
+    targetSet ? !!getFullContainerURI(catalogItem.spec.artifacts, v) : true,
   );
 
-  const currentVersion = versions.find((v) => v.version === values.version);
+  const currentVersion = catalogItem.spec.versions.find((v) => v.version === values.version);
 
   return (
     <>
@@ -131,7 +128,7 @@ export const InstallSpec = ({
               name="channel"
               items={channels}
               onChange={(val) => {
-                const newChannelVersions = versions.filter((v) => v.channels.includes(val));
+                const newChannelVersions = getSortedChannelVersions(catalogItem, val);
                 if (!newChannelVersions.some((v) => v.version === values.version)) {
                   const newVersion = newChannelVersions.length ? newChannelVersions[0].version : undefined;
                   setFieldValue('version', newVersion, true);

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

@@ -23,16 +23,7 @@ const SoftwareItemTitle = ({
     return <BrokenCatalogItemTitle catalogRef={catalogItemId.ref} headerTitle={appName} />;
   }
 
-  const itemName = (data.item.spec.displayName || data.item.metadata.name) as string;
-  return (
-    <CatalogItemTitle
-      headerTitle={appName || itemName}
-      description={appName ? itemName : undefined}
-      item={data.item}
-      channel={data.channel}
-      version={data.version?.version}
-    />
-  );
+  return <CatalogItemTitle item={data.item} title={appName} channel={data.channel} version={data.version?.version} />;
 };
 
 const SoftwareItemUpdateBadge = ({

libs/ui-components/src/components/CatalogComposition/catalogCompositionUtils.ts

@@ -157,7 +157,7 @@ export const getDefaultChannelAndVersion = (item: CatalogItem) => {
     };
   }
 
-  const versions = item.spec.versions.sort((v1, v2) => semver.rcompare(v1.version, v2.version));
+  const versions = [...item.spec.versions].sort((v1, v2) => semver.rcompare(v1.version, v2.version));
 
   // release then prerelease
   const latestVersion = versions.find((v) => !semver.prerelease(v.version)) || versions[0];

libs/ui-components/src/components/QuickStart/quickStartDefinitions.ts

@@ -1,4 +1,4 @@
-import type { TFunction } from 'react-i18next';
+import type { TFunction } from 'i18next';
 import { RESOURCE, VERB } from '../../types/rbac';
 import type { PermissionCheck } from '../common/PermissionsContext';
 import type { QuickStartPhaseDefinition } from './types';

libs/ui-components/src/components/Repository/RepositoryDetails/RepositoryGeneralDetailsCard.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { TFunction } from 'react-i18next';
+import type { TFunction } from 'i18next';
 import {
   Card,
   CardBody,

libs/ui-components/src/components/Terminal/AppTerminal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { TFunction } from 'react-i18next';
+import type { TFunction } from 'i18next';
 import {
   Alert,
   AlertActionLink,

libs/ui-components/src/components/Terminal/TerminalConnectError.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Alert, AlertActionLink } from '@patternfly/react-core';
-import type { TFunction } from 'react-i18next';
+import type { TFunction } from 'i18next';
 
 import type { AppConsoleConnectError } from '../../hooks/useAppConsoleWebSocket';
 import { useTranslation } from '../../hooks/useTranslation';