Merge pull request #5917 from carlo-colombo/master

Card to list components depending on the active component

.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

plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.test.tsx

@@ -0,0 +1,121 @@
+/*
+ * 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('<DependencyOfComponentsCard />', () => {
+  const catalogApi: jest.Mocked<CatalogApi> = {
+    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 }) => (
+      <ApiProvider apis={apis}>{children}</ApiProvider>
+    );
+  });
+
+  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(
+      <Wrapper>
+        <EntityProvider entity={entity}>
+          <DependencyOfComponentsCard />
+        </EntityProvider>
+      </Wrapper>,
+    );
+
+    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(
+      <Wrapper>
+        <EntityProvider entity={entity}>
+          <DependencyOfComponentsCard />
+        </EntityProvider>
+      </Wrapper>,
+    );
+
+    await waitFor(() => {
+      expect(getByText('Components')).toBeInTheDocument();
+      expect(getByText(/target-name/i)).toBeInTheDocument();
+    });
+  });
+});

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 (
+    <RelatedEntitiesCard
+      variant={variant}
+      title={title}
+      entityKind="Component"
+      relationType={RELATION_DEPENDENCY_OF}
+      columns={componentEntityColumns}
+      emptyMessage="No component depends on this component"
+      emptyHelpLink={componentEntityHelpLink}
+      asRenderableEntities={asComponentEntities}
+    />
+  );
+};

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';

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 (
     <RelatedEntitiesCard
       variant={variant}
-      title="Components"
+      title={title}
       entityKind="Component"
       relationType={RELATION_DEPENDS_ON}
       columns={componentEntityColumns}

plugins/catalog/src/index.ts

@@ -30,6 +30,7 @@ export {
   catalogPlugin as plugin,
   EntityAboutCard,
   EntityDependsOnComponentsCard,
+  EntityDependencyOfComponentsCard,
   EntityDependsOnResourcesCard,
   EntityHasComponentsCard,
   EntityHasResourcesCard,

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