Changed input text to json-editor in flag variant form

[yosyad]

Description

In order to edit easily the variant attachment, I replaced the existing input to the same json editor that used in the evaluator on the same page.

Motivation and Context

I was trying to use flagr with a variant that has more than one key and found myself struggling with the input area. The existing input area was designed for using simple texts in forms, such as name or email, but not JSON.
In order to edit JSON, with syntax highlighting and auto-correct, out of the box, I found my self use the same component that was used on the same page.

How Has This Been Tested?

Tested locally, manually.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[codecov-io]

Codecov Report

Merging #258 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master   #258   +/-   ##
=====================================
  Coverage      82%    82%           
=====================================
  Files          26     26           
  Lines        1528   1528           
=====================================
  Hits         1253   1253           
  Misses        207    207           
  Partials       68     68

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0373eb2...c813a1e. Read the comment docs.

[saary]

@zhouzhuojie @yosyad Together with #259 we are basically allowing for very good user experience when editing more complex JSON attachment data.

Looking forward to seeing this merged.

[yosyad]

@zhouzhuojie I finished the design. It looks like the following image:

Please let me know if there is something more than I can do.

[zhouzhuojie]

just curious, if variant.attachment is not empty (null or {}), can we automatically show the attachment? Just want to highlight the visibility of non-empty attachment.

[yosyad]

@zhouzhuojie It seems like element-ui does not support manually setting the active flag, so I think that this is not possible to use out of the box capabilities.

[zhouzhuojie]

🎉 thanks! @yosyad

[saary]

🎉 Waiting for the official docker hub image :)