feat: add isAdmin prop to menuItems for conditional rendering of settings and update related components

Author: rbjornstad

src/lib/menuItems.test.ts

@@ -15,7 +15,8 @@ describe('menuItems', () => {
 				menuItems({
 					path: '/team/devteam',
 					features,
-					member: true
+					member: true,
+					isAdmin: false
 				})
 			).toEqual([
 				[{ label: 'Team overview', href: '/team/devteam', active: true }],
@@ -53,7 +54,8 @@ describe('menuItems', () => {
 			expect(
 				menuItems({
 					path: '/team/nais/prod-gcp/secret/github-backup-config',
-					member: true
+					member: true,
+					isAdmin: false
 				})
 					.flatMap((g) => g)
 					.find((i) => i.label === 'Secrets')?.active
@@ -64,7 +66,8 @@ describe('menuItems', () => {
 			expect(
 				menuItems({
 					path: '/team/nais/prod-gcp/postgres/gemini',
-					member: true
+					member: true,
+					isAdmin: false
 				})
 					.flatMap((g) => g)
 					.find((i) => i.label === 'Postgres')?.active
@@ -76,7 +79,8 @@ describe('menuItems', () => {
 				menuItems({
 					path: '/team/nais/prod-gcp/valkey/gemini',
 					features,
-					member: true
+					member: true,
+					isAdmin: false
 				})
 					.flatMap((g) => g)
 					.find((i) => i.label === 'Valkey')?.active
@@ -87,7 +91,8 @@ describe('menuItems', () => {
 			expect(
 				menuItems({
 					path: '/team/devteam/jobs',
-					member: true
+					member: true,
+					isAdmin: false
 				})
 					.flatMap((g) => g)
 					.find((i) =>
@@ -101,7 +106,8 @@ describe('menuItems', () => {
 				menuItems({
 					path: '/team/tbd/jobs',
 					features,
-					member: false
+					member: false,
+					isAdmin: false
 				})
 					.flatMap((g) => g)
 					.find((i) => ['Secrets', 'Activity log', 'Settings'].includes(i.label))
@@ -113,6 +119,7 @@ describe('menuItems', () => {
 				path: '/team/tbd/jobs',
 				features,
 				member: true,
+				isAdmin: false,
 				inventory: {
 					applications: { total: 42, notNais: 10 },
 					jobs: { total: 1, notNais: 1 },
@@ -145,14 +152,27 @@ describe('menuItems', () => {
 				{ label: 'BigQuery', count: 49 }
 			]);
 		});
+		test('show settings when admin', () => {
+			expect(
+				menuItems({
+					path: '/team/nais',
+					features,
+					member: false,
+					isAdmin: true
+				})
+					.flatMap((g) => g)
+					.find((i) => ['Settings'].includes(i.label))
+			).toBeDefined();
+		});
 	});
 
 	describe('workload menu', () => {
 		test('full', () => {
 			expect(
 				menuItems({
 					path: '/team/devteam/dev/app/app-w-all-storage/utilization',
-					member: true
+					member: true,
+					isAdmin: false
 				})
 			).toEqual([
 				[{ label: 'App overview', href: '/team/devteam/dev/app/app-w-all-storage' }],
@@ -187,7 +207,8 @@ describe('menuItems', () => {
 			expect(
 				menuItems({
 					path: '/team/devteam/dev/job/dataproduct-apps-topics/vulnerability-report',
-					member: false
+					member: false,
+					isAdmin: false
 				})
 					.flatMap((g) => g)
 					.find((i) => ['Delete'].includes(i.label))

src/lib/menuItems.ts

@@ -2,7 +2,8 @@ export const menuItems = ({
 	path,
 	features,
 	member,
-	inventory
+	inventory,
+	isAdmin
 }: {
 	path: string;
 	features?: {
@@ -24,6 +25,7 @@ export const menuItems = ({
 		kafkaTopics: { total: number };
 		bigQueryDatasets: { total: number };
 	};
+	isAdmin: boolean;
 }): { label: string; href: string; active?: boolean; count?: number; badge?: boolean }[][] => {
 	const split = path.split('/');
 
@@ -111,7 +113,7 @@ export const menuItems = ({
 		[
 			menuItem('Members', 'members'),
 			menuItem('Repositories', 'repositories'),
-			member && menuItem('Settings', 'settings'),
+			(member || isAdmin) && menuItem('Settings', 'settings'),
 			member && menuItem('Activity log', 'activity-log')
 		].filter(Boolean) as { label: string; href: string; active?: boolean }[]
 	];

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

@@ -19,6 +19,10 @@
 	} = $derived(data);
 	const gitHubOrganization = page.data.githubOrganization;
 	const gitHubTeam = $derived(externalResources.gitHubTeam?.slug);
+
+	const isAdmin = $derived(
+		UserInfo.data?.me.__typename === 'User' ? UserInfo.data?.me.isAdmin : false
+	);
 </script>
 
 <svelte:head><title>{teamSlug} - Console</title></svelte:head>
@@ -37,7 +41,7 @@
 	{/if}
 
 	<div class="main">
-		<Menu features={UserInfo.data?.features} member={viewerIsMember} {teamSlug} />
+		<Menu features={UserInfo.data?.features} member={viewerIsMember} {teamSlug} {isAdmin} />
 		<div class="container">
 			<PageHeader {gitHubOrganization} {gitHubTeam} {purpose} {slackChannel} />
 

src/routes/team/[team]/Menu.svelte

@@ -7,10 +7,12 @@
 
 	const {
 		member,
+		isAdmin,
 		features,
 		teamSlug
 	}: {
 		member: boolean;
+		isAdmin: boolean;
 		features?: {
 			unleash: { enabled: boolean };
 			redis: { enabled: boolean };
@@ -71,6 +73,7 @@
 		path: page.url.pathname,
 		member,
 		inventory: $Inventory.fetching ? undefined : $Inventory.data?.team.inventoryCounts,
-		features
+		features,
+		isAdmin
 	})}
 />

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

@@ -21,7 +21,7 @@
 	import EditText from './EditText.svelte';
 
 	let { data }: PageProps = $props();
-	let { teamSlug } = $derived(data);
+	let { teamSlug, viewerIsMember } = $derived(data);
 
 	const rotateKey = graphql(`
 		mutation RotateDeployKey($team: Slug!) {
@@ -143,6 +143,7 @@
 							descriptionErrors = data.errors;
 						}
 					}}
+					isMember={viewerIsMember}
 				/>
 			</i>
 
@@ -168,6 +169,7 @@
 								defaultSlackChannelErrors = data.errors;
 							}
 						}}
+						isMember={viewerIsMember}
 					/>
 				</p>
 				<GraphErrors errors={defaultSlackChannelErrors} size="small" />
@@ -199,6 +201,7 @@
 										slackChannelsErrors = data.errors;
 									}
 								}}
+								isMember={viewerIsMember}
 							/>
 						</div>
 					{/each}
@@ -301,6 +304,7 @@
 										showKey = !showKey;
 									}}
 									icon={EyeIcon}
+									disabled={!viewerIsMember}
 								/>
 							{/if}
 						</div>
@@ -314,6 +318,7 @@
 							variant="action"
 							copyText={deployKey.key}
 							size="small"
+							disabled={!viewerIsMember}
 						/>
 					</div>
 					<div class="button">
@@ -324,6 +329,7 @@
 								showRotateKey = !showRotateKey;
 							}}
 							icon={ArrowsCirclepathIcon}
+							disabled={!viewerIsMember}
 						>
 							Rotate key
 						</Button>

src/routes/team/[team]/settings/+page.ts

@@ -4,7 +4,10 @@ import type { BeforeLoadEvent } from './$houdini';
 export async function _houdini_beforeLoad({ parent }: BeforeLoadEvent) {
 	const pd = await parent();
 
-	if (!pd.viewerIsMember) {
+	if (
+		!pd.viewerIsMember &&
+		!(pd.UserInfo.data?.me.__typename === 'User' && pd.UserInfo.data?.me.isAdmin)
+	) {
 		error(403, 'You are not allowed to view this page');
 	}
 }

src/routes/team/[team]/settings/EditText.svelte

@@ -5,10 +5,11 @@
 
 	interface Props {
 		text: string;
+		isMember: boolean;
 		variant?: 'textfield' | 'textarea';
 	}
 
-	let { text, variant = 'textarea' }: Props = $props();
+	let { text, variant = 'textarea', isMember }: Props = $props();
 
 	const distpatch = createEventDispatcher<{ save: string }>();
 
@@ -37,7 +38,7 @@
 				bind:value={newText}
 			></textarea>
 		{/if}
-		<Button onclick={save} size="xsmall">Save</Button>
+		<Button onclick={save} size="xsmall" disabled={!isMember}>Save</Button>
 		<Button onclick={reset} size="xsmall" variant="secondary-neutral">Cancel</Button>
 	</div>
 {:else if height !== undefined}