[Embeddable Rebuild] [Controls] Add drag and drop to control group #188687

Heenawter · 2024-07-18T17:51:30Z

Summary

Note

This PR has no user-facing changes - minus one small style change (which is a small selector simplification and doesn't actually change anything), all work is contained in the examples plugin.

This PR adds drag and drop to the refactored control group in the examples plugin.

Checklist

Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

Heenawter · 2024-07-18T20:24:11Z

/ci

Heenawter · 2024-07-18T20:28:21Z

examples/controls_example/public/react_controls/control_group/init_controls_manager.ts

@@ -85,7 +88,7 @@ export function initControlsManager(initialControlPanelsState: ControlPanelsStat
  }

  return {
-    controlsInOrder$: controlsInOrder$ as PublishingSubject<Array<{ id: string; type: string }>>,
+    controlsInOrder$,


I chose to make this a public BehaviorSubject rather than adding a setter for the control order - this felt cleaner to me.

Heenawter · 2024-07-18T20:29:22Z

...controls_example/public/react_controls/timeslider_control/get_timeslider_control_factory.tsx

@@ -185,7 +185,7 @@ export const getTimesliderControlFactory = (
      const viewModeSubject =
        getViewModeSubject(controlGroupApi) ?? new BehaviorSubject('view' as ViewMode);

-      const defaultControl = initializeDefaultControlApi(initialState);
+      const defaultControl = initializeDefaultControlApi({ ...initialState, width: 'large' });


The time slider should always have a width of large - this value cannot be changed.

Can you turn your comment into a comment in the code please

Good call - done in 34ac226

Heenawter · 2024-07-18T20:31:30Z

src/plugins/controls/public/control_group/control_group.scss

-    .controlFrame__formControlLayout {
-      opacity: 0; // hide dragged control, while control is dragged its replaced with ControlClone component
-    }
+    opacity: 0; // hide dragged control, while control is dragged its replaced with ControlClone component


I tested this on both the new control group (in the examples plugin) and the old one (in the controls plugin) - the more generic selector works in both cases. No need to target euiFormRow__labelWrapper and controlFrame__formControlLayout explicitly to hide the control when dragging.

Controls on Dashboard after this change:

Notice that, with this change, the control is still hidden on drag as expected

Heenawter · 2024-07-18T20:38:46Z

/ci

Heenawter · 2024-07-18T21:42:03Z

/ci

elasticmachine · 2024-07-18T23:06:49Z

💚 Build Succeeded

Buildkite Build
Commit: 50f2c50

Metrics [docs]

Async chunks

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

id	before	after	diff
`controls`	202.3KB	202.2KB	-182.0B

History

💔 Build #222487 failed 17d8e64
💔 Build #222484 failed 7e0d5b0

cc @Heenawter

elasticmachine · 2024-07-18T23:13:34Z

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

…7-17

nreese · 2024-07-22T16:08:28Z

examples/controls_example/public/react_controls/control_panel.tsx

@@ -186,3 +212,49 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
    </EuiFlexItem>
  );
 };
+
+/**


How about putting ControlClone into its own file?

Done in 1d0b5d2

nreese · 2024-07-22T16:12:00Z

examples/controls_example/public/react_controls/control_panel.tsx

@@ -102,6 +124,8 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA

  return (
    <EuiFlexItem
+      ref={setNodeRef}
+      style={style}
      grow={grow}
      data-control-id={api?.uuid}


uuid is now passed in. How about using uuid instead of api?.uuid? What is data-control-id attribute used for?

We use data-control-id for pretty much all of our control functional tests (via the controls page object) - not sure why we chose to use this attribute instead of just data-test-subj but this is legacy so not sure we want to change it. Replaced api.uuid with uuid in 22de169 though 👍

nreese · 2024-07-22T16:12:48Z

...controls_example/public/react_controls/timeslider_control/get_timeslider_control_factory.tsx

@@ -185,7 +185,7 @@ export const getTimesliderControlFactory = (
      const viewModeSubject =
        getViewModeSubject(controlGroupApi) ?? new BehaviorSubject('view' as ViewMode);

-      const defaultControl = initializeDefaultControlApi(initialState);
+      const defaultControl = initializeDefaultControlApi({ ...initialState, width: 'large' });


Can you turn your comment into a comment in the code please

nreese

LGTM, one step closer to being feature complete
code review, tested in chrome

kibana-ci · 2024-07-22T19:27:40Z

💚 Build Succeeded

Buildkite Build
Commit: 34ac226

Metrics [docs]

Async chunks

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

id	before	after	diff
`controls`	202.3KB	202.2KB	-182.0B

History

💛 Build #222945 was flaky 03e508c

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

cc @Heenawter

While reviewing #188687, I noticed that controls where still getting filtered by timeslider changes even when chaining was disabled or the control was to the left of the timeslider. This PR resolves this issue by only passing in timeslice from `chaining$` instead of `controlGroupFetch$`. Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Heenawter self-assigned this Jul 18, 2024

Heenawter added 3 commits July 18, 2024 11:55

First buggy drag n drop

80ebfd3

Clean up drag and drop

3b9ed3b

Small clean up

638a33e

Heenawter force-pushed the emeddableRebuild_controls_drag-n-drop_2024-07-17 branch from 075c372 to 638a33e Compare July 18, 2024 17:56

Heenawter added 2 commits July 18, 2024 14:08

Drop order

e106642

Add background colour

7e0d5b0

Heenawter commented Jul 18, 2024

View reviewed changes

Remove unused type

a865a55

Heenawter commented Jul 18, 2024

View reviewed changes

Cleanup imports

17d8e64

Fix imports

50f2c50

Heenawter marked this pull request as ready for review July 18, 2024 23:13

Heenawter requested review from a team as code owners July 18, 2024 23:13

Heenawter requested a review from nreese July 19, 2024 17:16

Merge branch 'main' into emeddableRebuild_controls_drag-n-drop_2024-0…

03e508c

…7-17

nreese reviewed Jul 22, 2024

View reviewed changes

nreese mentioned this pull request Jul 22, 2024

fix timeslice chaining in react embeddable control group #188866

Merged

Heenawter added 3 commits July 22, 2024 11:59

Move control_clone

1d0b5d2

Replace api.uuid with uuid

22de169

Add comment

34ac226

nreese approved these changes Jul 22, 2024

View reviewed changes

MichaelMarcialis approved these changes Jul 22, 2024

View reviewed changes

Heenawter merged commit fa0ef37 into elastic:main Jul 22, 2024
19 checks passed

Heenawter deleted the emeddableRebuild_controls_drag-n-drop_2024-07-17 branch July 22, 2024 20:00

kibanamachine added v8.16.0 backport:skip This commit does not require backporting labels Jul 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Embeddable Rebuild] [Controls] Add drag and drop to control group #188687

[Embeddable Rebuild] [Controls] Add drag and drop to control group #188687

Heenawter commented Jul 18, 2024 •

edited

Loading

Heenawter commented Jul 18, 2024

Heenawter Jul 18, 2024

Heenawter Jul 18, 2024 •

edited

Loading

nreese Jul 22, 2024

Heenawter Jul 22, 2024

Heenawter Jul 18, 2024 •

edited

Loading

Heenawter commented Jul 18, 2024

Heenawter commented Jul 18, 2024

elasticmachine commented Jul 18, 2024

elasticmachine commented Jul 18, 2024

nreese Jul 22, 2024

Heenawter Jul 22, 2024

nreese Jul 22, 2024

Heenawter Jul 22, 2024 •

edited

Loading

nreese Jul 22, 2024

nreese left a comment

kibana-ci commented Jul 22, 2024

[Embeddable Rebuild] [Controls] Add drag and drop to control group #188687

[Embeddable Rebuild] [Controls] Add drag and drop to control group #188687

Conversation

Heenawter commented Jul 18, 2024 • edited Loading

Summary

Checklist

For maintainers

Heenawter commented Jul 18, 2024

Heenawter Jul 18, 2024

Choose a reason for hiding this comment

Heenawter Jul 18, 2024 • edited Loading

Choose a reason for hiding this comment

nreese Jul 22, 2024

Choose a reason for hiding this comment

Heenawter Jul 22, 2024

Choose a reason for hiding this comment

Heenawter Jul 18, 2024 • edited Loading

Choose a reason for hiding this comment

Heenawter commented Jul 18, 2024

Heenawter commented Jul 18, 2024

elasticmachine commented Jul 18, 2024

💚 Build Succeeded

Metrics [docs]

Async chunks

History

elasticmachine commented Jul 18, 2024

nreese Jul 22, 2024

Choose a reason for hiding this comment

Heenawter Jul 22, 2024

Choose a reason for hiding this comment

nreese Jul 22, 2024

Choose a reason for hiding this comment

Heenawter Jul 22, 2024 • edited Loading

Choose a reason for hiding this comment

nreese Jul 22, 2024

Choose a reason for hiding this comment

nreese left a comment

Choose a reason for hiding this comment

kibana-ci commented Jul 22, 2024

💚 Build Succeeded

Metrics [docs]

Async chunks

History

Heenawter commented Jul 18, 2024 •

edited

Loading

Heenawter Jul 18, 2024 •

edited

Loading

Heenawter Jul 18, 2024 •

edited

Loading

Heenawter Jul 22, 2024 •

edited

Loading