From da0bf25d1a893f1c0ecb19df0431c60f83874781 Mon Sep 17 00:00:00 2001
From: Patrick Jungermann <Patrick.Jungermann@gmail.com>
Date: Sun, 6 Nov 2022 20:39:12 +0100
Subject: [PATCH] feat(catalog-graph): preserve entity graph options +
 increment max depth

Currently, all configuration options for the `CatalogGraphCard` are lost
at the "View Graph" link at the bottom which opens the full graph view
using the current entity as root entity.
Esp. for `maxDepth` the default was Infinite / no limit.

The change will preserve options used at the `CatalogGraphCard`
(displayed at the entity page) and additionally, increments the
`maxDepth` option by 1 to increase the scope slightly compared to
the graph already seen by the users.

The default for `maxDepth` at `CatalogGraphCard` is 1.

Closes: #14462
Signed-off-by: Patrick Jungermann <Patrick.Jungermann@gmail.com>
---
 .changeset/hungry-kiwis-scream.md             | 12 +++++++++
 .../CatalogGraphCard.test.tsx                 | 26 ++++++++++++++++++-
 .../CatalogGraphCard/CatalogGraphCard.tsx     | 10 ++++++-
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/hungry-kiwis-scream.md

diff --git a/.changeset/hungry-kiwis-scream.md b/.changeset/hungry-kiwis-scream.md
new file mode 100644
index 0000000000..f11125b8c0
--- /dev/null
+++ b/.changeset/hungry-kiwis-scream.md
@@ -0,0 +1,12 @@
+---
+'@backstage/plugin-catalog-graph': patch
+---
+
+Preserve graph options and increment `maxDepth` by 1.
+
+The change will preserve options used at the `CatalogGraphCard`
+(displayed at the entity page) and additionally, increments the
+`maxDepth` option by 1 to increase the scope slightly compared to
+the graph already seen by the users.
+
+The default for `maxDepth` at `CatalogGraphCard` is 1.
diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx
index 74fcd4e501..7cd6d29bbc 100644
--- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx
+++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx
@@ -116,7 +116,31 @@ describe('<CatalogGraphCard/>', () => {
     expect(button).toBeInTheDocument();
     expect(button.closest('a')).toHaveAttribute(
       'href',
-      '/catalog-graph?rootEntityRefs%5B%5D=b%3Ad%2Fc',
+      '/catalog-graph?rootEntityRefs%5B%5D=b%3Ad%2Fc&maxDepth=2&unidirectional=true&mergeRelations=true&direction=LR',
+    );
+  });
+
+  test('renders link to standalone viewer with custom config', async () => {
+    const { findByText, getByText } = await renderInTestApp(
+      <ApiProvider apis={apis}>
+        <EntityProvider entity={entity}>
+          <CatalogGraphCard maxDepth={2} mergeRelations={false} />
+        </EntityProvider>
+      </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/entity/{kind}/{namespace}/{name}': entityRouteRef,
+          '/catalog-graph': catalogGraphRouteRef,
+        },
+      },
+    );
+
+    expect(await findByText('b:d/c')).toBeInTheDocument();
+    const button = getByText('View graph');
+    expect(button).toBeInTheDocument();
+    expect(button.closest('a')).toHaveAttribute(
+      'href',
+      '/catalog-graph?rootEntityRefs%5B%5D=b%3Ad%2Fc&maxDepth=3&unidirectional=true&mergeRelations=false&direction=LR',
     );
   });
 
diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx
index ae1ca9c22d..5cb86db69f 100644
--- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx
+++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx
@@ -106,7 +106,15 @@ export const CatalogGraphCard = (props: {
   );
 
   const catalogGraphParams = qs.stringify(
-    { rootEntityRefs: [stringifyEntityRef(entity)] },
+    {
+      rootEntityRefs: [stringifyEntityRef(entity)],
+      maxDepth: maxDepth + 1,
+      unidirectional,
+      mergeRelations,
+      kinds,
+      relations,
+      direction,
+    },
     { arrayFormat: 'brackets', addQueryPrefix: true },
   );
   const catalogGraphUrl = `${catalogGraphRoute()}${catalogGraphParams}`;