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 && (