diff --git a/docs/plugins/composability.md b/docs/plugins/composability.md index 124a612f26..b18bae31c6 100644 --- a/docs/plugins/composability.md +++ b/docs/plugins/composability.md @@ -196,14 +196,14 @@ const App = () => ( There are a couple of naming patterns to adhere to as you build plugins, which helps clarify the intent and usage of the exports. -| Description | Pattern | Examples | -| --------------------- | ----------------- | ---------------------------------------------------- | -| Top-level Pages | `\*Page` | `CatalogIndexPage`, `SettingsPage`, `LighthousePage` | -| Entity Tab Content | `Entity\*Content` | `EntityJenkinsContent`, `EntityKubernetesContent` | -| Entity Overview Card | `Entity\*Card` | `EntitySentryCard`, `EntityPagerDutyCard` | -| Entity Conditional | `is\*Available` | `isPagerDutyAvailable`, `isJenkinsAvailable` | -| Plugin Instance | `\*Plugin` | `jenkinsPlugin`, `catalogPlugin` | -| Utility API Reference | `\*ApiRef` | `configApiRef`, `catalogApiRef` | +| Description | Pattern | Examples | +| --------------------- | ---------------- | ---------------------------------------------------- | +| Top-level Pages | `*Page` | `CatalogIndexPage`, `SettingsPage`, `LighthousePage` | +| Entity Tab Content | `Entity*Content` | `EntityJenkinsContent`, `EntityKubernetesContent` | +| Entity Overview Card | `Entity*Card` | `EntitySentryCard`, `EntityPagerDutyCard` | +| Entity Conditional | `is*Available` | `isPagerDutyAvailable`, `isJenkinsAvailable` | +| Plugin Instance | `*Plugin` | `jenkinsPlugin`, `catalogPlugin` | +| Utility API Reference | `*ApiRef` | `configApiRef`, `catalogApiRef` | ### Routing System diff --git a/docs/plugins/structure-of-a-plugin.md b/docs/plugins/structure-of-a-plugin.md index 8bf21bf589..8878e1c04d 100644 --- a/docs/plugins/structure-of-a-plugin.md +++ b/docs/plugins/structure-of-a-plugin.md @@ -13,7 +13,8 @@ The new plugin should look something like: ``` new-plugin/ - dist/ + dev/ + index.ts node_modules/ src/ components/ @@ -29,11 +30,10 @@ new-plugin/ plugin.test.ts plugin.ts routes.ts - jest.config.js - jest.setup.ts + setupTests.ts + .eslintrc.js package.json README.md - tsconfig.json ``` You might note a thing or two. Yes, a plugin looks like a mini project on it's @@ -48,8 +48,7 @@ folder. ## Base files -In the root folder you have some configuration for typescript and jest, the test -runner. You get a readme to populate with info about your plugin and a +You get a readme to populate with info about your plugin and a package.json to declare the plugin dependencies, metadata and scripts. ## The plugin file @@ -92,7 +91,7 @@ The generated plugin includes two example components to showcase how we structure our plugins. There are usually one or multiple page components and next to them you can split up the UI in as many components as you feel like. -We have the `ExamplePage` to show an example Backstage page component. The +We have the `ExampleComponent` to show an example Backstage page component. The `ExampleFetchComponent` showcases the common task of making an async request to a public API and plot the response data in a table using Material-UI components.