Improve linter messages in UI

[xoxys]

• Render linter errors as markdown string and convert it to HTML in frontend
• Unify wording a bit
• Restructure grid to improve mobile view
• Use existing DocsLink component

---

Before:

After:

[6543]

tests fail 😅

[qwerty287]

Do we have to use markdown? Can't we just directly use HTML so we don't need an additional parser in the frontend?

[xoxys]

The error messages will also be used in CLI IIRC. So while the backticks also look ok on the CLI HTML does not.

[xoxys]

I would also like to avoid the possibility to inject complex HTML (classes etc.) from the backend in the frontend, so I think markdown supports basic formatting while we don't need to worry about injected HTML breaks the frontend formatting. But that might be my personal impression only.

[qwerty287]

OK get your point, but I somehow worry about the size of the frontend as it increases and increases... Yes, probably this one is not the big problem but still it's better to use native features.

[xoxys]

Agree with that. What should we do in this particular case? IMO, properly formatting the linter messages in the UI is valuable and makes it more readable.

[xoxys]

The remaining test failure looks unrelated to my code changed? 🤔 Fixed by #4353

[codecov]

Codecov Report

Attention: Patch coverage is 82.35294% with 3 lines in your changes missing coverage. Please review.

Project coverage is 27.32%. Comparing base (04e8309) to head (ccd7d36).
Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
pipeline/frontend/yaml/linter/linter.go	82.35%	3 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4351   +/-   ##
=======================================
  Coverage   27.32%   27.32%           
=======================================
  Files         379      379           
  Lines       27757    27757           
=======================================
  Hits         7584     7584           
  Misses      19488    19488           
  Partials      685      685           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[woodpecker-bot]

Tearing down https://woodpecker-ci-woodpecker-pr-4351.surge.sh