diff --git a/.changeset/two-foxes-exercise.md b/.changeset/two-foxes-exercise.md new file mode 100644 index 0000000000..953eb83138 --- /dev/null +++ b/.changeset/two-foxes-exercise.md @@ -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. diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index 29211dc42a..fca05db222 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -86,8 +86,8 @@ const Root = ({ children }: PropsWithChildren<{}>) => ( {/* End global nav */} + - -``` diff --git a/plugins/ecosystem/dev/index.tsx b/plugins/ecosystem/dev/index.tsx deleted file mode 100644 index 30a071862b..0000000000 --- a/plugins/ecosystem/dev/index.tsx +++ /dev/null @@ -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(); diff --git a/plugins/ecosystem/docs/domains.png b/plugins/ecosystem/docs/domains.png deleted file mode 100644 index 70f3be02d6..0000000000 Binary files a/plugins/ecosystem/docs/domains.png and /dev/null differ diff --git a/plugins/ecosystem/package.json b/plugins/ecosystem/package.json deleted file mode 100644 index 52b2db3d6a..0000000000 --- a/plugins/ecosystem/package.json +++ /dev/null @@ -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" - ] -} diff --git a/plugins/explore/README.md b/plugins/explore/README.md index d5453e594c..522fb15df8 100644 --- a/plugins/explore/README.md +++ b/plugins/explore/README.md @@ -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'; + +... + + +``` diff --git a/plugins/explore/dev/index.tsx b/plugins/explore/dev/index.tsx index 812a5585d4..d28bd50bd0 100644 --- a/plugins/explore/dev/index.tsx +++ b/plugins/explore/dev/index.tsx @@ -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(); diff --git a/plugins/explore/package.json b/plugins/explore/package.json index c6668c9c4d..6d3e21ced0 100644 --- a/plugins/explore/package.json +++ b/plugins/explore/package.json @@ -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": { diff --git a/plugins/ecosystem/src/components/DomainCard/DomainCard.test.tsx b/plugins/explore/src/components/DomainCard/DomainCard.test.tsx similarity index 100% rename from plugins/ecosystem/src/components/DomainCard/DomainCard.test.tsx rename to plugins/explore/src/components/DomainCard/DomainCard.test.tsx diff --git a/plugins/ecosystem/src/components/DomainCard/DomainCard.tsx b/plugins/explore/src/components/DomainCard/DomainCard.tsx similarity index 100% rename from plugins/ecosystem/src/components/DomainCard/DomainCard.tsx rename to plugins/explore/src/components/DomainCard/DomainCard.tsx diff --git a/plugins/ecosystem/src/components/DomainCard/index.ts b/plugins/explore/src/components/DomainCard/index.ts similarity index 100% rename from plugins/ecosystem/src/components/DomainCard/index.ts rename to plugins/explore/src/components/DomainCard/index.ts diff --git a/plugins/ecosystem/src/components/DomainExplorer/DomainExplorer.tsx b/plugins/explore/src/components/DomainExplorer/DomainExplorer.tsx similarity index 100% rename from plugins/ecosystem/src/components/DomainExplorer/DomainExplorer.tsx rename to plugins/explore/src/components/DomainExplorer/DomainExplorer.tsx diff --git a/plugins/ecosystem/src/components/DomainExplorer/index.ts b/plugins/explore/src/components/DomainExplorer/index.ts similarity index 100% rename from plugins/ecosystem/src/components/DomainExplorer/index.ts rename to plugins/explore/src/components/DomainExplorer/index.ts diff --git a/plugins/ecosystem/src/components/DomainExplorerPage/DomainExplorerPage.tsx b/plugins/explore/src/components/DomainExplorerPage/DomainExplorerContent.tsx similarity index 51% rename from plugins/ecosystem/src/components/DomainExplorerPage/DomainExplorerPage.tsx rename to plugins/explore/src/components/DomainExplorerPage/DomainExplorerContent.tsx index b8b6c9c72c..90faabbb7d 100644 --- a/plugins/ecosystem/src/components/DomainExplorerPage/DomainExplorerPage.tsx +++ b/plugins/explore/src/components/DomainExplorerPage/DomainExplorerContent.tsx @@ -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 ( - -
- - - Discover the domains in your ecosystem. - - {loading && } - {!loading && (!entities || entities.length === 0) && ( - - Read more - - } - /> - )} - {!loading && entities && } - - + + + Discover the domains in your ecosystem. + + {loading && } + {!loading && (!entities || entities.length === 0) && ( + + Read more + + } + /> + )} + {!loading && entities && } + ); }; diff --git a/plugins/explore/src/components/DomainExplorerPage/DomainExplorerPage.tsx b/plugins/explore/src/components/DomainExplorerPage/DomainExplorerPage.tsx new file mode 100644 index 0000000000..3228963e41 --- /dev/null +++ b/plugins/explore/src/components/DomainExplorerPage/DomainExplorerPage.tsx @@ -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 ( + +
+ + + ); +}; diff --git a/plugins/ecosystem/src/components/DomainExplorerPage/index.ts b/plugins/explore/src/components/DomainExplorerPage/index.ts similarity index 100% rename from plugins/ecosystem/src/components/DomainExplorerPage/index.ts rename to plugins/explore/src/components/DomainExplorerPage/index.ts diff --git a/plugins/ecosystem/src/setupTests.ts b/plugins/explore/src/components/ExplorePage/ExplorePage.tsx similarity index 52% rename from plugins/ecosystem/src/setupTests.ts rename to plugins/explore/src/components/ExplorePage/ExplorePage.tsx index 0cec5b395d..ade7d8326c 100644 --- a/plugins/ecosystem/src/setupTests.ts +++ b/plugins/explore/src/components/ExplorePage/ExplorePage.tsx @@ -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 ( + +
+ + + + ); +}; diff --git a/plugins/ecosystem/src/plugin.ts b/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx similarity index 57% rename from plugins/ecosystem/src/plugin.ts rename to plugins/explore/src/components/ExplorePage/ExploreTabs.tsx index 3246c9f3c4..a3e67f44bf 100644 --- a/plugins/ecosystem/src/plugin.ts +++ b/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx @@ -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 ( + , + }, + { + label: `Tools`, + content: , + }, + ]} + /> + ); +}; diff --git a/plugins/ecosystem/src/index.ts b/plugins/explore/src/components/ExplorePage/index.ts similarity index 92% rename from plugins/ecosystem/src/index.ts rename to plugins/explore/src/components/ExplorePage/index.ts index 4607d3b35d..b075c410c3 100644 --- a/plugins/ecosystem/src/index.ts +++ b/plugins/explore/src/components/ExplorePage/index.ts @@ -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'; diff --git a/plugins/explore/src/components/Router.tsx b/plugins/explore/src/extensions.tsx similarity index 63% rename from plugins/explore/src/components/Router.tsx rename to plugins/explore/src/extensions.tsx index becb2522d0..cdf43d3035 100644 --- a/plugins/explore/src/components/Router.tsx +++ b/plugins/explore/src/extensions.tsx @@ -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 = () => ( - - } /> - +export const ExplorePage = explorePlugin.provide( + createRoutableExtension({ + component: () => + import('./components/ExplorePage').then(m => m.ExplorePage), + mountPoint: exploreRouteRef, + }), ); diff --git a/plugins/explore/src/index.ts b/plugins/explore/src/index.ts index ff7857cacd..70a00f5bbb 100644 --- a/plugins/explore/src/index.ts +++ b/plugins/explore/src/index.ts @@ -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'; diff --git a/plugins/explore/src/plugin.ts b/plugins/explore/src/plugin.ts index 75ea892242..c5346607c9 100644 --- a/plugins/explore/src/plugin.ts +++ b/plugins/explore/src/plugin.ts @@ -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, + }, }); diff --git a/plugins/ecosystem/src/plugin.test.ts b/plugins/explore/src/routes.ts similarity index 73% rename from plugins/ecosystem/src/plugin.test.ts rename to plugins/explore/src/routes.ts index dd151f9a0e..1134c61c16 100644 --- a/plugins/ecosystem/src/plugin.test.ts +++ b/plugins/explore/src/routes.ts @@ -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', });