[Lens] Inline editing of lens panels on a dashboard or canvas #166169

stratoula · 2023-09-11T13:26:45Z

Summary

Closes #166833
Closes #167063

This PR allows the inline editing of Lens panels in canvas and dashboards.

Changes

Discover

The basic UI change in Discover flyout is that we add the Cancel button in the flyout footer (resets to the state before the flyout changes).
It also solves (with passing the embeddableOutput observable to the flyout) the bug that is more prominent in this PR (first bullet)

Dashboard

All Lens panels have an Edit visualization panel action
The Edit Lens action is now hidden
A flyout opens (in the header there is a link where the users can go to the editor)
The by reference panels change to by value as long as the users are editing. On apply and close, we save to the SO
All tests have changed to accomodate this navigation change. All the existing ones test the editor (as they used to do). I have added new tests for testing the inline experience

Known issues

If a user is currently editing a by reference visualization, doesn't click Cancel or Apply and navigate away, the panel stays as by value panel. The users can always go back and reset the changes and we could not find an easy fix with Devon. We consider it as a nice to have and a non-blocking behavior.

Missing

These 2 features are missing to give the full set of capabilities of the editor to the flyout. Both are missing from ESQL editing too and are going to be added on a follow up PR

Chart switcher
Suggestions (as icons and not previews)

Flaky tests runner

https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3182 (100 times)

Panel focus

This PR will look even better when this is merged! #165417

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
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 renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

stratoula · 2023-09-13T08:24:58Z

x-pack/plugins/lens/public/trigger_actions/open_lens_config/action.test.tsx

@@ -38,24 +38,6 @@ describe('open config panel action', () => {
      expect(isCompatible).toBeFalsy();
    });

