[FEATURE]: add clone icon button to the dashboard variable

[shahrokni]

Closes perses/perses#3771

Description 🖊️

This feature lets users clone dashboard variables. I am not sure if it makes sense to have it for the external variables, so this is only for the internal ones.

Checklist

• Pull request has a descriptive title and context useful to a reviewer.
• Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
  following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
• All commits have DCO signoffs.

UI Changes

• Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
• Code follows the UI guidelines.
• E2E tests are stable and unlikely to be flaky.
  See e2e docs for more details. Common issues include:
  • Is the data inconsistent? You need to mock API requests.
  • Does the time change? You need to use consistent time values or mock time utilities.
  • Does it have loading states? You need to wait for loading to complete.

[andreasgerstmayr]

Suggested change

	spec: { ...v.spec, value: v.spec.value, name: `${v.spec.name}_copy` },
	spec: { ...v.spec, name: `${v.spec.name}_copy` },

I think this is redundant, as ...v.spec already copies all properties of v.spec, including value. Then we don't need the if. Or am i missing something?

[shahrokni]

I had the same idea, but TS throws an exception :(

Property 'value' is missing in type '{ defaultValue?: VariableValue; allowMultiple: boolean; allowAllValue: boolean; customAllValue?: string; capturingRegexp?: string; sort?: string; plugin: Definition<...>; name: VariableName; display?: VariableDisplay; }' but required in type 'WritableDraft'.ts(2345)
variables.d.ts(17, 5): 'value' is declared here.

[andreasgerstmayr]

strange, ok.

Another potential issue: The current code does a shallow clone, for example v.spec.display on the clone will reference to the display property of the original variable.

I'm not sure if this is an issue when using immer. Could you test to clone a variable, and click hide on the original variable (which sets spec.display.hidden) and make sure the cloned variable is not hidden?

[Gladorme]

I thought we could remove the if condition, but TS is not happy, except if we force with as 😒 Maybe we should enforce with as in this case and remove a if.

[AntoineThebaud]

please add this new button after the Edit one (next one), as people are more likely to edit variables rather than duplicating them.

As a side note: there may be a broader UX topic to address here but out of scope of this issue

[shahrokni]

Like this?