secrets: add cancel buttons to modals, make buttons no-op instead of pop-in/out, error handling

Author: tronghn

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

@@ -64,7 +64,6 @@
 				</div>
 
 				<CreateSecret
-					refetch={() => Secrets.fetch({})}
 					existingNames={secrets.map((s) => s.name)}
 					bind:open={createSecretOpen[environment.name]}
 					env={environment.name}

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

@@ -6,7 +6,6 @@
 	export let open: boolean;
 	export let team: string;
 	export let env: string;
-	export let refetch: () => void;
 	export let existingNames: string[];
 
 	let name = '';
@@ -30,6 +29,10 @@
 	`);
 
 	const create = async () => {
+		if (validationError(name).length > 0 && name.length > 0) {
+			return;
+		}
+
 		await createSecret.mutate({
 			name: name,
 			team: team,
@@ -42,11 +45,15 @@
 			const secretPage = '/team/' + team + '/' + env + '/secret/' + name
 			name = '';
 			open = false;
-			refetch();
 			await goto(secretPage);
 		}
 	};
 
+	const cancel = () => {
+		name = '';
+		open = false;
+	};
+
 	const validationError = (name: string) => {
 		if (!name) {
 			return '';
@@ -76,7 +83,7 @@
 	};
 </script>
 
-<Modal bind:open width="small">
+<Modal bind:open width="small" on:close={cancel}>
 	<svelte:fragment slot="header">
 		<Heading>Create new secret</Heading>
 		<p>The secret will be created in <b>{env}</b></p>
@@ -86,13 +93,16 @@
 			<svelte:fragment slot="label">Name</svelte:fragment>
 		</TextField>
 		{#if $createSecret.errors}
-			<Alert variant="error">{$createSecret.errors[0].message}</Alert>
+			<Alert variant="error">
+			{#each $createSecret.errors as error}
+				{error.message}
+			{/each}
+			</Alert>
 		{/if}
 	</div>
 	<svelte:fragment slot="footer">
-		{#if validationError(name).length === 0 && name.length > 0}
-			<Button variant="primary" size="small" on:click={create}>Create</Button>
-		{/if}
+		<Button variant="secondary" size="small" on:click={cancel}>Cancel</Button>
+		<Button variant="primary" size="small" on:click={create}>Create</Button>
 	</svelte:fragment>
 </Modal>
 

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

@@ -30,13 +30,13 @@
 	$: env = $page.params.env;
 	$: team = $page.params.team;
 
-	$: applicationManifest = `spec:
-  envFrom:
-    - secret: ${secretName}`;
-
 	let changes: operation[] = [];
 	let deleteSecretOpen = false;
 
+	const applicationManifest = (secretName: string) => `spec:
+  envFrom:
+    - secret: ${secretName}`;
+
 	const discardChanges = () => {
 		changes = [];
 		Secret.fetch();
@@ -64,7 +64,7 @@
 		}
 	`);
 	const updateSecret = async () => {
-		if (!secret) return;
+		if (!secret || changes.length == 0) return;
 
 		let data: VariableInput[] = changes.reduce(mergeChanges, secret.data);
 
@@ -75,8 +75,11 @@
 			team: team
 		});
 
+		if ($updateSecretMutation.errors) {
+			return;
+		}
+
 		changes = [];
