Added type parameterization to allow for type safety on new RelatedEntitiesCard.

Signed-off-by: Jonah Grimes <jgrimes@appriss.com>

plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx

@@ -18,8 +18,8 @@ import { RELATION_DEPENDS_ON } from '@backstage/catalog-model';
 import React from 'react';
 import {
   asComponentEntities,
-  componentColumns,
-  componentHelpLink,
+  componentEntityColumns,
+  componentEntityHelpLink,
   RelatedEntitiesCard,
 } from '../RelatedEntitiesCard';
 
@@ -34,9 +34,9 @@ export const DependsOnComponentsCard = ({ variant = 'gridItem' }: Props) => {
       title="Components"
       entityKind="Component"
       relationType={RELATION_DEPENDS_ON}
-      columns={componentColumns}
+      columns={componentEntityColumns}
       emptyMessage="No component is a dependency of this component"
-      emptyHelpLink={componentHelpLink}
+      emptyHelpLink={componentEntityHelpLink}
       asRenderableEntities={asComponentEntities}
     />
   );

plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx

@@ -18,9 +18,9 @@ import { RELATION_DEPENDS_ON } from '@backstage/catalog-model';
 import React from 'react';
 import {
   asResourceEntities,
-  componentHelpLink,
+  componentEntityHelpLink,
   RelatedEntitiesCard,
-  resourceColumns,
+  resourceEntityColumns,
 } from '../RelatedEntitiesCard';
 
 type Props = {
@@ -34,9 +34,9 @@ export const DependsOnResourcesCard = ({ variant = 'gridItem' }: Props) => {
       title="Resources"
       entityKind="Resource"
       relationType={RELATION_DEPENDS_ON}
-      columns={resourceColumns}
+      columns={resourceEntityColumns}
       emptyMessage="No resource is a dependency of this component"
-      emptyHelpLink={componentHelpLink}
+      emptyHelpLink={componentEntityHelpLink}
       asRenderableEntities={asResourceEntities}
     />
   );

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

@@ -18,8 +18,8 @@ import { RELATION_HAS_PART } from '@backstage/catalog-model';
 import React from 'react';
 import {
   asComponentEntities,
-  componentColumns,
-  componentHelpLink,
+  componentEntityColumns,
+  componentEntityHelpLink,
   RelatedEntitiesCard,
 } from '../RelatedEntitiesCard';
 
@@ -34,9 +34,9 @@ export const HasComponentsCard = ({ variant = 'gridItem' }: Props) => {
       title="Components"
       entityKind="Component"
       relationType={RELATION_HAS_PART}
-      columns={componentColumns}
+      columns={componentEntityColumns}
       emptyMessage="No component is part of this system"
-      emptyHelpLink={componentHelpLink}
+      emptyHelpLink={componentEntityHelpLink}
       asRenderableEntities={asComponentEntities}
     />
   );

plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.tsx

@@ -19,8 +19,8 @@ import React from 'react';
 import {
   asResourceEntities,
   RelatedEntitiesCard,
-  resourceColumns,
-  resourceHelpLink,
+  resourceEntityColumns,
+  resourceEntityHelpLink,
 } from '../RelatedEntitiesCard';
 
 type Props = {
@@ -34,10 +34,10 @@ export const HasResourcesCard = ({ variant = 'gridItem' }: Props) => {
       title="Resources"
       entityKind="Resource"
       relationType={RELATION_HAS_PART}
-      columns={resourceColumns}
+      columns={resourceEntityColumns}
       asRenderableEntities={asResourceEntities}
       emptyMessage="No resource is part of this system"
-      emptyHelpLink={resourceHelpLink}
+      emptyHelpLink={resourceEntityHelpLink}
     />
   );
 };

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

@@ -18,7 +18,7 @@ import { RELATION_HAS_PART } from '@backstage/catalog-model';
 import React from 'react';
 import {
   asComponentEntities,
-  componentColumns,
+  componentEntityColumns,
   RelatedEntitiesCard,
 } from '../RelatedEntitiesCard';
 
@@ -33,7 +33,7 @@ export const HasSubcomponentsCard = ({ variant = 'gridItem' }: Props) => {
       title="Subcomponents"
       entityKind="Component"
       relationType={RELATION_HAS_PART}
-      columns={componentColumns}
+      columns={componentEntityColumns}
       asRenderableEntities={asComponentEntities}
       emptyMessage="No subcomponent is part of this component"
       emptyHelpLink="https://backstage.io/docs/features/software-catalog/descriptor-format#specsubcomponentof-optional"

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

@@ -19,8 +19,8 @@ import React from 'react';
 import {
   asSystemEntities,
   RelatedEntitiesCard,
-  systemColumns,
-  systemHelpLink,
+  systemEntityColumns,
+  systemEntityHelpLink,
 } from '../RelatedEntitiesCard';
 
 type Props = {
@@ -34,10 +34,10 @@ export const HasSystemsCard = ({ variant = 'gridItem' }: Props) => {
       title="Systems"
       entityKind="System"
       relationType={RELATION_HAS_PART}
-      columns={systemColumns}
+      columns={systemEntityColumns}
       asRenderableEntities={asSystemEntities}
       emptyMessage="No system is part of this domain"
-      emptyHelpLink={systemHelpLink}
+      emptyHelpLink={systemEntityHelpLink}
     />
   );
 };

plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx

@@ -31,18 +31,18 @@ import {
 } from '@backstage/plugin-catalog-react';
 import React from 'react';
 
-type Props = {
+type Props<T extends Entity> = {
   variant?: 'gridItem';
   title: string;
-  columns: TableColumn<Entity>[];
+  columns: TableColumn<T>[];
   entityKind: string;
   relationType: string;
   emptyMessage: string;
   emptyHelpLink: string;
-  asRenderableEntities: (entities: Entity[]) => Entity[];
+  asRenderableEntities: (entities: Entity[]) => T[];
 };
 
-export const RelatedEntitiesCard = ({
+export function RelatedEntitiesCard<T extends Entity>({
   variant = 'gridItem',
   title,
   columns,
@@ -51,7 +51,7 @@ export const RelatedEntitiesCard = ({
   emptyMessage,
   emptyHelpLink,
   asRenderableEntities,
-}: Props) => {
+}: Props<T>) {
   const { entity } = useEntity();
   const { entities, loading, error } = useRelatedEntities(entity, {
     type: relationType,
@@ -94,4 +94,4 @@ export const RelatedEntitiesCard = ({
       entities={asRenderableEntities(entities)}
     />
   );
-};
+}

plugins/catalog/src/components/RelatedEntitiesCard/index.ts

@@ -15,4 +15,4 @@
  */
 
 export { RelatedEntitiesCard } from './RelatedEntitiesCard';
-export * from './constants';
+export * from './presets';

plugins/catalog/src/components/RelatedEntitiesCard/presets.ts

@@ -19,38 +19,39 @@ import {
   ResourceEntity,
   SystemEntity,
 } from '@backstage/catalog-model';
+import { TableColumn } from '@backstage/core';
 import { EntityTable } from '@backstage/plugin-catalog-react';
 
-export const componentColumns = [
+export const componentEntityColumns: TableColumn<ComponentEntity>[] = [
   EntityTable.columns.createEntityRefColumn({ defaultKind: 'component' }),
   EntityTable.columns.createOwnerColumn(),
   EntityTable.columns.createSpecTypeColumn(),
   EntityTable.columns.createSpecLifecycleColumn(),
   EntityTable.columns.createMetadataDescriptionColumn(),
 ];
-export const componentHelpLink =
+export const componentEntityHelpLink: string =
   'https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component';
-export const asComponentEntities = (entities: Entity[]) =>
+export const asComponentEntities = (entities: Entity[]): ComponentEntity[] =>
   entities as ComponentEntity[];
 
-export const resourceColumns = [
+export const resourceEntityColumns: TableColumn<ResourceEntity>[] = [
   EntityTable.columns.createEntityRefColumn({ defaultKind: 'resource' }),
   EntityTable.columns.createOwnerColumn(),
   EntityTable.columns.createSpecTypeColumn(),
   EntityTable.columns.createSpecLifecycleColumn(),
   EntityTable.columns.createMetadataDescriptionColumn(),
 ];
-export const resourceHelpLink =
+export const resourceEntityHelpLink: string =
   'https://backstage.io/docs/features/software-catalog/descriptor-format#kind-resource';
-export const asResourceEntities = (entities: Entity[]) =>
+export const asResourceEntities = (entities: Entity[]): ResourceEntity[] =>
   entities as ResourceEntity[];
 
-export const systemColumns = [
+export const systemEntityColumns: TableColumn<SystemEntity>[] = [
   EntityTable.columns.createEntityRefColumn({ defaultKind: 'system' }),
   EntityTable.columns.createOwnerColumn(),
   EntityTable.columns.createMetadataDescriptionColumn(),
 ];
-export const systemHelpLink =
+export const systemEntityHelpLink: string =
   'https://backstage.io/docs/features/software-catalog/descriptor-format#kind-system';
-export const asSystemEntities = (entities: Entity[]) =>
+export const asSystemEntities = (entities: Entity[]): SystemEntity[] =>
   entities as SystemEntity[];