RSC-1770: Vulnerability Counter, RSC-1771: Small Vulnerability Counter #1200

ValeriaRios02 · 2024-10-08T16:03:23Z

Jira ticket: https://sonatype.atlassian.net/browse/RSC-1769

Subtasks:

…rability_counter # Conflicts: # lib/src/base-styles/_nx-colors.scss

…_threat_counter

…rability_counter

…_threat_counter # Conflicts: # lib/src/util/vulnerabilityLevels.ts

…rability_counter

…_threat_counter

…rability_counter

…_threat_counter

…rability_counter

…_threat_counter

…rability_counter

…_threat_counter

…rability_counter

…_threat_counter # Conflicts: # gallery/src/jsUtilPages/VulnerabilityThreatLevelUtils/GetVulnerabilityLevelCategoryExample.ts

…rability_counter

gallery/src/components/NxVulnerabilityCounter/NxVulnerabilityCounterPage.tsx

rpokorny · 2024-10-11T16:15:39Z

gallery/src/pageConfig.ts

+    'Vulnerability Counter': { content: NxVulnerabilityCounterPage, type: 'react' },
    'Small Threat Counter': { content: NxSmallThreatCounterPage, type: 'react' },
+    'Small Vulnerability Counter': { content: NxSmallVulnerabilityCounterPage, type: 'react' },


I'd rather not commingle these with the Threat-related components. Move them to the bottom of the list where "V" would order naturally.

Modified the list here: d2833e7

Modified the list here: d2833e7

They should be after Overflow Tooltip

…erabilityCounterPage.tsx Co-authored-by: Ross Pokorny <[email protected]>

lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerabilityCounter.scss

rpokorny · 2024-10-11T16:29:09Z

Please add tech debt tickets to reduce the code duplication introduced here. Idk if we'll ever get to them but we should record it.

rpokorny · 2024-10-11T16:30:12Z

lib/src/components/NxSmallVulnerabilityCounter/__tests__/NxSmallVulnerabilityCounter.test.tsx

+
+    await runTimers();
+
+    const counter = component.getByTitle('Vulnerability: Critical (9.0\u201410.0)');


Replace the escape with the literal — throughout.

Replaced here: 57fd872

Replaced here: 57fd872

There's more of them; search the file.

lib/src/components/NxThreatCounter/NxThreatCounter.scss

…ilityCounter.scss Co-authored-by: Ross Pokorny <[email protected]>

…erabilityCounterPage.tsx Co-authored-by: Ross Pokorny <[email protected]>

rpokorny · 2024-10-11T21:21:49Z

lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerabilityCounter.scss

