[Controls Anywhere] Add `ControlsRenderer` by Heenawter · Pull Request #234506 · elastic/kibana

Heenawter · 2025-09-09T19:55:20Z

Warning

This work is being merged into a feature branch, not main!
Because of this, we only need a review from @elastic/kibana-presentation for now.

Type failures are expected because the feature branch is currently in an incomplete state, where the controls that have not yet been converted (range slider, etc.) are dependent on things that no longer exist.

Closes #233115

Summary

This PR defines the ControlsRenderer component and adds it to the Dashboard sticky navigation in order to render the controlGroupInput.

Screen.Recording.2025-09-22.at.12.04.31.PM.mov

In order to unblock #233037, this work is incomplete - I will address the following in other PRs:

You cannot add new controls to the controlGroupInput yet. This will be addressed with [Controls Anywhere] Allow control panels to be "pinned" to the top of the dashboard #221574
You cannot modify the control's width or grow properties. This will be addressed with [Controls Anywhere] Add UI for grow and width settings to sticky controls #234681
The ControlGroupRenderer component is still broken. This will be addressed with [Controls Anywhere] Convert ControlGroupRenderer to use ControlsRenderer #235866

As part of this work, I modified how the presentation panel wrapper handles errors due to the height restrictions that are on control embeddables. Previously, we weren't accounting for the panel size when rendering the error - which resulted in the error not being rendered properly for control embeddables. I fixed this with a resize observer, so now errors render differently depending on the size of the panel:

Panel size	Error
Narrow
Landscape
Other

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios

Heenawter · 2025-09-19T23:08:38Z

...trols/public/controls/data_controls/options_list_control/components/options_list_control.tsx

      <EuiFilterButton
        badgeColor="success"
-        iconType={loading ? 'empty' : 'arrowDown'}
+        isLoading={loading}


Loading state is no longer rendered by the control wrapper (since the wrapper doesn't exist when the control is a panel) - so each control should handle its own loading state.

Heenawter · 2025-09-19T23:09:09Z

...shared/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts

I made some style changes so that it works better in the sticky wrapper. I also fixed the loading state a bit more:

Before After

Heenawter · 2025-09-22T16:24:54Z

src/platform/packages/private/kbn-controls-renderer/jest.config.js

I don't know why the diff is showing this way 😆 This is a new file - not a moved file.

Heenawter · 2025-09-22T17:01:49Z

...gins/private/presentation_panel/public/panel_component/presentation_panel_error_internal.tsx

<EuiEmptyPrompt> stopped working for smaller panels, so I decided to recreate the look with EuiFlexGroup so that I could get the desired responsive behaviour. Now, our error embeddable should look good regardless of the size of the panel.

Screen.Recording.2025-09-12.at.8.59.19.AM.mov

Heenawter · 2025-09-22T17:10:02Z

src/platform/plugins/shared/dashboard/public/dashboard_api/types.ts

+    layout$: BehaviorSubject<DashboardLayout>;
+    registerChildApi: (api: DefaultEmbeddableApi) => void;


These needed to be moved from the internal API because ControlsRenderer uses both layout$ (for its state management) and regIsterChildApi (so that the sticky controls count as regular children).

Heenawter · 2025-09-22T17:34:52Z

...gins/private/presentation_panel/public/panel_component/presentation_panel_error_internal.tsx

  );
 };
