Merge pull request #21763 from jboeijenga/feat/direction-for-group-explorer

feat(plugins/explore): direction for group explorer

.changeset/many-days-wash.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Added option to set `Direction` for the graph in the `GroupsDiagram`

plugins/explore/api-report.md

@@ -8,6 +8,7 @@
 import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { default as default_2 } from 'react';
+import { DependencyGraphTypes } from '@backstage/core-components';
 import { DiscoveryApi } from '@backstage/core-plugin-api';
 import { DomainEntity } from '@backstage/catalog-model';
 import { ExploreToolsConfig } from '@backstage/plugin-explore-react';
@@ -110,6 +111,7 @@ export const exploreRouteRef: RouteRef<undefined>;
 // @public (undocumented)
 export const GroupsExplorerContent: (props: {
   title?: string | undefined;
+  direction?: DependencyGraphTypes.Direction | undefined;
 }) => JSX_2.Element;
 
 // @public (undocumented)

plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx

@@ -164,7 +164,9 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
 /**
  * Dynamically generates a diagram of groups registered in the catalog.
  */
-export function GroupsDiagram() {
+export function GroupsDiagram(props: {
+  direction?: DependencyGraphTypes.Direction;
+}) {
   const nodes = new Array<{
     id: string;
     kind: string;
@@ -243,7 +245,7 @@ export function GroupsDiagram() {
         nodes={nodes}
         edges={edges}
         nodeMargin={10}
-        direction={DependencyGraphTypes.Direction.RIGHT_LEFT}
+        direction={props.direction || DependencyGraphTypes.Direction.RIGHT_LEFT}
         renderNode={RenderNode}
         className={classes.graph}
         fit="contain"

plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx

@@ -19,6 +19,7 @@ import { GroupsDiagram } from './GroupsDiagram';
 import {
   Content,
   ContentHeader,
+  DependencyGraphTypes,
   SupportButton,
 } from '@backstage/core-components';
 import { makeStyles } from '@material-ui/core/styles';
@@ -34,7 +35,10 @@ const useStyles = makeStyles(
   { name: 'ExploreGroupsContent' },
 );
 
-export const GroupsExplorerContent = (props: { title?: string }) => {
+export const GroupsExplorerContent = (props: {
+  title?: string;
+  direction?: DependencyGraphTypes.Direction;
+}) => {
   const classes = useStyles();
 
   return (
@@ -42,7 +46,7 @@ export const GroupsExplorerContent = (props: { title?: string }) => {
       <ContentHeader title={props.title ?? 'Groups'}>
         <SupportButton>Explore your groups.</SupportButton>
       </ContentHeader>
-      <GroupsDiagram />
+      <GroupsDiagram direction={props.direction} />
     </Content>
   );
 };