[Controls] Redux Toolkit and Embeddable Redux Wrapper #114371

ThomThomson · 2021-10-07T21:51:51Z

Summary

Redux Embeddable Wrapper

system which can be used to give any embeddable the ability to manage its state via Redux without the hassle of setting up a new store, building a slice, or dealing with syncing redux state and embeddable state. Embeddables that wish to use redux can now do so with the following steps:

Write reducers for the embeddable's input type
When rendering the embeddable, wrap its top level component in the ReduxEmbeddableWrapper, providing the input type and the reducers.
In any component under the Embeddable, use the useReduxEmbeddableContext hook to access the dispatch, typed actions, and selector.
to get access to the current state use the selector, to update the state, use the dispatch and an action.

Redux state in Control Group

The control group has been updated to use Redux with the Redux embeddable wrapper. This greatly simplifies state management in the control group embeddable. It's behaviour should be the same, with a few small exceptions:

Set all widths: In the Group management screen, the button group which used to set all control widths now sets the default width, a new button to the right of it sets all control widths to the default.

Confirm Modals: The confirm modals now only appear when exiting a control edit or create flyout without saving your progress AND when you have unsaved changes.

Preconfigured story

The storybook now has story with a control group pre-configured. This makes development faster, and makes it easier to check out the progress at a glance!

…itDragDrop

…ing and removing controls

…g stub

…itDragDrop

… Delete all functionality with confirm. Reset width after canceling edit

…itDragDrop

…son/kibana into andreadelrio/dndControls-design-1

[Controls] dnd clone design improvements

…itDragDrop

Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com>

…xToolkit

…itDragDrop

…xToolkit

ThomThomson · 2021-10-13T14:13:17Z

@elasticmachine merge upstream

elasticmachine · 2021-10-13T15:35:12Z

Pinging @elastic/kibana-presentation (Team:Presentation)

poffdeluxe · 2021-10-13T19:23:27Z

src/plugins/presentation_util/public/components/redux_embeddables/redux_embeddable_wrapper.tsx