+
+const NarrowError = ({ error }: { error: ErrorLike }) => {


This is the error that small panels (including controls) will use:

Heenawter · 2025-09-22T17:41:37Z

...gins/private/presentation_panel/public/panel_component/presentation_panel_error_internal.tsx

+      {isNarrow ? (
+        <NarrowError error={error} />
+      ) : (
+        <EuiFlexGroup direction="column" gutterSize="l" css={styles.innerWrapperStyles}>


This is the standard embeddable error:

Landscape Portrait

src/platform/packages/private/kbn-controls-renderer/src/components/control_panel.tsx

Zacqary · 2025-09-23T19:07:15Z

src/platform/packages/private/kbn-controls-renderer/src/components/control_panel.tsx

+
+  const [api, setApi] = useState<(DefaultEmbeddableApi & Partial<HasCustomPrepend>) | null>(null);
+  const initialState = useMemo(() => {
+    return parentApi.layout$.getValue().controls[uuid];


Any reason we're not doing usePublishingSubject here?

If I were to use usePublishingSubject, then every update to layout$ would trigger a re-render of each ControlPanel - even unrelated ones. We don't need ControlPanel to respond to changes to other panels and/or control order, for example - at this point in the rendering process, we only care about the grow and width properties of layout$ and so these are the only things we should respond to. So that is why I did it this way :)

Got it, I don't want to block here but maybe there's something we can do to get the layout engine to automatically generate a more performant publishing subject for each control (something similar to the state manager?) so we can make code like this cleaner. We're already repeating this pattern twice in this PR so it's probably going to continue.

Zacqary · 2025-09-23T19:12:56Z

src/platform/packages/private/kbn-controls-renderer/src/components/control_panel.tsx

+          setPanelTitle(result);
+        })
+      );
+      if (api.defaultTitle$) {


Oof this optional defaultTitle$ subject is becoming a code smell. Not sure it's in scope to do something about that in this PR but I don't love where this is going.

if (!apiPublishesTitle(api)) return; should be able to be the end of this.

defaultTitle$ is necessary for the saved object title for all embeddables that can be saved to the library. It is optional because not all embeddables are by-reference - a lot are only by value. So I'm not really sure a better way of handling it 🤷

src/platform/packages/private/kbn-controls-renderer/src/components/control_panel.tsx

src/platform/packages/private/kbn-controls-renderer/src/components/drag_handle.tsx

src/platform/packages/private/kbn-controls-renderer/src/controls_renderer.tsx

Zacqary · 2025-09-23T20:09:00Z

src/platform/packages/private/kbn-controls-renderer/src/controls_renderer.tsx

+  }
+
+  return (
+    <DndContext


Curious why EUI drag and drop doesn't work here?

It doesn't work once the controls wrap onto a new line :( The EUI library only works for single-dimension drag and drop (horizontal or vertical, but not both). We are stuck using dnd-kit until we can add to kbn-grid-layout to handle this type of layout.

Zacqary · 2025-09-23T20:14:37Z

...s/shared/controls/public/controls/data_controls/options_list_control/options_list_strings.ts

    getDisplayName: () =>
      i18n.translate('controls.optionsList.displayName', {
-        defaultMessage: 'Options list',
+        defaultMessage: 'options list',


This is going to get confusing if we make getDisplayName an available function, it'll end up used in other contexts where the lowercase looks like a bug. We should change this function to getEditActionTitle and include the entire Edit options list configuration in the i18n

...shared/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts

…github.com:heenawter/kibana into controlsAnywhere_control-group-renderer_2025-09-02

…trolsAnywhere_control-group-renderer_2025-09-02

… src/core/server/integration_tests/ci_checks'

Zacqary

Overall LGTM, let's merge so we can push forward

elasticmachine · 2025-09-24T16:52:58Z

💔 Build Failed

Buildkite Build
Commit: 7745ae4

Failed CI Steps

History

cc @Heenawter

> [!WARNING] > **_This work is being merged into a feature branch, not main!_** > Because of this, we only need a review from @elastic/kibana-presentation for now. > > Type failures are expected because the feature branch is currently in an incomplete state, where the controls that have not yet been converted (time slider, etc.) are dependent on things that no longer exist. Closes #235866 Closes #236128 ## Summary This PR modifies the `ControlGroupRenderer` so that it wraps the [`ControlsRenderer` component](#234506) instead of the old `ReactEmbeddableRenderer` (since `controlGroup` is no longer an embeddable). To do this, we must create a parent API that matches the expectations of `ControlsRenderer` from the props that the consumer provides. As part of this, I also added the `ignoreValidations` attribute back as a data control setting (rather than a control group setting, like it used to be), since some solutions relied on validations being turned off. I also ensured that, for legacy dashboards where `ignoreValidations` was turned on for the control group, I passed this setting to the individual panels. > [!IMPORTANT] > The time slider has not been converted yet, which means that certain uses of the `ControlGroupRenderer` (such as the one used in the maps application) could not be tested. However, this is a large enough PR that I don't want to delay merging this first big step. I will keep the attached issue open until I can confirm that the time slider works as expected. ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/mater/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Heenawter added loe:medium Medium Level of Effort Project:Controls Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// impact:critical This issue should be addressed immediately due to a critical level of impact on the product. labels Sep 9, 2025

Heenawter mentioned this pull request Sep 11, 2025

[Controls Anywhere] Add server-side reference handling to options list #234110

Merged

Heenawter force-pushed the controlsAnywhere_control-group-renderer_2025-09-02 branch from a9e412f to 0a02710 Compare September 11, 2025 20:26

Heenawter mentioned this pull request Sep 11, 2025

[Controls Anywhere] Convert time slider to an embeddable #233037

Closed

Heenawter force-pushed the controlsAnywhere_control-group-renderer_2025-09-02 branch 2 times, most recently from 3657397 to e358cf5 Compare September 15, 2025 15:57

Heenawter changed the title ~~[Controls Anywhere] Control group renderer~~ [Controls Anywhere] Add new control group renderer to Dashboard Sep 18, 2025

Heenawter added 20 commits September 19, 2025 09:12

Initial draft of control renderer

d9e78b1

Starting to get proper rendering

d18187c

Make filtering work

c3d18d1

Get child state is fixed

a36752e

Type fix

388fb97

Better error styles

3aea578

Do some clean up

abdec49

Fix loading of children

483225a

Move renderer package

0ab554c

Fix import issues

e4c4c22

Fix reset

99f1cf8

Better better error handling

bdafecd

Do some cleanup

9bf2079

Fix state backup + more cleanup

739d04e

Fix persisting width and grow

ebff425

Allow dragging

3e888c5

attempt to use hover actions

39de4d5

Drag real element - bad

9441946

Fix drag clone

2903529

attempt at drop preview

a402f8e

Heenawter commented Sep 19, 2025

View reviewed changes

More cleanup + fix tests

cfaa71f

Heenawter commented Sep 22, 2025

View reviewed changes

More more cleanup

652e014

Heenawter commented Sep 22, 2025

View reviewed changes

Heenawter and others added 3 commits September 22, 2025 11:44

More more more cleanup

239cb56

Fix types

77fb86f

[CI] Auto-commit changed files from 'node scripts/yarn_deduplicate'

ed09d01

Heenawter marked this pull request as ready for review September 22, 2025 18:07

Heenawter requested review from a team as code owners September 22, 2025 18:07

Zacqary reviewed Sep 23, 2025

View reviewed changes

botelastic bot added the Feature:Embedding Embedding content via iFrame label Sep 23, 2025

Heenawter and others added 6 commits September 23, 2025 15:01

Review feedback

2b0c83a

Merge branch 'controlsAnywhere_control-group-renderer_2025-09-02' of …

a87ce3a

…github.com:heenawter/kibana into controlsAnywhere_control-group-renderer_2025-09-02

Merge branch 'controlsAnywhere' of github.com:elastic/kibana into con…

896e4e3

…trolsAnywhere_control-group-renderer_2025-09-02

Center text better in tooltip wrapper

d149742

Merge branch 'controlsAnywhere' of github.com:elastic/kibana into con…

743ddf7

…trolsAnywhere_control-group-renderer_2025-09-02

[CI] Auto-commit changed files from 'node scripts/jest_integration -u…

7745ae4

… src/core/server/integration_tests/ci_checks'

Zacqary approved these changes Sep 24, 2025

View reviewed changes

Heenawter merged commit 0c998c3 into elastic:controlsAnywhere Sep 24, 2025
10 of 12 checks passed

Heenawter deleted the controlsAnywhere_control-group-renderer_2025-09-02 branch September 24, 2025 16:57

Heenawter mentioned this pull request Sep 24, 2025

[Controls Anywhere] Create ControlsRenderer wrapper #233115

Closed

Heenawter mentioned this pull request Oct 6, 2025

[Controls Anywhere] Convert ControlGroupRenderer #236350

Merged

2 tasks

		layout$: BehaviorSubject<DashboardLayout>;
		registerChildApi: (api: DefaultEmbeddableApi) => void;

Conversation

Heenawter commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

Heenawter Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Heenawter Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Heenawter Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Heenawter Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Heenawter Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Zacqary left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💔 Build Failed

Failed CI Steps

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Heenawter commented Sep 9, 2025 •

edited

Loading

Heenawter Sep 19, 2025 •

edited

Loading

Heenawter Sep 22, 2025 •

edited

Loading

Heenawter Sep 22, 2025 •

edited

Loading

Heenawter Sep 23, 2025 •

edited

Loading

Heenawter Sep 23, 2025 •

edited

Loading

elasticmachine commented Sep 24, 2025 •

edited

Loading