Move code from ecosystem package to explore package

2021-01-27 15:01:55 +01:00
parent 9cdd8f8888
commit 806929fe2f
26 changed files with 192 additions and 214 deletions
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Rework the explore plugin to allow the user to explore things in the ecosystem,
+including tools and domains.
@@ -86,8 +86,8 @@ const Root = ({ children }: PropsWithChildren<{}>) => (
      <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
      {/* End global nav */}
      <SidebarDivider />
+      <SidebarItem icon={LayersIcon} to="explore" text="Explore" />
      <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
-      <SidebarItem icon={LayersIcon} to="ecosystem" text="Explore" />
      <SidebarItem icon={RuleIcon} to="lighthouse" text="Lighthouse" />
      <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
      <SidebarItem
@@ -18,7 +18,7 @@ export { plugin as LighthousePlugin } from '@backstage/plugin-lighthouse';
 export { plugin as CatalogPlugin } from '@backstage/plugin-catalog';
 export { plugin as ScaffolderPlugin } from '@backstage/plugin-scaffolder';
 export { plugin as TechRadar } from '@backstage/plugin-tech-radar';
-export { plugin as Explore } from '@backstage/plugin-explore';
+export { explorePlugin } from '@backstage/plugin-explore';
 export { plugin as Circleci } from '@backstage/plugin-circleci';
 export { plugin as RegisterComponent } from '@backstage/plugin-register-component';
 export { plugin as Sentry } from '@backstage/plugin-sentry';
@@ -44,4 +44,3 @@ export { plugin as Buildkite } from '@roadiehq/backstage-plugin-buildkite';
 export { plugin as Search } from '@backstage/plugin-search';
 export { plugin as Org } from '@backstage/plugin-org';
 export { plugin as Kafka } from '@backstage/plugin-kafka';
-export { plugin as Ecosystem } from '@backstage/plugin-ecosystem';
@@ -1,3 +0,0 @@
-module.exports = {
-  extends: [require.resolve('@backstage/cli/config/eslint')],
-};
@@ -1,24 +0,0 @@
-# ecosystem
-
-Welcome to the ecosystem plugin!
-This plugin helps to visualize the domains in your ecosystem.
-
-![Domain Explorer](./docs/domains.png)
-
-## Getting started
-
-To install the plugin, include the following import your `plugins.ts`:
-
-```typescript
-export { plugin as Ecosystem } from '@backstage/plugin-ecosystem';
-```
-
-Add a link to the sidebar in `Root.tsx`:
-
-```typescript
-import LayersIcon from '@material-ui/icons/Layers';
-
-...
-
-<SidebarItem icon={LayersIcon} to="ecosystem" text="Explore" />
-```
@@ -1,58 +0,0 @@
-/*
- * Copyright 2021 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 } from '@backstage/catalog-model';
-import { createDevApp } from '@backstage/dev-utils';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
-import { plugin } from '../src/plugin';
-
-createDevApp()
-  .registerPlugin(plugin)
-  .registerApi({
-    api: catalogApiRef,
-    deps: {},
-    factory: () =>
-      ({
-        async getEntities() {
-          const domainNames = [
-            'playback',
-            'artists',
-            'payments',
-            'analytics',
-            'songs',
-            'devops',
-          ];
-
-          return {
-            items: domainNames.map(
-              (n, i) =>
-                ({
-                  apiVersion: 'backstage.io/v1alpha1',
-                  kind: 'Domain',
-                  metadata: {
-                    name: n,
-                    description: `Everything about ${n}`,
-                    tags: i % 2 === 0 ? [n] : undefined,
-                  },
-                  spec: {
-                    owner: `${n}@example.com`,
-                  },
-                } as Entity),
-            ),
-          };
-        },
-      } as CatalogApi),
-  })
-  .render();
@@ -1,50 +0,0 @@
-{
-  "name": "@backstage/plugin-ecosystem",
-  "version": "0.1.1",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
-  "license": "Apache-2.0",
-  "publishConfig": {
-    "access": "public",
-    "main": "dist/index.esm.js",
-    "types": "dist/index.d.ts"
-  },
-  "scripts": {
-    "build": "backstage-cli plugin:build",
-    "start": "backstage-cli plugin:serve",
-    "lint": "backstage-cli lint",
-    "test": "backstage-cli test",
-    "diff": "backstage-cli plugin:diff",
-    "prepack": "backstage-cli prepack",
-    "postpack": "backstage-cli postpack",
-    "clean": "backstage-cli clean"
-  },
-  "dependencies": {
-    "@backstage/catalog-model": "^0.6.1",
-    "@backstage/core": "^0.4.4",
-    "@backstage/plugin-catalog": "^0.2.10",
-    "@backstage/theme": "^0.2.2",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.45",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-router-dom": "6.0.0-beta.0",
-    "react-use": "^15.3.3"
-  },
-  "devDependencies": {
-    "@backstage/cli": "^0.4.6",
-    "@backstage/dev-utils": "^0.1.7",
-    "@backstage/test-utils": "^0.1.6",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/react": "^10.4.1",
-    "@testing-library/user-event": "^12.0.7",
-    "@types/jest": "^26.0.7",
-    "@types/node": "^12.0.0",
-    "msw": "^0.21.2",
-    "cross-fetch": "^3.0.6"
-  },
-  "files": [
-    "dist"
-  ]
-}
@@ -1,7 +1,22 @@
-# Title
+# explore

 Welcome to the explore plugin!
+This plugin helps to visualize the domains and in your ecosystem.

-## Sub-section 1
+## Getting started

-## Sub-section 2
+To install the plugin, include the following import your `plugins.ts`:
+
+```typescript
+export { plugin as Ecosystem } from '@backstage/plugin-explore';
+```
+
+Add a link to the sidebar in `Root.tsx`:
+
+```typescript
+import LayersIcon from '@material-ui/icons/Layers';
+
+...
+
+<SidebarItem icon={LayersIcon} to="explore" text="Explore" />
+```
@@ -14,7 +14,46 @@
 * limitations under the License.
 */

+import { Entity } from '@backstage/catalog-model';
 import { createDevApp } from '@backstage/dev-utils';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
 import { plugin } from '../src/plugin';

-createDevApp().registerPlugin(plugin).render();
+createDevApp()
+  .registerPlugin(plugin)
+  .registerApi({
+    api: catalogApiRef,
+    deps: {},
+    factory: () =>
+      ({
+        async getEntities() {
+          const domainNames = [
+            'playback',
+            'artists',
+            'payments',
+            'analytics',
+            'songs',
+            'devops',
+          ];
+
+          return {
+            items: domainNames.map(
+              (n, i) =>
+                ({
+                  apiVersion: 'backstage.io/v1alpha1',
+                  kind: 'Domain',
+                  metadata: {
+                    name: n,
+                    description: `Everything about ${n}`,
+                    tags: i % 2 === 0 ? [n] : undefined,
+                  },
+                  spec: {
+                    owner: `${n}@example.com`,
+                  },
+                } as Entity),
+            ),
+          };
+        },
+      } as CatalogApi),
+  })
+  .render();
@@ -31,6 +31,7 @@
  },
  "dependencies": {
    "@backstage/core": "^0.5.0",
+    "@backstage/catalog-model": "^0.7.0",
    "@backstage/theme": "^0.2.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -38,7 +39,7 @@
    "classnames": "^2.2.6",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
-    "react-router": "6.0.0-beta.0",
+    "react-router-dom": "6.0.0-beta.0",
    "react-use": "^15.3.3"
  },
  "devDependencies": {
@@ -15,12 +15,9 @@
 */
 import { DomainEntity } from '@backstage/catalog-model';
 import {
-  configApiRef,
  Content,
  ContentHeader,
  EmptyState,
-  Header,
-  Page,
  Progress,
  SupportButton,
  useApi,
@@ -31,10 +28,7 @@ import React from 'react';
 import { useAsync } from 'react-use';
 import { DomainExplorer } from '../DomainExplorer/DomainExplorer';

-export const DomainExplorerPage = () => {
-  const configApi = useApi(configApiRef);
-  const organizationName =
-    configApi.getOptionalString('organization.name') ?? 'Backstage';
+export const DomainExplorerContent = () => {
  const catalogApi = useApi(catalogApiRef);
  const { value: entities, loading } = useAsync(async () => {
    const response = await catalogApi.getEntities({
@@ -45,34 +39,28 @@ export const DomainExplorerPage = () => {
  }, [catalogApi]);

  return (
-    <Page themeId="home">
-      <Header
-        title={`Explore the ${organizationName} ecosystem`}
-        subtitle="Discover the domains in your ecosystem"
-      />
-      <Content>
-        <ContentHeader title="Domains">
-          <SupportButton>Discover the domains in your ecosystem.</SupportButton>
-        </ContentHeader>
-        {loading && <Progress />}
-        {!loading && (!entities || entities.length === 0) && (
-          <EmptyState
-            missing="info"
-            title="No domains to display"
-            description={`You haven't added any domains yet.`}
-            action={
-              <Button
-                variant="contained"
-                color="primary"
-                href="https://backstage.io/docs/features/software-catalog/descriptor-format#kind-domain"
-              >
-                Read more
-              </Button>
-            }
-          />
-        )}
-        {!loading && entities && <DomainExplorer entities={entities} />}
-      </Content>
-    </Page>
+    <Content>
+      <ContentHeader title="Domains">
+        <SupportButton>Discover the domains in your ecosystem.</SupportButton>
+      </ContentHeader>
+      {loading && <Progress />}
+      {!loading && (!entities || entities.length === 0) && (
+        <EmptyState
+          missing="info"
+          title="No domains to display"
+          description={`You haven't added any domains yet.`}
+          action={
+            <Button
+              variant="contained"
+              color="primary"
+              href="https://backstage.io/docs/features/software-catalog/descriptor-format#kind-domain"
+            >
+              Read more
+            </Button>
+          }
+        />
+      )}
+      {!loading && entities && <DomainExplorer entities={entities} />}
+    </Content>
  );
 };
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2021 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 { configApiRef, Header, Page, useApi } from '@backstage/core';
+import React from 'react';
+import { DomainExplorerContent } from './DomainExplorerContent';
+
+export const DomainExplorerPage = () => {
+  const configApi = useApi(configApiRef);
+  const organizationName =
+    configApi.getOptionalString('organization.name') ?? 'Backstage';
+
+  return (
+    <Page themeId="home">
+      <Header
+        title={`Explore the ${organizationName} ecosystem`}
+        subtitle="Discover the domains in your ecosystem"
+      />
+      <DomainExplorerContent />
+    </Page>
+  );
+};
@@ -13,5 +13,22 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import '@testing-library/jest-dom';
-import 'cross-fetch/polyfill';
+import { configApiRef, Header, Page, useApi } from '@backstage/core';
+import React from 'react';
+import { ExploreTabs } from './ExploreTabs';
+
+export const ExplorePage = () => {
+  const configApi = useApi(configApiRef);
+  const organizationName =
+    configApi.getOptionalString('organization.name') ?? 'Backstage';
+  return (
+    <Page themeId="home">
+      <Header
+        title={`Explore the ${organizationName} ecosystem`}
+        subtitle="Discover available solutions in your ecosystem"
+      />
+
+      <ExploreTabs />
+    </Page>
+  );
+};
@@ -13,17 +13,23 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { createPlugin, createRouteRef } from '@backstage/core';
-import { DomainExplorerPage } from './components/DomainExplorerPage';
+import { Tabs } from '@backstage/core';
+import React from 'react';
+import { DomainExplorerContent } from '../DomainExplorerPage/DomainExplorerContent';

-export const rootRouteRef = createRouteRef({
-  path: '/ecosystem',
-  title: 'ecosystem',
-});
-
-export const plugin = createPlugin({
-  id: 'ecosystem',
-  register({ router }) {
-    router.addRoute(rootRouteRef, DomainExplorerPage);
-  },
-});
+export const ExploreTabs = () => {
+  return (
+    <Tabs
+      tabs={[
+        {
+          label: `Domains`,
+          content: <DomainExplorerContent />,
+        },
+        {
+          label: `Tools`,
+          content: <DomainExplorerContent />,
+        },
+      ]}
+    />
+  );
+};
@@ -13,4 +13,4 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-export { plugin } from './plugin';
+export { ExplorePage } from './ExplorePage';
@@ -14,13 +14,14 @@
 * limitations under the License.
 */

-import React from 'react';
-import { Route, Routes } from 'react-router';
-import { ExplorePluginPage } from './ExplorePluginPage';
-import { rootRouteRef } from '../plugin';
+import { createRoutableExtension } from '@backstage/core';
+import { explorePlugin } from './plugin';
+import { exploreRouteRef } from './routes';

-export const Router = () => (
-  <Routes>
-    <Route path={`/${rootRouteRef.path}`} element={<ExplorePluginPage />} />
-  </Routes>
+export const ExplorePage = explorePlugin.provide(
+  createRoutableExtension({
+    component: () =>
+      import('./components/ExplorePage').then(m => m.ExplorePage),
+    mountPoint: exploreRouteRef,
+  }),
 );
@@ -14,5 +14,6 @@
 * limitations under the License.
 */

-export { plugin } from './plugin';
-export { Router } from './components/Router';
+export * from './extensions';
+export { explorePlugin } from './plugin';
+export * from './routes';
@@ -14,9 +14,12 @@
 * limitations under the License.
 */

-import { createPlugin, createRouteRef } from '@backstage/core';
+import { createPlugin } from '@backstage/core';
+import { exploreRouteRef } from './routes';

-export const rootRouteRef = createRouteRef({ path: '', title: 'Explore' });
-export const plugin = createPlugin({
+export const explorePlugin = createPlugin({
  id: 'explore',
+  routes: {
+    explore: exploreRouteRef,
+  },
 });
@@ -1,5 +1,5 @@
 /*
- * Copyright 2021 Spotify AB
+ * 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.
@@ -13,10 +13,13 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { plugin } from './plugin';

-describe('ecosystem', () => {
-  it('should export plugin', () => {
-    expect(plugin).toBeDefined();
-  });
+import { createRouteRef } from '@backstage/core';
+
+const NoIcon = () => null;
+
+export const exploreRouteRef = createRouteRef({
+  icon: NoIcon,
+  path: '',
+  title: 'Explore',
 });