diff --git a/.changeset/healthy-tigers-brake.md b/.changeset/healthy-tigers-brake.md
new file mode 100644
index 0000000000..c224d50583
--- /dev/null
+++ b/.changeset/healthy-tigers-brake.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Fixed bug in MembersListCard component where the url for the members was static which was breaking the component when catalog route was changed
diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx
index 47e954eb17..f5a2d50cb5 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx
@@ -19,6 +19,7 @@ import {
CatalogApi,
catalogApiRef,
EntityProvider,
+ entityRouteRef,
StarredEntitiesApi,
starredEntitiesApiRef,
} from '@backstage/plugin-catalog-react';
@@ -124,6 +125,11 @@ describe('MemberTab Test', () => {
,
,
+ {
+ mountedRoutes: {
+ '/catalog/:namespace/:kind/:name': entityRouteRef,
+ },
+ },
),
);
@@ -152,6 +158,11 @@ describe('MemberTab Test', () => {
,
+ {
+ mountedRoutes: {
+ '/catalog/:namespace/:kind/:name': entityRouteRef,
+ },
+ },
),
);
@@ -176,12 +187,15 @@ describe('MemberTab Test', () => {
,
+ {
+ mountedRoutes: {
+ '/catalog/:namespace/:kind/:name': entityRouteRef,
+ },
+ },
);
-
const toggleSwitch = screen.queryByRole('checkbox');
expect(toggleSwitch).toBeNull();
});
-
it('Shows the aggregate members toggle if the showAggregateMembersToggle prop is true', async () => {
await renderInTestApp(
{
,
+ {
+ mountedRoutes: {
+ '/catalog/:namespace/:kind/:name': entityRouteRef,
+ },
+ },
);
-
expect(screen.queryByRole('checkbox')).toBeInTheDocument();
});
-
it('Shows only direct members if the showAggregateMembersToggle prop is undefined', async () => {
await renderInTestApp(
{
,
+ {
+ mountedRoutes: {
+ '/catalog/:namespace/:kind/:name': entityRouteRef,
+ },
+ },
);
-
const displayedMemberNames = screen.queryAllByTestId('user-link');
const duplicatedUserText = screen.getByText('Duplicated User');
const groupAUserOneText = screen.getByText('Group A User One');
-
expect(displayedMemberNames).toHaveLength(2);
expect(duplicatedUserText).toBeInTheDocument();
expect(groupAUserOneText).toBeInTheDocument();
@@ -234,7 +254,6 @@ describe('MemberTab Test', () => {
duplicatedUserText.compareDocumentPosition(groupAUserOneText),
).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
});
-
it('Shows only direct members if the aggregate members switch is turned off', async () => {
await renderInTestApp(
{
,
+ {
+ mountedRoutes: {
+ '/catalog/:namespace/:kind/:name': entityRouteRef,
+ },
+ },
);
-
const displayedMemberNames = screen.queryAllByTestId('user-link');
const duplicatedUserText = screen.getByText('Duplicated User');
const groupAUserOneText = screen.getByText('Group A User One');
-
expect(displayedMemberNames).toHaveLength(2);
expect(duplicatedUserText).toBeInTheDocument();
expect(groupAUserOneText).toBeInTheDocument();
@@ -265,7 +287,6 @@ describe('MemberTab Test', () => {
duplicatedUserText.compareDocumentPosition(groupAUserOneText),
).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
});
-
it('Shows all descendant members of the group when the aggregate users switch is turned on, showing duplicated members only once', async () => {
await renderInTestApp(
{
,
+ {
+ mountedRoutes: {
+ '/catalog/:namespace/:kind/:name': entityRouteRef,
+ },
+ },
);
-
// Click the toggle switch
await userEvent.click(screen.getByRole('checkbox'));
-
const displayedMemberNames = screen.queryAllByTestId('user-link');
const duplicatedUserText = screen.getByText('Duplicated User');
const groupAUserOneText = screen.getByText('Group A User One');
const groupBUserOneText = screen.getByText('Group B User One');
const groupDUserOneText = screen.getByText('Group D User One');
const groupEUserOneText = screen.getByText('Group E User One');
-
expect(displayedMemberNames).toHaveLength(5);
-
expect(duplicatedUserText).toBeInTheDocument();
expect(groupAUserOneText).toBeInTheDocument();
expect(groupBUserOneText).toBeInTheDocument();
expect(groupDUserOneText).toBeInTheDocument();
expect(groupEUserOneText).toBeInTheDocument();
-
expect(
duplicatedUserText.compareDocumentPosition(groupAUserOneText),
).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
index 0a5386ea20..3716af5522 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
@@ -20,11 +20,7 @@ import {
UserEntity,
stringifyEntityRef,
} from '@backstage/catalog-model';
-import {
- catalogApiRef,
- entityRouteParams,
- useEntity,
-} from '@backstage/plugin-catalog-react';
+import { catalogApiRef, useEntity } from '@backstage/plugin-catalog-react';
import {
Box,
createStyles,
@@ -36,7 +32,6 @@ import {
} from '@material-ui/core';
import Pagination from '@material-ui/lab/Pagination';
import React, { useState } from 'react';
-import { generatePath } from 'react-router-dom';
import useAsync from 'react-use/lib/useAsync';
import {
@@ -52,6 +47,7 @@ import {
getAllDesendantMembersForGroupEntity,
removeDuplicateEntitiesFrom,
} from '../../../../helpers/helpers';
+import { EntityRefLink } from '@backstage/plugin-catalog-react';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -102,15 +98,11 @@ const MemberComponent = (props: { member: UserEntity }) => {
textAlign="center"
>
-
-
-
+ entityRef={props.member}
+ title={displayName}
+ />
{profile?.email && (