Merge pull request #353 from benjidotsh/groups-hide-children

add property hideChildren to GroupsDiagram and GroupsExplorerContent
backstage · Jun 14, 2024 · ad5fd84 · ad5fd84
2 parents a49e5cd + 72281ce
commit ad5fd84
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 7 deletions.
diff --git a/workspaces/explore/.changeset/smooth-onions-build.md b/workspaces/explore/.changeset/smooth-onions-build.md
@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-explore': patch
+---
+
+Added property `hideChildren` to `GroupsDiagram` and `GroupsExplorerContent` components
diff --git a/workspaces/explore/plugins/explore/api-report.md b/workspaces/explore/plugins/explore/api-report.md
@@ -113,6 +113,7 @@ export const exploreRouteRef: RouteRef<undefined>;
 export const GroupsExplorerContent: (props: {
   title?: string | undefined;
   direction?: DependencyGraphTypes.Direction | undefined;
+  hideChildren?: boolean | undefined;
 }) => JSX_2.Element;
 
 // @public (undocumented)

diff --git a/...paces/explore/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx b/...paces/explore/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx
@@ -71,4 +71,72 @@ describe('<GroupsDiagram />', () => {
       screen.getByRole('link', { name: 'my-namespace/group-a' }),
     ).toBeInTheDocument();
   });
+
+  it('hide children', async () => {
+    const catalogApi: Partial<CatalogApi> = {
+      getEntities: () =>
+        Promise.resolve({
+          items: [
+            {
+              apiVersion: 'backstage.io/v1alpha1',
+              kind: 'Group',
+              metadata: {
+                name: 'parent-a',
+                namespace: 'my-namespace',
+              },
+              spec: {
+                profile: {
+                  displayName: 'Parent A',
+                },
+                type: 'organization',
+              },
+            },
+            {
+              apiVersion: 'backstage.io/v1alpha1',
+              kind: 'Group',
+              metadata: {
+                name: 'child-a',
+                namespace: 'my-namespace',
+              },
+              spec: {
+                profile: {
+                  displayName: 'Child A',
+                },
+                type: 'organization',
+              },
+              relations: [
+                {
+                  type: 'childOf',
+                  targetRef: 'group:default/parent-a',
+                  target: {
+                    kind: 'group',
+                    namespace: 'default',
+                    name: 'parent-a',
+                  },
+                },
+              ],
+            },
+          ] as Entity[],
+        }),
+    };
+
+    await renderInTestApp(
+      <TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
+        <GroupsDiagram hideChildren />
+      </TestApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
+    );
+
+    expect(
+      screen.getByRole('link', { name: 'my-namespace/parent-a' }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.queryByRole('link', { name: 'my-namespace/child-a' }),
+    ).not.toBeInTheDocument();
+  });
 });
diff --git a/workspaces/explore/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/workspaces/explore/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
@@ -168,6 +168,7 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
  */
 export function GroupsDiagram(props: {
   direction?: DependencyGraphTypes.Direction;
+  hideChildren?: boolean;
 }) {
   const nodes = new Array<{
     id: string;
@@ -209,18 +210,20 @@ export function GroupsDiagram(props: {
   for (const catalogItem of catalogResponse?.items || []) {
     const currentItemId = stringifyEntityRef(catalogItem);
 
-    nodes.push({
-      id: stringifyEntityRef(catalogItem),
-      kind: catalogItem.kind,
-      name: '',
-    });
-
     // Edge to parent
     const catalogItemRelations_childOf = getEntityRelations(
       catalogItem,
       RELATION_CHILD_OF,
     );
 
+    if (props.hideChildren && catalogItemRelations_childOf.length) continue;
+
+    nodes.push({
+      id: stringifyEntityRef(catalogItem),
+      kind: catalogItem.kind,
+      name: '',
+    });
+
     // if no parent is found, link the node to the root
     if (catalogItemRelations_childOf.length === 0) {
       edges.push({

diff --git a/...es/explore/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx b/...es/explore/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx
@@ -38,6 +38,7 @@ const useStyles = makeStyles(
 export const GroupsExplorerContent = (props: {
   title?: string;
   direction?: DependencyGraphTypes.Direction;
+  hideChildren?: boolean;
 }) => {
   const classes = useStyles();
 
@@ -46,7 +47,10 @@ export const GroupsExplorerContent = (props: {
       <ContentHeader title={props.title ?? 'Groups'}>
         <SupportButton>Explore your groups.</SupportButton>
       </ContentHeader>
-      <GroupsDiagram direction={props.direction} />
+      <GroupsDiagram
+        direction={props.direction}
+        hideChildren={props.hideChildren}
+      />
     </Content>
   );
 };