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: {