Change EntityRow to have an entity and a resolved field instead of combining them

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

@@ -39,8 +39,9 @@ import { Alert } from '@material-ui/lab';
 import React from 'react';
 import { ApiTypeTitle } from '../ApiDefinitionCard';
 
-type EntityRow = ApiEntityV1alpha1 & {
-  row: {
+type EntityRow = {
+  entity: ApiEntityV1alpha1;
+  resolved: {
     partOfSystemRelationTitle?: string;
     partOfSystemRelations: EntityName[];
     ownedByRelationsTitle?: string;
@@ -51,52 +52,52 @@ type EntityRow = ApiEntityV1alpha1 & {
 const columns: TableColumn<EntityRow>[] = [
   {
     title: 'Name',
-    field: 'metadata.name',
+    field: 'entity.metadata.name',
     highlight: true,
-    render: entity => (
+    render: ({ entity }) => (
       <EntityRefLink entityRef={entity}>{entity.metadata.name}</EntityRefLink>
     ),
   },
   {
     title: 'System',
-    field: 'row.partOfSystemRelationTitle',
-    render: entity => (
+    field: 'resolved.partOfSystemRelationTitle',
+    render: ({ resolved }) => (
       <EntityRefLinks
-        entityRefs={entity.row.partOfSystemRelations}
+        entityRefs={resolved.partOfSystemRelations}
         defaultKind="system"
       />
     ),
   },
   {
     title: 'Owner',
-    field: 'row.ownedByRelationsTitle',
-    render: entity => (
+    field: 'resolved.ownedByRelationsTitle',
+    render: ({ resolved }) => (
       <EntityRefLinks
-        entityRefs={entity.row.ownedByRelations}
+        entityRefs={resolved.ownedByRelations}
         defaultKind="group"
       />
     ),
   },
   {
     title: 'Lifecycle',
-    field: 'spec.lifecycle',
+    field: 'entity.spec.lifecycle',
   },
   {
     title: 'Type',
-    field: 'spec.type',
-    render: entity => <ApiTypeTitle apiEntity={entity} />,
+    field: 'entity.spec.type',
+    render: ({ entity }) => <ApiTypeTitle apiEntity={entity} />,
   },
   {
     title: 'Description',
-    field: 'metadata.description',
+    field: 'entity.metadata.description',
   },
   {
     title: 'Tags',
-    field: 'metadata.tags',
+    field: 'entity.metadata.tags',
     cellStyle: {
       padding: '0px 16px 0px 20px',
     },
-    render: entity => (
+    render: ({ entity }) => (
       <>
         {entity.metadata.tags &&
           entity.metadata.tags.map(t => (
@@ -157,15 +158,15 @@ export const ApiExplorerTable = ({
     );
   }
 
-  const rows = entities.map(e => {
-    const partOfSystemRelations = getEntityRelations(e, RELATION_PART_OF, {
+  const rows = entities.map(entity => {
+    const partOfSystemRelations = getEntityRelations(entity, RELATION_PART_OF, {
       kind: 'system',
     });
-    const ownedByRelations = getEntityRelations(e, RELATION_OWNED_BY);
+    const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
 
     return {
-      ...(e as ApiEntityV1alpha1),
-      row: {
+      entity: entity as ApiEntityV1alpha1,
+      resolved: {
         ownedByRelationsTitle: ownedByRelations
           .map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
           .join(', '),

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

@@ -30,8 +30,9 @@ import {
 import React from 'react';
 import { ApiTypeTitle } from '../ApiDefinitionCard';
 
-type EntityRow = ApiEntity & {
-  row: {
+type EntityRow = {
+  entity: ApiEntity;
+  resolved: {
     partOfSystemRelationTitle?: string;
     partOfSystemRelations: EntityName[];
     ownedByRelationsTitle?: string;
@@ -42,44 +43,44 @@ type EntityRow = ApiEntity & {
 const columns: TableColumn<EntityRow>[] = [
   {
     title: 'Name',
-    field: 'metadata.name',
+    field: 'entity.metadata.name',
     highlight: true,
-    render: entity => (
+    render: ({ entity }) => (
       <EntityRefLink entityRef={entity}>{entity.metadata.name}</EntityRefLink>
     ),
   },
   {
     title: 'System',
-    field: 'row.partOfSystemRelationTitle',
-    render: entity => (
+    field: 'resolved.partOfSystemRelationTitle',
+    render: ({ resolved }) => (
       <EntityRefLinks
-        entityRefs={entity.row.partOfSystemRelations}
+        entityRefs={resolved.partOfSystemRelations}
         defaultKind="system"
       />
     ),
   },
   {
     title: 'Owner',
-    field: 'row.ownedByRelationsTitle',
-    render: entity => (
+    field: 'resolved.ownedByRelationsTitle',
+    render: ({ resolved }) => (
       <EntityRefLinks
-        entityRefs={entity.row.ownedByRelations}
+        entityRefs={resolved.ownedByRelations}
         defaultKind="group"
       />
     ),
   },
   {
     title: 'Lifecycle',
-    field: 'spec.lifecycle',
+    field: 'entity.spec.lifecycle',
   },
   {
     title: 'Type',
-    field: 'spec.type',
-    render: entity => <ApiTypeTitle apiEntity={entity} />,
+    field: 'entity.spec.type',
+    render: ({ entity }) => <ApiTypeTitle apiEntity={entity} />,
   },
   {
     title: 'Description',
-    field: 'metadata.description',
+    field: 'entity.metadata.description',
     width: 'auto',
   },
 ];
@@ -103,15 +104,19 @@ export const ApisTable = ({ entities, title, variant = 'gridItem' }: Props) => {
   const rows = entities
     // TODO: For now we skip all APIs that we can't find without a warning!
     .filter(e => e !== undefined)
-    .map(e => {
-      const partOfSystemRelations = getEntityRelations(e, RELATION_PART_OF, {
-        kind: 'system',
-      });
-      const ownedByRelations = getEntityRelations(e, RELATION_OWNED_BY);
+    .map(entity => {
+      const partOfSystemRelations = getEntityRelations(
+        entity,
+        RELATION_PART_OF,
+        {
+          kind: 'system',
+        },
+      );
+      const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
 
       return {
-        ...(e as ApiEntity),
-        row: {
+        entity: entity as ApiEntity,
+        resolved: {
           ownedByRelationsTitle: ownedByRelations
             .map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
             .join(', '),

plugins/api-docs/src/components/ComponentsCards/ComponentsTable.tsx

@@ -29,8 +29,9 @@ import {
 } from '@backstage/plugin-catalog-react';
 import React from 'react';
 
-type EntityRow = ComponentEntity & {
-  row: {
+type EntityRow = {
+  entity: ComponentEntity;
+  resolved: {
     partOfSystemRelationTitle?: string;
     partOfSystemRelations: EntityName[];
     ownedByRelationsTitle?: string;
@@ -41,43 +42,43 @@ type EntityRow = ComponentEntity & {
 const columns: TableColumn<EntityRow>[] = [
   {
     title: 'Name',
-    field: 'metadata.name',
+    field: 'entity.metadata.name',
     highlight: true,
-    render: entity => (
+    render: ({ entity }) => (
       <EntityRefLink entityRef={entity}>{entity.metadata.name}</EntityRefLink>
     ),
   },
   {
     title: 'System',
-    field: 'row.partOfSystemRelationTitle',
-    render: entity => (
+    field: 'resolved.partOfSystemRelationTitle',
+    render: ({ resolved }) => (
       <EntityRefLinks
-        entityRefs={entity.row.partOfSystemRelations}
+        entityRefs={resolved.partOfSystemRelations}
         defaultKind="system"
       />
     ),
   },
   {
     title: 'Owner',
-    field: 'row.ownedByRelationsTitle',
-    render: entity => (
+    field: 'resolved.ownedByRelationsTitle',
+    render: ({ resolved }) => (
       <EntityRefLinks
-        entityRefs={entity.row.ownedByRelations}
+        entityRefs={resolved.ownedByRelations}
         defaultKind="group"
       />
     ),
   },
   {
     title: 'Lifecycle',
-    field: 'spec.lifecycle',
+    field: 'entity.spec.lifecycle',
   },
   {
     title: 'Type',
-    field: 'spec.type',
+    field: 'entity.spec.type',
   },
   {
     title: 'Description',
-    field: 'metadata.description',
+    field: 'entity.metadata.description',
     width: 'auto',
   },
 ];
@@ -106,15 +107,19 @@ export const ComponentsTable = ({
   const rows = entities
     // TODO: For now we skip all Components that we can't find without a warning!
     .filter(e => e !== undefined)
-    .map(e => {
-      const partOfSystemRelations = getEntityRelations(e, RELATION_PART_OF, {
-        kind: 'system',
-      });
-      const ownedByRelations = getEntityRelations(e, RELATION_OWNED_BY);
+    .map(entity => {
+      const partOfSystemRelations = getEntityRelations(
+        entity,
+        RELATION_PART_OF,
+        {
+          kind: 'system',
+        },
+      );
+      const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
 
       return {
-        ...(e as ComponentEntity),
-        row: {
+        entity: entity as ComponentEntity,
+        resolved: {
           ownedByRelationsTitle: ownedByRelations
             .map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
             .join(', '),

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

@@ -39,8 +39,9 @@ import {
   favouriteEntityTooltip,
 } from '../FavouriteEntity/FavouriteEntity';
 
-type EntityRow = Entity & {
-  row: {
+type EntityRow = {
+  entity: Entity;
+  resolved: {
     partOfSystemRelationTitle?: string;
     partOfSystemRelations: EntityName[];
     ownedByRelationsTitle?: string;
@@ -51,47 +52,47 @@ type EntityRow = Entity & {
 const columns: TableColumn<EntityRow>[] = [
   {
     title: 'Name',
-    field: 'metadata.name',
+    field: 'entity.metadata.name',
     highlight: true,
-    render: entity => (
+    render: ({ entity }) => (
       <EntityRefLink entityRef={entity}>{entity.metadata.name}</EntityRefLink>
     ),
   },
   {
     title: 'System',
-    field: 'row.partOfSystemRelationTitle',
-    render: entity => (
+    field: 'resolved.partOfSystemRelationTitle',
+    render: ({ resolved }) => (
       <EntityRefLinks
-        entityRefs={entity.row.partOfSystemRelations}
+        entityRefs={resolved.partOfSystemRelations}
         defaultKind="system"
       />
     ),
   },
   {
     title: 'Owner',
-    field: 'row.ownedByRelationsTitle',
-    render: entity => (
+    field: 'resolved.ownedByRelationsTitle',
+    render: ({ resolved }) => (
       <EntityRefLinks
-        entityRefs={entity.row.ownedByRelations}
+        entityRefs={resolved.ownedByRelations}
         defaultKind="group"
       />
     ),
   },
   {
     title: 'Lifecycle',
-    field: 'spec.lifecycle',
+    field: 'entity.spec.lifecycle',
   },
   {
     title: 'Description',
-    field: 'metadata.description',
+    field: 'entity.metadata.description',
   },
   {
     title: 'Tags',
-    field: 'metadata.tags',
+    field: 'entity.metadata.tags',
     cellStyle: {
       padding: '0px 16px 0px 20px',
     },
-    render: entity => (
+    render: ({ entity }) => (
       <>
         {entity.metadata.tags &&
           entity.metadata.tags.map(t => (
@@ -133,9 +134,9 @@ export const CatalogTable = ({
     );
   }
 
-  const actions: TableProps<Entity>['actions'] = [
-    (rowData: Entity) => {
-      const location = findLocationForEntityMeta(rowData.metadata);
+  const actions: TableProps<EntityRow>['actions'] = [
+    ({ entity }) => {
+      const location = findLocationForEntityMeta(entity.metadata);
       return {
         icon: () => <OpenInNew fontSize="small" />,
         tooltip: 'View',
@@ -145,8 +146,8 @@ export const CatalogTable = ({
         },
       };
     },
-    (rowData: Entity) => {
-      const location = findLocationForEntityMeta(rowData.metadata);
+    ({ entity }) => {
+      const location = findLocationForEntityMeta(entity.metadata);
       return {
         icon: () => <Edit fontSize="small" />,
         tooltip: 'Edit',
@@ -156,26 +157,26 @@ export const CatalogTable = ({
         },
       };
     },
-    (rowData: Entity) => {
-      const isStarred = isStarredEntity(rowData);
+    ({ entity }) => {
+      const isStarred = isStarredEntity(entity);
       return {
         cellStyle: { paddingLeft: '1em' },
         icon: () => favouriteEntityIcon(isStarred),
         tooltip: favouriteEntityTooltip(isStarred),
-        onClick: () => toggleStarredEntity(rowData),
+        onClick: () => toggleStarredEntity(entity),
       };
     },
   ];
 
-  const rows = entities.map(e => {
-    const partOfSystemRelations = getEntityRelations(e, RELATION_PART_OF, {
+  const rows = entities.map(entity => {
+    const partOfSystemRelations = getEntityRelations(entity, RELATION_PART_OF, {
       kind: 'system',
     });
-    const ownedByRelations = getEntityRelations(e, RELATION_OWNED_BY);
+    const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
 
     return {
-      ...e,
-      row: {
+      entity,
+      resolved: {
         ownedByRelationsTitle: ownedByRelations
           .map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
           .join(', '),