Add synchronize team

Author: thokra-nav

src/lib/GraphErrors.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Alert, Button } from '@nais/ds-svelte-community';
+
+	type error = { message: string };
+
+	export let size: 'small' | 'medium' = 'medium';
+	export let errors: error[];
+	export let dismissable = false;
+
+	const pick = (errors: error[]) => {
+		const unique: string[] = [];
+		errors.forEach((error) => {
+			if (!unique.includes(error.message)) {
+				unique.push(error.message);
+			}
+		});
+		return unique;
+	};
+</script>
+
+{#if errors.length > 0}
+	<Alert variant="error" {size}>
+		{#each pick(errors) as error}
+			{error}
+		{/each}
+		{#if dismissable}
+			<Button variant="tertiary" size="small" on:click={() => (errors = [])}>Dismiss</Button>
+		{/if}
+	</Alert>
+{/if}

src/routes/team/[team]/(teamTabs)/settings/+page.svelte

@@ -3,6 +3,7 @@
 	import { page } from '$app/stores';
 	import { PendingValue, graphql } from '$houdini';
 	import Card from '$lib/Card.svelte';
+	import GraphErrors from '$lib/GraphErrors.svelte';
 	import Time from '$lib/Time.svelte';
 	import { Alert, Button, CopyButton, Loader, Modal, Skeleton } from '@nais/ds-svelte-community';
 	import {
@@ -11,6 +12,7 @@
 		EyeIcon,
 		EyeSlashIcon
 	} from '@nais/ds-svelte-community/icons';
+	import { slide } from 'svelte/transition';
 	import type { PageData } from './$houdini';
 	import EditText from './EditText.svelte';
 
@@ -103,6 +105,16 @@
 		const [, projectId, , location, , repository] = repo.split('/');
 		return `${location}-docker.pkg.dev/${projectId}/${repository}`;
 	};
+
+	const synchronizeTeam = graphql(`
+		mutation SynchronizeTeam($slug: Slug!) {
+			synchronizeTeam(slug: $slug) {
+				correlationID
+			}
+		}
+	`);
+
+	let synchronizeClicked = false;
 </script>
 
 {#if $TeamSettings.errors}
@@ -232,7 +244,32 @@
 			{/if}
 		</Card>
 		<Card columns={6}>
-			<h3>Managed resources</h3>
+			<h3 class="with_button">
+				Managed resources
+				<Button
+					size="xsmall"
+					variant="secondary"
+					loading={$synchronizeTeam.fetching}
+					on:click={async () => {
+						await synchronizeTeam.mutate({ slug: team });
+						synchronizeClicked = true;
+					}}
+				>
+					Synchronize team
+				</Button>
+			</h3>
+			{#if $synchronizeTeam.errors}
+				<GraphErrors errors={$synchronizeTeam.errors} dismissable={true} />
+			{:else if synchronizeClicked}
+				<div transition:slide={{ duration: 200 }}>
+					<Alert variant="success" size="small">
+						Synchronization started, team resources will soon be updated.
+						<Button size="xsmall" variant="tertiary" on:click={() => (synchronizeClicked = false)}>
+							Dismiss
+						</Button>
+					</Alert>
+				</div>
+			{/if}
 			{#if teamSettings.id === PendingValue}
 				<Loader />
 			{:else}
@@ -412,4 +449,10 @@
 		flex-direction: row;
 		gap: 0.5rem;
 	}
+
+	h3.with_button {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
 </style>