From 3461527969929e1a5f2b783b906d6900ac70a75e Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Mon, 3 Feb 2020 14:57:23 +0100 Subject: [PATCH 1/8] Add plugin cookiecutter --- .../packages/plugins/_template/cookiecutter.json | 3 +++ .../plugins/_template/hooks/pre_gen_project.py | 14 ++++++++++++++ .../{{ cookiecutter.plugin_name }}/README.md | 1 + .../jest.config.js | 0 .../jest.setup.ts | 0 .../package.json | 0 .../src/index.ts | 0 .../src/plugin.test.ts | 0 .../src/plugin.ts | 0 tools/cookiecutter/Dockerfile | 5 +++++ 10 files changed, 23 insertions(+) create mode 100644 frontend/packages/plugins/_template/cookiecutter.json create mode 100644 frontend/packages/plugins/_template/hooks/pre_gen_project.py create mode 100644 frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/README.md rename frontend/packages/plugins/_template/{ => {{ cookiecutter.plugin_name }}}/jest.config.js (100%) rename frontend/packages/plugins/_template/{ => {{ cookiecutter.plugin_name }}}/jest.setup.ts (100%) rename frontend/packages/plugins/_template/{ => {{ cookiecutter.plugin_name }}}/package.json (100%) rename frontend/packages/plugins/_template/{ => {{ cookiecutter.plugin_name }}}/src/index.ts (100%) rename frontend/packages/plugins/_template/{ => {{ cookiecutter.plugin_name }}}/src/plugin.test.ts (100%) rename frontend/packages/plugins/_template/{ => {{ cookiecutter.plugin_name }}}/src/plugin.ts (100%) create mode 100644 tools/cookiecutter/Dockerfile diff --git a/frontend/packages/plugins/_template/cookiecutter.json b/frontend/packages/plugins/_template/cookiecutter.json new file mode 100644 index 0000000000..01c5830400 --- /dev/null +++ b/frontend/packages/plugins/_template/cookiecutter.json @@ -0,0 +1,3 @@ +{ + "plugin_name": "Complexity" +} diff --git a/frontend/packages/plugins/_template/hooks/pre_gen_project.py b/frontend/packages/plugins/_template/hooks/pre_gen_project.py new file mode 100644 index 0000000000..04f63eb219 --- /dev/null +++ b/frontend/packages/plugins/_template/hooks/pre_gen_project.py @@ -0,0 +1,14 @@ +import re +import sys + + +def validate(name, regex, error_message): + if not re.match(regex, name): + print(error_message % name) + + # exits with status 1 to indicate failure + sys.exit(1) + + +validate('{{ cookiecutter.plugin_name }}', + r'^[a-z-]+$', 'ERROR: %s is not a valid plugin name! Only lowercase letters and hyphens are valid (Examples: my-amazing-plugin, myamazingplugin).') diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/README.md b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/README.md new file mode 100644 index 0000000000..9e15988df6 --- /dev/null +++ b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/README.md @@ -0,0 +1 @@ +{{cookiecutter.plugin_name}} diff --git a/frontend/packages/plugins/_template/jest.config.js b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/jest.config.js similarity index 100% rename from frontend/packages/plugins/_template/jest.config.js rename to frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/jest.config.js diff --git a/frontend/packages/plugins/_template/jest.setup.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/jest.setup.ts similarity index 100% rename from frontend/packages/plugins/_template/jest.setup.ts rename to frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/jest.setup.ts diff --git a/frontend/packages/plugins/_template/package.json b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json similarity index 100% rename from frontend/packages/plugins/_template/package.json rename to frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json diff --git a/frontend/packages/plugins/_template/src/index.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/index.ts similarity index 100% rename from frontend/packages/plugins/_template/src/index.ts rename to frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/index.ts diff --git a/frontend/packages/plugins/_template/src/plugin.test.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.test.ts similarity index 100% rename from frontend/packages/plugins/_template/src/plugin.test.ts rename to frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.test.ts diff --git a/frontend/packages/plugins/_template/src/plugin.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.ts similarity index 100% rename from frontend/packages/plugins/_template/src/plugin.ts rename to frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.ts diff --git a/tools/cookiecutter/Dockerfile b/tools/cookiecutter/Dockerfile new file mode 100644 index 0000000000..f9a1629247 --- /dev/null +++ b/tools/cookiecutter/Dockerfile @@ -0,0 +1,5 @@ +FROM python:3.8-slim + +RUN pip install cookiecutter==1.7.0 --index-url https://pypi.python.org/simple + +ENTRYPOINT [ "cookiecutter" ] \ No newline at end of file From 537bd6dbd97512926a112cd7ce5b758af1f76fe5 Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Mon, 3 Feb 2020 15:02:48 +0100 Subject: [PATCH 2/8] Use cookiecutter variables in template + add component --- .../{{ cookiecutter.plugin_name }}/README.md | 2 +- .../ExampleComponent/ExampleComponent.test.tsx | 10 ++++++++++ .../ExampleComponent/ExampleComponent.tsx | 16 ++++++++++++++++ .../components/ExampleComponent/index.ts | 1 + .../{{ cookiecutter.plugin_name }}/package.json | 2 +- .../src/plugin.test.ts | 4 ++-- .../{{ cookiecutter.plugin_name }}/src/plugin.ts | 2 +- 7 files changed, 32 insertions(+), 5 deletions(-) create mode 100644 frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.test.tsx create mode 100644 frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.tsx create mode 100644 frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/index.ts diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/README.md b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/README.md index 9e15988df6..86e39457da 100644 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/README.md +++ b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/README.md @@ -1 +1 @@ -{{cookiecutter.plugin_name}} +Welcome to your {{cookiecutter.plugin_name}} plugin! diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.test.tsx b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.test.tsx new file mode 100644 index 0000000000..c231eea700 --- /dev/null +++ b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.test.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import ExampleComponent from './ExampleComponent'; + +describe('ExampleComponent', () => { + it('should render', () => { + const rendered = render(); + expect(rendered.getByText('Hello!')).toBeInTheDocument(); + }); +}); diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.tsx b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.tsx new file mode 100644 index 0000000000..bd7c9235ae --- /dev/null +++ b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.tsx @@ -0,0 +1,16 @@ +import React, { FC } from 'react'; +import Button from '@material-ui/core/Button'; + +const ExampleComponent: FC<{}> = () => { + return ( + + ); +}; + +export default ExampleComponent; diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/index.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/index.ts new file mode 100644 index 0000000000..520a3bf553 --- /dev/null +++ b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/index.ts @@ -0,0 +1 @@ +export { default } from './ExampleComponent'; diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json index 1039d0a49b..54d37219c0 100644 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json +++ b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json @@ -1,5 +1,5 @@ { - "name": "@backstage/__CHANGE_ME__", + "name": "@backstage/{{ cookiecutter.plugin_name }}", "version": "0.0.0", "main": "src/index.ts", "main:src": "src/index.ts", diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.test.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.test.ts index eda9eeb72a..869fa6f67f 100644 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.test.ts +++ b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.test.ts @@ -1,7 +1,7 @@ import plugin from './plugin'; -describe('plugin-1', () => { +describe('{{ cookiecutter.plugin_name }}', () => { it('should export plugin', () => { - expect(plugin.id).toBe('change-me-id'); + expect(plugin.id).toBe('{{ cookiecutter.plugin_name }}'); }); }); diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.ts index a20c7ccd89..0424b5d999 100644 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.ts +++ b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.ts @@ -1,5 +1,5 @@ import { createPlugin } from '@backstage/core'; export default createPlugin({ - id: 'change-me-id', + id: '{{ cookiecutter.plugin_name }}', }); From 7d9160db50e00de44febc272fd37f0840921eb62 Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Mon, 3 Feb 2020 15:05:08 +0100 Subject: [PATCH 3/8] Update cookiecutter default value --- frontend/packages/plugins/_template/cookiecutter.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/plugins/_template/cookiecutter.json b/frontend/packages/plugins/_template/cookiecutter.json index 01c5830400..2cc21e895e 100644 --- a/frontend/packages/plugins/_template/cookiecutter.json +++ b/frontend/packages/plugins/_template/cookiecutter.json @@ -1,3 +1,3 @@ { - "plugin_name": "Complexity" + "plugin_name": "example-plugin" } From 7936a0643d5785fd0001d6f2d2ac940112576c72 Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Mon, 3 Feb 2020 15:17:28 +0100 Subject: [PATCH 4/8] Add docs and enable cookiecutter to support other templates --- README.md | 10 ++++++++++ tools/cookiecutter/Dockerfile | 2 -- tools/cookiecutter/init.sh | 10 ++++++++++ 3 files changed, 20 insertions(+), 2 deletions(-) create mode 100755 tools/cookiecutter/init.sh diff --git a/README.md b/README.md index 384cb54b65..ef5b88b0d6 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,16 @@ Backstage is an open platform for building developer portals. ## Getting started +## Plugins + +### Creating a Plugin + +Run the following: + +```terminal +$ ./tools/cookiecutter/init.sh frontend/packages/plugins/_template --output-dir frontend/packages/plugins +``` + ## Documentation ## License diff --git a/tools/cookiecutter/Dockerfile b/tools/cookiecutter/Dockerfile index f9a1629247..9affb40d0f 100644 --- a/tools/cookiecutter/Dockerfile +++ b/tools/cookiecutter/Dockerfile @@ -1,5 +1,3 @@ FROM python:3.8-slim - RUN pip install cookiecutter==1.7.0 --index-url https://pypi.python.org/simple - ENTRYPOINT [ "cookiecutter" ] \ No newline at end of file diff --git a/tools/cookiecutter/init.sh b/tools/cookiecutter/init.sh new file mode 100755 index 0000000000..717ab50cd3 --- /dev/null +++ b/tools/cookiecutter/init.sh @@ -0,0 +1,10 @@ +#!/usr/bin/env bash + +set -e + +# Build the container +docker build $(pwd)/tools/cookiecutter -t backstage/tools/cookiecutter --quiet + +# Run cookiecutter with our arguments +COOKIECUTTER_FLAGS=${@:-""} +docker run -it -v $(pwd):/app -w /app backstage/tools/cookiecutter $COOKIECUTTER_FLAGS From 901fd56cdcaae66a12dbd3e13bfcc0bcc45db7a3 Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Mon, 3 Feb 2020 15:23:44 +0100 Subject: [PATCH 5/8] Add plugin prefix to plugin template --- .../_template/{{ cookiecutter.plugin_name }}/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json index 54d37219c0..85f56f7fa0 100644 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json +++ b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json @@ -1,5 +1,5 @@ { - "name": "@backstage/{{ cookiecutter.plugin_name }}", + "name": "@backstage/plugin-{{ cookiecutter.plugin_name }}", "version": "0.0.0", "main": "src/index.ts", "main:src": "src/index.ts", From 419c95764a576b9ffad3cbe96865358e1e54ca54 Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Mon, 3 Feb 2020 15:25:54 +0100 Subject: [PATCH 6/8] Export component in plugin root --- .../_template/{{ cookiecutter.plugin_name }}/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/index.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/index.ts index b68aea57f9..a2e45f3a79 100644 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/index.ts +++ b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/index.ts @@ -1 +1,2 @@ export { default } from './plugin'; +export { default as ExampleComponent } from './components/ExampleComponent'; From 60d6c38105c68660a9bf25b4f29a92769440ce62 Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Mon, 3 Feb 2020 15:35:55 +0100 Subject: [PATCH 7/8] Fix issue with components structure --- .../components/ExampleComponent/ExampleComponent.test.tsx | 0 .../{ => src}/components/ExampleComponent/ExampleComponent.tsx | 0 .../{ => src}/components/ExampleComponent/index.ts | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/{ => src}/components/ExampleComponent/ExampleComponent.test.tsx (100%) rename frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/{ => src}/components/ExampleComponent/ExampleComponent.tsx (100%) rename frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/{ => src}/components/ExampleComponent/index.ts (100%) diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.test.tsx b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/ExampleComponent.test.tsx similarity index 100% rename from frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.test.tsx rename to frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/ExampleComponent.test.tsx diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.tsx b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/ExampleComponent.tsx similarity index 100% rename from frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.tsx rename to frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/ExampleComponent.tsx diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/index.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/index.ts similarity index 100% rename from frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/index.ts rename to frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/index.ts From c9c3df2363b5757c7209dc9057558dcf637dcaad Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Mon, 3 Feb 2020 16:01:08 +0100 Subject: [PATCH 8/8] Update docs to explain how to import plugin --- README.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ef5b88b0d6..5c357471bf 100644 --- a/README.md +++ b/README.md @@ -14,10 +14,27 @@ Backstage is an open platform for building developer portals. Run the following: -```terminal +```bash $ ./tools/cookiecutter/init.sh frontend/packages/plugins/_template --output-dir frontend/packages/plugins ``` +This will generate a plugin in the `frontend/packages/plugins` folder. It is important to note you will still need to include the plugin in your `frontend/packages/app` in the `package.json`. You will then be able to import it as follows: + +```bash +$ ./tools/cookiecutter/init.sh frontend/packages/plugins/_template --output-dir frontend/packages/plugins +plugin_name [example-plugin]: github-api + +$ vim frontend/packages/app/package.json +# Add the following line to your package.json +# Note all plugins are prefixed with "plugin-" by default with a version number of "0.0.0" +# "@backstage/plugin-github-api": "0.0.0", + +$ vim frontend/packages/app/src/App.tsx +# Add the following line to import your generated component +# import { ExampleComponent } from '@backstage/plugin-github-api'; +# +``` + ## Documentation ## License