[Lens] Duplicate layers

[alexwizp]

Closes: #132140

Describe the feature:
Added the ability to clone Data / Annotations / Reference line layers

What was changed:

• LayerButtons component was added. If we have more than 2 actions, then a Сontext Menu appears;
• remove_layer_button.tsx was refactored to work from Context Menu;
• x-pack/plugins/lens/public/utils.ts added new generic method (renewIDs) to renew ids';
• some JEST tests were added.

Notes:
For visualizations that do not support working with layers, the design of the button has not changed.

Screens:

1. CloningData Layers

Screen.Recording.2022-09-16.at.18.00.37.mov

2. Cloning 'Annotations'

Screen.Recording.2022-09-16.at.18.02.51.mov

3. Cloning 'Reference Lines'

Screen.Recording.2022-09-16.at.18.04.03.mov

[alexwizp]

@elasticmachine merge upstream

[alexwizp]

not related to that PR, just a removing unused code

[elasticmachine]

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

[alexwizp]

@elasticmachine merge upstream

[mbondyra]

Very nicely written code and I couldn't find any problems with the solution 👏🏼
I think recursively updating ids is fine and works well.

One nit UX thing is that maybe we should not allow to clone an empty layer? So when it's empty, let's not show the option or disable it. Do you think it'd be easy to add?

[alexwizp]

One nit UX thing is that maybe we should not allow to clone an empty layer? So when it's empty, let's not show the option or disable it. Do you think it'd be easy to add?

It's probably not hard to do, I just don't like that in this case, some layers will have a context menu and some only delete button(if they are empty) + there will be separate logic for annotations.
I vote to leave it as it is, @MichaelMarcialis , could you take a look?

[drewdaemon]

Really nice work. I will be using the layer context menu when I address #8143, so it's nice to see it being added!

WDYT about renaming the following files?

• layer_buttons -> layer_actions
• clone_layer_button.tsx -> clone_layer_action.tsx
• remove_layer_button.tsx -> remove_layer_action.tsx

[MichaelMarcialis]

Thanks for putting this together, @alexwizp. This looks lovely! I'm leaving you a few comments below for your review, but nothing worth holding you up over. Assuming you can address them, I'm approving now.

• Similar to my code comment below, can we also remove the index number that is currently being appended to the Delete layer and Reset layer actions?

• Can the content menu text for Delete layer and Reset layer be changed to red to match the icon?

• Can we change all Reset layer text to Clear layer?

• Regarding whether or not we should hide or disable the duplicate action when a layer has no dimensions populated, I think it's fine to leave it as it is currently (i.e. allow users to duplicate empty layers). It essentially just ends up functioning as if the user created a new visualization layer, so I don't see it harming the user experience to allow it.

[alexwizp]

Thank you @andrewctate @MichaelMarcialis. Will apply your comments tomorrow morning

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: a0f8b81

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
lens	906	909	+3

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
lens	553	557	+4

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.2MB	1.2MB	+3.9KB

Unknown metric groups

API count

id	before	after	diff
lens	640	645	+5

History

• 💔 Build #73488 failed 00c5c66
• 💔 Build #73449 failed fdb8e2c
• 💚 Build #73373 succeeded cc8014d
• 💚 Build #73227 succeeded 4feb716
• 💚 Build #73088 succeeded 242c257

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

cc @alexwizp