UI: allow to edit YAML

[aabedraba]

AC: All the pages that need to support it:

• Test Source
• Test
• TestSuite
• Webhook (no definition right now)
• TestTrigger (no definition right now)

At the moment, we start with something simple and once we need a more complex solution we might move to Monaco.

[aabedraba]

Figma files: https://www.figma.com/file/asfUPepLHtyutWWR0pNGfK/Testkube-V2?type=design&t=FlAmEDsLeDdoOlW9-0

[aabedraba]

@rangoo94 after I discussed with @fivenp we think it's better if we go with Monaco for now to support validation/autocomplete. I attached figma files so you can see how the experience looks like, perhaps we can only lazy load monaco when the "edit mode" is on, which should improve things. Comments?

[fivenp]

I personally would like to see 2 POCs to be able to say whether it's worth to go with a custom build solution or not....

1 – attach monaco with some autocomplete in one PR 2 – create a more lighter experience (with some autocomplete?) in another PR

then we can really "feel" if it's worth the effort or if monaco feels as slick as the other solution

perhaps we can only lazy load monaco when the "edit mode" is on, which should improve things

Keep in mind – edit mode will be automatically on for everyone who navigates to the definition of a resource on OSS

[rangoo94]

@aabedraba, sure, we may see how Monaco Editor will integrate. If we will not encounter problems, it's an option.

To do that:

• We need to integrate Monaco Editor (with lazy load)
• We need to test yaml official language or Monokle's unofficial monaco-kubernetes custom language
• We need to test if schemas will be able to validate our CRDs

It has a few obvious downsides:

• it's big, editor solely will weight 10x more than our whole application does
• it's complex and not lightweight

And advantages:

• there is a chance that it will easily integrate will full-featured editor

[rangoo94]

@fivenp,

1 – attach monaco with some autocomplete in one PR 2 – create a more lighter experience (with some autocomplete?) in another PR

To be fair, if we want to have autocomplete and validation - we need to either make our own solution or use Monaco.

Own solution will take ~1 week (up to 2 weeks with improvements/fixes), Monaco - it depends on how smoothly it will go. Because of that, I would suggest trying Monaco, and only if we will decide that it's not possible or it's wrong idea - spend effort on our solution.

Alternatively, as a "lightweight" solution we could use something like react-ace or other libraries, but I don't know of any that would provide us with autocomplete/validation. It will take shorter time though

[aabedraba]

@rangoo94 thanks so much for the review! Let's do Monaco and evaluate.

[aabedraba]

@fivenp can you provide the Figma designs for this?

[fivenp]

https://www.figma.com/file/asfUPepLHtyutWWR0pNGfK/Testkube-V2?type=design&node-id=3377-118885&t=q8U95cYwuybBBntz-4

[aabedraba]

@fivenp do you have an idea of what the UI should look like before updating?

[rangoo94]

@aabedraba, what do you mean by before updating?

[aabedraba]

@fivenp when landing in the Definitions tab, I don't know if I'd offer the user the possiblity to directly edit the YAML. Instead I'd give them a "Edit" button (that's what I mean with before updating). Hopefully this can also help not loading Monaco ahead of the editing experience.

[fivenp]

I'd like to try out the approach of enabling Monaco right away – whenever you go to a definition page.

I know it'll be overhead – and potentially slow – but from a UX perspective this is the slickest experience if you want to edit I simply hope we'll not have too many loading implications with Monaco and it will still feel smooth :)

[rangoo94]

The feature has landed in v1.13.0. You may run testkube upgrade command to install the latest version.