From a00c393b38bcb794c241a98072fc850374c2ca5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20=C3=85lund?= Date: Thu, 26 Nov 2020 14:20:47 +0100 Subject: [PATCH 1/8] Add API docs plugin to new apps --- .../configure-app-with-plugins.md | 61 ++++++++++++++++++- .../default-app/packages/app/package.json.hbs | 1 - .../default-app/packages/app/src/plugins.ts | 1 - .../default-app/packages/app/src/sidebar.tsx | 2 + 4 files changed, 62 insertions(+), 3 deletions(-) diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md index 1d02f147c1..8b071fb646 100644 --- a/docs/getting-started/configure-app-with-plugins.md +++ b/docs/getting-started/configure-app-with-plugins.md @@ -6,7 +6,66 @@ description: Documentation on How Configuring App with plugins ## Adding existing plugins to your app -Coming soon! +The following steps assumes you have created a new Backstage app and want to add +an existing plugin to it. We are using the +[CircleCI](https://github.com/backstage/backstage/blob/master/plugins/circleci/README.md) +in this example. + +0. Add to the repo: + +```bash +yarn add @backstage/plugin-circleci +``` + +1. Add plugin API to your Backstage instance: + +```js +// packages/app/src/api.ts +import { ApiHolder } from '@backstage/core'; +import { CircleCIApi, circleCIApiRef } from '@backstage/plugin-circleci'; + +const builder = ApiRegistry.builder(); +builder.add(circleCIApiRef, new CircleCIApi(/* optional custom url for your own CircleCI instance */)); + +export default builder.build() as ApiHolder; +``` + +2. Add plugin itself: + +```js +// packages/app/src/plugins.ts +export { plugin as Circleci } from '@backstage/plugin-circleci'; +``` + +3. Register the plugin router: + +```jsx +// packages/app/src/components/catalog/EntityPage.tsx + +import { Router as CircleCIRouter } from '@backstage/plugin-circleci'; + +// Then somewhere inside +} +/>; +``` + +Note that stand-alone plugins that are not "attached" to the Software Catalog +would be added outside the `EntityPage`. + +4. [Optional] Add proxy config: + +```yaml +// app-config.yaml +proxy: + '/circleci/api': + target: https://circleci.com/api/v1.1 + headers: + Circle-Token: + $env: CIRCLECI_AUTH_TOKEN +``` ### Adding a plugin page to the Sidebar diff --git a/packages/create-app/templates/default-app/packages/app/package.json.hbs b/packages/create-app/templates/default-app/packages/app/package.json.hbs index fd0d5cbf36..3f04773e31 100644 --- a/packages/create-app/templates/default-app/packages/app/package.json.hbs +++ b/packages/create-app/templates/default-app/packages/app/package.json.hbs @@ -15,7 +15,6 @@ "@backstage/plugin-techdocs": "^{{version '@backstage/plugin-techdocs'}}", "@backstage/catalog-model": "^{{version '@backstage/catalog-model'}}", "@backstage/plugin-circleci": "^{{version '@backstage/plugin-circleci'}}", - "@backstage/plugin-explore": "^{{version '@backstage/plugin-explore'}}", "@backstage/plugin-lighthouse": "^{{version '@backstage/plugin-lighthouse'}}", "@backstage/plugin-tech-radar": "^{{version '@backstage/plugin-tech-radar'}}", "@backstage/plugin-github-actions": "^{{version '@backstage/plugin-github-actions'}}", diff --git a/packages/create-app/templates/default-app/packages/app/src/plugins.ts b/packages/create-app/templates/default-app/packages/app/src/plugins.ts index b719594a0b..9eabff0044 100644 --- a/packages/create-app/templates/default-app/packages/app/src/plugins.ts +++ b/packages/create-app/templates/default-app/packages/app/src/plugins.ts @@ -3,7 +3,6 @@ export { plugin as CatalogPlugin } from '@backstage/plugin-catalog'; export { plugin as RegisterComponent } from '@backstage/plugin-register-component'; export { plugin as ScaffolderPlugin } from '@backstage/plugin-scaffolder'; export { plugin as TechDocsPlugin } from '@backstage/plugin-techdocs'; -export { plugin as Explore } from '@backstage/plugin-explore'; export { plugin as Circleci } from '@backstage/plugin-circleci'; export { plugin as LighthousePlugin } from '@backstage/plugin-lighthouse'; export { plugin as TechRadar } from '@backstage/plugin-tech-radar'; diff --git a/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx b/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx index 901347645e..b5425b66b6 100644 --- a/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx @@ -1,6 +1,7 @@ import React, { FC, useContext } from 'react'; import HomeIcon from '@material-ui/icons/Home'; import LibraryBooks from '@material-ui/icons/LibraryBooks'; +import ExtensionIcon from '@material-ui/icons/Extension'; import CreateComponentIcon from '@material-ui/icons/AddCircleOutline'; import BuildIcon from '@material-ui/icons/BuildRounded'; import RuleIcon from '@material-ui/icons/AssignmentTurnedIn'; @@ -26,6 +27,7 @@ export const AppSidebar = () => ( {/* Global nav, not org-specific */} + From 05b54d8b17c9618abe244a3487ba43638dfc1307 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20=C3=85lund?= Date: Thu, 26 Nov 2020 20:26:53 +0100 Subject: [PATCH 2/8] Update docs/getting-started/configure-app-with-plugins.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fredrik Adelöw --- docs/getting-started/configure-app-with-plugins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md index 8b071fb646..44f0abe6a0 100644 --- a/docs/getting-started/configure-app-with-plugins.md +++ b/docs/getting-started/configure-app-with-plugins.md @@ -6,7 +6,7 @@ description: Documentation on How Configuring App with plugins ## Adding existing plugins to your app -The following steps assumes you have created a new Backstage app and want to add +The following steps assume that you have created a new Backstage app and want to add an existing plugin to it. We are using the [CircleCI](https://github.com/backstage/backstage/blob/master/plugins/circleci/README.md) in this example. From 276a9e5919ddb74f9c0a34af4cdb823222969636 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20=C3=85lund?= Date: Thu, 26 Nov 2020 20:27:02 +0100 Subject: [PATCH 3/8] Update docs/getting-started/configure-app-with-plugins.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fredrik Adelöw --- docs/getting-started/configure-app-with-plugins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md index 44f0abe6a0..b32a08b273 100644 --- a/docs/getting-started/configure-app-with-plugins.md +++ b/docs/getting-started/configure-app-with-plugins.md @@ -17,7 +17,7 @@ in this example. yarn add @backstage/plugin-circleci ``` -1. Add plugin API to your Backstage instance: +1. Add the plugin API to your Backstage instance: ```js // packages/app/src/api.ts From 63998e65b1c7d5b7e6086c813e408eb5b0374739 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20=C3=85lund?= Date: Thu, 26 Nov 2020 20:27:10 +0100 Subject: [PATCH 4/8] Update docs/getting-started/configure-app-with-plugins.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fredrik Adelöw --- docs/getting-started/configure-app-with-plugins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md index b32a08b273..aa2bc7ef4d 100644 --- a/docs/getting-started/configure-app-with-plugins.md +++ b/docs/getting-started/configure-app-with-plugins.md @@ -30,7 +30,7 @@ builder.add(circleCIApiRef, new CircleCIApi(/* optional custom url for your own export default builder.build() as ApiHolder; ``` -2. Add plugin itself: +2. Add the plugin itself: ```js // packages/app/src/plugins.ts From 0ebfc75b4157129dd96401d55e7db9056a7e3132 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20=C3=85lund?= Date: Thu, 26 Nov 2020 20:50:32 +0100 Subject: [PATCH 5/8] Fix docs --- .../configure-app-with-plugins.md | 21 ++++--------------- plugins/circleci/README.md | 15 +------------ 2 files changed, 5 insertions(+), 31 deletions(-) diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md index aa2bc7ef4d..042d8964ca 100644 --- a/docs/getting-started/configure-app-with-plugins.md +++ b/docs/getting-started/configure-app-with-plugins.md @@ -6,30 +6,17 @@ description: Documentation on How Configuring App with plugins ## Adding existing plugins to your app -The following steps assume that you have created a new Backstage app and want to add -an existing plugin to it. We are using the +The following steps assume that you have created a new Backstage app and want to +add an existing plugin to it. We are using the [CircleCI](https://github.com/backstage/backstage/blob/master/plugins/circleci/README.md) -in this example. +plugin in this example. -0. Add to the repo: +1. Add the plugin's NPM package to the repo: ```bash yarn add @backstage/plugin-circleci ``` -1. Add the plugin API to your Backstage instance: - -```js -// packages/app/src/api.ts -import { ApiHolder } from '@backstage/core'; -import { CircleCIApi, circleCIApiRef } from '@backstage/plugin-circleci'; - -const builder = ApiRegistry.builder(); -builder.add(circleCIApiRef, new CircleCIApi(/* optional custom url for your own CircleCI instance */)); - -export default builder.build() as ApiHolder; -``` - 2. Add the plugin itself: ```js diff --git a/plugins/circleci/README.md b/plugins/circleci/README.md index 4802e8bee2..35fed49827 100644 --- a/plugins/circleci/README.md +++ b/plugins/circleci/README.md @@ -7,25 +7,12 @@ Website: [https://circleci.com/](https://circleci.com/) ## Setup -0. If you have standalone app (you didn't clone this repo), then do +1. If you have standalone app (you didn't clone this repo), then do ```bash yarn add @backstage/plugin-circleci ``` -1. Add plugin API to your Backstage instance: - -```js -// packages/app/src/api.ts -import { ApiHolder } from '@backstage/core'; -import { CircleCIApi, circleCIApiRef } from '@backstage/plugin-circleci'; - -const builder = ApiRegistry.builder(); -builder.add(circleCIApiRef, new CircleCIApi(/* optional custom url for your own CircleCI instance */)); - -export default builder.build() as ApiHolder; -``` - 2. Add plugin itself: ```js From ea475893d72ca0ac30e7d87f371aa7817cf98592 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20=C3=85lund?= Date: Thu, 26 Nov 2020 20:53:22 +0100 Subject: [PATCH 6/8] Create slow-insects-fail.md --- .changeset/slow-insects-fail.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/slow-insects-fail.md diff --git a/.changeset/slow-insects-fail.md b/.changeset/slow-insects-fail.md new file mode 100644 index 0000000000..214092d5ad --- /dev/null +++ b/.changeset/slow-insects-fail.md @@ -0,0 +1,6 @@ +--- +"example-app": patch +"@backstage/create-app": patch +--- + +Add API docs plugin to new apps being created through the CLI. From 5490e16b59db9d6bb7641d07ac5c87cf48a530c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20=C3=85lund?= Date: Thu, 26 Nov 2020 20:58:28 +0100 Subject: [PATCH 7/8] Fix changeset --- .changeset/slow-insects-fail.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/slow-insects-fail.md b/.changeset/slow-insects-fail.md index 214092d5ad..1e7b3f4087 100644 --- a/.changeset/slow-insects-fail.md +++ b/.changeset/slow-insects-fail.md @@ -1,6 +1,6 @@ --- -"example-app": patch -"@backstage/create-app": patch +'example-app': patch +'@backstage/create-app': patch --- -Add API docs plugin to new apps being created through the CLI. +Add [API docs plugin](https://github.com/backstage/backstage/tree/master/plugins/api-docs) to new apps being created through the CLI. From 7c3e07a9986e015484be128e201676f0d4e7e7f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20=C3=85lund?= Date: Fri, 27 Nov 2020 10:58:24 +0100 Subject: [PATCH 8/8] Fix changeset --- .changeset/slow-insects-fail.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.changeset/slow-insects-fail.md b/.changeset/slow-insects-fail.md index 1e7b3f4087..a07e025f34 100644 --- a/.changeset/slow-insects-fail.md +++ b/.changeset/slow-insects-fail.md @@ -1,5 +1,4 @@ --- -'example-app': patch '@backstage/create-app': patch ---