DevTools: Should be able to add a prop that is not yet set

[bvaughn]

Right now I can inspect a component and edit its props but I could not find a way to add a new prop that wasn't already set.

---

Originally reported by @steveluscher via bvaughn/react-devtools-experimental#300

[hristo-kanchev]

I'm currently playing around with this and I would like to get some feedback regarding the visual representation of it.

I presume that we should be able to support more complex data structures, right?

[bvaughn]

I like the "+" button.

I think we should probably use JSON.parse to accept new input types, so that would enable strings/ints/booleans/objects/arrays.

FWIW, Style editor already does this (and has an "invalid" style for things that can't be parsed, and single quotation mark handling) so we should use it for prior art.

[hristo-kanchev]

Awesome! Thanks @bvaughn. I'm on it 🚀

[bvaughn]

By the way, it sounds like this work highly overlaps with #16476. Just mentioning that to make sure you're aware :)

[hristo-kanchev]

@bvaughn What do you think of this style of editing props?

It's aligned with the style editor. 😄

If you are cool with this I can start preparing the branch. 🎉

👇

Number -> String -> null -> Number

---

👇
String -> Object

[bvaughn]

That looks really nice. Let's do it!

[hristo-kanchev]

That looks really nice. Let's do it!

Cool! I'll try and get it finished by the end of the week. I'll ping you when it's done.
Thanks for the feedback Brian!

[hristo-kanchev]

Update: Almost done! Just finishing up some styling tweaks. PR should be open tomorrow :)