-    it('is incompatible with non text based language embeddable', async () => {


ℹ️ no need for this test now that we enable inline editing everywhere.

…rivileges

…put$

…ge support

stratoula · 2023-09-19T06:51:03Z

...gins/embeddable/public/embeddable_panel/panel_actions/edit_panel_action/edit_panel_action.ts

@@ -75,6 +75,7 @@ export class EditPanelAction implements Action<ActionContext> {
    const canEditEmbeddable = Boolean(
      embeddable &&
        embeddable.getOutput().editable &&
+        !embeddable.getOutput().inlineEditable &&
        (embeddable.getOutput().editUrl ||


ℹ️ hides the embeddable edit action if inline editing exists

stratoula · 2023-09-19T06:53:32Z

src/plugins/unified_histogram/public/chart/chart.tsx

@@ -69,7 +73,8 @@ export interface ChartProps {
  disableTriggers?: LensEmbeddableInput['disableTriggers'];
  disabledActions?: LensEmbeddableInput['disabledActions'];
  input$?: UnifiedHistogramInput$;
-  lensTablesAdapter?: Record<string, Datatable>;
+  lensAdapters?: UnifiedHistogramChartLoadEvent['adapters'];


ℹ️ Instead of sending only the tables we now send all the adapters object to Lens flyout. With this way we can fetch correctly the active data. (Solves a bug currently in main more visible on this PR, check first bullet here

stratoula · 2023-09-19T07:21:45Z

x-pack/test/functional/apps/canvas/embeddables/lens.ts

@@ -83,7 +83,7 @@ export default function canvasLensTest({ getService, getPageObjects }: FtrProvid
        const panelHeader = await testSubjects.find('embeddablePanelHeading-');
        await dashboardPanelActions.openContextMenu(panelHeader);
        await dashboardPanelActions.clickEdit();
-        await await PageObjects.lens.saveAndReturn();
+        await PageObjects.lens.saveAndReturn();


ℹ️ Irrelevant with this change, I just saw it and decided to fix

ThomThomson

Functional test changes + small Embeddables changes LGTM! Also tested this out in chrome, and it feels really snappy and nice. What a great addition to the product!

One small nit, the labels in the editor make reference to drag and drop a field but there is no where to drag fields from!

davismcphee

Unified Histogram changes look good to me overall! I left a small nit, but nothing blocking. The "Cancel" and "Apply and close" buttons are definitely an improvement in Discover too.

The only issue I ran into when testing in Discover was that for some reason I couldn't interact with half the screen whenever the Lens flyout was open. Maybe some styles were introduced in this PR that caused it?

In main:

In this branch:

src/plugins/unified_histogram/public/chart/histogram.tsx

stratoula · 2023-09-26T08:06:46Z

@ThomThomson thanx a lot for your review. You can drag and drop fields from other dimensions so I don't think it is wrong
tbh 🤔

If you think that it is confusing though I can discuss with our ux writters!

Screenshot 2023-09-26 at 11 04 05 AM (2)

stratoula · 2023-09-26T08:17:31Z

The only issue I ran into when testing in Discover was that for some reason I couldn't interact with half the screen whenever the Lens flyout was open. Maybe some styles were introduced in this PR that caused it?

@davismcphee good catch! Fixed!

stratoula · 2023-09-26T12:48:44Z

The type check fails due to problems that exist in main and are not introduced by this PR

sphilipse

ent-search changes LGTM

ThomThomson · 2023-09-26T14:42:22Z

If you think that it is confusing though I can discuss with our ux writters!

Maybe this is just a symptom of the way I use Lens - I always drag fields in from the left. It could be worth re-visiting the copy, but I'd defer to you on it!

davismcphee

The Discover flyout issue is fixed! Thanks, LGTM 👍

src/plugins/unified_histogram/public/container/services/state_service.ts

kibana-ci · 2023-09-27T06:44:15Z

💔 Build Failed

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #10 / serverless common UI Avatar menu "before all" hook for "is displayed"

Metrics [docs]

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
`embeddable`	435	436	+1
`lens`	520	524	+4
total			+5

Async chunks

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

id	before	after	diff
`enterpriseSearch`	2.6MB	2.6MB	-2.0B
`lens`	1.3MB	1.4MB	+5.6KB
`unifiedHistogram`	48.6KB	48.9KB	+268.0B
total			+5.9KB

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
`lens`	61	60	-1

Page load bundle

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

id	before	after	diff
`embeddable`	77.7KB	77.7KB	+31.0B

Unknown metric groups

API count

id	before	after	diff
`embeddable`	535	536	+1
`lens`	617	622	+5
`unifiedHistogram`	53	55	+2
total			+8

References to deprecated APIs

id	before	after	diff
`lens`	112	115	+3

History

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

## Summary With the arrival of inline editing to Lens panels the [Create visualizations](https://www.elastic.co/guide/en/kibana/current/lens.html#create-the-visualization-panel) 'Edit and delete' section has been updated. Users can now use the option **Edit visualization** to make edits to Lens visualizations using a flyout panel, without having to leave the dashboard and go into the Lens application. The [Edit panels](https://www.elastic.co/guide/en/kibana/current/dashboard.html#edit-panels) section on the 'Dashboards and visualizations' page has been edited as the **Edit Lens** option has been removed from the UI. Relates to: #166169 & [#243](https://github.com/elastic/platform-docs-team/issues/243)

## Summary With the arrival of inline editing to Lens panels the [Create visualizations](https://www.elastic.co/guide/en/kibana/current/lens.html#create-the-visualization-panel) 'Edit and delete' section has been updated. Users can now use the option **Edit visualization** to make edits to Lens visualizations using a flyout panel, without having to leave the dashboard and go into the Lens application. The [Edit panels](https://www.elastic.co/guide/en/kibana/current/dashboard.html#edit-panels) section on the 'Dashboards and visualizations' page has been edited as the **Edit Lens** option has been removed from the UI. Relates to: elastic#166169 & [elastic#243](https://github.com/elastic/platform-docs-team/issues/243) (cherry picked from commit 5e84147)

# Backport This will backport the following commits from `main` to `8.11`: - [[DOCS] Inline editing in Lens (#170649)](#170649)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: amyjtechwriter <[email protected]>

stratoula added 11 commits September 11, 2023 15:45

[Lens] Inline editing of lens panels

636f9c5

Fix types CI check

5bd75d6

Merge branch 'main' into inline-editing-byvalue

e6167bc

Remove unecessary query check

97bb468

Revert

21a2b49

Fixes in initialization logic

bfaaba5

Some cleanup

b71a16c

Fix types

d99c926

Merge branch 'main' into inline-editing-byvalue

69e80bf

Fix jest test

fad8506

Remove test case

0029688

stratoula commented Sep 13, 2023

View reviewed changes

stratoula added 15 commits September 13, 2023 11:28

Some refactoring and props renaming

34d32a9

Display the action on dashboard edit mode and when the user has the p…

93020bb

…rivileges

Refactoring, fix the activeData refresh bug

cf620ad

Remove the reset button from Discover

0b18c38

Change the unified histogram implementation to get the embeddable out…

78f0ea2

…put$

Enable reset button in Discover

9bd9cdd

Navigate to the editor

02cfa2f

Merge branch 'main' into inline-editing-byvalue

a66be7e

fix translation

08d704c

Fix content management change and userMessages, add indexpattern chan…

be818f0

…ge support

Fixes broken jest tests

02a8884

Remove edit action and fix FTs

0e4b64b

Display clone panel

22ae74e

fixes the bug with adding a layer with another dataview

c48bd2a

Fix bugs concerning the indexpattern id

2dcc215

stratoula commented Sep 19, 2023

View reviewed changes

elastic deleted a comment from kibana-ci Sep 25, 2023

stratoula added 3 commits September 25, 2023 14:03

Removes dancing from the load annotations from library flyout

6f32df6

Merge branch 'main' into inline-editing-byvalue

f8f23e7

Merge branch 'main' into inline-editing-byvalue

441313e

ThomThomson approved these changes Sep 25, 2023

View reviewed changes

davismcphee reviewed Sep 26, 2023

View reviewed changes

src/plugins/unified_histogram/public/chart/histogram.tsx Outdated Show resolved Hide resolved

stratoula added 2 commits September 26, 2023 10:41

Merge branch 'main' into inline-editing-byvalue

5db6354

Fixes broken types

f64ac1b

stratoula requested a review from a team September 26, 2023 08:01

Fixes pointer events problem

ca55c78

stratoula added 3 commits September 26, 2023 12:25

Address PR comments

83ed9a4

Merge branch 'main' into inline-editing-byvalue

2e5f380

Merge branch 'main' into inline-editing-byvalue

dcdbe04

Merge branch 'main' into inline-editing-byvalue

dd1f8f5

sphilipse approved these changes Sep 26, 2023

View reviewed changes

davismcphee approved these changes Sep 26, 2023

View reviewed changes

src/plugins/unified_histogram/public/container/services/state_service.ts Outdated Show resolved Hide resolved

stratoula added 2 commits September 27, 2023 09:20

Fix

5d41f4f

Merge branch 'main' into inline-editing-byvalue

062ae4a

delanni merged commit 784411d into elastic:main Sep 27, 2023

amyjtechwriter mentioned this pull request Nov 6, 2023

[DOCS] Inline editing in Lens #170649

Merged

stratoula mentioned this pull request Nov 24, 2023

[Obs UX] Allow passing of selectable options in Lens charts #170842

Open

stratoula mentioned this pull request Jan 3, 2024

Regular flyout should work with the push flyout elastic/eui#7443

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Inline editing of lens panels on a dashboard or canvas #166169

[Lens] Inline editing of lens panels on a dashboard or canvas #166169

stratoula commented Sep 11, 2023 •

edited

Loading

stratoula Sep 13, 2023

stratoula Sep 19, 2023

stratoula Sep 19, 2023 •

edited

Loading

stratoula Sep 19, 2023

ThomThomson left a comment

davismcphee left a comment

stratoula commented Sep 26, 2023

stratoula commented Sep 26, 2023 •

edited

Loading

stratoula commented Sep 26, 2023

sphilipse left a comment

ThomThomson commented Sep 26, 2023

davismcphee left a comment

kibana-ci commented Sep 27, 2023 •

edited

Loading

API count

References to deprecated APIs

[Lens] Inline editing of lens panels on a dashboard or canvas #166169

[Lens] Inline editing of lens panels on a dashboard or canvas #166169

Conversation

stratoula commented Sep 11, 2023 • edited Loading

Summary

Changes

Discover

Dashboard

Known issues

Missing

Flaky tests runner

Panel focus

Checklist

stratoula Sep 13, 2023

Choose a reason for hiding this comment

stratoula Sep 19, 2023

Choose a reason for hiding this comment

stratoula Sep 19, 2023 • edited Loading

Choose a reason for hiding this comment

stratoula Sep 19, 2023

Choose a reason for hiding this comment

ThomThomson left a comment

Choose a reason for hiding this comment

davismcphee left a comment

Choose a reason for hiding this comment

stratoula commented Sep 26, 2023

stratoula commented Sep 26, 2023 • edited Loading

stratoula commented Sep 26, 2023

sphilipse left a comment

Choose a reason for hiding this comment

ThomThomson commented Sep 26, 2023

davismcphee left a comment

Choose a reason for hiding this comment

kibana-ci commented Sep 27, 2023 • edited Loading

💔 Build Failed

Failed CI Steps

Test Failures

Metrics [docs]

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

References to deprecated APIs

History

stratoula commented Sep 11, 2023 •

edited

Loading

stratoula Sep 19, 2023 •

edited

Loading

stratoula commented Sep 26, 2023 •

edited

Loading

kibana-ci commented Sep 27, 2023 •

edited

Loading