[Controls Anywhere] Convert `ControlGroupRenderer` by Heenawter · Pull Request #236350 · elastic/kibana

Heenawter · 2025-09-24T17:19:53Z

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 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

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-10-06T16:52:16Z

examples/controls_example/public/app/app.tsx

I deleted the React control example, since it is no longer relevant now that the control group is not an embeddable.

Heenawter · 2025-10-06T17:15:07Z

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

          (current) => current.id !== action.id
        );
-        if (isCompatible) {
+        if (isCompatible && (disabledActions ?? []).indexOf(action.id) === -1) {


This ensures that the disabled actions are filtered out even when the actions change via the compatibilityChangesSubject

Heenawter · 2025-10-06T22:38:21Z

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

      const expectedChildCount =
        Object.values(layout.panels).filter((panel) => {
-          return panel.gridData.sectionId ? !isSectionCollapsed(panel.gridData.sectionId) : true;
+          return panel.grid.sectionId ? !isSectionCollapsed(panel.grid.sectionId) : true;


This is a fix for a bad merge conflict

Heenawter · 2025-10-06T23:07:58Z

src/platform/packages/shared/controls/control-group-renderer/src/use_children_api.tsx

I don't love the duplication between use_children_api and Dashboard's API definition. Essentially, I found I was just creating a subset of the Dashboard API for this - which works well enough, but I'm worried about potential drift. I'm not sure if we should go through the hassle of making some sort of shareable children API, though? 🤔

Heenawter · 2025-10-06T23:08:08Z

src/platform/packages/shared/controls/control-group-renderer/src/use_layout_api.tsx

Same as https://github.com/elastic/kibana/pull/236350/files#r2408938160

…urce-definitions/scripts/fix-location-collection.ts'

…apping'

… src/core/server/integration_tests/ci_checks'

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

…no-cache --fix'

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

rmyz

infra&services changes LGTM

Heenawter · 2025-10-08T17:52:42Z

src/platform/packages/private/kbn-controls-renderer/src/types.ts

+/**
+ * TODO: I added this to avoid circular dependencies; however, we should probably clean up the typings
+ * expected here so that `controls-renderer` is less depenedent on Dashboard types. i.e. it shouldn't
+ * need all the layout information, just controls.
+ */


I can address this in a follow-up. I don't want to blow up this PR even more by making changes to controls-renderer

Heenawter · 2025-10-08T17:53:11Z

src/platform/packages/private/kbn-controls-renderer/src/types.ts

  HasSerializedChildState<object> &
-  Partial<PublishesDisabledActionIds> &
-  Pick<DashboardApi, 'registerChildApi' | 'layout$'> & {
+  // Pick<DashboardApi, 'registerChildApi' | 'layout$'> &


I am keeping this comment as a reminder - it will be removed

Heenawter · 2025-10-08T17:53:59Z

src/platform/packages/shared/controls/controls-schemas/src/types.ts

+export interface HasCustomPrepend {
+  CustomPrependComponent: React.FC<{}>;
+}


I know this is controls-schemas but I needed to move this type out of the controls plugin to avoid circular dependencies and this is the best quick place for it.

elasticmachine · 2025-10-08T18:31:29Z

💔 Build Failed

Buildkite Build
Commit: 776acf7

Failed CI Steps

History

ThomThomson

Changes look good! I enjoyed looking through the new control group renderer.

As discussed offline, I would have preferred a messier translation layer to avoid bloating the feature branch with changes in the solutions, but it seems like all the changes to solutions made here are pushing them in the right direction.

ThomThomson · 2025-10-08T18:43:55Z

src/platform/packages/shared/controls/control-group-renderer/README.md

+# @kbn/control-group-renderer
+
+This is a shared component that allows a group of controls to be rendered via props.
+It is a wrapper for the `ControlsRenderer` component, and it is responsible for defining the `parentApi` that


Nice to see this in a package!

ThomThomson · 2025-10-08T18:44:33Z

src/platform/packages/shared/content-management/table_list_view_table/tsconfig.json

      "@testing-library/react"
    ]
  },
-  "include": [


Why do we have changes to this file?

I think that is CI nonsense. I don't think the larger PR from the feature branch will include this - and if it does, I can attempt to clean it up at that point

ThomThomson · 2025-10-08T19:19:45Z

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

        <EuiFlexGroup
          component="ul"
-          className={'controlGroup'}
+          className="controlGroup"


This is a nice clean & simple file.

ThomThomson · 2025-10-08T19:20:21Z

src/platform/packages/shared/controls/control-group-renderer/src/control_group_renderer.tsx

+import { BehaviorSubject, Subject, combineLatest, map } from 'rxjs';
+
+import { ControlsRenderer, type ControlsRendererParentApi } from '@kbn/controls-renderer';
+import type { StickyControlState } from '@kbn/controls-schemas';


Nice to see this type imported from the schemas package!

ThomThomson · 2025-10-08T19:28:40Z

src/platform/packages/shared/controls/control-group-renderer/src/control_group_renderer.tsx

+  compressed?: boolean;
+}
+
+export const ControlGroupRenderer = ({


This is a really interesting strategy / approach for a compatibility layer between a pure React component and Embeddable react components. I like the approach and the organization a lot.

Heenawter added 7 commits October 1, 2025 11:05

First draft of control group renderer

06f86a7

Start some cleanup

596802b

Starting to get unsaved changes to work

2f001de

Got reset kind of working

86e5f0f

Start some cleanup

05ce386

Better layout management

1a8f688

Some code cleanup

c8d45ae

Heenawter force-pushed the controlsAnywhere_control-group-renderer_2025-09-24 branch from 2734aa0 to c8d45ae Compare October 1, 2025 17:05

Heenawter added 11 commits October 1, 2025 16:32

Fix getInput$

3cbd7e9

Fix update input

ecc34df

Start getting editor config to work

162053d

Handle control state transform

eb72cef

Fix test + editor config

63f2c48

Fix imports

b13f598

Fix "no filters" bug

43c31d0

Start converting control examples

3c6f964

Fix edit example

fae1cd6

Remove react control example

05c2d3e

Fix some types

0369f82

Heenawter commented Oct 6, 2025

View reviewed changes

Heenawter added 5 commits October 6, 2025 13:14

Start some cleanup + start adding ignore validations setting

a95782f

Add ignore validations back to range slider control

0d79f0a

Pass ignore validations

780f960

Fix types

0ab3b93

Do some more cleanup

f161ca1

Heenawter commented Oct 6, 2025

View reviewed changes

More more cleanup

c0892c7

Heenawter commented Oct 6, 2025

View reviewed changes

Heenawter requested a review from ThomThomson October 7, 2025 18:56

kibanamachine added 3 commits October 7, 2025 19:06

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

7aa38ab

[CI] Auto-commit changed files from 'ts-node .buildkite/pipeline-reso…

bb990da

…urce-definitions/scripts/fix-location-collection.ts'

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

ae4db60

…apping'

elastic-vault-github-plugin-prod bot requested a review from a team as a code owner October 7, 2025 19:17

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

446ab90

… src/core/server/integration_tests/ci_checks'

elastic-vault-github-plugin-prod bot requested a review from a team as a code owner October 7, 2025 19:37

Heenawter and others added 9 commits October 7, 2025 13:59

Fix circular reference

397622d

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

8fe9923

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

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

a6e1466

…no-cache --fix'

Try another fix for circular dependency

3743766

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

ee51bd9

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

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

98cff8a

Another another circular dependecy fix attempt

c6ac43d

Re-add embeddable dependency

6bc9cf9

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

adbdd72

adcoelho approved these changes Oct 8, 2025

View reviewed changes

tonyghiani approved these changes Oct 8, 2025

View reviewed changes

rmyz approved these changes Oct 8, 2025

View reviewed changes

Start fixing circular dependencies

50977ff

Heenawter commented Oct 8, 2025

View reviewed changes

Fix missed type

776acf7

ThomThomson approved these changes Oct 8, 2025

View reviewed changes

Heenawter merged commit ec0f8f8 into elastic:controlsAnywhere Oct 8, 2025
11 of 12 checks passed

Heenawter deleted the controlsAnywhere_control-group-renderer_2025-09-24 branch October 8, 2025 19:38

This was referenced Oct 8, 2025

[Controls Anywhere] Add "Validate selections" setting as panel-level setting #236128

Closed

[Controls Anywhere] Convert ControlGroupRenderer to use ControlsRenderer #235866

Closed

Conversation

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

Uh oh!

Summary

Checklist

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!

Choose a reason for hiding this comment

Uh oh!

rmyz left a comment

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 Oct 8, 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!

elasticmachine commented Oct 8, 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!

ThomThomson left a comment

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Heenawter commented Sep 24, 2025 •

edited

Loading

Heenawter Oct 8, 2025 •

edited

Loading

elasticmachine commented Oct 8, 2025 •

edited

Loading