+@mixin counter-colors {
+  @each $severity in critical, high, medium, low, none {
+    &--#{$severity} {
+      background-color: var(--nx-color-vulnerability-#{$severity});


The rendered color here doesn't match the spec, at least for critical (I haven't checked the others yet). Are the color variables correct? Is this dependent on the changes in #1197 ?

rpokorny · 2024-10-11T21:24:36Z

lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerabilityCounter.scss

+}
+
+.nx-small-vulnerability-counter {
+  $height: 25px;


This value does't match the spec. The counters appear to only be 21px tall. Additionally you might not need to set the height explicitly, it'd be better to see if you can get it to just work out naturally with a careful choice of line-height. Be sure to take the borders into account - with your current styles the counters are actually 27px tall.

rpokorny · 2024-10-11T21:29:35Z

lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerabilityCounter.scss

+@use "../../scss-shared/nx-text-helpers";
+
+@mixin counter-colors {
+  @each $severity in critical, high, medium, low, none {


I don't see designs for the "none" vuln ratings level in figma.

rpokorny · 2024-10-11T21:31:53Z

lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerabilityCounter.scss

+
+.nx-small-vulnerability-counter-container {
+  display: inline-flex;
+  gap: var(--nx-spacing-2x);


Should be 4 not 8

rpokorny · 2024-10-11T21:32:34Z

lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerabilityCounter.scss

+  margin-left: var(--nx-spacing-2x);
+  margin-right: var(--nx-spacing-2x);


I don't see a spec for this though I do see that it matches NxSmallThreatCounter.

lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerabilityCounter.scss

rpokorny · 2024-10-11T21:34:25Z

lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerabilityCounter.scss

+      width: 100%;
+
+      // using the counter-colors mixin will override the zero styling in this use case
+      @include counter-colors;


The spec doesn't call this out. Check with @JasonDSwearingen that this is desired for this component just like NxSmallThreatCounter.

rpokorny · 2024-10-11T21:35:13Z

lib/src/components/NxThreatCounter/NxThreatCounter.scss

-@use '../../scss-shared/nx-text-helpers';
-@use '../../scss-shared/nx-dark-mode-helpers';
+@use "../../scss-shared/nx-text-helpers";
+@use "../../scss-shared/nx-dark-mode-helpers";


Extraneous change

rpokorny · 2024-10-11T21:37:51Z

The mockup linked in the ticket covers NxSmallVulnerabilityCounter but still not NxVulnerabilityCounter, as far as I'm seeing.

…ilityCounter.scss Co-authored-by: Ross Pokorny <[email protected]>

ValeriaRios02 added 30 commits September 11, 2024 11:32

created vulnerability counter base

bc4f956

built vulnerability counter, unit tests included

8cfba2e

built small vulnerability count components base

a2a6418

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1770_vulne…

9c21f7c

…rability_counter # Conflicts: # lib/src/base-styles/_nx-colors.scss

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1771_small…

ff0ae59

…_threat_counter

add colors for small vulnerability counter

0de82b7

updated styles for small vulnerabilty counter

6b5b6b7

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1770_vulne…

e6ded4e

…rability_counter

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1771_small…

6a9644d

…_threat_counter # Conflicts: # lib/src/util/vulnerabilityLevels.ts

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1770_vulne…

d367a42

…rability_counter

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1771_small…

ba5fbb0

…_threat_counter

added border color for zero small vuln counter

5a21896

changed border and color for zero small vuln counter

9adc851

brought unspecifed prop back

ebb3cea

added visual tests

209bbf8

added visual tests

9e49742

fixed eslint warnings

a7eb2cd

fixed eslint warnings

863c7bd

changed colors for vuln counter

a6784ae

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1770_vulne…

45d4069

…rability_counter

fixed colors according to design intructions

916ab45

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1771_small…

cea421b

…_threat_counter

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1770_vulne…

58a9604

…rability_counter

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1771_small…

5103c67

…_threat_counter

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1770_vulne…

49ff3e3

…rability_counter

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1771_small…

e0284f3

…_threat_counter

fixed eslint error

b5df616

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1770_vulne…

d3db15b

…rability_counter

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1771_small…

8f08ae5

…_threat_counter # Conflicts: # gallery/src/jsUtilPages/VulnerabilityThreatLevelUtils/GetVulnerabilityLevelCategoryExample.ts

Merge branch 'refs/heads/FEATURE_VULN_COMPONENTS' into RSC-1770_vulne…

8cc5e2d

…rability_counter

rpokorny reviewed Oct 11, 2024

View reviewed changes

gallery/src/components/NxVulnerabilityCounter/NxVulnerabilityCounterPage.tsx Outdated Show resolved Hide resolved

rpokorny reviewed Oct 11, 2024

View reviewed changes

ValeriaRios02 and others added 3 commits October 11, 2024 11:17

Update gallery/src/components/NxSmallVulnerabilityCounter/NxSmallVuln…

cbb1620

…erabilityCounterPage.tsx Co-authored-by: Ross Pokorny <[email protected]>

Update gallery/src/components/NxSmallVulnerabilityCounter/NxSmallVuln…

82deeb4

…erabilityCounterPage.tsx Co-authored-by: Ross Pokorny <[email protected]>

Update gallery/src/components/NxSmallVulnerabilityCounter/NxSmallVuln…

67bcd69

…erabilityCounterPage.tsx Co-authored-by: Ross Pokorny <[email protected]>

rpokorny reviewed Oct 11, 2024

View reviewed changes

lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerabilityCounter.scss Outdated Show resolved Hide resolved

rpokorny reviewed Oct 11, 2024

View reviewed changes

lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerabilityCounter.scss Outdated Show resolved Hide resolved

rpokorny reviewed Oct 11, 2024

View reviewed changes

lib/src/components/NxThreatCounter/NxThreatCounter.scss Outdated Show resolved Hide resolved

ValeriaRios02 and others added 10 commits October 11, 2024 11:34

fixed space error and added log for score

80678ec

added mention of CVSS ratings on docs

5db5cc7

small docs update

2ff2ef2

spelled out CVSS on docs

c9496b9

Update lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerab…

475af94

…ilityCounter.scss Co-authored-by: Ross Pokorny <[email protected]>

Update lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerab…

bed9bc7

…ilityCounter.scss Co-authored-by: Ross Pokorny <[email protected]>

replaced escape with literal

57fd872

reverted var changes on vuln counter

4654441

Update gallery/src/components/NxSmallVulnerabilityCounter/NxSmallVuln…

699d473

…erabilityCounterPage.tsx Co-authored-by: Ross Pokorny <[email protected]>

moved components to where the V is ordered

d2833e7

rpokorny reviewed Oct 11, 2024

View reviewed changes

lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerabilityCounter.scss Outdated Show resolved Hide resolved

rpokorny reviewed Oct 11, 2024

View reviewed changes

Update lib/src/components/NxSmallVulnerabilityCounter/NxSmallVulnerab…

c63fcb2

…ilityCounter.scss Co-authored-by: Ross Pokorny <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RSC-1770: Vulnerability Counter, RSC-1771: Small Vulnerability Counter #1200

RSC-1770: Vulnerability Counter, RSC-1771: Small Vulnerability Counter #1200

ValeriaRios02 commented Oct 8, 2024

rpokorny Oct 11, 2024

ValeriaRios02 Oct 11, 2024

rpokorny Oct 11, 2024

rpokorny commented Oct 11, 2024

rpokorny Oct 11, 2024

ValeriaRios02 Oct 11, 2024

rpokorny Oct 11, 2024

rpokorny Oct 11, 2024

rpokorny Oct 11, 2024 •

edited

Loading

rpokorny Oct 11, 2024

rpokorny Oct 11, 2024

rpokorny Oct 11, 2024

rpokorny Oct 11, 2024

rpokorny Oct 11, 2024

rpokorny commented Oct 11, 2024


		await runTimers();

		const counter = component.getByTitle('Vulnerability: Critical (9.0\u201410.0)');

		margin-left: var(--nx-spacing-2x);
		margin-right: var(--nx-spacing-2x);

RSC-1770: Vulnerability Counter, RSC-1771: Small Vulnerability Counter #1200

Are you sure you want to change the base?

RSC-1770: Vulnerability Counter, RSC-1771: Small Vulnerability Counter #1200

Conversation

ValeriaRios02 commented Oct 8, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rpokorny commented Oct 11, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rpokorny Oct 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rpokorny commented Oct 11, 2024

rpokorny Oct 11, 2024 •

edited

Loading