From 68c66c72a86c18590e973160fc691445477b5b93 Mon Sep 17 00:00:00 2001
From: Paul Stoker <pstoker@spotify.com>
Date: Thu, 9 Nov 2023 09:50:31 +0100
Subject: [PATCH] Pass entire entity list context as a parameter

Signed-off-by: Paul Stoker <pstoker@spotify.com>
---
 .../CatalogPage/DefaultCatalogPage.test.tsx       |  8 ++------
 .../components/CatalogTable/CatalogTable.test.tsx |  4 ++--
 .../src/components/CatalogTable/CatalogTable.tsx  | 15 +++++++--------
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx
index a4b1148a6f..cb4c2a2533 100644
--- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx
+++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx
@@ -45,7 +45,6 @@ import { createComponentRouteRef } from '../../routes';
 import { CatalogTableRow } from '../CatalogTable';
 import { DefaultCatalogPage } from './DefaultCatalogPage';
 import { ColumnsFunc } from '../CatalogTable/CatalogTable';
-import { Entity } from '@backstage/catalog-model/';
 
 describe('DefaultCatalogPage', () => {
   const origReplaceState = window.history.replaceState;
@@ -220,11 +219,8 @@ describe('DefaultCatalogPage', () => {
   }, 20_000);
 
   it('should render the custom column function passed as prop', async () => {
-    const columns: ColumnsFunc = (
-      kind: string | undefined,
-      entities: Entity[],
-    ) => {
-      return kind === 'component' && entities.length
+    const columns: ColumnsFunc = ({ filters, entities }) => {
+      return filters.kind?.value === 'component' && entities.length
         ? [
             { title: 'Foo', field: 'entity.foo' },
             { title: 'Bar', field: 'entity.bar' },
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
index 35f7a94355..cfcba1fedd 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
@@ -381,8 +381,8 @@ describe('CatalogTable component', () => {
   });
 
   it('should render the label column with customised title and value as specified using function', async () => {
-    const columns: ColumnsFunc = (kind, entities1) => {
-      return kind === 'api' && entities1.length
+    const columns: ColumnsFunc = ({ filters, entities: entities1 }) => {
+      return filters.kind?.value === 'api' && entities1.length
         ? [
             CatalogTable.columns.createNameColumn({ defaultKind: 'API' }),
             CatalogTable.columns.createLabelColumn('category', {
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 25a3535d22..f75791481f 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -29,6 +29,7 @@ import {
   WarningPanel,
 } from '@backstage/core-components';
 import {
+  EntityListContextProps,
   getEntityRelations,
   humanizeEntityRef,
   useEntityList,
@@ -47,13 +48,12 @@ import { CatalogTableRow } from './types';
 import pluralize from 'pluralize';
 
 /**
- * Typed columns function to dynamically render columns based on entities and chosen kind.
+ * Typed columns function to dynamically render columns based on entity list context.
  *
  * @public
  */
 export type ColumnsFunc = (
-  kind: string | undefined,
-  entities: Entity[],
+  entityListContext: EntityListContextProps,
 ) => TableColumn<CatalogTableRow>[];
 
 /**
@@ -89,7 +89,8 @@ const refCompare = (a: Entity, b: Entity) => {
 export const CatalogTable = (props: CatalogTableProps) => {
   const { columns, actions, tableOptions, subtitle, emptyContent } = props;
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
-  const { loading, error, entities, filters } = useEntityList();
+  const entityListContext = useEntityList();
+  const { loading, error, entities, filters } = entityListContext;
 
   const defaultColumns: TableColumn<CatalogTableRow>[] = useMemo(() => {
     return [
@@ -132,10 +133,8 @@ export const CatalogTable = (props: CatalogTableProps) => {
   }, [filters.kind?.value, entities]);
 
   const overrideColumns = useMemo(() => {
-    return isFunction(columns)
-      ? columns(filters.kind?.value, entities)
-      : columns;
-  }, [columns, filters.kind?.value, entities]);
+    return isFunction(columns) ? columns(entityListContext) : columns;
+  }, [columns, entityListContext]);
 
   const showTypeColumn = filters.type === undefined;
   // TODO(timbonicus): remove the title from the CatalogTable once using EntitySearchBar