Merge pull request #4602 from SDA-SE/feat/less-columns

Reduce duplicate data from entity columns

.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.

.changeset/healthy-schools-kneel.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-catalog': patch
+---
+
+Remove domain column from `HasSystemsCard` and system from `HasComponentsCard`,
+`HasSubcomponentsCard`, and `HasApisCard`.

.changeset/olive-moons-melt.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-api-docs': patch
+---
+
+Make the description column in the catalog table and api-docs table use up as
+much space as possible before hiding overflowing text.

packages/catalog-model/examples/components/petstore-component.yaml

@@ -2,7 +2,8 @@ apiVersion: backstage.io/v1alpha1
 kind: Component
 metadata:
   name: petstore
-  description: Petstore
+  # This is an extra long description
+  description: The Petstore is an example API used to show features of the OpenAPI spec.
   links:
     - url: https://github.com/swagger-api/swagger-petstore
       title: GitHub Repo

plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx

@@ -99,6 +99,7 @@ const columns: TableColumn<EntityRow>[] = [
         placement="bottom-start"
       />
     ),
+    width: 'auto',
   },
   {
     title: 'Tags',

plugins/api-docs/src/components/ApisCards/HasApisCard.tsx

@@ -20,6 +20,7 @@ import {
   InfoCard,
   Link,
   Progress,
+  TableColumn,
   WarningPanel,
 } from '@backstage/core';
 import {
@@ -28,12 +29,20 @@ import {
   useRelatedEntities,
 } from '@backstage/plugin-catalog-react';
 import React from 'react';
-import { apiEntityColumns } from './presets';
+import { createSpecApiTypeColumn } from './presets';
 
 type Props = {
   variant?: 'gridItem';
 };
 
+const columns: TableColumn<ApiEntity>[] = [
+  EntityTable.columns.createEntityRefColumn({ defaultKind: 'API' }),
+  EntityTable.columns.createOwnerColumn(),
+  EntityTable.columns.createSpecLifecycleColumn(),
+  createSpecApiTypeColumn(),
+  EntityTable.columns.createMetadataDescriptionColumn(),
+];
+
 export const HasApisCard = ({ variant = 'gridItem' }: Props) => {
   const { entity } = useEntity();
   const { entities, loading, error } = useRelatedEntities(entity, {
@@ -73,7 +82,7 @@ export const HasApisCard = ({ variant = 'gridItem' }: Props) => {
           </Link>
         </div>
       }
-      columns={apiEntityColumns}
+      columns={columns}
       entities={entities as ApiEntity[]}
     />
   );

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();
     });
   });
 });

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

@@ -97,6 +97,7 @@ const columns: TableColumn<EntityRow>[] = [
         placement="bottom-start"
       />
     ),
+    width: 'auto',
   },
   {
     title: 'Tags',

plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx

@@ -33,6 +33,14 @@ type Props = {
   variant?: 'gridItem';
 };
 
+const columns = [
+  EntityTable.columns.createEntityRefColumn({ defaultKind: 'component' }),
+  EntityTable.columns.createOwnerColumn(),
+  EntityTable.columns.createSpecTypeColumn(),
+  EntityTable.columns.createSpecLifecycleColumn(),
+  EntityTable.columns.createMetadataDescriptionColumn(),
+];
+
 export const HasComponentsCard = ({ variant = 'gridItem' }: Props) => {
   const { entity } = useEntity();
   const { entities, loading, error } = useRelatedEntities(entity, {
@@ -72,7 +80,7 @@ export const HasComponentsCard = ({ variant = 'gridItem' }: Props) => {
           </Link>
         </div>
       }
-      columns={EntityTable.componentEntityColumns}
+      columns={columns}
       entities={entities as ComponentEntity[]}
     />
   );

plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx

@@ -33,6 +33,14 @@ type Props = {
   variant?: 'gridItem';
 };
 
+const columns = [
+  EntityTable.columns.createEntityRefColumn({ defaultKind: 'component' }),
+  EntityTable.columns.createOwnerColumn(),
+  EntityTable.columns.createSpecTypeColumn(),
+  EntityTable.columns.createSpecLifecycleColumn(),
+  EntityTable.columns.createMetadataDescriptionColumn(),
+];
+
 export const HasSubcomponentsCard = ({ variant = 'gridItem' }: Props) => {
   const { entity } = useEntity();
   const { entities, loading, error } = useRelatedEntities(entity, {
@@ -72,7 +80,7 @@ export const HasSubcomponentsCard = ({ variant = 'gridItem' }: Props) => {
           </Link>
         </div>
       }
-      columns={EntityTable.componentEntityColumns}
+      columns={columns}
       entities={entities as ComponentEntity[]}
     />
   );

plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx

@@ -33,6 +33,12 @@ type Props = {
   variant?: 'gridItem';
 };
 
+const columns = [
+  EntityTable.columns.createEntityRefColumn({ defaultKind: 'system' }),
+  EntityTable.columns.createOwnerColumn(),
+  EntityTable.columns.createMetadataDescriptionColumn(),
+];
+
 export const HasSystemsCard = ({ variant = 'gridItem' }: Props) => {
   const { entity } = useEntity();
   const { entities, loading, error } = useRelatedEntities(entity, {
@@ -71,7 +77,7 @@ export const HasSystemsCard = ({ variant = 'gridItem' }: Props) => {
           </Link>
         </div>
       }
-      columns={EntityTable.systemEntityColumns}
+      columns={columns}
       entities={entities as SystemEntity[]}
     />
   );