feat: refactor VulnerabilitySummary components and add TeamOverview query

Author: rbjornstad

src/lib/components/VulnerabilitySummary.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { graphql, PendingValue } from '$houdini';
+	import { graphql } from '$houdini';
+	import { Heading } from '@nais/ds-svelte-community';
 	import type { VulnerabilitySummaryVariables } from './$houdini';
-	import RiskStack from './RiskStack.svelte';
+	import VulnerabilityBadges from './VulnerabilityBadges.svelte';
 
 	interface Props {
 		teamSlug: string;
@@ -34,19 +35,19 @@
 </script>
 
 {#if team}
-	<div class="wrapper">
-		{#if team.vulnerabilitySummary && team.vulnerabilitySummary !== PendingValue}
-			<RiskStack summary={team.vulnerabilitySummary} />
+	<div class="summary">
+		<Heading level="4" size="small" spacing>Vulnerabilities</Heading>
+		{#if team.vulnerabilitySummary}
+			<VulnerabilityBadges summary={team.vulnerabilitySummary} />
 		{/if}
 		<a href="/team/{teamSlug}/vulnerabilities">View team vulnerabilites</a>
 	</div>
 {/if}
 
 <style>
-	.wrapper {
+	.summary {
 		display: flex;
 		flex-direction: column;
 		gap: var(--a-spacing-1);
-		align-items: start;
 	}
 </style>

src/lib/components/VulnerabilitySummaryNew.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { graphql, PendingValue } from '$houdini';
+	import type { VulnerabilitySummaryNewVariables } from './$houdini';
+	import RiskStack from './RiskStack.svelte';
+
+	interface Props {
+		teamSlug: string;
+	}
+
+	let { teamSlug }: Props = $props();
+
+	export const _VulnerabilitySummaryNewVariables: VulnerabilitySummaryNewVariables = () => {
+		return { team: teamSlug };
+	};
+
+	const vulnerabilities = graphql(`
+		query VulnerabilitySummaryNew($team: Slug!) @cache(policy: NetworkOnly) @load {
+			team(slug: $team) @loading {
+				vulnerabilitySummary @loading {
+					critical
+					high
+					low
+					medium
+					riskScore
+					unassigned
+					bomCount
+					coverage
+				}
+			}
+		}
+	`);
+
+	let team = $derived($vulnerabilities.data?.team);
+</script>
+
+{#if team}
+	<div class="wrapper">
+		{#if team.vulnerabilitySummary && team.vulnerabilitySummary !== PendingValue}
+			<RiskStack summary={team.vulnerabilitySummary} />
+		{/if}
+		<a href="/team/{teamSlug}/vulnerabilities">View team vulnerabilites</a>
+	</div>
+{/if}
+
+<style>
+	.wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: var(--a-spacing-1);
+		align-items: start;
+	}
+</style>

src/routes/team/[team]/+page.gql

@@ -1,83 +1,5 @@
 query TeamOverview($team: Slug!) @cache(policy: NetworkOnly) {
 	team(slug: $team) {
-		workloads(first: 9999, orderBy: { field: STATUS, direction: DESC }) {
-			pageInfo {
-				endCursor
-				hasNextPage
-				hasPreviousPage
-				pageEnd
-				pageStart
-				startCursor
-				totalCount
-			}
-
-			edges {
-				node {
-					id
-					__typename
-					name
-					status {
-						state
-					}
-					team {
-						slug
-					}
-					environment {
-						name
-					}
-					deployments {
-						nodes {
-							createdAt
-						}
-					}
-					status {
-						state
-
-						errors {
-							__typename
-							... on WorkloadStatusVulnerable {
-								summary {
-									riskScore
-								}
-							}
-							...AppErrorFragment
-						}
-					}
-
-					... on Application {
-						instances {
-							pageInfo {
-								totalCount
-							}
-							edges {
-								node {
-									status {
-										state
-										message
-									}
-								}
-							}
-						}
-					}
-					... on Job {
-						runs {
-							pageInfo {
-								totalCount
-							}
-							edges {
-								node {
-									startTime
-									status {
-										state
-										message
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-		#...TeamDeployments
+		...TeamDeployments
 	}
 }