[Canvas][PoC] Add Redux Inspector to Storybook; standardize names and convert a few stories

[clintandrewhall]

This branch may need to be split up...?

Summary

This PR is a proof-of-concept that would allow components to be connected to a mock workpad store.

There are a lot of parts to this PR:

Moving Storybook from .storybook to storybook

There are a lot of gotchas around typing and using eslint in a directory that begins in a .. It's been a constant pain, so I renamed the directory.

Custom Storybook Addon for Redux Actions

I wrote a custom addon for Storybook that not only provides a store to any redux component, but also patches the dispatch function to output the result of the action.

As a result, we can test our components as if they were in Canvas, and also see the results of any action.

Caveat: some of our reducers use Kibana or other services, and these blow up eventually. This is being mitigated by a project @crob611 is working on.

Applying a new component file structure for Redux components

I'm proposing a new structure for our components that is demonstrated here with asset, asset_manager and workpad_config:

- components
  - foo                       <- directory
    - index.ts                <- thin exporting index, (no redux)
    - foo.ts                  <- redux container
    - foo.component.tsx       <- react component
  - bar
    - index.ts
    - bar.ts
    - bar.component.tsx
    - bar_dep.ts              <- redux sub container
    - bar_dep.component.tsx   <- sub component

The exporting file would be:

export { Foo } from './foo';
export { Foo as FooComponent } from './foo.component';

Gotchas

• Some of our reducers rely on Kibana services to function. They blow up eventually, but still work.
• I'm concerned about storyshots choking under the weight of larger components, so I'm excluding stories named 'redux' from that test.
• This is beyond what kbn-storybook provides, and would require us to stay with our config, rather than migrate.

[elasticmachine]

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

[poffdeluxe]

This is pretty rad overall!

Are there ways for us to manipulate the redux state from the test file? The ability to modify the state directly from the storybook page is pretty cool

I think I'm a little hesitant to go this direction though if it means we have to continue to maintain two separate storybook test groups (ours and the kbn-storybook stuff). Are any other teams running into these types of redux issues with their storybook tests? Is this something we could get buy-in to pull into kbn-storybook?

[clintandrewhall]

@elasticmachine merge upstream

[clintandrewhall]

@streamich Could you please help me get these changes/abilities integrated into kbn-storybook so we can migrate Canvas?

[clintandrewhall]

@elasticmachine merge upstream

[crob611]

Looks good. Left a few comments that might be for discussion outside this PR

[crob611]

Does this store used by Storybook even need all of the reducers and middleware, etc? Or should it just be used to provide state to components that need it?

[crob611]

I prefer FunctionComponent vs FC but I ain't going to fight about it or anything. But, we should reach an agreement on one and stick to that. Maybe add a lint rule to force us to one or the other.

[clintandrewhall]

@elasticmachine merge upstream

[clintandrewhall]

@elasticmachine merge upstream

[elasticmachine]

merge conflict between base and head

[spalger]

Operations: tweak to precommit config LGTM

[kibanamachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: 2747755
• Pipeline Steps (look for red circles / failed steps)
• Interpreting CI Failures

Failed CI Steps

• Execute x-pack-intake
• Execute kibana-intake
• Report failed tests, if necessary

Build metrics

async chunks size

id	value	diff	baseline
canvas	1.5MB	+403.0B	1.5MB

page load bundle size

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

History

• 💚 Build #58519 succeeded cc5112e
• 💚 Build #57689 succeeded 9ed731e
• 💔 Build #56419 failed 7f557d4
• 💚 Build #54696 succeeded efbb576
• 💔 Build #54574 failed 3b0143f

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

[clintandrewhall]

I'm going to split this PR up into better chunks. There's too much churn and too much to review at once. I'll be referring to this PR and branch moving forward, though.