feat: display Priority Score in Snyk Code suggestions [IDE-30] #422
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Priority Score is rendered dynamically within the issue details. Co-authored-by: Jason Luong <[email protected]>
4 tasks
cat2608
changed the title
cat2608
force-pushed
the
feat/HEAD-938-add-priority-score
branch
from
011f8a0 to
527a185
Compare
`showSuggestionMeta` handles the dynamic generation of issue type, CWE links, issue position, and priority score.
Updated `severity` property in the `Suggestion` from a generic `string` to a specific union type: `'Low' | 'Medium' | 'High'`. This ensures that severity can only be one of these three explicit values.
The `toggleSeverityIcons` function updates the visibility of severity icons based on the `currentSeverity`. If `currentSeverity` is undefined, all icons are hidden.
cat2608
force-pushed
the
feat/HEAD-938-add-priority-score
branch
from
9c7b118 to
debe8bc
Compare
…gestion` This change aims to make clear that these variables are references to DOM elements, not values or other types of objects.
This change aims to avoid overwriting existing classes list by directly manipulating `className`.
cat2608
commented
Jan 7, 2024
Comment on lines
163
to
167
|
|
||
| function appendIdentifierSpan(identifiers: Element, id: string, link?: string) { | ||
| const delimiter = document.createElement('span'); | ||
| delimiter.innerText = ' | '; | ||
| delimiter.className = 'delimiter'; | ||
| identifiers.appendChild(delimiter); |
There was a problem hiding this comment.
When testing https://github.com/dexidp/dex I realised that we had an extra delimiter in Snyk Configuration Issue panel
| Before | After |
|---|---|
 |
 |
cat2608
commented
Jan 7, 2024
Comment on lines
+402
to
408
| // Append the priority score if available. | ||
| if (suggestion.priorityScore !== undefined) { | ||
| const priorityScoreElement = document.createElement('span'); | ||
| priorityScoreElement.className = 'suggestion-meta'; | ||
| priorityScoreElement.textContent = `Priority Score: ${suggestion.priorityScore}`; | ||
| metaElem.appendChild(priorityScoreElement); | ||
| } |
There was a problem hiding this comment.
If not available it the element is not added to the DOM
cat2608
commented
Jan 7, 2024
| /* eslint-disable @typescript-eslint/no-unsafe-assignment */ | ||
|
|
There was a problem hiding this comment.
I have decided to enable this rule with the idea that little by little we will add the missing types. I'm happy to revert it if the team finds it so.
cat2608
commented
Jan 7, 2024
Comment on lines
+197
to
+212
| const severityMap = { | ||
| Low: 1, | ||
| Medium: 2, | ||
| High: 3, | ||
| }; | ||
| return suggestion | ||
| ? { | ||
| value: stringMap[suggestion.severity], | ||
| text: suggestion.severity, | ||
| } | ||
| : undefined; | ||
|
|
||
| const severityAllowedValues = Object.keys(severityMap); | ||
| if (!severityAllowedValues.includes(severity)) { | ||
| return undefined; | ||
| } | ||
|
|
||
| return { | ||
| value: severityMap[severity], | ||
| text: severity, | ||
| }; | ||
| } |
There was a problem hiding this comment.
Refactored this function since the check suggestion ? {} : undefined didn't guarantee that suggestion contained a severity property or that severity contained valid values to match severityMap[suggestion.severity].
cat2608
commented
Jan 7, 2024
Comment on lines
+225
to
240
| function toggleSeverityIcons(severity: HTMLElement, currentSeverity: CurrentSeverity | undefined) { | ||
| const severityIcons = severity.querySelectorAll('img'); | ||
| const validIconsIds: { [key: number]: string } = { 1: 'sev1', 2: 'sev2', 3: 'sev3' }; | ||
|
|
||
| if (!currentSeverity) { | ||
| severityIcons.forEach(icon => (icon.className = 'icon hidden')); | ||
| return; | ||
| } | ||
|
|
||
| severity.setAttribute('title', currentSeverity.text); | ||
|
|
||
| severityIcons.forEach(icon => { | ||
| const currentIconId = validIconsIds[currentSeverity.value]; | ||
| icon.className = icon.id === currentIconId ? 'icon' : 'icon hidden'; | ||
| }); | ||
| } |
There was a problem hiding this comment.
I've opted for strict comparison icon.id === currentIconId instead of testing it with contains: n.id.includes(currentSeverity.value) to ensure matching
cat2608
changed the title
- Adjusted colors for 'added' and 'removed' elements to improve visibility in high contrast mode. - Ensured consistent background color for 'code' elements within 'added' and 'removed' sections. This commit addresses visual issues in the high contrast theme of VSCode.
bastiandoetsch
approved these changes
Jan 12, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Priority Score is rendered dynamically within the issue details.
The Priority Score will become available once the Language Server propagates it, as detailed in this PR: snyk/snyk-ls#425
Checklist
Screenshots / GIFs
priority-score.mp4