refactor: update severityToColor function to accept an object and adjust usage in components

Author: rbjornstad

src/lib/components/Vulnerability.svelte

@@ -18,7 +18,7 @@
 {:else if count === PendingValue}
 	<Skeleton variant="circle" width={size} height={size} />
 {:else if count > 0}
-	<VulnerabilityBadge text={String(count)} color={severityToColor(severity)} {size} />
+	<VulnerabilityBadge text={String(count)} color={severityToColor({ severity: severity })} {size} />
 {:else}
 	<code class="check">&check;</code>
 {/if}

src/lib/components/VulnerabilityBadges.svelte

@@ -32,7 +32,7 @@
 			{#each categories as category (category)}
 				<BodyShort
 					class="vulnerability-count"
-					style="background-color: {severityToColor(category)}"
+					style="background-color: {severityToColor({ severity: category })}"
 				>
 					{summary[category]}
 				</BodyShort>

src/lib/components/WorkloadsWithSBOM.svelte src/lib/components/WorkloadsWithVulnerabilities.svelte

@@ -204,8 +204,11 @@
 					</Td>
 					<Td><code>{v.package}</code></Td>
 					<Td
-						><code style="color: {severityToColor(v.severity.toLocaleLowerCase(), true)}"
-							>{v.severity}</code
+						><code
+							style="color: {severityToColor({
+								severity: v.severity.toLocaleLowerCase(),
+								isText: true
+							})}">{v.severity}</code
 						></Td
 					>
 					<Td style="text-align: center">

src/lib/components/image/ImageVulnerabilities.svelte

@@ -1,4 +1,10 @@
-export function severityToColor(severity: string, isText?: boolean): string {
+export function severityToColor({
+	severity,
+	isText
+}: {
+	severity: string;
+	isText?: boolean;
+}): string {
 	if (isText) {
 		switch (severity) {
 			case 'critical':

src/lib/utils/vulnerabilities.ts

@@ -8,7 +8,7 @@
 	import CircleProgressBar from '$lib/components/CircleProgressBar.svelte';
 	import SummaryCard from '$lib/components/SummaryCard.svelte';
 	import Vulnerability from '$lib/components/Vulnerability.svelte';
-	import WorkloadsWithSbom from '$lib/components/WorkloadsWithSBOM.svelte';
+	import WorkloadsWithVulnerabilities from '$lib/components/WorkloadsWithVulnerabilities.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import { Alert, Heading, HelpText, Select, Skeleton } from '@nais/ds-svelte-community';
 	import {
@@ -152,7 +152,7 @@
 			</SummaryCard>
 		</Card>
 		<Card columns={12}>
-			<Heading level="3" size="small" spacing>Workloads with SBOM</Heading>
+			<Heading level="3" size="medium" spacing>Workloads with vulnerabilities</Heading>
 
 			<div class="env-filter">
 				<Select size="small" hideLabel={true} bind:value={selectedEnvironment} label="Environment">
@@ -168,7 +168,7 @@
 					{/if}
 				</Select>
 			</div>
-			<WorkloadsWithSbom team={teamSlug} environment={selectedEnvironment} />
+			<WorkloadsWithVulnerabilities team={teamSlug} environment={selectedEnvironment} />
 		</Card>
 	</div>
 {/if}