Support copying component from one page to the other page of an app

[prakhargupta1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Problem: I have 2 pages, both well-built. Now I want to merge them but don't want to start building the component from scratch. Currently, there is no option but to start from scratch.

Solution: Allow, copying components from 1 page to the other. When copying, I would expect all bindings and styling to be copied. I should then manually be able to create a query to make the component work. But copying the query separately would also help here.

Examples 🌈

No response

Motivation 🔦

No response

[bytasv]

When copying, I would expect all bindings and styling to be copied

When copying something that has bindings to say query or other components, should we also copy over all the things that it's bound to?

[prakhargupta1]

When copying something that has bindings to say query or other components, should we also copy over all the things that it's bound to?

No, not other queries or components. Basically all text information that a user wrote in that component props, should be copied. Then they would manually change component names, queries, styling according to the new page construct.

[Janpot]

I'm also wondering how we'd deal with bindings.

• Do we just copy them verbatim?
• What if the target page contains state with the same name?
• Bindings are currently in no way introspected. If elements have to be renamed, how would we update the bindings for these elements?

[bytasv]

So suppose I'm copying a Grid component which is currently bound to some query - does the row prop simply become empty or should we copy whatever data is set as value right now and use it as default? (1st option is obviously more straight forward and predictable IMO, and to make things simpler I would propose doing that)

[prakhargupta1]

I meant something like this: The text gets copied with error.

And when there was blank query with the name employee_1. It didn't throw any error and just binded both.

[bytasv]

I'd propose to make matters simpler in the first iteration do a simple copy/paste which would drop all bindings and use whatever value is assigned 🤔 seeing how it works in toolpad, we can iterate after that and figure out how we would deal with bindings (if we wanted to)