🐛 Bug Report: Explore Group Tab Content Moves On Its Own

📜 Description

If you have an Organization with a reasonable number of Groups when you go to the Group tab in the Explorer plugin the content moves on it’s own.

We are pretty sure that this PR is where this was introduced: https://github.com/backstage/backstage/pull/14403

👍 Expected behavior

The content should not move on its own

👎 Actual Behavior with Screenshots

When you have many groups the content moves on it’s own. Here’s an example somewhat trimmed down from what we have, this is only using 38 groups, we have 130+.

https://user-images.githubusercontent.com/67169551/206576703-05bcf4db-3a3d-47ba-9b18-4d8c6d814034.mov

👟 Reproduction steps

1. Navigate to packages/catalog-mode/examples/acme
2. Open the org.yaml file
3. Add the following - ./expanded-org.yaml to the end of the targets: at the end of the file
4. Create a new file called expanded-org.yaml
5. Add the content from below to this new file
6. From the root of the project run yarn dev
7. Click on Explore in the side bar
8. Then click on the Groups tab

Notice: That the content moves on its own 😦

Content for the expanded-org.yaml file:

apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-a
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-b
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-c
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-d
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-e
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-f
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-g
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-h
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-i
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-j
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-k
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-l
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-m
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-n
spec:
  type: ou
  parent: backstage
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-o
spec:
  type: ou
  parent: backstage
  children: []

---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-aa
spec:
  type: ou
  parent: infrastructure
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-bb
spec:
  type: ou
  parent: infrastructure
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-cc
spec:
  type: ou
  parent: infrastructure
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-dd
spec:
  type: ou
  parent: infrastructure
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-ee
spec:
  type: ou
  parent: infrastructure
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-ff
spec:
  type: ou
  parent: infrastructure
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-gg
spec:
  type: ou
  parent: infrastructure
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-hh
spec:
  type: ou
  parent: infrastructure
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-ii
spec:
  type: ou
  parent: boxoffice
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-jj
spec:
  type: ou
  parent: boxoffice
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-kk
spec:
  type: ou
  parent: boxoffice
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-ll
spec:
  type: ou
  parent: boxoffice
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-mm
spec:
  type: ou
  parent: boxoffice
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-nn
spec:
  type: ou
  parent: boxoffice
  children: []
---
apiVersion: backstage.io/v1alpha1
kind: Group
metadata:
  name: ou-oo
spec:
  type: ou
  parent: boxoffice
  children: []

📃 Provide the context for the Bug.

It’s made this tab unsuable for our organization as we can’t see the content, it takes a long time to render properly, and trying to zoom just makes things worse

🖥️ Your Environment

It’s not environment specific but what your Group content is in the Catalog. If you have many groups this issue will come up

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn’t find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Are you willing to submit PR?

No, I don’t have time to work on this right now

[awanlin]

Hi @vorbrodt, sorry for the slow follow up. I ended up just pulling in the things I needed on my end to fix this so the priority dropped. Now that I’m caught up on things I’ll test this out

[vorbrodt]

I have made a PR for this issue, feel free to check it out and test it. @awanlin