-		await Secret.fetch();
 	};
 
 	const deleteSecretMutation = graphql(`
@@ -91,28 +94,27 @@
 			team: team,
 			env: env
 		});
+
+		if ($deleteSecretMutation.errors) {
+			return;
+		}
+
 		await goto('/team/' + team + '/secrets');
 	};
 
-	const toggleDeleteSecretOpen = () => {
-		deleteSecretOpen = !deleteSecretOpen;
+	const openDeleteSecretModal = () => {
+		deleteSecretOpen = true;
 	};
 </script>
 
 <svelte:head><title>{team} - Console</title></svelte:head>
 
-{#if secretName}
-	<h3>
-		<a href="/team/{team}">{team}</a> /
-		<a href="/team/{team}/secrets">secrets</a> /
-		{env} /
-		<i><a href="/team/{team}/{env}/secret/{secretName}">{secretName}</a></i>
-	</h3>
-{:else}
-	<h3>
-		<a href="/team/{team}">{team}</a> / <a href="/team/{team}/secrets">secrets</a> / {env}
-	</h3>
-{/if}
+<h3>
+	<a href="/team/{team}">{team}</a> /
+	<a href="/team/{team}/secrets">secrets</a> /
+	{env} /
+	<i><a href="/team/{team}/{env}/secret/{secretName}">{secretName}</a></i>
+</h3>
 
 {#if $Secret.errors}
 	<Alert variant="error">
@@ -131,7 +133,7 @@
 					<HelpText title="Secret data" placement="right">
 						A secret contains a set of key-value pairs.<br />
 						<br />
-						Changes are not persisted until the "Confirm" button is clicked.<br />
+						Changes are not persisted until the "Save" button is clicked.<br />
 						Applications using the secret will automatically restart to pick up any changes.
 						<br />
 					</HelpText>
@@ -141,7 +143,7 @@
 						class="delete-secret"
 						variant="danger"
 						size="small"
-						on:click={toggleDeleteSecretOpen}
+						on:click={openDeleteSecretModal}
 					>
 						Delete
 					</Button>
@@ -166,6 +168,11 @@
 				<Tbody>
 					<div class="secret-content">
 						<div class="secret-edit">
+							{#if secret.data.length === 0 && filterAddKvs(changes).length === 0}
+								<Alert variant="info" size="small">
+									No data found. Add a new row to get started.
+								</Alert>
+							{/if}
 							{#each secret.data as data (data.name)}
 								<SecretKv key={data.name} value={data.value} bind:changes />
 							{/each}
@@ -175,17 +182,26 @@
 							<AddSecretKv bind:changes existingKeys={secret.data.map((d) => d.name)} />
 						</div>
 						<div class="secret-edit-buttons">
-							{#if changes.length > 0}
-								<Tooltip content="Persist all changes" arrow={false}>
-									<Button variant="primary" size="small" on:click={updateSecret}>Confirm</Button>
-								</Tooltip>
-								<Tooltip content="Discard all changes" arrow={false}>
-									<Button variant="secondary" size="small" on:click={discardChanges}>Cancel</Button>
-								</Tooltip>
-							{/if}
+							<Tooltip content="Persist all changes" arrow={false}>
+								<Button variant="primary" size="small" on:click={updateSecret}>Save</Button>
+							</Tooltip>
+							<Tooltip content="Discard all changes" arrow={false}>
+								<Button variant="secondary" size="small" on:click={discardChanges}>Cancel</Button>
+							</Tooltip>
 						</div>
 						{#if $updateSecretMutation.errors}
-							<Alert variant="error">{$updateSecretMutation.errors[0]?.message}</Alert>
+							<Alert variant="error">
+								{#each $updateSecretMutation.errors as error}
+									{error.message}
+								{/each}
+							</Alert>
+						{/if}
+						{#if $deleteSecretMutation.errors}
+							<Alert variant="error">
+								{#each $deleteSecretMutation.errors as error}
+									{error.message}
+								{/each}
+							</Alert>
 						{/if}
 					</div>
 				</Tbody>
@@ -242,13 +258,13 @@
 					as environment variables.
 				</HelpText>
 			</h4>
-			<pre class="manifest">{applicationManifest}</pre>
+			<pre class="manifest">{applicationManifest(secretName)}</pre>
 			<Tooltip content="Copy manifest to clipboard">
 				<CopyButton
 					text="Copy manifest"
 					activeText="Manifest copied"
 					variant="action"
-					copyText={applicationManifest}
+					copyText={applicationManifest(secretName)}
 				></CopyButton>
 			</Tooltip>
 		</Card>
@@ -301,7 +317,7 @@
 	}
 
 	.secret-edit-buttons {
-		margin: 16px 0 0 16px;
+		margin: 32px 0 0 16px;
 		padding: 32px 0;
 	}
 

src/routes/team/[team]/[env]/secret/[secret]/AddSecretKv.svelte

@@ -8,6 +8,10 @@
 
 	let addKv = () => {
 		if (key && value) {
+			if (validationError(key).length > 0) {
+				return
+			}
+
 			changes = [
 				...changes,
 				{
@@ -48,8 +52,14 @@
 	let value: string | undefined;
 	let open: boolean = false;
 
-	const toggleOpen = () => {
-		open = !open;
+	const openAddKvModal = () => {
+		open = true;
+	};
+
+	const cancel = () => {
+		open = false;
+		key = undefined;
+		value = undefined;
 	};
 </script>
 
@@ -66,15 +76,14 @@
 		</TextField>
 	</div>
 	<svelte:fragment slot="footer">
-		{#if validationError(key).length === 0 && key && key.length > 0}
-			<Button variant="primary" size="small" on:click={addKv}>Add</Button>
-		{/if}
+		<Button variant="secondary" size="small" on:click={cancel}>Cancel</Button>
+		<Button variant="primary" size="small" on:click={addKv}>Add</Button>
 	</svelte:fragment>
 </Modal>
 
 <div class="buttons">
 	<Tooltip content="Add new key and value">
-		<Button variant="tertiary" size="small" on:click={toggleOpen}>
+		<Button variant="tertiary" size="small" on:click={openAddKvModal}>
 			<svelte:fragment slot="icon-left">
 				<PlusCircleFillIcon />
 			</svelte:fragment>