feat: enhance WorkloadsWithSBOM and vulnerabilities page with improved UI components and details link

Author: rbjornstad

src/lib/components/WorkloadsWithSBOM.svelte

@@ -21,7 +21,7 @@
 		Tooltip,
 		Tr
 	} from '@nais/ds-svelte-community';
-	import { CheckmarkIcon } from '@nais/ds-svelte-community/icons';
+	import { CheckmarkIcon, LinkIcon } from '@nais/ds-svelte-community/icons';
 	import type { WorkloadsWithSbomVariables } from './$houdini';
 	import WorkloadLink from './WorkloadLink.svelte';
 
@@ -71,6 +71,7 @@
 			$before: Cursor
 		) @load {
 			team(slug: $team) @loading {
+				slug
 				workloads(first: 10, orderBy: $orderBy, filter: $filter, after: $after, before: $before)
 					@paginate(mode: SinglePage)
 					@loading(count: 10) {
@@ -139,6 +140,21 @@
 			field: tableSort.orderBy || WorkloadOrderField.VULNERABILITY_SEVERITY_CRITICAL
 		});
 	};
+
+	const imageUrl = (workload: {
+		readonly __typename: string | null;
+		readonly id: string;
+		readonly name: string;
+		readonly environment: {
+			readonly id: string;
+			readonly name: string;
+		};
+		readonly team: {
+			readonly slug: string;
+		};
+	}) => {
+		return `/team/${workload.team.slug}/${workload.environment.name}/${workload.__typename === 'Application' ? 'app' : 'job'}/${workload.name}/image`;
+	};
 </script>
 
 {#if $query.data?.team}
@@ -154,6 +170,7 @@
 		<Thead>
 			<Tr>
 				<Th sortable={true} sortKey={WorkloadOrderField.NAME}>Workload</Th>
+				<Th>Details</Th>
 				<Th sortable={true} sortKey={WorkloadOrderField.ENVIRONMENT} style="width: 142px;"
 					>Environment</Th
 				>
@@ -203,6 +220,7 @@
 						<Td>
 							<WorkloadLink {workload} />
 						</Td>
+						<Td><div class="image-url"><a href={imageUrl(workload)}><LinkIcon /></a></div></Td>
 						<Td>
 							{workload.environment.name}
 						</Td>
@@ -389,4 +407,9 @@
 		align-items: center;
 		justify-content: center;
 	}
+	.image-url {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 </style>

src/routes/team/[team]/vulnerabilities/+page.svelte

@@ -10,7 +10,7 @@
 	import Vulnerability from '$lib/components/Vulnerability.svelte';
 	import WorkloadsWithSbom from '$lib/components/WorkloadsWithSBOM.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
-	import { Alert, HelpText, Select, Skeleton } from '@nais/ds-svelte-community';
+	import { Alert, Heading, HelpText, Select, Skeleton } from '@nais/ds-svelte-community';
 	import {
 		TrendDownIcon,
 		TrendFlatIcon,
@@ -52,13 +52,14 @@
 				{/if}
 
 				<div class="summary">
-					<h4>
-						<span>Vulnerability issues</span>
+					<div class="heading">
+						<Heading level="2" size="xsmall">Vulnerability summary</Heading>
 						<HelpText title="Current team vulnerability status"
 							>If any of the workloads have any vulnerability issues, the icon will show a warning
 							sign and a details link will show.
 						</HelpText>
-					</h4>
+					</div>
+
 					<div style="margin-top: 0.5rem;">
 						{#if team === PendingValue}
 							<Skeleton variant="text" style="min-height: 1rem; width: 10%;" />
@@ -87,7 +88,7 @@
 				</div>
 			</div>
 		</Card>
-		<Card columns={3} style="display: flex; align-items:center;">
+		<Card columns={3}>
 			<SummaryCard title="SBOM coverage" color="grey" styled={false}>
 				{#snippet icon()}
 					{#if team === PendingValue}
@@ -112,7 +113,7 @@
 				{/if}
 			</SummaryCard>
 		</Card>
-		<Card columns={3} style="display: flex; align-items:center;">
+		<Card columns={3}>
 			<SummaryCard title="Critical vulnerabilities" color={'grey'} styled={false}>
 				{#snippet icon()}
 					{#if team === PendingValue}
@@ -155,7 +156,8 @@
 			</SummaryCard>
 		</Card>
 		<Card columns={12}>
-			<h4>Workloads with SBOM</h4>
+			<Heading level="3" size="small">Workloads with SBOM</Heading>
+
 			<div class="env-filter">
 				<Select size="small" hideLabel={true} bind:value={selectedEnvironment} label="Environment">
 					<option value="">All environments</option>
@@ -200,13 +202,12 @@
 		width: 100%;
 		min-height: 80px;
 	}
-	.summary > h4 {
+
+	.heading {
 		display: flex;
 		justify-content: space-between;
 		margin: 0;
-		font-size: 1rem;
 		color: var(--color-text-secondary);
-		font-weight: bold;
 	}
 
 	.vulnerabilitySummary {