Add generic Explore tab for entities and refactor existing to use it; Add Systems to default page

Signed-off-by: sblausten <sam@roadie.io>
2022-12-21 18:52:30 +01:00
parent bb1122ba22
commit f9ea944422
10 changed files with 285 additions and 12 deletions
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Extracted generic EntityExplorerContent component so that is is easy to show any component kinds in their own tab in the Explore page.
@@ -2,7 +2,7 @@

 Welcome to the explore plugin!

-This plugin helps to visualize the domains and tools in your ecosystem.
+This plugin helps to visualize the domains, systems and tools in your ecosystem.

 ## Setup

@@ -116,7 +116,10 @@ export const ExplorePage = () => {
      subtitle="Browse our ecosystem"
    >
      <ExploreLayout.Route path="domains" title="Domains">
-        <DomainExplorerContent />
+        <EntityExplorerContent kind="domain" />
+      </ExploreLayout.Route>
+      <ExploreLayout.Route path="systems" title="Systems">
+        <EntityExplorerContent kind="system" />
      </ExploreLayout.Route>
      <ExploreLayout.Route path="inner-source" title="InnerSource">
        <AcmeInnserSourceExplorerContent />
@@ -15,11 +15,11 @@
 */

 import React from 'react';
-import { DomainExplorerContent } from '../DomainExplorerContent';
 import { ExploreLayout } from '../ExploreLayout';
 import { GroupsExplorerContent } from '../GroupsExplorerContent';
 import { ToolExplorerContent } from '../ToolExplorerContent';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
+import { EntityExplorerContent } from '../EntityExplorerContent';

 export const DefaultExplorePage = () => {
  const configApi = useApi(configApiRef);
@@ -32,7 +32,10 @@ export const DefaultExplorePage = () => {
      subtitle="Discover solutions available in your ecosystem"
    >
      <ExploreLayout.Route path="domains" title="Domains">
-        <DomainExplorerContent />
+        <EntityExplorerContent kind="domain" />
+      </ExploreLayout.Route>
+      <ExploreLayout.Route path="systems" title="Systems">
+        <EntityExplorerContent kind="system" />
      </ExploreLayout.Route>
      <ExploreLayout.Route path="groups" title="Groups">
        <GroupsExplorerContent />
@@ -19,7 +19,6 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Button } from '@material-ui/core';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
-import { DomainCard } from '../DomainCard';
 import {
  Content,
  ContentHeader,
@@ -30,6 +29,7 @@ import {
  WarningPanel,
 } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
+import { EntityCard } from '../EntityCard';

 const Body = () => {
  const catalogApi = useApi(catalogApiRef);
@@ -78,7 +78,7 @@ const Body = () => {
  return (
    <ItemCardGrid>
      {entities.map((entity, index) => (
-        <DomainCard key={index} entity={entity} />
+        <EntityCard key={index} entity={entity} />
      ))}
    </ItemCardGrid>
  );
@@ -18,9 +18,9 @@ import { DomainEntity } from '@backstage/catalog-model';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
-import { DomainCard } from './DomainCard';
+import { EntityCard } from './EntityCard';

-describe('<DomainCard />', () => {
+describe('<EntityCard />', () => {
  it('renders a domain card', async () => {
    const entity: DomainEntity = {
      apiVersion: 'backstage.io/v1alpha1',
@@ -35,7 +35,7 @@ describe('<DomainCard />', () => {
      },
    };
    const { getByText } = await renderInTestApp(
-      <DomainCard entity={entity} />,
+      <EntityCard entity={entity} />,
      {
        mountedRoutes: {
          '/catalog/:namespace/:kind/:name': entityRouteRef,
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import { DomainEntity, RELATION_OWNED_BY } from '@backstage/catalog-model';
+import { Entity, RELATION_OWNED_BY } from '@backstage/catalog-model';
 import {
  EntityRefLinks,
  entityRouteParams,
@@ -35,7 +35,7 @@ import { Button, ItemCardHeader } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';

 /** @public */
-export const DomainCard = (props: { entity: DomainEntity }) => {
+export const EntityCard = (props: { entity: Entity }) => {
  const { entity } = props;

  const catalogEntityRoute = useRouteRef(entityRouteRef);
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { DomainCard } from './DomainCard';
+export { EntityCard } from './EntityCard';
@@ -0,0 +1,136 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * 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 { DomainEntity } from '@backstage/catalog-model';
+import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
+import { waitFor } from '@testing-library/react';
+import React from 'react';
+import { EntityExplorerContent } from './EntityExplorerContent';
+
+describe('<EntityExplorerContent />', () => {
+  const catalogApi = {
+    addLocation: jest.fn(),
+    getEntities: jest.fn(),
+    getLocationByRef: jest.fn(),
+    getLocationById: jest.fn(),
+    removeLocationById: jest.fn(),
+    removeEntityByUid: jest.fn(),
+    getEntityByRef: jest.fn(),
+    refreshEntity: jest.fn(),
+    getEntityAncestors: jest.fn(),
+    getEntityFacets: jest.fn(),
+    validateEntity: jest.fn(),
+  };
+
+  const Wrapper = ({ children }: { children?: React.ReactNode }) => (
+    <TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
+      {children}
+    </TestApiProvider>
+  );
+
+  const mountedRoutes = {
+    mountedRoutes: {
+      '/catalog/:namespace/:kind/:name': entityRouteRef,
+    },
+  };
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders a grid of domains', async () => {
+    const entities: DomainEntity[] = [
+      {
+        apiVersion: 'backstage.io/v1alpha1',
+        kind: 'Domain',
+        metadata: {
+          name: 'playback',
+        },
+        spec: {
+          owner: 'guest',
+        },
+      },
+      {
+        apiVersion: 'backstage.io/v1alpha1',
+        kind: 'Domain',
+        metadata: {
+          name: 'artists',
+        },
+        spec: {
+          owner: 'guest',
+        },
+      },
+    ];
+    catalogApi.getEntities.mockResolvedValue({ items: entities });
+
+    const { getByText } = await renderInTestApp(
+      <Wrapper>
+        <EntityExplorerContent kind="domain" />
+      </Wrapper>,
+      mountedRoutes,
+    );
+
+    await waitFor(() => {
+      expect(getByText('artists')).toBeInTheDocument();
+      expect(getByText('playback')).toBeInTheDocument();
+    });
+  });
+
+  it('renders a custom title', async () => {
+    catalogApi.getEntities.mockResolvedValue({ items: [] });
+
+    const { getByText } = await renderInTestApp(
+      <Wrapper>
+        <EntityExplorerContent kind="domain" tabTitle="Our Areas" />
+      </Wrapper>,
+      mountedRoutes,
+    );
+
+    await waitFor(() => expect(getByText('Our Areas')).toBeInTheDocument());
+  });
+
+  it('renders empty state', async () => {
+    catalogApi.getEntities.mockResolvedValue({ items: [] });
+
+    const { getByText } = await renderInTestApp(
+      <Wrapper>
+        <EntityExplorerContent kind="domain" />
+      </Wrapper>,
+      mountedRoutes,
+    );
+
+    await waitFor(() =>
+      expect(getByText('No domains to display')).toBeInTheDocument(),
+    );
+  });
+
+  it('renders a friendly error if it cannot collect domains', async () => {
+    const catalogError = new Error('Network timeout');
+    catalogApi.getEntities.mockRejectedValueOnce(catalogError);
+
+    const { getByText } = await renderInTestApp(
+      <Wrapper>
+        <EntityExplorerContent kind="domain" />
+      </Wrapper>,
+      mountedRoutes,
+    );
+
+    await waitFor(() =>
+      expect(getByText(/Could not load domains/)).toBeInTheDocument(),
+    );
+  });
+});
@@ -0,0 +1,109 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * 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 } from '@backstage/catalog-model';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { Button } from '@material-ui/core';
+import React from 'react';
+import useAsync from 'react-use/lib/useAsync';
+import { EntityCard } from '../EntityCard';
+import {
+  Content,
+  ContentHeader,
+  EmptyState,
+  ItemCardGrid,
+  Progress,
+  SupportButton,
+  WarningPanel,
+} from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+
+const Body = (props: { kind: string }) => {
+  const { kind } = props;
+  const kindPlural = `${kind}s`;
+  const catalogApi = useApi(catalogApiRef);
+  const {
+    value: entities,
+    loading,
+    error,
+  } = useAsync(async () => {
+    const response = await catalogApi.getEntities({
+      filter: { kind },
+    });
+    return response.items as Entity[];
+  }, [catalogApi]);
+
+  if (loading) {
+    return <Progress />;
+  }
+
+  if (error) {
+    return (
+      <WarningPanel severity="error" title={`Could not load ${kindPlural}.`}>
+        {error.message}
+      </WarningPanel>
+    );
+  }
+
+  if (!entities?.length) {
+    return (
+      <EmptyState
+        missing="info"
+        title={`No ${kindPlural} to display`}
+        description={`You haven't added any ${kindPlural} yet.`}
+        action={
+          <Button
+            variant="contained"
+            color="primary"
+            href={`https://backstage.io/docs/features/software-catalog/descriptor-format#kind-${kind}`}
+          >
+            Read more
+          </Button>
+        }
+      />
+    );
+  }
+
+  return (
+    <ItemCardGrid>
+      {entities.map((entity, index) => (
+        <EntityCard key={index} entity={entity} />
+      ))}
+    </ItemCardGrid>
+  );
+};
+
+/** @public */
+export const EntityExplorerContent = (props: {
+  tabTitle?: string;
+  kind: string;
+}) => {
+  const { kind, tabTitle } = props;
+  return (
+    <Content noPadding>
+      <ContentHeader
+        title={
+          tabTitle || `${kind[0].toLocaleUpperCase()}${kind.substring(1)}s`
+        }
+      >
+        <SupportButton>
+          Discover the {kind.toLocaleLowerCase()}s in your ecosystem.
+        </SupportButton>
+      </ContentHeader>
+      <Body kind={kind.toLocaleLowerCase()} />
+    </Content>
+  );
+};
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * 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 { EntityExplorerContent } from './EntityExplorerContent';