Update plugin generator to generate NP plugins #55281

lizozom · 2020-01-19T16:24:17Z

Summary

Following feedback from #52752

node scripts/generate_plugin.js "Banana plugin"

To generate a plugin, with the following options supported:

Generate FE components
Generate server side endpoint
Generate SCSS
Generate an optional .eslintrc.js file (for 3rd party plugins mostly)
Init git repo (for 3rd party plugins)

#57766 adds also

Support for custom folder (to generate x-pack or example plugins)
Translations

What's generated

The generated plugin has server side and\or client side components.
The client side features a button that, when pressed, uses the core http service to make a request (or if no server side generated, just shows a notification).

The plugin uses the core notifications service to display a notification.

Dev Docs

Add more options for Kibana new platform plugin generator.

Generate FE components
Generate server side endpoint
Generate SCSS
Generate an optional .eslintrc.js file (for 3rd party plugins mostly)
Init git repo (for 3rd party plugins)

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2020-01-19T16:24:20Z

Pinging @elastic/kibana-operations (Team:Operations)

elasticmachine · 2020-01-19T16:24:22Z

Pinging @elastic/kibana-app-arch (Team:AppArch)

lizozom · 2020-01-19T16:27:06Z

@joshdover

What other things should be initialized with a new platform plugin?

ATM it generates the following structure:

plugin

common
-- index.ts
public
-- components
--- app.ts
-- index.ts
-- types.ts
-- plugin.ts
server
-- index.ts
-- types.ts
-- plugin.ts
.eslintrc
kibana.json
README.md

pgayvallet

Thanks a lot for doing this. This is looking great for now.

What other things should be initialized with a new platform plugin?

I'm not sure how far we want to go with the scaffolding, but I would probably add an endpoint in the server side and consume it from the browser side, to generate some boilerplate on how to define routes and performs http calls.

Some NITs and comments:

packages/kbn-plugin-generator/sao_template/template/kibana.json

packages/kbn-plugin-generator/sao_template/template/server/plugin.ts

packages/kbn-plugin-generator/sao_template/template/public/plugin.ts

packages/kbn-plugin-generator/index.js.d.ts

packages/kbn-plugin-generator/sao_template/template/public/components/app.tsx

lizozom · 2020-01-20T16:16:56Z

@pgayvallet I added a server side component to the generator.

I also added top navigation as a non-core dependency.
ATM I can't show the full search bar because I still need an index pattern.
But this is the general direction.

@elastic/kibana-design I would love some input on making the demo plugin's UI better (keeping it simple though!)

ryankeairns · 2020-01-21T13:33:51Z

@lizozom I've added this to our design team's meeting agenda for today. We'll discuss and get back to you!

ryankeairns · 2020-01-21T19:10:58Z

This is a nice onramp, easy to follow, quick to set up. In particular, I like the use of EuiPage components here as a starting point since that is a common pattern.

Keeping it really simple, I think we should make the following minor changes:

Change the title and subtitle text. The "Hello.." intro is fun, but doesn't read well with unpredictable plugin names. We can also combine the subheadings in the content section... we probably shouldn't presume it is somebody "first" plugin.
Add a descriptive paragraph with some recommendations on next steps (a link to docs would be nice, if possible).
Limit the width of the page by adding a prop <EuiPage restrictWidth="1000px">. Looks a little tidier and is the common width we use on other app home pages.
Add a horizontal rule to separate the data fetching section

The end result would like something like this:

Let me know if you have questions or would like to go another route.

joshdover

Can we make sure the structure here follows the "official" conventions? Specifically, the renderApp function should live in <pluginRoot>/public/application.ts instead of <pluginRoot>/public/components/app.ts

…lugin-gen

lizozom · 2020-01-30T12:49:26Z

@streamich the scss is being used https://github.com/elastic/kibana/pull/55281/files#diff-880279824dc8e1e8b83ce12c3cc00bf0R2

The header is being added as well to internal plugins -

The yarn addition is nice, but I don't want to expand the scope of this PR.
Lets add it as we get people start using it.

lukeelmers

Found two other small things; otherwise changes LGTM!

packages/kbn-plugin-generator/sao_template/sao.js

packages/kbn-plugin-generator/sao_template/template/public/components/app.tsx

pgayvallet

Some final comments, LGTM when addressed.

pgayvallet · 2020-01-31T07:37:34Z

packages/kbn-plugin-generator/integration_tests/generate_plugin.test.js

+    it.skip(`'yarn build' should exit 0`, async () => {
      await execa('yarn', ['build'], { cwd: generatedPath });
    });


I see the comment about the i18n test, what about the yarn build and yarn lint. If they are obsolete they should probably be removed instead of skipped?

packages/kbn-plugin-generator/sao_template/sao.js

packages/kbn-plugin-generator/sao_template/template/public/index.ts

packages/kbn-plugin-generator/sao_template/template/server/index.ts

packages/kbn-plugin-generator/sao_template/template/public/types.ts

