+2
-147
@@ -1,148 +1,3 @@
|
||||
# explore
|
||||
# Deprecated
|
||||
|
||||
Welcome to the explore plugin!
|
||||
|
||||
This plugin helps to visualize the top level entities like domains, groups and tools in your ecosystem.
|
||||
|
||||
## Setup
|
||||
|
||||
The following sections will help you get the Explore plugin setup and running.
|
||||
|
||||
### Backend
|
||||
|
||||
You need to setup the
|
||||
[Explore backend plugin](https://github.com/backstage/backstage/tree/master/plugins/explore-backend)
|
||||
before you move forward with any of these steps if you haven't already.
|
||||
|
||||
### Installation
|
||||
|
||||
Install this plugin:
|
||||
|
||||
```bash
|
||||
# From your Backstage root directory
|
||||
yarn --cwd packages/app add @backstage/plugin-explore
|
||||
```
|
||||
|
||||
### Add the plugin to your `packages/app`
|
||||
|
||||
Add the root page that the playlist plugin provides to your app. You can choose
|
||||
any path for the route, but we recommend the following:
|
||||
|
||||
```diff
|
||||
// packages/app/src/App.tsx
|
||||
+ import { ExplorePage } from '@backstage/plugin-explore';
|
||||
|
||||
...
|
||||
|
||||
<FlatRoutes>
|
||||
<Route path="/catalog" element={<CatalogIndexPage />} />
|
||||
<Route path="/catalog/:namespace/:kind/:name" element={<CatalogEntityPage />}>
|
||||
{entityPage}
|
||||
</Route>
|
||||
+ <Route path="/explore" element={<ExplorePage />} />
|
||||
...
|
||||
</FlatRoutes>
|
||||
```
|
||||
|
||||
You may also want to add a link to the playlist page to your application
|
||||
sidebar:
|
||||
|
||||
```diff
|
||||
// packages/app/src/components/Root/Root.tsx
|
||||
+import LayersIcon from '@material-ui/icons/Layers';
|
||||
|
||||
export const Root = ({ children }: PropsWithChildren<{}>) => (
|
||||
<SidebarPage>
|
||||
<Sidebar>
|
||||
+ <SidebarItem icon={LayersIcon} to="explore" text="Explore" />
|
||||
...
|
||||
</Sidebar>
|
||||
```
|
||||
|
||||
### Use search result list item for Explore Tools
|
||||
|
||||
When you have your `packages/app/src/components/search/SearchPage.tsx` file
|
||||
ready to make modifications, add the following code snippet to add the
|
||||
`ToolSearchResultListItem` when the type of the search results are
|
||||
`tool`.
|
||||
|
||||
```diff
|
||||
+import { ToolSearchResultListItem } from '@backstage/plugin-explore';
|
||||
+import BuildIcon from '@material-ui/icons/Build';
|
||||
|
||||
const SearchPage = () => {
|
||||
...
|
||||
<SearchResult>
|
||||
{({ results }) => (
|
||||
<List>
|
||||
{results.map(({ type, document, highlight, rank }) => {
|
||||
switch (type) {
|
||||
...
|
||||
+ case 'tools':
|
||||
+ return (
|
||||
+ <ToolSearchResultListItem
|
||||
+ icon={<BuildIcon />}
|
||||
+ key={document.location}
|
||||
+ result={document}
|
||||
+ highlight={highlight}
|
||||
+ rank={rank}
|
||||
+ />
|
||||
+ );
|
||||
}
|
||||
})}
|
||||
</List>
|
||||
)}
|
||||
...
|
||||
</SearchResult>
|
||||
...
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
Create a custom explore page in
|
||||
`packages/app/src/components/explore/ExplorePage.tsx`.
|
||||
|
||||
```tsx
|
||||
import {
|
||||
CatalogKindExploreContent,
|
||||
ExploreLayout,
|
||||
} from '@backstage/plugin-explore';
|
||||
import React from 'react';
|
||||
import { InnerSourceExploreContent } from './InnerSourceExploreContent';
|
||||
|
||||
export const ExplorePage = () => {
|
||||
return (
|
||||
<ExploreLayout
|
||||
title="Explore the ACME corp ecosystem"
|
||||
subtitle="Browse our ecosystem"
|
||||
>
|
||||
<ExploreLayout.Route path="domains" title="Domains">
|
||||
<CatalogKindExploreContent kind="domain" />
|
||||
</ExploreLayout.Route>
|
||||
<ExploreLayout.Route path="systems" title="Systems">
|
||||
<CatalogKindExploreContent kind="system" />
|
||||
</ExploreLayout.Route>
|
||||
<ExploreLayout.Route path="inner-source" title="InnerSource">
|
||||
<InnerSourceExploreContent />
|
||||
</ExploreLayout.Route>
|
||||
</ExploreLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export const explorePage = <ExplorePage />;
|
||||
```
|
||||
|
||||
Now register the new explore page in `packages/app/src/App.tsx`.
|
||||
|
||||
```diff
|
||||
+import { explorePage } from './components/explore/ExplorePage';
|
||||
|
||||
const routes = (
|
||||
<FlatRoutes>
|
||||
- <Route path="/explore" element={<ExplorePage />} />
|
||||
+ <Route path="/explore" element={<ExplorePage />}>
|
||||
+ {explorePage}
|
||||
+ </Route>
|
||||
</FlatRoutes>
|
||||
);
|
||||
```
|
||||
This package has been moved to the [backstage-community/plugins](https://github.com/backstage/community-plugins) repository. Migrate to using `@backstage-community/plugin-explore` instead.
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
"version": "0.4.20",
|
||||
"description": "A Backstage plugin for building an exploration page of your software ecosystem",
|
||||
"backstage": {
|
||||
"role": "frontend-plugin"
|
||||
"role": "frontend-plugin",
|
||||
"moved": "@backstage-community/plugin-explore"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@@ -81,5 +82,6 @@
|
||||
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
|
||||
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
|
||||
}
|
||||
},
|
||||
"deprecated": "This package has been moved to the backstage/community-plugins repository. You should migrate to using @backstage-community/plugin-explore instead."
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user