Add GitHub and Slack icons to team page header and display team info

rbjornstad · rbjornstad · commit fb8875d599d4 · 2025-03-17T14:36:16.000+01:00
diff --git a/src/lib/components/UrlBasedPageHeader.svelte b/src/lib/components/UrlBasedPageHeader.svelte
@@ -1,9 +1,54 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import GitHubIcon from '$lib/icons/GitHubIcon.svelte';
+	import SlackIcon from '$lib/icons/SlackIcon.svelte';
 	import { urlToPageHeader } from '$lib/urlToPageHeader';
+	import { BodyShort } from '@nais/ds-svelte-community';
+	import IconLabel from './IconLabel.svelte';
 	import DumbPageHeader from './PageHeader.svelte';
 
-	const props = $derived(urlToPageHeader(page.url));
+	interface Props {
+		purpose?: string;
+		gitHubOrganization?: string;
+		gitHubTeam?: string;
+		slackChannel?: string;
+	}
+
+	const { purpose, gitHubOrganization, slackChannel, gitHubTeam }: Props = $props();
+
+	const dumbPageHeaderProps = $derived(urlToPageHeader(page.url));
 </script>
 
-<DumbPageHeader {...props} />
+<DumbPageHeader {...dumbPageHeaderProps} />
+
+<div class="team-info">
+	{#if dumbPageHeaderProps.heading === gitHubTeam}
+		<div>
+			<BodyShort>{purpose}</BodyShort>
+		</div>
+		<div>
+			<IconLabel
+				href="https://github.com/orgs/{gitHubOrganization}/teams/{gitHubTeam}"
+				icon={GitHubIcon}
+			>
+				{#snippet label()}
+					<span class="label">Visit {gitHubTeam} on GitHub</span>
+				{/snippet}
+			</IconLabel>
+			<IconLabel icon={SlackIcon}>
+				{#snippet label()}
+					<span class="label">Reach out on Slack: {slackChannel}</span>
+				{/snippet}
+			</IconLabel>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.team-info {
+		display: grid;
+		grid-template-columns: 2fr 1fr;
+		gap: var(--spacing-layout);
+		margin-top: calc(-1 * var(--spacing-layout));
+	}
+</style>
diff --git a/src/lib/icons/GitHubIcon.svelte b/src/lib/icons/GitHubIcon.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	interface Props {
+		size?: string;
+		[key: string]: unknown;
+	}
+
+	let { size = '1em', ...rest }: Props = $props();
+</script>
+
+<svg
+	height={size}
+	width={size}
+	aria-hidden="true"
+	viewBox="0 0 24 24"
+	version="1.1"
+	data-view-component="true"
+	class="octicon octicon-mark-github v-align-middle"
+	{...rest}
+>
+	<path
+		d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"
+	></path>
+</svg>
diff --git a/src/lib/icons/SlackIcon.svelte b/src/lib/icons/SlackIcon.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	interface Props {
+		size?: string;
+		[key: string]: unknown;
+	}
+
+	let { size = '1em', ...rest }: Props = $props();
+</script>
+
+<svg
+	height={size}
+	width={size}
+	aria-hidden="true"
+	viewBox="0 0 24 24"
+	version="1.1"
+	data-view-component="true"
+	class="octicon octicon-mark-github v-align-middle"
+	{...rest}
+>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M13 10C13 11.1046 13.8954 12 15 12C16.1046 12 17 11.1046 17 10V5C17 3.89543 16.1046 3 15 3C13.8954 3 13 3.89543 13 5V10ZM5 8C3.89543 8 3 8.89543 3 10C3 11.1046 3.89543 12 5 12H10C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8H5ZM15 13C13.8954 13 13 13.8954 13 15C13 16.1046 13.8954 17 15 17H20C21.1046 17 22 16.1046 22 15C22 13.8954 21.1046 13 20 13H15ZM10 22C8.89543 22 8 21.1046 8 20L8 15C8 13.8954 8.89543 13 10 13C11.1046 13 12 13.8954 12 15V20C12 21.1046 11.1046 22 10 22ZM8 5C8 3.89543 8.89543 3 10 3C11.1046 3 12 3.89543 12 5V7H10C8.89543 7 8 6.10457 8 5ZM3 15C3 16.1046 3.89543 17 5 17C6.10457 17 7 16.1046 7 15V13H5C3.89543 13 3 13.8954 3 15ZM17 20C17 21.1046 16.1046 22 15 22C13.8954 22 13 21.1046 13 20V18H15C16.1046 18 17 18.8954 17 20ZM22 10C22 8.89543 21.1046 8 20 8C18.8954 8 18 8.89543 18 10V12H20C21.1046 12 22 11.1046 22 10Z"
+		fill="#000000"
+	/>
+</svg>
diff --git a/src/routes/team/[team]/+layout.gql b/src/routes/team/[team]/+layout.gql
@@ -4,5 +4,12 @@ query TeamRoles($team: Slug!) {
 		viewerIsMember
 		deletionInProgress
 		lastSuccessfulSync
+		externalResources {
+			gitHubTeam {
+				slug
+			}
+		}
+		purpose
+		slackChannel
 	}
 }
diff --git a/src/routes/team/[team]/+layout.svelte b/src/routes/team/[team]/+layout.svelte
@@ -1,12 +1,24 @@
 <script lang="ts">
+	// import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import PageHeader from '$lib/components/UrlBasedPageHeader.svelte';
 	import { Alert } from '@nais/ds-svelte-community';
 	import type { LayoutProps } from './$houdini';
 	import Menu from './Menu.svelte';
 
 	let { data, children }: LayoutProps = $props();
-	let { deletionInProgress, lastSuccessfulSync, teamSlug, UserInfo, viewerIsMember } =
-		$derived(data);
+	let {
+		deletionInProgress,
+		lastSuccessfulSync,
+		teamSlug,
+		UserInfo,
+		viewerIsMember,
+		purpose,
+		externalResources,
+		slackChannel
+	} = $derived(data);
+	const gitHubOrganization = page.data.githubOrganization;
+	const gitHubTeam = $derived(externalResources.gitHubTeam?.slug);
 </script>
 
 <svelte:head><title>{teamSlug} - Console</title></svelte:head>
@@ -27,7 +39,8 @@
 	<div class="main">
 		<Menu features={UserInfo.data?.features} member={viewerIsMember} {teamSlug} />
 		<div class="container">
-			<PageHeader />
+			<PageHeader {gitHubOrganization} {gitHubTeam} {purpose} {slackChannel} />
+
 			<div>{@render children?.()}</div>
 		</div>
 	</div>
diff --git a/src/routes/team/[team]/+page.gql b/src/routes/team/[team]/+page.gql
@@ -1,5 +1,6 @@
 query TeamOverview($team: Slug!) @cache(policy: NetworkOnly) {
 	team(slug: $team) {
+		purpose
 		workloads(first: 600) {
 			nodes {
 				__typename
diff --git a/src/routes/team/[team]/+page.svelte b/src/routes/team/[team]/+page.svelte
@@ -3,7 +3,6 @@
 	import Card from '$lib/Card.svelte';
 	import AggregatedCostForTeam from '$lib/components/AggregatedCostForTeam.svelte';
 	import Deploys from '$lib/components/TeamDeployments.svelte';
-	import TeamInfo from '$lib/components/TeamInfo.svelte';
 	import TeamUtilizationAndOverage from '$lib/components/TeamUtilizationAndOverage.svelte';
 	import VulnerabilitySummary from '$lib/components/VulnerabilitySummary.svelte';
 	import { Alert, Heading } from '@nais/ds-svelte-community';
@@ -13,7 +12,7 @@
 	import type { PageProps } from './$houdini';
 
 	let { data }: PageProps = $props();
-	let { TeamOverview, teamSlug, viewerIsMember } = $derived(data);
+	let { TeamOverview, teamSlug } = $derived(data);
 
 	const getWorkloadsWithError = (errorType: (typeof supportedErrorTypes)[number]) => {
 		const workloads = $TeamOverview.data?.team.workloads.nodes.filter((workload) =>
@@ -55,9 +54,9 @@
 	{/each}
 </div>
 <div class="grid">
-	<Card rows={1} columns={3}>
+	<!--Card rows={1} columns={3}>
 		<TeamInfo {teamSlug} {viewerIsMember} />
-	</Card>
+	</Card-->
 
 	<Card rows={1} columns={3}>
 		<VulnerabilitySummary {teamSlug} />

Original file line number	Diff line number	Diff line change
`@@ -4,5 +4,12 @@ query TeamRoles($team: Slug!) {`
`4`	`4`	`viewerIsMember`
`5`	`5`	`deletionInProgress`
`6`	`6`	`lastSuccessfulSync`
	`7`	`+ externalResources {`
	`8`	`+ gitHubTeam {`
	`9`	`+ slug`
	`10`	`+ }`
	`11`	`+ }`
	`12`	`+ purpose`
	`13`	`+ slackChannel`
`7`	`14`	`}`
`8`	`15`	`}`