added optional title prop in EntityRefLink

Signed-off-by: Alex Rybchenko <arybchenko@box.com>

plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx

@@ -19,20 +19,23 @@ import {
   ENTITY_DEFAULT_NAMESPACE,
 } from '@backstage/catalog-model';
 import React, { forwardRef } from 'react';
-import { generatePath } from 'react-router';
-import { entityRoute } from '../../routes';
+import { entityRouteRef } from '../../routes';
 import { formatEntityRefTitle } from './format';
 import { Link, LinkProps } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { Tooltip } from '@material-ui/core';
 
 export type EntityRefLinkProps = {
   entityRef: Entity | EntityName;
   defaultKind?: string;
+  title?: string;
   children?: React.ReactNode;
 } & Omit<LinkProps, 'to'>;
 
 export const EntityRefLink = forwardRef<any, EntityRefLinkProps>(
   (props, ref) => {
-    const { entityRef, defaultKind, children, ...linkProps } = props;
+    const { entityRef, defaultKind, title, children, ...linkProps } = props;
+    const entityRoute = useRouteRef(entityRouteRef);
 
     let kind;
     let namespace;
@@ -57,16 +60,20 @@ export const EntityRefLink = forwardRef<any, EntityRefLinkProps>(
       name,
     };
 
-    // TODO: Use useRouteRef here to generate the path
-    return (
-      <Link
-        {...linkProps}
-        ref={ref}
-        to={generatePath(`/catalog/${entityRoute.path}`, routeParams)}
-      >
+    const link = (
+      <Link {...linkProps} ref={ref} to={entityRoute(routeParams)}>
         {children}
-        {!children && formatEntityRefTitle(entityRef, { defaultKind })}
+        {!children &&
+          (title ?? formatEntityRefTitle(entityRef, { defaultKind }))}
       </Link>
     );
+
+    return title ? (
+      <Tooltip title={formatEntityRefTitle(entityRef, { defaultKind })}>
+        {link}
+      </Tooltip>
+    ) : (
+      link
+    );
   },
 );

plugins/catalog-react/src/components/EntityTable/columns.tsx

@@ -58,7 +58,11 @@ export function createEntityRefColumn<T extends Entity>({
       return formatContent(entity1).localeCompare(formatContent(entity2));
     },
     render: entity => (
-      <EntityRefLink entityRef={entity} defaultKind={defaultKind} />
+      <EntityRefLink
+        entityRef={entity}
+        defaultKind={defaultKind}
+        title={entity.metadata?.title}
+      />
     ),
   };
 }
@@ -150,21 +154,6 @@ export function createMetadataDescriptionColumn<
   };
 }
 
-export function createMetadataTitleColumn<T extends Entity>(): TableColumn<T> {
-  return {
-    title: 'Title',
-    field: 'metadata.title',
-    render: entity => (
-      <OverflowTooltip
-        text={entity.metadata.title}
-        placement="bottom-start"
-        line={2}
-      />
-    ),
-    width: 'auto',
-  };
-}
-
 export function createSpecLifecycleColumn<T extends Entity>(): TableColumn<T> {
   return {
     title: 'Lifecycle',

plugins/catalog/src/components/CatalogTable/columns.tsx

@@ -34,6 +34,7 @@ export function createNameColumn(
       <EntityRefLink
         entityRef={entity}
         defaultKind={props?.defaultKind || 'Component'}
+        title={entity.metadata?.title}
       />
     ),
   };
@@ -94,17 +95,6 @@ export function createMetadataDescriptionColumn(): TableColumn<EntityRow> {
   };
 }
 
-export function createMetadataTitleColumn(): TableColumn<EntityRow> {
-  return {
-    title: 'Title',
-    field: 'entity.metadata.title',
-    render: ({ entity }) => (
-      <OverflowTooltip text={entity.metadata.title} placement="bottom-start" />
-    ),
-    width: 'auto',
-  };
-}
-
 export function createTagsColumn(): TableColumn<EntityRow> {
   return {
     title: 'Tags',