feat(catalog): add spec.target(s) for Location entities at the CatalogTable

Signed-off-by: Patrick Jungermann <Patrick.Jungermann@gmail.com>

.changeset/five-gorillas-marry.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Add `spec.targets` (or `spec.target`) for Location entities at the `CatalogTable`.

plugins/catalog/api-report.md

@@ -132,6 +132,7 @@ export const CatalogTable: {
     ): TableColumn<CatalogTableRow>;
     createSystemColumn(): TableColumn<CatalogTableRow>;
     createOwnerColumn(): TableColumn<CatalogTableRow>;
+    createSpecTargetsColumn(): TableColumn<CatalogTableRow>;
     createSpecTypeColumn(): TableColumn<CatalogTableRow>;
     createSpecLifecycleColumn(): TableColumn<CatalogTableRow>;
     createMetadataDescriptionColumn(): TableColumn<CatalogTableRow>;

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

@@ -215,7 +215,14 @@ describe('CatalogTable component', () => {
     },
     {
       kind: 'location',
-      expectedColumns: ['Name', 'Type', 'Description', 'Tags', 'Actions'],
+      expectedColumns: [
+        'Name',
+        'Type',
+        'Targets',
+        'Description',
+        'Tags',
+        'Actions',
+      ],
     },
     {
       kind: 'resource',

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

@@ -83,9 +83,13 @@ export const CatalogTable = (props: CatalogTableProps) => {
         case 'system':
           return [columnFactories.createOwnerColumn()];
         case 'group':
-        case 'location':
         case 'template':
           return [columnFactories.createSpecTypeColumn()];
+        case 'location':
+          return [
+            columnFactories.createSpecTypeColumn(),
+            columnFactories.createSpecTargetsColumn(),
+          ];
         default:
           return [
             columnFactories.createSystemColumn(),

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

@@ -23,6 +23,7 @@ import { Chip } from '@material-ui/core';
 import { CatalogTableRow } from './types';
 import { OverflowTooltip, TableColumn } from '@backstage/core-components';
 import { Entity } from '@backstage/catalog-model';
+import { JsonArray } from '@backstage/types';
 
 // The columnFactories symbol is not directly exported, but through the
 // CatalogTable.columns field.
@@ -82,11 +83,30 @@ export const columnFactories = Object.freeze({
       ),
     };
   },
+  createSpecTargetsColumn(): TableColumn<CatalogTableRow> {
+    return {
+      title: 'Targets',
+      field: 'entity.spec.targets',
+      render: ({ entity }) => (
+        <>
+          {(entity?.spec?.targets || entity?.spec?.target) && (
+            <OverflowTooltip
+              text={(
+                (entity!.spec!.targets as JsonArray) || [entity.spec.target]
+              ).join(', ')}
+              placement="bottom-start"
+            />
+          )}
+        </>
+      ),
+    };
+  },
   createSpecTypeColumn(): TableColumn<CatalogTableRow> {
     return {
       title: 'Type',
       field: 'entity.spec.type',
       hidden: true,
+      width: 'auto',
     };
   },
   createSpecLifecycleColumn(): TableColumn<CatalogTableRow> {
@@ -129,6 +149,7 @@ export const columnFactories = Object.freeze({
             ))}
         </>
       ),
+      width: 'auto',
     };
   },
   createTitleColumn(options?: {