pgayvallet · 2020-01-31T07:54:28Z

packages/kbn-plugin-generator/sao_template/template/public/plugin.ts

+        // Get start services as specified in kibana.json
+        const [coreStart, depsStart] = await core.getStartServices();
+        // Render the application
+        return renderApp(coreStart, depsStart as AppPluginDependencies, params);


You can avoid the manual casting by specifying the plugin's dependencies:

Plugin<<%= upperCamelCaseName %>PluginSetup, <%= upperCamelCaseName %>PluginStart>

to

Plugin<<%= upperCamelCaseName %>PluginSetup, <%= upperCamelCaseName %>PluginStart>, {}, AppPluginDependencies

Unfortunately, I think you also have to specify the generic on CoreSetup on line 9, because TS does not infer types for function arguments on interface implementations.

Line 9 could be:

public setup(core: CoreSetup<AppPluginDependencies>): <%= upperCamelCaseName %>PluginSetup {

mistic

It LGTM. The question around the translations will be re-added again in a follow up PR according @lizozom

joshdover · 2020-01-31T16:10:24Z

packages/kbn-plugin-generator/sao_template/template/public/plugin.ts

+        // Get start services as specified in kibana.json
+        const [coreStart, depsStart] = await core.getStartServices();
+        // Render the application
+        return renderApp(coreStart, depsStart as AppPluginDependencies, params);


Unfortunately, I think you also have to specify the generic on CoreSetup on line 9, because TS does not infer types for function arguments on interface implementations.

Line 9 could be:

public setup(core: CoreSetup<AppPluginDependencies>): <%= upperCamelCaseName %>PluginSetup {

joshdover · 2020-01-31T16:17:51Z

packages/kbn-plugin-generator/sao_template/template/package_template.json

@@ -1,41 +0,0 @@
-{


Why did we decide to remove this? I think it's still useful for plugins to be able to have their own dependencies and we should set them up to do that. The yarn workspaces config we have should support installing dependencies when running yarn kbn bootstrap for plugins in this directory.

In addition, I think having them use our eslint config by default is a good idea since it helps prevent some common problems. However, they're not currently depending on it, this just relies on the plugin being in a specific directory. I suspect we won't need to require this once #53976 moves further along.

I also expect that they'll need to depend on @kbn/config-schema in order to do anything useful on the server-side.

@joshdover I removed it because I was able to create and run plugins without it. I prefer to have a minimal structure, then re-introduce things based on need.

What do you think?

I believe the primary audience for this package is 3rd parties. With the current system, there's a bit of complexity involved in setting up a package.json file to work with Kibana plugins (eg. the link: dependencies). It seems to me we should help them do this, at least as an option, since I imagine most plugins will want to use some dependencies of their own (though that is an assumption).

We can do this in a separate follow-up PR.

Opened an issue for addressing translations and packages.json

#56652

…lugin-gen

lizozom · 2020-02-02T16:01:43Z

@elasticmachine merge upstream

streamich · 2020-02-03T12:45:50Z

@lizozom the suggestion regarding SASS was to create an index.scss file next to every React component and import it from that React component.

kibanamachine · 2020-02-17T11:11:27Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 8274c78

History

💚 Build #23914 succeeded 8274c78
💚 Build #23907 succeeded 8ad025e
💚 Build #23662 succeeded 0b9ca29
💔 Build #23473 failed a9d471b
💚 Build #23330 succeeded 38aee60

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* Generate NP plugin * Added tsconfig * tsconfig * Adjust sao test * Add server side to plugin gen * Added navigation * add empty element * eslint * platform team CR * design CR improvements * text updates * temp disable plugin gen tests * eslint * Code review fixes * Add scss support - requires elastic#53976 to be merged to work * CR fixes * comment fixes * Don't generate eslint for internal plugins by default * Update tests * reenable jest test for sao * Fix regex * review comments * code review Co-authored-by: Elastic Machine <[email protected]>

* Update plugin generator to generate NP plugins (#55281) * Generate NP plugin * Added tsconfig * tsconfig * Adjust sao test * Add server side to plugin gen * Added navigation * add empty element * eslint * platform team CR * design CR improvements * text updates * temp disable plugin gen tests * eslint * Code review fixes * Add scss support - requires #53976 to be merged to work * CR fixes * comment fixes * Don't generate eslint for internal plugins by default * Update tests * reenable jest test for sao * Fix regex * review comments * code review Co-authored-by: Elastic Machine <[email protected]> * Update plugin creation string Co-authored-by: Elastic Machine <[email protected]>

Generate NP plugin

5eb5357

lizozom added Team:Operations Team label for Operations Team Feature:New Platform release_note:plugin_api_changes Contains a Plugin API changes section for the breaking plugin API changes section. v8.0.0 Team:AppArch labels Jan 19, 2020

lizozom requested a review from a team as a code owner January 19, 2020 16:24

lizozom self-assigned this Jan 19, 2020

lizozom mentioned this pull request Jan 19, 2020

Create NP plugin boilerplate script #52752

Closed

7 tasks

lizozom requested review from joshdover and a team January 19, 2020 16:25

Liza K added 3 commits January 20, 2020 10:58

Added tsconfig

f44b2c3

tsconfig

65e621d

Adjust sao test

b972827

pgayvallet reviewed Jan 20, 2020

View reviewed changes

Add server side to plugin gen

3fa50aa

Liza K added 3 commits January 20, 2020 18:37

Added navigation

fed27b5

add empty element

7dbb585

eslint

3f8520a

lizozom requested a review from pgayvallet January 21, 2020 14:21

lizozom added the review label Jan 21, 2020

joshdover reviewed Jan 21, 2020

View reviewed changes

Liza K added 3 commits January 30, 2020 14:28

comment fixes

5e3f3dc

Merge branch 'master' of github.com:elastic/kibana into newplatform/p…

5a3ceff

…lugin-gen

Don't generate eslint for internal plugins by default

b91ee61

Update tests

09b2375

lizozom requested a review from streamich January 30, 2020 13:40

reenable jest test for sao

2a9e1ff

lukeelmers approved these changes Jan 30, 2020

View reviewed changes

packages/kbn-plugin-generator/sao_template/sao.js Outdated Show resolved Hide resolved

packages/kbn-plugin-generator/sao_template/template/public/components/app.tsx Outdated Show resolved Hide resolved

Fix regex

1952d75

lizozom requested a review from mistic January 30, 2020 22:52

review comments

0b9ca29

pgayvallet approved these changes Jan 31, 2020

View reviewed changes

mistic approved these changes Jan 31, 2020

View reviewed changes

joshdover reviewed Jan 31, 2020

View reviewed changes

Liza K added 2 commits February 2, 2020 09:49

Merge branch 'master' of github.com:elastic/kibana into newplatform/p…

1ff8556

…lugin-gen

code review

8ad025e

Merge branch 'master' into newplatform/plugin-gen

8274c78

This was referenced Feb 3, 2020

Move kuery_autocomplete ⇒ NP #56607

Merged

Plugin generator translations and external deps #56652

Closed

lizozom merged commit 479223b into elastic:master Feb 3, 2020

lizozom mentioned this pull request Feb 16, 2020

Allow custom paths in plugin generator #57766

Merged

7 tasks

lizozom mentioned this pull request Feb 18, 2020

[7.x] Update plugin generator to generate NP plugins (#55281) #57831

Merged

lizozom added the v7.7.0 label Feb 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update plugin generator to generate NP plugins #55281

Update plugin generator to generate NP plugins #55281

lizozom commented Jan 19, 2020 •

edited by jinmu03

Loading

elasticmachine commented Jan 19, 2020

elasticmachine commented Jan 19, 2020

lizozom commented Jan 19, 2020 •

edited

Loading

pgayvallet left a comment

lizozom commented Jan 20, 2020 •

edited

Loading

ryankeairns commented Jan 21, 2020

ryankeairns commented Jan 21, 2020

joshdover left a comment

lizozom commented Jan 30, 2020 •

edited

Loading

lukeelmers left a comment

pgayvallet left a comment

pgayvallet Jan 31, 2020

pgayvallet Jan 31, 2020

joshdover Jan 31, 2020

mistic left a comment

joshdover Jan 31, 2020

joshdover Jan 31, 2020

lizozom Feb 2, 2020

joshdover Feb 3, 2020

joshdover Feb 3, 2020

lizozom Feb 3, 2020

lizozom commented Feb 2, 2020

streamich commented Feb 3, 2020

kibanamachine commented Feb 17, 2020

Update plugin generator to generate NP plugins #55281

Update plugin generator to generate NP plugins #55281

Conversation

lizozom commented Jan 19, 2020 • edited by jinmu03 Loading

Summary

What's generated

Dev Docs

Checklist

For maintainers

elasticmachine commented Jan 19, 2020

elasticmachine commented Jan 19, 2020

lizozom commented Jan 19, 2020 • edited Loading

pgayvallet left a comment

Choose a reason for hiding this comment

lizozom commented Jan 20, 2020 • edited Loading

ryankeairns commented Jan 21, 2020

ryankeairns commented Jan 21, 2020

joshdover left a comment

Choose a reason for hiding this comment

lizozom commented Jan 30, 2020 • edited Loading

lukeelmers left a comment

Choose a reason for hiding this comment

pgayvallet left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mistic left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lizozom commented Feb 2, 2020

streamich commented Feb 3, 2020

kibanamachine commented Feb 17, 2020

💔 Build Failed

History

lizozom commented Jan 19, 2020 •

edited by jinmu03

Loading

lizozom commented Jan 19, 2020 •

edited

Loading

lizozom commented Jan 20, 2020 •

edited

Loading

lizozom commented Jan 30, 2020 •

edited

Loading