diff --git a/.changeset/many-days-wash.md b/.changeset/many-days-wash.md new file mode 100644 index 0000000000..d5f070a34b --- /dev/null +++ b/.changeset/many-days-wash.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-explore': patch +--- + +Added option to set `Direction` for the graph in the `GroupsDiagram` diff --git a/plugins/explore/api-report.md b/plugins/explore/api-report.md index d32a133685..532b853671 100644 --- a/plugins/explore/api-report.md +++ b/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; // @public (undocumented) export const GroupsExplorerContent: (props: { title?: string | undefined; + direction?: DependencyGraphTypes.Direction | undefined; }) => JSX_2.Element; // @public (undocumented) diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx index ea989c2834..f7f0eab0bd 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx @@ -164,7 +164,9 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps) { /** * 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" diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx index 61757a35b6..27a7f629ad 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx +++ b/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 }) => { Explore your groups. - + ); };