Skip to content

Commit 0dd7383

Browse files
tronghntronghn
committed
secrets: minor fixes
1 parent cedf798 commit 0dd7383

File tree

3 files changed

+86
-59
lines changed

3 files changed

+86
-59
lines changed

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

+6-11
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,7 @@
1212
let data: VariableInput[] = [];
1313
1414
const createSecret = graphql(`
15-
mutation createSecret(
16-
$name: String!
17-
$team: Slug!
18-
$env: String!
19-
$data: [VariableInput!]!
20-
) {
15+
mutation createSecret($name: String!, $team: Slug!, $env: String!, $data: [VariableInput!]!) {
2116
createSecret(name: $name, team: $team, env: $env, data: $data) {
2217
id
2318
data {
@@ -42,7 +37,7 @@
4237
if ($createSecret.errors) {
4338
open = true;
4439
} else {
45-
const secretPage = '/team/' + team + '/' + env + '/secret/' + name
40+
const secretPage = '/team/' + team + '/' + env + '/secret/' + name;
4641
name = '';
4742
open = false;
4843
await goto(secretPage);
@@ -94,15 +89,15 @@
9489
</TextField>
9590
{#if $createSecret.errors}
9691
<Alert variant="error">
97-
{#each $createSecret.errors as error}
98-
{error.message}
99-
{/each}
92+
{#each $createSecret.errors as error}
93+
{error.message}
94+
{/each}
10095
</Alert>
10196
{/if}
10297
</div>
10398
<svelte:fragment slot="footer">
104-
<Button variant="secondary" size="small" on:click={cancel}>Cancel</Button>
10599
<Button variant="primary" size="small" on:click={create}>Create</Button>
100+
<Button variant="secondary" size="small" on:click={cancel}>Cancel</Button>
106101
</svelte:fragment>
107102
</Modal>
108103

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

+77-47
Original file line numberDiff line numberDiff line change
@@ -31,24 +31,22 @@
3131
$: team = $page.params.team;
3232
3333
let changes: operation[] = [];
34+
let saved = false;
3435
let deleteSecretOpen = false;
36+
let discardChangesOpen = false;
3537
3638
const workloadManifest = (secretName: string) => `spec:
3739
envFrom:
3840
- secret: ${secretName}`;
3941
4042
const discardChanges = () => {
43+
saved = false;
4144
changes = [];
4245
Secret.fetch();
4346
};
4447
4548
const updateSecretMutation = graphql(`
46-
mutation updateSecret(
47-
$name: String!
48-
$team: Slug!
49-
$env: String!
50-
$data: [VariableInput!]!
51-
) {
49+
mutation updateSecret($name: String!, $team: Slug!, $env: String!, $data: [VariableInput!]!) {
5250
updateSecret(name: $name, team: $team, env: $env, data: $data) {
5351
id
5452
data {
@@ -64,6 +62,7 @@
6462
}
6563
`);
6664
const updateSecret = async () => {
65+
saved = false;
6766
if (!secret || changes.length == 0) return;
6867
6968
let data: VariableInput[] = changes.reduce(mergeChanges, secret.data);
@@ -80,6 +79,7 @@
8079
}
8180
8281
changes = [];
82+
saved = true;
8383
};
8484
8585
const deleteSecretMutation = graphql(`
@@ -105,6 +105,12 @@
105105
const openDeleteSecretModal = () => {
106106
deleteSecretOpen = true;
107107
};
108+
109+
const openDiscardChangesModal = () => {
110+
saved = false;
111+
if (changes.length === 0) return;
112+
discardChangesOpen = true;
113+
};
108114
</script>
109115

110116
<svelte:head><title>{team} - Console</title></svelte:head>
@@ -125,17 +131,59 @@
125131
{:else if $Secret.fetching}
126132
<Loader />
127133
{:else if secret}
134+
<div class="alerts">
135+
{#if saved && changes.length === 0}
136+
<Alert variant="success" size="small">Changes saved!</Alert>
137+
{/if}
138+
{#if $updateSecretMutation.errors}
139+
<Alert variant="error">
140+
{#each $updateSecretMutation.errors as error}
141+
{error.message}
142+
{/each}
143+
</Alert>
144+
{:else if $deleteSecretMutation.errors}
145+
<Alert variant="error">
146+
{#each $deleteSecretMutation.errors as error}
147+
{error.message}
148+
{/each}
149+
</Alert>
150+
{/if}
151+
</div>
152+
<Confirm
153+
confirmText="Delete"
154+
variant="danger"
155+
bind:open={deleteSecretOpen}
156+
on:confirm={deleteSecret}
157+
>
158+
<svelte:fragment slot="header">
159+
<Heading>Delete secret</Heading>
160+
</svelte:fragment>
161+
<p>
162+
This will permanently delete the secret named <b>{secret.name}</b> from <b>{env}</b>.
163+
</p>
164+
165+
Are you sure you want to delete this secret?
166+
</Confirm>
167+
<Confirm
168+
confirmText="Reset"
169+
variant="danger"
170+
bind:open={discardChangesOpen}
171+
on:confirm={discardChanges}
172+
>
173+
<svelte:fragment slot="header">
174+
<Heading>Reset all changes</Heading>
175+
</svelte:fragment>
176+
<p>You have unsaved changes which will be lost on reset.</p>
177+
178+
Are you sure you want to reset?
179+
</Confirm>
128180
<div class="grid">
129181
<Card columns={8} rows={3}>
130182
<div class="header">
131183
<h4>
132184
Secret Data
133185
<HelpText title="Secret data" placement="right">
134-
A secret contains a set of key-value pairs.<br />
135-
<br />
136-
Changes are not persisted until the "Save" button is clicked.<br />
137-
Applications using the secret will automatically restart to pick up any changes.
138-
<br />
186+
A secret contains a set of key-value pairs.
139187
</HelpText>
140188
</h4>
141189
<Tooltip content="Delete secret from environment" arrow={false}>
@@ -148,21 +196,6 @@
148196
Delete
149197
</Button>
150198
</Tooltip>
151-
<Confirm
152-
confirmText="Delete"
153-
variant="danger"
154-
bind:open={deleteSecretOpen}
155-
on:confirm={deleteSecret}
156-
>
157-
<svelte:fragment slot="header">
158-
<Heading>Delete secret</Heading>
159-
</svelte:fragment>
160-
<p>
161-
This will permanently delete the secret named <b>{secret.name}</b> from <b>{env}</b>.
162-
</p>
163-
164-
Are you sure you want to delete this secret?
165-
</Confirm>
166199
</div>
167200
<Table size="small" style="margin-top: 2rem">
168201
<Tbody>
@@ -183,26 +216,22 @@
183216
</div>
184217
<div class="secret-edit-buttons">
185218
<Tooltip content="Discard all changes" arrow={false}>
186-
<Button variant="secondary" size="small" on:click={discardChanges}>Cancel</Button>
219+
<Button variant="secondary" size="small" on:click={openDiscardChangesModal}
220+
>Reset</Button
221+
>
187222
</Tooltip>
188223
<Tooltip content="Persist all changes" arrow={false}>
189-
<Button variant="primary" size="small" on:click={updateSecret}>Save</Button>
224+
<Button
225+
variant="primary"
226+
size="small"
227+
on:click={updateSecret}
228+
loading={$updateSecretMutation.fetching}>Save</Button
229+
>
190230
</Tooltip>
231+
<HelpText title="Save changes" placement="top">
232+
Changes are not persisted until the "Save" button is clicked.
233+
</HelpText>
191234
</div>
192-
{#if $updateSecretMutation.errors}
193-
<Alert variant="error">
194-
{#each $updateSecretMutation.errors as error}
195-
{error.message}
196-
{/each}
197-
</Alert>
198-
{/if}
199-
{#if $deleteSecretMutation.errors}
200-
<Alert variant="error">
201-
{#each $deleteSecretMutation.errors as error}
202-
{error.message}
203-
{/each}
204-
</Alert>
205-
{/if}
206235
</div>
207236
</Tbody>
208237
</Table>
@@ -252,11 +281,7 @@
252281
<h4>
253282
Use secret in workload
254283
<HelpText title="How to use this secret in a workload" placement="bottom">
255-
To use this secret in your workload, you will need to reference it in your
256-
workload's manifest.<br />
257-
<br />
258-
The snippet below injects the secret into your workload. Each key-value pair is then available
259-
as environment variables.
284+
Reference the secret in your workload manifest with the snippet below.
260285
</HelpText>
261286
</h4>
262287
<pre class="manifest">{workloadManifest(secretName)}</pre>
@@ -313,11 +338,16 @@
313338
margin-bottom: 1rem;
314339
}
315340
341+
.alerts {
342+
margin-bottom: 1rem;
343+
}
344+
316345
.secret-content {
317346
padding: 8px;
318347
}
319348
320349
.secret-edit-buttons {
350+
display: flex;
321351
margin: 32px 0 0 16px;
322352
padding: 32px 0;
323353
}

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
let addKv = () => {
1010
if (key && value) {
1111
if (validationError(key).length > 0) {
12-
return
12+
return;
1313
}
1414
1515
changes = [
@@ -70,9 +70,11 @@
7070
<div class="entry">
7171
<TextField size="small" htmlSize={30} bind:value={key} error={validationError(key)}>
7272
<svelte:fragment slot="label">Key</svelte:fragment>
73+
<svelte:fragment slot="description">Example: SOME_KEY</svelte:fragment>
7374
</TextField>
7475
<TextField size="small" htmlSize={30} bind:value>
7576
<svelte:fragment slot="label">Value</svelte:fragment>
77+
<svelte:fragment slot="description">Example: some-value</svelte:fragment>
7678
</TextField>
7779
</div>
7880
<svelte:fragment slot="footer">

0 commit comments

Comments
 (0)