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 :sweat_smile:

[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? :thinking: Fixed by https://github.com/woodpecker-ci/woodpecker/pull/4353

[codecov[bot]]

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 :warning:

Additional details and impacted files

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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[woodpecker-bot]

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