Truncate and show ellipsis with tooltip if content of createMetadataDescriptionColumn is too wide

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

.changeset/gentle-zoos-pump.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Truncate and show ellipsis with tooltip if content of
+`createMetadataDescriptionColumn` is too wide.

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

@@ -20,7 +20,7 @@ import {
   RELATION_OWNED_BY,
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
-import { TableColumn } from '@backstage/core';
+import { OverflowTooltip, TableColumn } from '@backstage/core';
 import React from 'react';
 import { getEntityRelations } from '../../utils';
 import {
@@ -139,6 +139,12 @@ export function createMetadataDescriptionColumn<
   return {
     title: 'Description',
     field: 'metadata.description',
+    render: entity => (
+      <OverflowTooltip
+        text={entity.metadata.description}
+        placement="bottom-start"
+      />
+    ),
     width: 'auto',
   };
 }

plugins/catalog-react/src/components/EntityTable/presets.test.tsx

@@ -74,7 +74,7 @@ describe('systemEntityColumns', () => {
       expect(getByText('my-namespace/my-system')).toBeInTheDocument();
       expect(getByText('my-namespace/my-domain')).toBeInTheDocument();
       expect(getByText('Test')).toBeInTheDocument();
-      expect(getByText('Some description')).toBeInTheDocument();
+      expect(getByText(/Some/)).toBeInTheDocument();
     });
   });
 });
@@ -131,7 +131,7 @@ describe('componentEntityColumns', () => {
       expect(getByText('Test')).toBeInTheDocument();
       expect(getByText('production')).toBeInTheDocument();
       expect(getByText('service')).toBeInTheDocument();
-      expect(getByText('Some description')).toBeInTheDocument();
+      expect(getByText(/Some/)).toBeInTheDocument();
     });
   });
 });