[Canvas] Storybook Redux Addon

[clintandrewhall]

Summary

This PR is something I've been excited about for weeks, and now that its dependencies are committed, I can finally create it: a Redux store and inspector for Canvas Storybook!

I'll be meeting with @streamich and others on Monday to discuss how to enable these changes in kbn-storybook so we can effectively migrate ASAP.

What is this?

This addon provides a decorator that will surround a component with a custom Redux provider, one that logs the store changes to an Addon Panel in Storybook. This means:

1. We can create stories that test Redux components.
2. Dependency components will work out of the box.
3. We can create custom stores for each test.
4. We can directly inspect the effect of a component action in the addon panel.

How do I use it?

In your story definition:

import { reduxDecorator, getAddonPanelParameters } from '../../../../storybook';

storiesOf('my/redux/component', module)
  .addDecorator(reduxDecorator())            // Adds the redux store
  .addParameters(getAddonPanelParameters())  // Optional: sets Storybook to open 
                                             // the addon by default

The reduxDecorator can (currently) accept three state settings:

1. workpad: an entire workpad
2. elements: custom elements for the workpad
3. assets: compatible assets

Feel free to contribute more as necessary...!

Addon Development

Want to work on or improve the addon? Add the --addon flag to the script to launch the addon in watch mode. Refreshing the page should enable any changes:

canvas: node scripts/storybook --addon

What's in the PR?

1. Upgrades to Storybook dependencies (v5.3.19)
2. Upgrades and refactors to our Storybook config to be cleaner and clearer.
3. The new addon :-)
4. Updates to the Asset/AssetManager test cases.

What did I need to ship in order to ship this?

This takes advantage of a number of changes from my Time to Present PoC. It also needed to use the improvements @crob611 and I made to how we use Kibana Services-- we can now stub out and run Canvas without any Kibana Services present.

• [pre-req] Move .storybook to storybook; standardize files #72384
• [pre-req] New Component Layout proposal #72385
• [Canvas] Provide service stubs #72708
  ...and more.

[elasticmachine]

Pinging @elastic/kibana-canvas (Team:Canvas)

[clintandrewhall]

@elasticmachine merge upstream

[spalger]

The move to decorators for storybooks LGTM. I'm struggling to compare the rewritten webpack config but I'm assuming that what you have works which means it's not a problem. That said, I do recommend updating it to use webpack-merge vs a bunch of single-word variables.

[clintandrewhall]

@spalger I'll use webpack-merge... I'm building a set of improvements to kbn-storybook and want it to be flexible.

[clintandrewhall]

@elasticmachine merge upstream

[elasticmachine]

merge conflict between base and head

[clintandrewhall]

@elasticmachine merge upstream

[poffdeluxe]

This is awesome!

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 47995fd

Build metrics

async chunks size

id	value	diff	baseline
canvas	1.4MB	-11.0B	1.4MB

page load bundle size

id	value	diff	baseline
canvas	1.4MB	+89.0B	1.4MB

History

• 💚 Build #65712 succeeded f7734fe
• 💔 Build #65622 failed bc0cee4
• 💔 Build #65577 failed 99309db
• 💚 Build #64974 succeeded d123758
• 💚 Build #64936 succeeded b9ff218

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