From b5115777bfbcbe5da98e45f7b4f208070bc636be Mon Sep 17 00:00:00 2001 From: Carlo Colombo Date: Fri, 4 Jun 2021 11:53:32 +0200 Subject: [PATCH 1/4] Card that shows component that depends on the actual compoment Signed-off-by: Carlo Colombo --- .../DependencyOfComponentsCard.test.tsx | 124 ++++++++++++++++++ .../DependencyOfComponentsCard.tsx | 47 +++++++ .../DependencyOfComponentsCard/index.ts | 17 +++ plugins/catalog/src/index.ts | 1 + plugins/catalog/src/plugin.ts | 11 ++ 5 files changed, 200 insertions(+) create mode 100644 plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx create mode 100644 plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx create mode 100644 plugins/catalog/src/components/DependencyOfComponentsCard/index.ts diff --git a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx new file mode 100644 index 0000000000..d843765982 --- /dev/null +++ b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx @@ -0,0 +1,124 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + Entity, + RELATION_DEPENDENCY_OF, +} from '@backstage/catalog-model'; +import { ApiProvider, ApiRegistry } from '@backstage/core'; +import { + CatalogApi, + catalogApiRef, + EntityProvider, +} from '@backstage/plugin-catalog-react'; +import { renderInTestApp } from '@backstage/test-utils'; +import { waitFor } from '@testing-library/react'; +import React from 'react'; +import { DependencyOfComponentsCard } from './DependencyOfComponentsCard'; + +describe('', () => { + const catalogApi: jest.Mocked = { + getLocationById: jest.fn(), + getEntityByName: jest.fn(), + getEntities: jest.fn(), + addLocation: jest.fn(), + getLocationByEntity: jest.fn(), + removeEntityByUid: jest.fn(), + } as any; + let Wrapper: React.ComponentType; + + beforeEach(() => { + const apis = ApiRegistry.with(catalogApiRef, catalogApi); + + Wrapper = ({ children }: { children?: React.ReactNode }) => ( + {children} + ); + }); + + afterEach(() => jest.resetAllMocks()); + + it('shows empty list if no dependencies', async () => { + const entity: Entity = { + apiVersion: 'v1', + kind: 'Component', + metadata: { + name: 'my-component', + namespace: 'my-namespace', + }, + relations: [], + }; + + const { getByText } = await renderInTestApp( + + + + + , + ); + + expect(getByText('Components')).toBeInTheDocument(); + expect( + getByText(/No component depends on this component/i), + ).toBeInTheDocument(); + }); + + it('shows dependency components', async () => { + const entity: Entity = { + apiVersion: 'v1', + kind: 'Component', + metadata: { + name: 'my-component', + namespace: 'my-namespace', + }, + relations: [ + { + target: { + kind: 'Component', + namespace: 'my-namespace', + name: 'target-name', + }, + type: RELATION_DEPENDENCY_OF, + }, + ], + }; + catalogApi.getEntities.mockResolvedValue({ + items: [ + { + apiVersion: 'v1', + kind: 'Component', + metadata: { + namespace: 'my-namespace', + name: 'target-name', + }, + spec: {}, + }, + ], + }); + + const { getByText } = await renderInTestApp( + + + + + , + ); + + await waitFor(() => { + expect(getByText('Components')).toBeInTheDocument(); + expect(getByText(/target-name/i)).toBeInTheDocument(); + }); + }); +}); diff --git a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx new file mode 100644 index 0000000000..fec850757e --- /dev/null +++ b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx @@ -0,0 +1,47 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { RELATION_DEPENDENCY_OF } from '@backstage/catalog-model'; +import React from 'react'; +import { + asComponentEntities, + componentEntityColumns, + componentEntityHelpLink, + RelatedEntitiesCard, +} from '../RelatedEntitiesCard'; + +type Props = { + variant?: 'gridItem'; + title?: string; +}; + +export const DependencyOfComponentsCard = ({ + variant = 'gridItem', + title = 'Components', +}: Props) => { + return ( + + ); +}; diff --git a/plugins/catalog/src/components/DependencyOfComponentsCard/index.ts b/plugins/catalog/src/components/DependencyOfComponentsCard/index.ts new file mode 100644 index 0000000000..e6dd52128a --- /dev/null +++ b/plugins/catalog/src/components/DependencyOfComponentsCard/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { DependencyOfComponentsCard } from './DependencyOfComponentsCard'; diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index 0eb646de41..c0cf0787c9 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -30,6 +30,7 @@ export { catalogPlugin as plugin, EntityAboutCard, EntityDependsOnComponentsCard, + EntityDependencyOfComponentsCard, EntityDependsOnResourcesCard, EntityHasComponentsCard, EntityHasResourcesCard, diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts index 3f4de6c67d..3a62e59729 100644 --- a/plugins/catalog/src/plugin.ts +++ b/plugins/catalog/src/plugin.ts @@ -135,6 +135,17 @@ export const EntityDependsOnComponentsCard = catalogPlugin.provide( }), ); +export const EntityDependencyOfComponentsCard = catalogPlugin.provide( + createComponentExtension({ + component: { + lazy: () => + import('./components/DependencyOfComponentsCard').then( + m => m.DependencyOfComponentsCard, + ), + }, + }), +); + export const EntityDependsOnResourcesCard = catalogPlugin.provide( createComponentExtension({ component: { From 5c67a9e5e7e310c56c8dd9f587aed3042ae81455 Mon Sep 17 00:00:00 2001 From: Carlo Colombo Date: Fri, 4 Jun 2021 11:58:34 +0200 Subject: [PATCH 2/4] it's possible to customize the title of the card to differentiate from the DependencyOf Card Signed-off-by: Carlo Colombo --- .../DependsOnComponentsCard/DependsOnComponentsCard.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx index f837bb02ff..1a215ab0f9 100644 --- a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx +++ b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx @@ -25,13 +25,17 @@ import { type Props = { variant?: 'gridItem'; + title?: string; }; -export const DependsOnComponentsCard = ({ variant = 'gridItem' }: Props) => { +export const DependsOnComponentsCard = ({ + variant = 'gridItem', + title = 'Components', +}: Props) => { return ( Date: Mon, 7 Jun 2021 15:44:17 +0200 Subject: [PATCH 3/4] changeset Signed-off-by: Carlo Colombo --- .changeset/strange-chicken-explain.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/strange-chicken-explain.md diff --git a/.changeset/strange-chicken-explain.md b/.changeset/strange-chicken-explain.md new file mode 100644 index 0000000000..0b2dffbccb --- /dev/null +++ b/.changeset/strange-chicken-explain.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +A new card that shows components that depend on the active component From 22974d9a6e46bdee73104df5bb6eb6450f2bc704 Mon Sep 17 00:00:00 2001 From: Carlo Colombo Date: Tue, 8 Jun 2021 09:38:11 +0200 Subject: [PATCH 4/4] fix prettier issue Signed-off-by: Carlo Colombo --- .../DependencyOfComponentsCard.test.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx index d843765982..4d78ce5019 100644 --- a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx +++ b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx @@ -14,10 +14,7 @@ * limitations under the License. */ -import { - Entity, - RELATION_DEPENDENCY_OF, -} from '@backstage/catalog-model'; +import { Entity, RELATION_DEPENDENCY_OF } from '@backstage/catalog-model'; import { ApiProvider, ApiRegistry } from '@backstage/core'; import { CatalogApi,