[Search] name in search result clickable (#3349)

* fix(search): wrap value in  link component for rows in component id column

* fix(search result): change name of column from component id to name

* fix(search): construct url in search api instead of search result component

* fix(search): use entity default constant from catalog model as fallback to namespace, add entity type

* fix(search): replace unknown with undefined if owner or lifecycle doesn't exist on entity, lowercase namespace and kind in url

* fix owner fallback and delete description fallback to show empty cells instead

plugins/search/package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@backstage/core": "^0.3.1",
     "@backstage/plugin-catalog": "^0.2.2",
+    "@backstage/catalog-model": "^0.2.0",
     "@backstage/theme": "^0.2.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",

plugins/search/src/apis.ts

@@ -15,13 +15,15 @@
  */
 
 import { CatalogApi } from '@backstage/plugin-catalog';
+import { Entity, ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 
 export type Result = {
   name: string;
-  description: string;
-  owner: string;
+  description: string | undefined;
+  owner: string | undefined;
   kind: string;
-  lifecycle: string;
+  lifecycle: string | undefined;
+  url: string;
 };
 
 export type SearchResults = Array<Result>;
@@ -35,12 +37,19 @@ class SearchApi {
 
   private async entities() {
     const entities = await this.catalogApi.getEntities();
-    return entities.items.map((result: any) => ({
-      name: result.metadata.name,
-      description: result.metadata.description,
-      owner: result.spec.owner,
-      kind: result.kind,
-      lifecycle: result.spec.lifecycle,
+    return entities.items.map((entity: Entity) => ({
+      name: entity.metadata.name,
+      description: entity.metadata.description,
+      owner:
+        typeof entity.spec?.owner === 'string' ? entity.spec?.owner : undefined,
+      kind: entity.kind,
+      lifecycle:
+        typeof entity.spec?.lifecycle === 'string'
+          ? entity.spec?.lifecycle
+          : undefined,
+      url: `/catalog/${
+        entity.metadata.namespace?.toLowerCase() || ENTITY_DEFAULT_NAMESPACE
+      }/${entity.kind.toLowerCase()}/${entity.metadata.name}`,
     }));
   }
 

plugins/search/src/components/SearchResult/SearchResult.tsx

@@ -19,6 +19,7 @@ import { useAsync } from 'react-use';
 import { makeStyles, Typography, Grid, Divider } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import {
+  Link,
   EmptyState,
   Progress,
   Table,
@@ -66,9 +67,12 @@ type Filters = {
 // TODO: move out column to make the search result component more generic
 const columns: TableColumn[] = [
   {
-    title: 'Component Id',
+    title: 'Name',
     field: 'name',
     highlight: true,
+    render: (result: Partial<Result>) => (
+      <Link to={result.url || ''}>{result.name}</Link>
+    ),
   },
   {
     title: 'Description',
@@ -150,8 +154,9 @@ export const SearchResult = ({ searchQuery }: SearchResultProps) => {
 
       // filter on checked
       if (filters.checked.length > 0) {
-        withFilters = withFilters.filter((result: Result) =>
-          filters.checked.includes(result.lifecycle),
+        withFilters = withFilters.filter(
+          (result: Result) =>
+            result.lifecycle && filters.checked.includes(result.lifecycle),
         );
       }