From dbde8c0d6fa8d5937faad7bb347c4ab5440143b0 Mon Sep 17 00:00:00 2001 From: NIKUNJ LALITKUMAR HUDKA Date: Fri, 19 Apr 2024 09:46:44 -0300 Subject: [PATCH] feat: EntityListComponent now uses Catalog Presentation API Signed-off-by: NIKUNJ LALITKUMAR HUDKA --- plugins/catalog-import/package.json | 1 + .../EntityListComponent.tsx | 43 ++++-- .../StepPrepareSelectLocations.test.tsx | 126 ++++++++++++------ 3 files changed, 118 insertions(+), 52 deletions(-) diff --git a/plugins/catalog-import/package.json b/plugins/catalog-import/package.json index 67215f6a74..8a882206a3 100644 --- a/plugins/catalog-import/package.json +++ b/plugins/catalog-import/package.json @@ -78,6 +78,7 @@ "@backstage/cli": "workspace:^", "@backstage/core-app-api": "workspace:^", "@backstage/dev-utils": "workspace:^", + "@backstage/plugin-catalog": "workspace:^", "@backstage/test-utils": "workspace:^", "@testing-library/dom": "^10.0.0", "@testing-library/jest-dom": "^6.0.0", diff --git a/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx b/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx index ef57fad204..9c4af562e5 100644 --- a/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx +++ b/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx @@ -14,11 +14,15 @@ * limitations under the License. */ -import { Entity, CompoundEntityRef } from '@backstage/catalog-model'; -import { useApp } from '@backstage/core-plugin-api'; +import { + Entity, + CompoundEntityRef, + stringifyEntityRef, +} from '@backstage/catalog-model'; +import { useApi, useApp } from '@backstage/core-plugin-api'; import { EntityRefLink, - humanizeEntityRef, + entityPresentationApiRef, } from '@backstage/plugin-catalog-react'; import Collapse from '@material-ui/core/Collapse'; import IconButton from '@material-ui/core/IconButton'; @@ -38,12 +42,6 @@ const useStyles = makeStyles(theme => ({ }, })); -function sortEntities(entities: Array) { - return entities.sort((a, b) => - humanizeEntityRef(a).localeCompare(humanizeEntityRef(b)), - ); -} - /** * Props for {@link EntityListComponent}. * @@ -78,7 +76,7 @@ export const EntityListComponent = (props: EntityListComponentProps) => { const app = useApp(); const classes = useStyles(); - + const entityPresentationApi = useApi(entityPresentationApiRef); const [expandedUrls, setExpandedUrls] = useState([]); const handleClick = (url: string) => { @@ -87,6 +85,17 @@ export const EntityListComponent = (props: EntityListComponentProps) => { ); }; + function sortEntities(entities: Array) { + return entities.sort((a, b) => + entityPresentationApi + .forEntity(stringifyEntityRef(a)) + .snapshot.entityRef.localeCompare( + entityPresentationApi.forEntity(stringifyEntityRef(b)).snapshot + .entityRef, + ), + ); + } + return ( {firstListItem} @@ -129,7 +138,11 @@ export const EntityListComponent = (props: EntityListComponentProps) => { ); return ( { : {})} > {Icon && } - + ); })} diff --git a/plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx b/plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx index b5efd3fbbf..e5a4174859 100644 --- a/plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx +++ b/plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx @@ -14,14 +14,22 @@ * limitations under the License. */ -import { renderInTestApp } from '@backstage/test-utils'; +import { TestApiProvider, renderInTestApp } from '@backstage/test-utils'; import { act, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; import { AnalyzeResult } from '../../api'; import { StepPrepareSelectLocations } from './StepPrepareSelectLocations'; +import { + CatalogApi, + catalogApiRef, + entityPresentationApiRef, +} from '@backstage/plugin-catalog-react'; +import { DefaultEntityPresentationApi } from '@backstage/plugin-catalog'; +import { Entity } from '@backstage/catalog-model'; describe('', () => { + let entities: Entity[]; const analyzeResult = { type: 'locations', locations: [ @@ -53,17 +61,43 @@ describe('', () => { ], } as Extract; + const catalogApi: jest.Mocked = { + getLocationById: jest.fn(), + getEntityByName: jest.fn(), + getEntities: jest.fn(async () => ({ items: entities })), + addLocation: jest.fn(), + getLocationByRef: jest.fn(), + removeEntityByUid: jest.fn(), + } as any; + let Wrapper: React.ComponentType>; + beforeEach(() => { jest.resetAllMocks(); + catalogApi.getEntities.mockResolvedValue({ items: entities }); + Wrapper = ({ children }: { children?: React.ReactNode }) => ( + + {children} + + ); }); it('renders display locations to be added', async () => { await renderInTestApp( - undefined} - onGoBack={() => undefined} - />, + + undefined} + onGoBack={() => undefined} + /> + , ); expect(screen.getByText('url-1')).toBeInTheDocument(); @@ -96,11 +130,13 @@ describe('', () => { } as Extract; await renderInTestApp( - undefined} - onGoBack={() => undefined} - />, + + undefined} + onGoBack={() => undefined} + /> + , ); expect(screen.getByText(/my-target/)).toBeInTheDocument(); @@ -112,11 +148,13 @@ describe('', () => { it('should select and deselect all', async () => { await renderInTestApp( - undefined} - onGoBack={() => undefined} - />, + + undefined} + onGoBack={() => undefined} + /> + , ); const checkboxes = screen.getAllByRole('checkbox'); @@ -144,15 +182,17 @@ describe('', () => { it('should preselect prepared locations', async () => { await renderInTestApp( - undefined} - onGoBack={() => undefined} - />, + + undefined} + onGoBack={() => undefined} + /> + , ); const checkboxes = screen.getAllByRole('checkbox'); @@ -164,11 +204,13 @@ describe('', () => { it('should select items', async () => { await renderInTestApp( - undefined} - onGoBack={() => undefined} - />, + + undefined} + onGoBack={() => undefined} + /> + , ); const checkboxes = screen.getAllByRole('checkbox'); @@ -193,11 +235,13 @@ describe('', () => { const onGoBack = jest.fn(); await renderInTestApp( - undefined} - onGoBack={onGoBack} - />, + + undefined} + onGoBack={onGoBack} + /> + , ); await act(async () => { @@ -211,11 +255,13 @@ describe('', () => { const onPrepare = jest.fn(); await renderInTestApp( - undefined} - />, + + undefined} + /> + , ); const checkboxes = screen.getAllByRole('checkbox');