Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix yaml editor styling #11823

Merged

Conversation

mantis-toboggan-md
Copy link
Member

@mantis-toboggan-md mantis-toboggan-md commented Sep 4, 2024

Summary

Fixes #11701

Occurred changes and/or fixed issues

This PR fixes Codemirror styling (used in yaml editor and a couple other places). There were two main issues: this new library introduced new styles, which can be overwritten via prop (added here). The new library also had a hardcoded font value the old did not.

I also noticed some Codemirror elements are arranged differently. I left all this alone, I wouldn't consider it a bug and it looks better now anyway:
(old)
Screenshot 2024-09-03 at 9 20 51 AM
(new)
Screenshot 2024-09-03 at 9 20 46 AM

The resize nullpx nullpx message reported in #11701 is a known issue with the library rennzhang/codemirror-editor-vue3#54

Technical notes summary

Areas or cases that should be tested

'View as Yaml' and 'Edit as Yaml' pages
Create/edit a configmap with json values
Detail view of a resource with json annotations

Screenshot/Video

(old)
Screenshot 2024-09-04 at 9 23 42 AM

(new)
Screenshot 2024-09-04 at 9 18 19 AM

(old)
Screenshot 2024-09-04 at 9 18 08 AM

(new)
Screenshot 2024-09-04 at 9 25 04 AM

(old)
Screenshot 2024-09-04 at 9 26 08 AM

(new)
Screenshot 2024-09-04 at 10 10 11 AM

Checklist

  • The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
  • The PR has a Milestone
  • The PR template has been filled out
  • The PR has been self reviewed
  • The PR has a reviewer assigned
  • The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
  • The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes

@mantis-toboggan-md mantis-toboggan-md force-pushed the vue3-fix-codemirror-style branch 2 times, most recently from 3119ae2 to ebfbecd Compare September 4, 2024 16:45
@mantis-toboggan-md mantis-toboggan-md marked this pull request as ready for review September 4, 2024 16:48
@mantis-toboggan-md mantis-toboggan-md added this to the v2.10.0 milestone Sep 4, 2024
@cnotv cnotv self-requested a review September 18, 2024 12:44
Copy link
Contributor

@cnotv cnotv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Screenshot 2024-09-18 at 14 55 37
Screenshot 2024-09-18 at 14 56 44

@mantis-toboggan-md mantis-toboggan-md merged commit 2dbcd6c into rancher:master Sep 18, 2024
31 checks passed
nwmac pushed a commit to nwmac/dashboard that referenced this pull request Oct 24, 2024
* fix codemirror styling

* fix keyvalue codemirror style

* fix codemirror json annotation display

* fix fold gutters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Vue3: Yaml editor and other codemirror components' theme rendering is off
2 participants