[Lens] Move toolbar from Lens editor workspace to config panel by mariairiartef · Pull Request #239879 · elastic/kibana

mariairiartef · 2025-10-21T09:55:30Z

Summary

Moves toolbar from workspace to config panel.

After

With disabled "Auto-apply visualization changes"

Checklist

Unit or functional tests were updated or added to match the most common scenarios
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
Review the backport guidelines and apply applicable backport:* labels.

Issues

Closes #239719

Release Notes

Moves the Lens visualization toolbar from the workspace section to the config panel.

elasticmachine · 2025-10-23T12:34:35Z

Pinging @elastic/kibana-visualizations (Team:Visualizations)

mariairiartef · 2025-10-24T07:29:36Z

/ci

mariairiartef · 2025-10-24T09:40:39Z

/ci

mariairiartef · 2025-10-24T10:09:35Z

/ci

mariairiartef · 2025-10-24T12:41:19Z

/ci

mariairiartef · 2025-10-24T13:36:53Z

/ci

kibanamachine · 2025-10-27T14:10:18Z

Flaky Test Runner Stats

🎉 All tests passed! - kibana-flaky-test-suite-runner#9641

[✅] x-pack/platform/test/functional/apps/lens/group1/config.ts: 25/25 tests passed.
[✅] x-pack/platform/test/functional/apps/lens/group4/config.ts: 25/25 tests passed.
[✅] x-pack/platform/test/functional/apps/lens/group5/config.ts: 25/25 tests passed.
[✅] x-pack/platform/test/functional/apps/lens/group6/config.ts: 25/25 tests passed.

see run history

dej611 · 2025-10-28T09:30:56Z

