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

@@ -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.

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',
     );
   });
 

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}`;