feat: ai fix html [IDE-375]

[teodora-sandu]

Description

Moves over the common HTML and styling from VSCode so that eventually it can be used to render this panel in IntelliJ. In snyk/vscode-extension#467 we can see the changes needed to add extra styling and javascript for VSCode and in snyk/snyk-intellij-plugin#541 we completely hide this panel for IntelliJ.

Checklist

• Tests added and all succeed
• Linted
• README.md updated, if user-facing
• License file updated, if new 3rd-party dependency is introduced

🚨After having merged, please update the CLI go.mod to pull in latest language server.

Screenshots / GIFs

See screenshots in linked PRs.

[teodora-sandu]

I think we can simplify a lot of this code by just adding an onclick attribute to these elements and in IntelliJ and VSCode we only implement the functions that these elements use. The changes are already complicated enough in this PR and its other two in our IDEs so I'd like to do that in a follow-up if there's time.

[cat2608]

The mark-up is 😍 , thank you!
It seems that there are some issues with the listeners injected from the IDE? You can see that error when switching between issues.

[teodora-sandu]

How did you manage to test this view? The consistent ignores backend is broken at the moment (it was broken on Friday and I explained in the PR description and it seems still broken today), so I haven't been able to test this part of the UI (where we have an ignored issue)

[cat2608]

In dev, everything is working fine 🙌

[cat2608]

Also, did we say that is the issue is ignored, we don't show AI Fixes? I'm not sure now and I can't find references to this case.

[teodora-sandu]

Based on the designs we're meant to show the Fix Analysis tab: https://www.figma.com/design/hcI2QHUtHfcIjgrpYlMqff/Holistic-Ignores?node-id=2292-64060&t=nsuVsneQwSDwzp71-4.

[teodora-sandu]

Thanks it does work in dev indeed! I've pushed a fix in snyk/vscode-extension@b21e406

[cat2608]

All rendering looks awesome! Just the JS seems to not work sometimes. I'm approving it so we can continue it in later iterations since you said you'd like to inline the onclicks :)

[teodora-sandu]

Just the JS seems to not work sometimes.

Which JS is that @cat2608 ? I probably will raise a ticket to add the onclicks because I think the manual testing of the feature is more important than code improvements at this moment, so if there are parts of the JS that don't work maybe I can work on those instead

[cat2608]

@teodora-sandu this was my setup when testing your change and when I left my comment here

• LS: feat/ai-fix-html at aec12f5
• vscode-plugin: feat/ai-fix-html at eb5c2aee5a60eea04288c0721d0909a1c5357688

event-listeners-error.mp4

---

Now I can see that you have added b21e4068514cf60caa82c48230e71b0c7c87c734 in vscode-plugin which reads fix: add event listener conditionally. I tested it again and the issue about the event listeners has gone! 🙌

The only thing remaining is the Fix Action itself:

action-missing.mp4

[teodora-sandu]

Ah the error you're seeing is a backend error, the call to get the fix diffs seems to return null. The AI fixes were not working on Friday and they seem to still be slightly broken today. I will cover that in https://snyksec.atlassian.net/browse/IDE-380. If you apply the patch I provide in the PR description it does work correctly, because it's using the old backend