From 8657e0f05c1a8fa0e94153f8e6a0c948eb745db6 Mon Sep 17 00:00:00 2001
From: Aramis Sennyey <sennyeya@amazon.com>
Date: Wed, 1 Feb 2023 17:31:08 -0500
Subject: [PATCH] Expose all props available to underlying
 EntityRelationsGraph.

Signed-off-by: Aramis Sennyey <sennyeya@amazon.com>
---
 .../CatalogGraphCard/CatalogGraphCard.tsx     | 27 +++++++------------
 .../EntityRelationsGraph.tsx                  | 16 ++++++-----
 2 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx
index b9a15eb569..0266693696 100644
--- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx
+++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx
@@ -36,8 +36,8 @@ import {
   Direction,
   EntityNode,
   EntityRelationsGraph,
-  RelationPairs,
 } from '../EntityRelationsGraph';
+import { EntityRelationsGraphProps } from '../EntityRelationsGraph/EntityRelationsGraph';
 
 const useStyles = makeStyles<Theme, { height: number | undefined }>(
   {
@@ -55,27 +55,19 @@ const useStyles = makeStyles<Theme, { height: number | undefined }>(
   { name: 'PluginCatalogGraphCatalogGraphCard' },
 );
 
-export const CatalogGraphCard = (props: {
-  variant?: InfoCardVariants;
-  relationPairs?: RelationPairs;
-  maxDepth?: number;
-  unidirectional?: boolean;
-  mergeRelations?: boolean;
-  kinds?: string[];
-  relations?: string[];
-  direction?: Direction;
-  height?: number;
-  title?: string;
-  zoom?: 'enabled' | 'disabled' | 'enable-on-click';
-}) => {
+export const CatalogGraphCard = (
+  props: Omit<EntityRelationsGraphProps, 'rootEntityNames'> & {
+    variant?: InfoCardVariants;
+    height?: number;
+    title?: string;
+  },
+) => {
   const {
     variant = 'gridItem',
     relationPairs = ALL_RELATION_PAIRS,
     maxDepth = 1,
     unidirectional = true,
     mergeRelations = true,
-    kinds,
-    relations,
     direction = Direction.LEFT_RIGHT,
     height,
     title = 'Relations',
@@ -133,12 +125,11 @@ export const CatalogGraphCard = (props: {
       }}
     >
       <EntityRelationsGraph
+        {...props}
         rootEntityNames={entityName}
         maxDepth={maxDepth}
         unidirectional={unidirectional}
         mergeRelations={mergeRelations}
-        kinds={kinds}
-        relations={relations}
         direction={direction}
         onNodeClick={onNodeClick}
         className={classes.graph}
diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx
index 67aa230ce2..a9fc9960ff 100644
--- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx
+++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx
@@ -66,12 +66,7 @@ const useStyles = makeStyles(
   { name: 'PluginCatalogGraphEntityRelationsGraph' },
 );
 
-/**
- * Core building block for custom entity relations diagrams.
- *
- * @public
- */
-export const EntityRelationsGraph = (props: {
+export interface EntityRelationsGraphProps {
   rootEntityNames: CompoundEntityRef | CompoundEntityRef[];
   maxDepth?: number;
   unidirectional?: boolean;
@@ -86,7 +81,14 @@ export const EntityRelationsGraph = (props: {
   renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode>;
   renderLabel?: DependencyGraphTypes.RenderLabelFunction<EntityEdge>;
   curve?: 'curveStepBefore' | 'curveMonotoneX';
-}) => {
+}
+
+/**
+ * Core building block for custom entity relations diagrams.
+ *
+ * @public
+ */
+export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => {
   const {
     rootEntityNames,
     maxDepth = 2,