+> => ({
+  diffInput: (a, b) => {
+    const differences: Partial<InputType> = {};
+    const allKeys = [...Object.keys(a), Object.keys(b)] as Array<keyof InputType>;


is there a missing spread operator for the Object.keys(b) here?

Wow, what a good catch... that could've made for some annoying and hard to diagnose errors down the line! I've fixed that.

poffdeluxe

There's a lot going on here but overall looks good to me. I had one question regarding that spread operator but other than that this seems like it's going to make embeddable state management much easier

kibanamachine · 2021-10-13T23:12:41Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`presentationUtil`	121	124	+3

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`presentationUtil`	150	151	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`presentationUtil`	43.1KB	43.1KB	-6.0B

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`presentationUtil`	5	6	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`presentationUtil`	43.0KB	43.4KB	+386.0B

Unknown metric groups

API count

id	before	after	diff
`presentationUtil`	177	178	+1

History

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

…mple/introduce-baseline-tests * 'master' of github.com:elastic/kibana: (55 commits) [Fleet] Improve Functionality around Managed Package Policies (elastic#114526) cleanup (elastic#114902) remove stray semicolon (elastic#114969) [Security Solution] Edit host isolation exception IP UI (elastic#114279) [ML] APM Correlations: Round duration values to be used in range aggregations. (elastic#114833) [Index Management] Added `data-test-subj` values to the index context menu buttons (elastic#114900) [Stack monitoring] Fix logstash functional tests for react (elastic#114819) Implement hybrid approach to writing rule execution event logs (elastic#114852) [Detection Rules] Add 7.16 rules (elastic#114939) Fixing exceptions export format (elastic#114920) Clean up inaccurate comments (elastic#114935) chore(NA): fixes a typo on persist_bazel_cache.sh comment (elastic#114943) [ci] Fixes Bazel cache writes (elastic#114915) fix package.json: (elastic#114936) [Controls] Redux Toolkit and Embeddable Redux Wrapper (elastic#114371) [APM] Fixes incorrect index config names (elastic#114901) (elastic#114904) [Workplace Search] Fix button order and remove extra source name label (elastic#114899) [Actions] Fixed actions telemetry for multiple namespaces usage (elastic#114748) docs: fix config names (elastic#114903) Update kibana to EMS 7.16 (elastic#114865) ...

ThomThomson and others added 30 commits August 12, 2021 15:00

added dndKit to package.json

961871f

Merge branch 'master' of github.com:elastic/kibana into controls/dndK…

82dc233

…itDragDrop

fix package json

672b4b2

Control group editing experience V2

0cdf909

Merge branch 'master' of github.com:elastic/kibana into controls/dndK…

36e21df

…itDragDrop

built control group embeddable, stubbed controls service, stubbed add…

1cfb999

…ing and removing controls

Control group embeddable creation and deletion working. Inline editin…

121c104

…g stub

Management, validation, restore previous input on cancel

e50493c

Fix types, fix file capitilization, reenable set all widths function

09236b5

working on clones

983229c

Merge branch 'master' of github.com:elastic/kibana into controls/dndK…

93344cb

…itDragDrop

fix truncation

695a657

renamed element

aef2049

Fix i18n, package.json merge conflict, fix embeddable parenting.

cdb50c1

Reorganize controls file structure

6488ebd

small style changes

7231eca

Add confirmation modals for canceling creation and edits of controls.…

0e52eba

… Delete all functionality with confirm. Reset width after canceling edit

prevent jumping in twoLine dragging

8ae7d29

type fix

26076b7

Merge branch 'master' of github.com:elastic/kibana into controls/dndK…

6aba47e

…itDragDrop

Merge branch 'controls/dndKitDragDrop' of https://github.com/ThomThom…

3fce9cf

…son/kibana into andreadelrio/dndControls-design-1

Merge pull request #11 from andreadelrio/dndControls-design-1

1aaae93

[Controls] dnd clone design improvements

fix style lint and types

e87794b

Id updates from review feedback

17a64e5

Merge branch 'master' of github.com:elastic/kibana into controls/dndK…

08f8c71

…itDragDrop

Apply suggestions from code review

75d8fb3

Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com>

Merge branch 'master' of github.com:elastic/kibana into controls/redu…

ca581a3

…xToolkit

Merge branch 'master' of github.com:elastic/kibana into controls/dndK…

279741c

…itDragDrop

Merge branch 'master' into controls/dndKitDragDrop

930e551

fix package.json

c8a0b53

ThomThomson added 3 commits October 7, 2021 16:56

get order of controls from embeddable input, set up preconfigured story

ef1eb14

More comments for redux embeddable context

e84c887

Merge branch 'master' of github.com:elastic/kibana into controls/redu…

33881e7

…xToolkit

ThomThomson changed the base branch from master to 7.15 October 12, 2021 17:58

ThomThomson changed the base branch from 7.15 to master October 12, 2021 17:58

ThomThomson added 3 commits October 12, 2021 15:03

remove duplicated files

7663227

Merge branch 'master' of github.com:elastic/kibana into controls/redu…

bfb30ac

…xToolkit

fix types

d91eac6

Merge branch 'master' into controls/reduxToolkit

b0dc3cf

ThomThomson marked this pull request as ready for review October 13, 2021 14:13

ThomThomson requested a review from a team as a code owner October 13, 2021 14:13

ThomThomson added the Project:Controls label Oct 13, 2021

poffdeluxe reviewed Oct 13, 2021

View reviewed changes

poffdeluxe approved these changes Oct 13, 2021

View reviewed changes

fix missing spread

c3f80f9

ThomThomson merged commit f8cbbbb into elastic:master Oct 14, 2021

ThomThomson mentioned this pull request Oct 15, 2021

[Controls] Options List Redux & Selection Management #115122

Merged

ThomThomson added the backport:skip This commit does not require backporting label Oct 15, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Controls] Redux Toolkit and Embeddable Redux Wrapper #114371

[Controls] Redux Toolkit and Embeddable Redux Wrapper #114371

ThomThomson commented Oct 7, 2021 •

edited

Loading

ThomThomson commented Oct 13, 2021

elasticmachine commented Oct 13, 2021

poffdeluxe Oct 13, 2021

ThomThomson Oct 13, 2021

poffdeluxe left a comment

kibanamachine commented Oct 13, 2021

API count

[Controls] Redux Toolkit and Embeddable Redux Wrapper #114371

[Controls] Redux Toolkit and Embeddable Redux Wrapper #114371

Conversation

ThomThomson commented Oct 7, 2021 • edited Loading

Summary

Redux Embeddable Wrapper

Redux state in Control Group

Preconfigured story

ThomThomson commented Oct 13, 2021

elasticmachine commented Oct 13, 2021

poffdeluxe Oct 13, 2021

Choose a reason for hiding this comment

ThomThomson Oct 13, 2021

Choose a reason for hiding this comment

poffdeluxe left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 13, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

History

ThomThomson commented Oct 7, 2021 •

edited

Loading