Add ability to create run from YAML [monaco]

[marniks7]

Changes

Add ability to create PipelineRun from yaml

• PipelineRun

• TaskRun

• Run

• Toggle
  

• Editor
  

• Namespace validation
  

• Backend error response handling
  

Submitter Checklist

As the author of this PR, please check off the items in this checklist:

• Docs included if any changes are user facing
• Tests included if any functionality added or changed
• Follows the commit message standard
• Meets the Tekton contributor standards (including
  functionality, content, code)
• Has a kind label. You can add one by adding a comment on this PR that contains /kind <type>. Valid types are bug, cleanup, design, documentation, feature, flake, misc, question, tep
• Release notes block below has been updated with any user facing changes (new features, significant UI changes, API changes, bug fixes, changes requiring upgrade notices or deprecation warnings)
• Release notes contains the string "action required" if the change requires additional action from users switching to the new release

Release Notes

NONE

[tekton-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
To complete the pull request process, please assign skaegi after the PR has been reviewed.
You can assign the PR to them by writing /assign @skaegi in a comment when ready.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[tekton-robot]

@marniks7: PR needs rebase.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[marniks7]

/kind feature

[tekton-robot]

Hi @marniks7. Thanks for your PR.

I'm waiting for a tektoncd member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[AlanGreene]

Thanks for the PR @marniks7. I'm really looking forward to having this functionality added to the Dashboard, and I know it'll make a lot of our users happy.

Overall the approach you've taken here looks good, I have some small suggestions for improvement / a little refactoring but I'll hold off on adding them for now. I have some concerns about the monaco editor, specifically related to its size (can be partly addressed via code splitting), usability on mobile / touch devices, etc. I'm looking into possible solutions / workarounds / alternatives and will post my initial review once I've finished that investigation, should be before Tuesday next week 🤞

[marniks7]

@AlanGreene , ok

Some notes:

• For monaco-editor it is possible to add autocompletion based on json schema and this will make it fully-featured yaml editor
• For ace (https://github.com/ajaxorg/ace), it is not supported Does ace JSON editor support auto-complete based on JSON schema? ajaxorg/ace#3885

[AlanGreene]

Thanks again @marniks7.

As I mentioned previously I have some concerns about Monaco and its dependencies:

• it's very heavy, adding ~7MB to our output, essentially quadrupling the size of the static resources to be served to the client
• experience on mobile / touch devices is pretty poor, with frequent overwriting, lines occasionally becoming segmented and difficult to edit in full, backspace / delete across newlines is fairly flaky, and a number of other issues. There doesn't seem to be much progress addressing any of these issues in the community, some of which have been open for 3+ years.

I've reviewed and tested out a number of other editors. So far CodeMirror looks like the only suitable alternative for our current needs. Specifically https://uiwjs.github.io/react-codemirror/. It's significantly lighter (adding ~300Kb to our output compared to Monaco's 7MB!), seems to work quite well on mobile / touch devices, and also supports extensions, completion, etc.

YAML syntax highlighting is provided via https://github.com/codemirror/legacy-modes

Similar to Monaco (and most editors it seems) it uses inline styles so we'll still have to relax our CSP rules to allow unsafe-inline. This is unfortunate but should be safe since we have other measures in place that prevent user provided markup / styles from being injected. We should still try to keep it reasonably restrictive, so maybe something like style-src 'self' 'unsafe-inline' if that works with it.

CodeMirror isn't quite as full-featured out of the box but seems just as flexible and has a large community and many extensions available.

I've also left a few other comments on the code changes. Let me know what you think.

[marniks7]

Closed in favor #2575