secrets: use env from team, remove unneeded deepcopy

Author: tronghn

package-lock.json

@@ -356,11 +356,6 @@ input EnvCostFilter {
   to: Date!
 }
 
-type EnvSecret {
-  env: Env!
-  secrets: [Secret!]!
-}
-
 type Error {
   message: String!
 }
@@ -1714,12 +1709,7 @@ type Team {
   ): Secret!
 
   """Get all secrets for the team."""
-  secrets: [EnvSecret!]!
-
-  """
-  A list of Slack channels for NAIS alerts. If no channel is specified for a given environment, NAIS will fallback to the slackChannel value.
-  """
-  slackAlertsChannels: [SlackAlertsChannel!]!
+  secrets: [Secret!]!
 
   """Slack channel for the team."""
   slackChannel: String!

schema.graphql

@@ -4,10 +4,11 @@ query Secrets($team: Slug!) @cache(policy: CacheAndNetwork) {
 			env {
 				name
 			}
-			secrets {
-				name
-				lastModifiedAt
-			}
+			name
+			lastModifiedAt
+		}
+		environments {
+			name
 		}
 	}
 }

src/routes/team/[team]/(teamTabs)/secrets/+page.gql

@@ -13,47 +13,23 @@
 		Tr
 	} from '@nais/ds-svelte-community';
 	import type { PageData } from './$houdini';
-	import type { Secrets$result } from '$houdini';
 	import { page } from '$app/stores';
 	import CreateSecret from './CreateSecret.svelte';
 	import { PlusIcon } from '@nais/ds-svelte-community/icons';
 	import HumanTime from '$lib/HumanTime.svelte';
-	import { parseISO } from 'date-fns';
 
 	export let data: PageData;
-	let team = $page.params.team;
-
-	let update: {
-		env: {
-			name: string;
-		};
-		secrets: {
-			name: string;
-			lastModifiedAt?: string;
-		}[];
-	}[] = [];
 
 	$: ({ Secrets } = data);
-	$: mkUpdate($Secrets.data?.team.secrets);
-	let mkUpdate = (secret: Secrets$result['team']['secrets'] | undefined | null) => {
-		if (!secret) {
-			return;
-		}
-
-		update = JSON.parse(JSON.stringify(secret));
-	};
+	$: allSecrets = $Secrets.data?.team.secrets;
+	$: environments = $Secrets.data?.team.environments;
+	$: team = $page.params.team;
 
 	// (obj: Record<string, any>) => obj[key];
-	let createSecretOpen = update
-		? update.reduce(
-				(acc: Record<string, boolean>, curr) => ({
-					...acc,
-					[curr.env.name]: false
-				}),
-				{}
-		  )
+	const createSecretOpen: Record<string, boolean> = environments
+		? environments.reduce((acc, curr) => ({ ...acc, [curr.name]: false }), {})
 		: {};
