Merge pull request #1227 from spotify/freben/table-without-component

chore(catalog): clean up CatalogTable, use only Entity

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { LocationSpec, Entity } from '@backstage/catalog-model';
+import { Entity, LocationSpec } from '@backstage/catalog-model';
 import {
   Content,
   ContentHeader,
@@ -27,21 +27,18 @@ import {
   SupportButton,
   useApi,
 } from '@backstage/core';
-
 import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder';
-import { Button, makeStyles, Typography, Link } from '@material-ui/core';
-import GitHub from '@material-ui/icons/GitHub';
-import StarOutline from '@material-ui/icons/StarBorder';
-import Star from '@material-ui/icons/Star';
-
+import { Button, Link, makeStyles, Typography } from '@material-ui/core';
 import Edit from '@material-ui/icons/Edit';
-
+import GitHub from '@material-ui/icons/GitHub';
+import Star from '@material-ui/icons/Star';
+import StarOutline from '@material-ui/icons/StarBorder';
 import React, { FC, useCallback, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { useAsync } from 'react-use';
 import { catalogApiRef } from '../..';
-import { defaultFilter, filterGroups, dataResolvers } from '../../data/filters';
-import { entityToComponent, findLocationForEntityMeta } from '../../data/utils';
+import { dataResolvers, defaultFilter, filterGroups } from '../../data/filters';
+import { findLocationForEntityMeta } from '../../data/utils';
 import { useStarredEntities } from '../../hooks/useStarredEntites';
 import {
   CatalogFilter,
@@ -95,7 +92,7 @@ export const CatalogPage: FC<{}> = () => {
           if (!location) return;
           window.open(location.target, '_blank');
         },
-        hidden: location ? location?.type !== 'github' : true,
+        hidden: location?.type !== 'github',
       };
     },
     (rowData: Entity) => {
@@ -118,7 +115,7 @@ export const CatalogPage: FC<{}> = () => {
           if (!location) return;
           window.open(createEditLink(location), '_blank');
         },
-        hidden: location ? location?.type !== 'github' : true,
+        hidden: location?.type !== 'github',
       };
     },
     (rowData: Entity) => {
@@ -197,16 +194,7 @@ export const CatalogPage: FC<{}> = () => {
           </div>
           <CatalogTable
             titlePreamble={selectedFilter.label}
-            components={
-              (value &&
-                value.map(val => {
-                  return {
-                    ...entityToComponent(val),
-                    locationSpec: findLocationForEntityMeta(val.metadata),
-                  };
-                })) ||
-              []
-            }
+            entities={value || []}
             loading={loading}
             error={error}
             actions={actions}

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

@@ -13,30 +13,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import { Entity } from '@backstage/catalog-model';
 import { wrapInTestApp } from '@backstage/test-utils';
+import { render } from '@testing-library/react';
+import * as React from 'react';
 import { CatalogTable } from './CatalogTable';
-import { Component } from '../../data/component';
 
-const components: Component[] = [
+const entites: Entity[] = [
   {
-    name: 'component1',
+    apiVersion: 'backstage.io/v1beta1',
     kind: 'Component',
     metadata: { name: 'component1' },
-    description: 'Placeholder',
   },
   {
-    name: 'component2',
+    apiVersion: 'backstage.io/v1beta1',
     kind: 'Component',
     metadata: { name: 'component2' },
-    description: 'Placeholder',
   },
   {
-    name: 'component3',
+    apiVersion: 'backstage.io/v1beta1',
     kind: 'Component',
     metadata: { name: 'component3' },
-    description: 'Placeholder',
   },
 ];
 
@@ -46,7 +43,7 @@ describe('CatalogTable component', () => {
       wrapInTestApp(
         <CatalogTable
           titlePreamble="Owned"
-          components={[]}
+          entities={[]}
           loading={false}
           error={{ code: 'error' }}
         />,
@@ -63,13 +60,13 @@ describe('CatalogTable component', () => {
       wrapInTestApp(
         <CatalogTable
           titlePreamble="Owned"
-          components={components}
+          entities={entites}
           loading={false}
         />,
       ),
     );
     expect(
-      await rendered.findByText(`Owned (${components.length})`),
+      await rendered.findByText(`Owned (${entites.length})`),
     ).toBeInTheDocument();
     expect(await rendered.findByText('component1')).toBeInTheDocument();
     expect(await rendered.findByText('component2')).toBeInTheDocument();

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

@@ -13,33 +13,33 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { Entity } from '@backstage/catalog-model';
 import { Table, TableColumn } from '@backstage/core';
 import { Link } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React, { FC } from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
-import { Component } from '../../data/component';
 import { entityRoute } from '../../routes';
 
 const columns: TableColumn[] = [
   {
     title: 'Name',
-    field: 'name',
+    field: 'metadata.name',
     highlight: true,
-    render: (componentData: any) => (
+    render: (entity: any) => (
       <Link
         component={RouterLink}
         to={generatePath(entityRoute.path, {
           optionalNamespaceAndName: [
-            componentData.namespace,
-            componentData.name,
+            entity.metadata.namespace,
+            entity.metadata.name,
           ]
             .filter(Boolean)
             .join(':'),
-          kind: componentData.kind,
+          kind: entity.kind,
         })}
       >
-        {componentData.name}
+        {entity.metadata.name}
       </Link>
     ),
   },
@@ -49,12 +49,12 @@ const columns: TableColumn[] = [
   },
   {
     title: 'Description',
-    field: 'description',
+    field: 'metadata.description',
   },
 ];
 
 type CatalogTableProps = {
-  components: Component[];
+  entities: Entity[];
   titlePreamble: string;
   loading: boolean;
   error?: any;
@@ -62,7 +62,7 @@ type CatalogTableProps = {
 };
 
 export const CatalogTable: FC<CatalogTableProps> = ({
-  components,
+  entities,
   loading,
   error,
   titlePreamble,
@@ -88,8 +88,8 @@ export const CatalogTable: FC<CatalogTableProps> = ({
         loadingType: 'linear',
         showEmptyDataSourceMessage: !loading,
       }}
-      title={`${titlePreamble} (${(components && components.length) || 0})`}
-      data={components}
+      title={`${titlePreamble} (${(entities && entities.length) || 0})`}
+      data={entities}
       actions={actions}
     />
   );