...ed/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx

            `}
            responsive={false}
          >
-            {!isFullscreen && (


can we revisit this?

Lots of users like to edit formulas in full screen mode, but now all the toolbar buttons are gone.

Formula expand mode in Lens editor:

Formula expand mode in Dashboard inline editing:

I think that currently, whenever you enable the "formula expand mode", the toolbar disappears. I mean, the toolbar never was there in the expanded mode, right? Do you think we should show it? 🤔 Even with the new system, you are not enable to simultaneously edit the style and the visualization configuration

@gvnmagni do you think we should consider this?

The flow will be like this:

Checked with previous version and I was wrong, as those buttons were hidden like they do with your PR.
So good for me 👍

...tform/plugins/shared/lens/public/editor_frame_service/editor_frame/visualization_toolbar.tsx

walterra · 2025-10-28T15:13:05Z

x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/editor_frame.tsx

+                <EuiFlexItem
+                  css={css({ margin: `${euiTheme.size.base} ${euiTheme.size.base} 0 0` })}
+                >
+                  <EuiFlexGroup
+                    alignItems="center"
+                    justifyContent="flexEnd"
+                    responsive={false}
+                    wrap={true}
+                  >
+                    <VisualizationToolbarWrapper framePublicAPI={framePublicAPI} />
+                  </EuiFlexGroup>
+                </EuiFlexItem>


This looks looks like the wrong way around with flex group inside a flex item guess we need to swap that? might be worth revisiting how to properly structure this. the parent section doesn't use EUI but sets flex on the section, maybe it's sufficient to just have VisualizationToolbarWrapper in here?

walterra · 2025-10-28T15:23:54Z

...tform/plugins/shared/lens/public/editor_frame_service/editor_frame/visualization_toolbar.tsx

+  }
+
+  return (
+    <EuiFlexItem grow={false} data-test-subj="lnsVisualizationToolbar">


It's been like this previously but I wonder if having the flex item here is a bit too opinionated since it's expects the user of the component to know that it needs a parent flex group on the outside. maybe we should remove the item here and have it outside in the places where necessary?

Thanks for noticing this! I tried to update it so it looks like this:

Done here

This looks better now! Since you moved data-test-subj="lnsVisualizationToolbar" out of the component we're missing it now in the FlyoutWrapper component (x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/flyout_wrapper.tsx) so we need to change {toolbar && <EuiFlexItem grow={false}>{toolbar}</EuiFlexItem>} to {toolbar && <EuiFlexItem grow={false} data-test-subj="lnsVisualizationToolbar">{toolbar}</EuiFlexItem>} there too.

…no-cache --fix'

walterra

Latest changes LGTM. 🚀

elasticmachine · 2025-10-29T16:19:30Z

💚 Build Succeeded

Buildkite Build
Commit: ef567c4

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`lens`	1420	1421	+1

Async chunks

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

id	before	after	diff
`lens`	1.5MB	1.5MB	+90.0B

History

💔 Build #356082 failed 89cd48d
💛 Build #356030 was flaky e7243ed
💔 Build #356029 failed 06da00f
💛 Build #355633 was flaky e12dc1e
💛 Build #354948 was flaky 577e6ff

cc @mariairiartef

…ic#239879) ## Summary Moves toolbar from workspace to config panel. #### After <img width="2560" height="1295" alt="Screenshot 2025-10-23 at 14 17 59" src="https://github.com/user-attachments/assets/cdd1a3ed-7420-4e55-8c1b-7aa77ba88175" /> #### With disabled "Auto-apply visualization changes" <img width="2560" height="1294" alt="Screenshot 2025-10-23 at 14 22 24" src="https://github.com/user-attachments/assets/631f46c4-8a83-411f-bc29-27df257eaeef" /> ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Issues Closes elastic#239719 ### Release Notes Moves the Lens visualization toolbar from the workspace section to the config panel. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

mariairiartef self-assigned this Oct 21, 2025

mariairiartef added Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// Feature:Lens backport:skip This PR does not require backporting release_note:enhancement labels Oct 21, 2025

mariairiartef force-pushed the lens/239719 branch from 61d1731 to 7739e94 Compare October 22, 2025 10:27

mariairiartef changed the title ~~[Lens] Move toolbar to workspace to config panel~~ Oct 22, 2025

mariairiartef force-pushed the lens/239719 branch 2 times, most recently from cc4776f to b7a3301 Compare October 23, 2025 12:27

mariairiartef marked this pull request as ready for review October 23, 2025 12:34

mariairiartef requested a review from a team as a code owner October 23, 2025 12:34

mariairiartef marked this pull request as draft October 23, 2025 14:25

mariairiartef added 10 commits October 24, 2025 14:13

Move toolbar to worksapce to config panel

549f2ec

Extract visualization toolbar component

fc2f75d

Move toolbar wrapper component to another file

a7d64d5

Cleanup test

49f0a40

Remove toolbar from ConfigPanelWrapper

36b95df

Move flyot toolbar to the editor frame config panel

c0b2441

Add test for visualization toolbar

584799a

Fix functional tests caused by open popovers

41138d2

Fix functional tests

f887367

Fix imports

815c21c

mariairiartef force-pushed the lens/239719 branch from 5f17ea5 to 815c21c Compare October 24, 2025 12:18

Fix missing functional tests

3c710f4

Fix import

b50e2d6

mariairiartef marked this pull request as ready for review October 27, 2025 07:52

mariairiartef requested a review from a team as a code owner October 27, 2025 07:52

Merge branch 'main' into lens/239719

577e6ff

Merge branch 'main' into lens/239719

e12dc1e

dej611 reviewed Oct 28, 2025

View reviewed changes

Apply suggestion

eff6ebb

mariairiartef requested a review from walterra October 28, 2025 13:43

walterra reviewed Oct 28, 2025

View reviewed changes

Update flex groups

06da00f

mariairiartef force-pushed the lens/239719 branch from 42e27f7 to 06da00f Compare October 29, 2025 06:34

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

e7243ed

…no-cache --fix'

mariairiartef requested a review from walterra October 29, 2025 07:49

Remove flex item wrapper in toolbar popover

89cd48d

dej611 approved these changes Oct 29, 2025

View reviewed changes

mariairiartef and others added 2 commits October 29, 2025 15:23

Add data test subject

6f13b3d

Merge branch 'main' into lens/239719

ef567c4

walterra approved these changes Oct 29, 2025

View reviewed changes

jesuswr approved these changes Oct 29, 2025

View reviewed changes

mariairiartef merged commit d8c5140 into elastic:main Oct 29, 2025
12 checks passed

kibanamachine added the v9.3.0 label Oct 29, 2025

florent-leborgne added the needs_docs label Nov 19, 2025

florent-leborgne mentioned this pull request Dec 10, 2025

[Lens] Some options moved from the main workspace to the side + got a label elastic/docs-content#4267

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Move toolbar from Lens editor workspace to config panel#239879

[Lens] Move toolbar from Lens editor workspace to config panel#239879
mariairiartef merged 20 commits intoelastic:mainfrom
mariairiartef:lens/239719

mariairiartef commented Oct 21, 2025 •

edited

Loading

elasticmachine commented Oct 23, 2025

mariairiartef commented Oct 24, 2025

mariairiartef commented Oct 24, 2025

mariairiartef commented Oct 24, 2025

mariairiartef commented Oct 24, 2025

mariairiartef commented Oct 24, 2025

kibanamachine commented Oct 27, 2025

dej611 Oct 28, 2025

mariairiartef Oct 28, 2025

mariairiartef Oct 28, 2025

dej611 Oct 29, 2025

Uh oh!

walterra Oct 28, 2025

walterra Oct 28, 2025

mariairiartef Oct 29, 2025 •

edited

Loading

walterra Oct 29, 2025

mariairiartef Oct 29, 2025

walterra left a comment

elasticmachine commented Oct 29, 2025

Uh oh!

Labels

7 participants

Conversation

mariairiartef commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

After

With disabled "Auto-apply visualization changes"

Checklist

Issues

Release Notes

elasticmachine commented Oct 23, 2025

mariairiartef commented Oct 24, 2025

mariairiartef commented Oct 24, 2025

mariairiartef commented Oct 24, 2025

mariairiartef commented Oct 24, 2025

mariairiartef commented Oct 24, 2025

kibanamachine commented Oct 27, 2025

Flaky Test Runner Stats

🎉 All tests passed! - kibana-flaky-test-suite-runner#9641

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mariairiartef Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

walterra left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 29, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

Uh oh!

Labels

7 participants

mariairiartef commented Oct 21, 2025 •

edited

Loading

mariairiartef Oct 29, 2025 •

edited

Loading