-	let openCreateSecretModal = (env: string) => {
+	const openCreateSecretModal = (env: string) => {
 		createSecretOpen[env] = true;
 	};
 </script>
@@ -66,15 +42,19 @@
 	</Alert>
 {:else if $Secrets.fetching}
 	<Loader></Loader>
-{:else}
+{:else if allSecrets && environments}
 	<div class="grid">
-		{#each update as secrets}
-			{@const env = secrets.env.name}
+		{#each environments as environment}
+			{@const secrets = allSecrets.filter((s) => s.env.name === environment.name)}
 			<Card columns={12}>
 				<div class="heading">
-					<h3>{env}</h3>
+					<h3>{environment.name}</h3>
 					<Tooltip content="Create new secret in environment" arrow={false}>
-						<Button variant="tertiary" size="small" on:click={() => openCreateSecretModal(env)}>
+						<Button
+							variant="primary"
+							size="small"
+							on:click={() => openCreateSecretModal(environment.name)}
+						>
 							Create Secret
 							<svelte:fragment slot="icon-left">
 								<PlusIcon />
@@ -85,26 +65,26 @@
 
 				<CreateSecret
 					refetch={() => Secrets.fetch({})}
-					existingNames={secrets.secrets.map((s) => s.name)}
-					bind:open={createSecretOpen[env]}
-					bind:team
-					{env}
+					existingNames={secrets.map((s) => s.name)}
+					bind:open={createSecretOpen[environment.name]}
+					env={environment.name}
+					{team}
 				/>
 
-				<Table size="small">
+				<Table size="small" zebraStripes>
 					<Thead>
 						<Th>Name</Th>
 						<Th align="right">Last Modified</Th>
 					</Thead>
 					<Tbody>
-						{#each secrets.secrets as secret}
+						{#each secrets as secret}
 							<Tr>
 								<Td>
-									<a href="/team/{team}/{env}/secret/{secret.name}">{secret.name}</a>
+									<a href="/team/{team}/{environment.name}/secret/{secret.name}">{secret.name}</a>
 								</Td>
 								<Td align="right">
 									{#if secret.lastModifiedAt}
-										<HumanTime time={parseISO(secret.lastModifiedAt)} distance />
+										<HumanTime time={secret.lastModifiedAt} distance />
 									{:else}
 										<code>n/a</code>
 									{/if}

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { graphql, type SecretTupleInput } from '$houdini';
 	import { Alert, Button, Heading, Modal, TextField } from '@nais/ds-svelte-community';
+	import { goto } from '$app/navigation';
 
 	export let open: boolean;
 	export let team: string;
@@ -38,8 +39,11 @@
 		if ($createSecret.errors) {
 			open = true;
 		} else {
+			const secretPage = '/team/' + team + '/' + env + '/secret/' + name
+			name = '';
 			open = false;
 			refetch();
+			await goto(secretPage);
 		}
 	};
 

src/routes/team/[team]/(teamTabs)/secrets/CreateSecret.svelte

@@ -71,11 +71,11 @@
 			<h4>Authentications</h4>
 			<Authentications app={$App.data.app} />
 		</Card>
-		{#if $App.data.team.viewerIsMember || $App.data.team.viewerIsOwner }
-		<Card columns={4}>
-			<h4>Secrets</h4>
-			<Secrets />
-		</Card>
+		{#if $App.data.team.viewerIsMember || $App.data.team.viewerIsOwner}
+			<Card columns={4}>
+				<h4>Secrets</h4>
+				<Secrets />
+			</Card>
 		{/if}
 	</div>
 {/if}

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

@@ -11,9 +11,9 @@
 	const appSecrets = graphql(`
 		query AppSecrets($app: String!, $team: Slug!, $env: String!) @load {
 			app(name: $app, team: $team, env: $env) @loading {
-				 secrets @loading {
-					 name
-				 }
+				secrets @loading {
+					name
+				}
 			}
 		}
 	`);
@@ -31,21 +31,21 @@
 		{/each}
 	</Alert>
 {:else if $appSecrets.data}
-<div>
-	{#if $appSecrets.data.app.secrets.length > 0}
-		<ul>
-			{#each $appSecrets.data.app.secrets as secret}
-				{#if secret === PendingValue}
-					<Skeleton variant="text" width="300px" />
-				{:else}
-					<li><a href="/team/{team}/{env}/secret/{secret.name}">{secret.name}</a></li>
-				{/if}
-			{/each}
-		</ul>
-	{:else}
-		<p>No secrets</p>
-	{/if}
-</div>
+	<div>
+		{#if $appSecrets.data.app.secrets.length > 0}
+			<ul>
+				{#each $appSecrets.data.app.secrets as secret}
+					{#if secret === PendingValue}
+						<Skeleton variant="text" width="300px" />
+					{:else}
+						<li><a href="/team/{team}/{env}/secret/{secret.name}">{secret.name}</a></li>
+					{/if}
+				{/each}
+			</ul>
+		{:else}
+			<p>No secrets</p>
+		{/if}
+	</div>
 {/if}
 
 <style>