feat(ui): surface subscription names in the UI

ui/src/features/assemble-freight/artifact-menu-item.tsx

@@ -1,7 +1,13 @@
 import classNames from 'classnames';
 
+import { SubscriptionName } from '@ui/features/common/subscription-name';
+
 import { DiscoveryResult } from './types';
-import { getSubscriptionKey, isEqualSubscriptions } from './unique-subscription-key';
+import {
+  getSubscriptionKey,
+  getSubscriptionName,
+  isEqualSubscriptions
+} from './unique-subscription-key';
 
 export interface ArtifactMenuItemProps {
   onClick: () => void;
@@ -34,10 +40,16 @@ export const ArtifactMenuItems = ({
     {items.map((item) => {
       const isSelected = !!selected && isEqualSubscriptions(selected, item);
       const key = getSubscriptionKey(item);
+      const subscriptionName = getSubscriptionName(item);
 
       return (
         <ArtifactMenuItem key={key} onClick={() => onClick(item)} selected={isSelected}>
           {key}
+          {!!subscriptionName && (
+            <div className='mt-1'>
+              <SubscriptionName name={subscriptionName} />
+            </div>
+          )}
         </ArtifactMenuItem>
       );
     })}

ui/src/features/assemble-freight/unique-subscription-key.ts

@@ -22,5 +22,8 @@ export const getSubscriptionKeyFreight = (res: Image | Chart | GitCommit) => {
   return getSubscriptionKey(res);
 };
 
+export const getSubscriptionName = (res: DiscoveryResult) =>
+  'subscriptionName' in res ? res.subscriptionName : undefined;
+
 export const isEqualSubscriptions = (a: DiscoveryResult, b: DiscoveryResult) =>
   getSubscriptionKey(a) === getSubscriptionKey(b);

ui/src/features/common/commit-info.tsx

@@ -6,6 +6,12 @@ export const CommitInfo = ({ commit }: { commit: GitCommit }) => (
     <div>
       <a href={commit.repoURL}>{commit.repoURL}</a>
     </div>
+    {commit.subscriptionName && (
+      <>
+        <div>Subscription:</div>
+        <div>{commit.subscriptionName}</div>
+      </>
+    )}
     {commit.branch ? (
       <>
         <div>Branch:</div>

ui/src/features/common/subscription-name.tsx

@@ -0,0 +1,18 @@
+import { Typography } from 'antd';
+import classNames from 'classnames';
+
+export const SubscriptionName = ({ name, className }: { name?: string; className?: string }) => {
+  if (!name) {
+    return null;
+  }
+
+  return (
+    <Typography.Text
+      type='secondary'
+      title={`subscription: ${name}`}
+      className={classNames(className)}
+    >
+      {name}
+    </Typography.Text>
+  );
+};

ui/src/features/freight-timeline/freight-content-item.tsx

@@ -5,6 +5,7 @@ import Link from 'antd/es/typography/Link';
 import classNames from 'classnames';
 import { useMemo } from 'react';
 
+import { SubscriptionName } from '../common/subscription-name';
 import { TruncateMiddle } from '../common/truncate-middle';
 
 export const FreightContentItem = (props: {
@@ -23,6 +24,8 @@ export const FreightContentItem = (props: {
   artifactSource?: string;
   // build date of image
   artifactBuildDate?: string;
+  // name of the subscription that discovered the artifact, if it has one
+  subscriptionName?: string;
 }) => {
   const {
     horizontal,
@@ -34,9 +37,22 @@ export const FreightContentItem = (props: {
     href,
     children,
     linkClass,
-    fullContentVisibility
+    fullContentVisibility,
+    subscriptionName
   } = props;
 
+  // The chips are too cramped to always carry the name, so it rides along in
+  // the tooltip and only becomes a visible tag where there is room for it.
+  const _title = useMemo(() => {
+    if (!subscriptionName) {
+      return title;
+    }
+
+    return title
+      ? `${title} (subscription: ${subscriptionName})`
+      : `subscription: ${subscriptionName}`;
+  }, [title, subscriptionName]);
+
   const _children = useMemo(() => {
     if (fullContentVisibility) {
       return children;
@@ -57,7 +73,7 @@ export const FreightContentItem = (props: {
         'bg-gray-200': !dark && horizontal
       })}
       overlay={overlay}
-      title={title}
+      title={_title}
     >
       <Flex align='center' gap={8}>
         {!!icon && (
@@ -107,6 +123,9 @@ export const FreightContentItem = (props: {
             {props.artifactBuildDate}
           </span>
         )}
+        {fullContentVisibility && (
+          <SubscriptionName name={subscriptionName} className='text-[10px]' />
+        )}
       </div>
     </Tooltip>
   );

ui/src/features/freight-timeline/freight-contents.tsx

@@ -38,8 +38,9 @@ export const FreightContents = (props: {
           horizontal={horizontal}
           linkClass={linkClass}
           highlighted={highlighted}
-          key={c.id}
+          key={`${c.subscriptionName || ''}:${c.id}`}
           overlay={<CommitInfo commit={c} />}
+          subscriptionName={c.subscriptionName}
           icon={faGitAlt}
           href={`${c.repoURL?.replace('.git', '')}/commit/${c.id}`}
           fullContentVisibility={props.fullContentVisibility}
@@ -55,8 +56,9 @@ export const FreightContents = (props: {
           horizontal={horizontal}
           linkClass={linkClass}
           highlighted={highlighted}
-          key={`${i.repoURL}:${i.tag}`}
+          key={`${i.subscriptionName || ''}:${i.repoURL}:${i.tag}`}
           title={`${i.repoURL}:${i.tag}`}
+          subscriptionName={i.subscriptionName}
           icon={faDocker}
           href={urlForImage(i.repoURL || '')}
           fullContentVisibility={props.fullContentVisibility}
@@ -72,8 +74,9 @@ export const FreightContents = (props: {
           horizontal={horizontal}
           linkClass={linkClass}
           highlighted={highlighted}
-          key={`${c.repoURL}:${c.version}`}
+          key={`${c.subscriptionName || ''}:${c.repoURL}:${c.version}`}
           title={`${c.repoURL}${c.name ? `/${c.name}` : ''}:${c.version}`}
+          subscriptionName={c.subscriptionName}
           fullContentVisibility={props.fullContentVisibility}
           icon={faAnchor}
         >
@@ -84,6 +87,7 @@ export const FreightContents = (props: {
         <FreightContentItem
           key={(g.subscriptionName || '') + g.artifactType}
           highlighted={highlighted}
+          subscriptionName={g.subscriptionName}
           linkClass={linkClass}
           fullContentVisibility={props.fullContentVisibility}
           horizontal={horizontal}

ui/src/features/freight/flatten-freight-origin-utils.ts

@@ -6,6 +6,7 @@ export type TableSource =
       repoURL: string;
       tag?: string;
       annotations?: Record<string, string>;
+      subscriptionName?: string;
     }
   | {
       type: 'git';
@@ -16,12 +17,14 @@ export type TableSource =
       author: string;
       committer: string;
       tag?: string;
+      subscriptionName?: string;
     }
   | {
       type: 'helm';
       repoURL: string;
       name: string;
       version: string;
+      subscriptionName?: string;
     }
   | ({
       type: 'other';
@@ -35,7 +38,8 @@ export const flattenFreightOrigin = (
       type: 'image',
       repoURL: image?.repoURL || '',
       tag: image?.tag || '',
-      annotations: image?.annotations || {}
+      annotations: image?.annotations || {},
+      subscriptionName: image?.subscriptionName
     })) || [];
 
   const git: TableSource[] =
@@ -47,15 +51,17 @@ export const flattenFreightOrigin = (
       committer: commit?.committer || '',
       id: commit?.id || '',
       message: commit?.message || '',
-      tag: commit?.tag || ''
+      tag: commit?.tag || '',
+      subscriptionName: commit?.subscriptionName
     })) || [];
 
   const helm: TableSource[] =
     freight?.charts?.map((chart) => ({
       type: 'helm',
       repoURL: chart?.repoURL || '',
       name: chart?.name || '',
-      version: chart?.version || ''
+      version: chart?.version || '',
+      subscriptionName: chart?.subscriptionName
     })) || [];
 
   const other: TableSource[] =

ui/src/features/project/pipelines/freight/freight-table.tsx

@@ -6,6 +6,7 @@ import { Table } from 'antd';
 import classNames from 'classnames';
 import { useMemo } from 'react';
 
+import { SubscriptionName } from '@ui/features/common/subscription-name';
 import { ArtifactMetadata } from '@ui/features/freight/artifact-metadata';
 import { flattenFreightOrigin } from '@ui/features/freight/flatten-freight-origin-utils';
 import { Freight } from '@ui/gen/api/v2/models';
@@ -55,12 +56,18 @@ export const FreightTable = (props: FreightTableProps) => {
               width: '30%',
               render: (_, record) => {
                 if (record.type === 'other') {
-                  return record.subscriptionName || '-';
+                  return '-';
                 }
 
-                return record.repoURL;
+                return <span className='break-all'>{record.repoURL}</span>;
               }
             },
+            {
+              title: 'Subscription Name',
+              width: '15%',
+              render: (_, record) =>
+                record.subscriptionName ? <SubscriptionName name={record.subscriptionName} /> : '-'
+            },
             {
               title: 'Version',
               render: (_, record) => {

ui/src/features/project/pipelines/nodes/stage-freight.tsx

@@ -212,6 +212,9 @@ export const StageFreight = (props: { stage: Stage }) => {
   );
 };
 
+const subscriptionTitle = (base: string | undefined, subscriptionName: string | undefined) =>
+  subscriptionName ? `${base} (subscription: ${subscriptionName})` : base;
+
 const Artifact = (props: { artifact: string | GitCommit | Chart | Image | ArtifactReference }) => {
   if (typeof props.artifact === 'string') {
     return (
@@ -221,10 +224,22 @@ const Artifact = (props: { artifact: string | GitCommit | Chart | Image | Artifa
     );
   }
 
+  // A generic artifact has no repository to name it, so its subscription name
+  // is all the carousel can show alongside the version.
   if (isArtifactGeneric(props.artifact)) {
     return (
-      <Tag bordered={false} color='geekblue'>
-        {props.artifact.version}
+      <Tag
+        bordered={false}
+        color='geekblue'
+        title={subscriptionTitle(props.artifact.version, props.artifact.subscriptionName)}
+      >
+        <Flex justify='center' align='center' wrap>
+          <div>{props.artifact.version}</div>
+
+          {!!props.artifact.subscriptionName && (
+            <span className='text-[10px] ml-1'>{props.artifact.subscriptionName}</span>
+          )}
+        </Flex>
       </Tag>
     );
   }
@@ -237,7 +252,11 @@ const Artifact = (props: { artifact: string | GitCommit | Chart | Image | Artifa
     const url = getGitCommitURL(props.artifact.repoURL || '', props.artifact.id || '');
 
     let TagComponent = (
-      <Tag title={props.artifact.repoURL} bordered={false} color='geekblue'>
+      <Tag
+        title={subscriptionTitle(props.artifact.repoURL, props.artifact.subscriptionName)}
+        bordered={false}
+        color='geekblue'
+      >
         <Flex justify='center' align='center' wrap>
           <div>{props.artifact.id?.slice(0, 7)}</div>
 
@@ -273,7 +292,10 @@ const Artifact = (props: { artifact: string | GitCommit | Chart | Image | Artifa
   if (isArtifactChart(props.artifact)) {
     return (
       <Tag
-        title={`${props.artifact.repoURL}:${props.artifact.version}`}
+        title={subscriptionTitle(
+          `${props.artifact.repoURL}:${props.artifact.version}`,
+          props.artifact.subscriptionName
+        )}
         bordered={false}
         color='geekblue'
       >
@@ -297,7 +319,10 @@ const Artifact = (props: { artifact: string | GitCommit | Chart | Image | Artifa
 
     let TagComponent = (
       <Tag
-        title={`${props.artifact.repoURL}:${props.artifact.tag}`}
+        title={subscriptionTitle(
+          `${props.artifact.repoURL}:${props.artifact.tag}`,
+          props.artifact.subscriptionName
+        )}
         bordered={false}
         color='geekblue'
       >

ui/src/features/project/pipelines/nodes/subscription-node.tsx

@@ -23,8 +23,9 @@ export const SubscriptionNode = (props: { subscription: RepoSubscription }) => {
       props.subscription?.chart?.repoURL ||
       props.subscription?.image?.repoURL ||
       '';
-    const title = humanComprehendableArtifact({ repoURL }) || props.subscription.name;
-    const base = artifactBase(repoURL) || repoURL;
+    const name = props.subscription.name;
+    const title = name || humanComprehendableArtifact({ repoURL }) || repoURL;
+    const base = name ? repoURL : artifactBase(repoURL) || repoURL;
     const link = artifactURL(repoURL);
 
     return { title, repoURL, base, link };
@@ -47,9 +48,11 @@ export const SubscriptionNode = (props: { subscription: RepoSubscription }) => {
       size='small'
       className={styles['subscription-node-size']}
       title={
-        <Flex align='center' gap={16}>
+        <Flex align='center' gap={8}>
           {icon && <FontAwesomeIcon icon={icon} />}
-          <span className='text-xs'>{title}</span>
+          <span className='text-xs truncate' title={title}>
+            {title}
+          </span>
         </Flex>
       }
       variant='borderless'