error badge in team list

Author: andnorda

src/lib/components/list/List.stories.svelte

@@ -292,8 +292,8 @@
 
 <Story name="Teams">
 	<List>
-		{#each teams as team (team.slug)}
-			<TeamListItem {team} />
+		{#each teams as team, i (team.slug)}
+			<TeamListItem {team} errors={i} />
 		{/each}
 	</List>
 </Story>

src/lib/components/list/ListItem.svelte

@@ -11,9 +11,10 @@
 <style>
 	.list-item {
 		background-color: #f7f8f9;
-		display: flex;
-		justify-content: space-between;
+		display: grid;
+		grid-template-columns: 1fr auto;
 		align-items: center;
+		column-gap: var(--a-spacing-4);
 		padding: var(--a-spacing-4) var(--a-spacing-6);
 
 		&:hover {

src/lib/components/list/TeamListItem.svelte

@@ -3,7 +3,7 @@
 	import IconLabel from '../IconLabel.svelte';
 	import ListItem from './ListItem.svelte';
 
-	const { team }: { team: { slug: string; purpose: string } } = $props();
+	const { team, errors }: { team: { slug: string; purpose: string }; errors: number } = $props();
 </script>
 
 <ListItem>
@@ -15,4 +15,27 @@
 		level="3"
 		href="/team/{team.slug}"
 	/>
+	{#if errors}
+		<div class={['errors', { 'errors--long': `${errors}`.length > 2 }]}>
+			{errors}
+		</div>
+	{/if}
 </ListItem>
+
+<style>
+	.errors {
+		height: 2rem;
+		width: 2rem;
+		border-radius: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: var(--a-font-weight-bold);
+		background-color: var(--a-surface-danger);
+		color: var(--a-text-on-danger);
+
+		&.errors--long {
+			font-size: var(--a-font-size-medium);
+		}
+	}
+</style>

src/routes/+page.gql

@@ -17,6 +17,15 @@ query UserTeams @cache(policy: CacheAndNetwork) {
 						id
 						slug
 						purpose
+						workloads(first: 1000) {
+							nodes {
+								status {
+									errors {
+										__typename
+									}
+								}
+							}
+						}
 					}
 				}
 			}

src/routes/+page.svelte

@@ -4,14 +4,10 @@
 	import Pagination from '$lib/Pagination.svelte';
 	import { BodyLong, Button } from '@nais/ds-svelte-community';
 	import Logo from '../Logo.svelte';
-	import type { PageData } from './$houdini';
+	import type { PageProps } from './$houdini';
 	import Onboarding from './Onboarding.svelte';
 
-	interface Props {
-		data: PageData;
-	}
-
-	let { data }: Props = $props();
+	let { data }: PageProps = $props();
 
 	let UserTeams = $derived(data.UserTeams);
 	let tenantName = $derived(data.tenantName);
@@ -47,7 +43,12 @@
 				{#if $UserTeams.data.me.__typename == 'User'}
 					<List>
 						{#each $UserTeams.data.me.teams.nodes as node (node.team.id)}
-							<TeamListItem team={node.team} />
+							<TeamListItem
+								team={node.team}
+								errors={node.team.workloads.nodes.filter((w) =>
+									w.status.errors.some((e) => e.__typename === 'WorkloadStatusDeprecatedRegistry')
+								).length}
+							/>
 						{:else}
 							<BodyLong>
 								You don't seem to belong to any teams at the moment. You can create a new team or

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

@@ -41,7 +41,7 @@
 			rel="noopener noreferrer">Read more in Nais announcement</a
 		>.
 		<p>
-			{teamSlug} currently has {deprecatedImages.length}
+			{teamSlug} currently has <strong>{deprecatedImages.length}</strong>
 			workload{deprecatedImages.length === 1 ? '' : 's'} using
 			{deprecatedImages.length === 1
 				? 'a deprecated image registry'