feat: upload env variables

package-lock.json

@@ -15,6 +15,7 @@
                 "@sentry/svelte": "^7.36.0",
                 "@sentry/tracing": "^7.36.0",
                 "analytics": "^0.8.1",
+                "dotenv": "^16.0.3",
                 "echarts": "^5.4.1",
                 "logrocket": "^3.0.1",
                 "pretty-bytes": "^6.1.0",
@@ -3613,6 +3614,14 @@
                 "node": ">=12"
             }
         },
+        "node_modules/dotenv": {
+            "version": "16.0.3",
+            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+            "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/eastasianwidth": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",

package.json

@@ -26,6 +26,7 @@
         "@sentry/svelte": "^7.36.0",
         "@sentry/tracing": "^7.36.0",
         "analytics": "^0.8.1",
+        "dotenv": "^16.0.3",
         "echarts": "^5.4.1",
         "logrocket": "^3.0.1",
         "pretty-bytes": "^6.1.0",

src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte

@@ -18,7 +18,7 @@
     import { onMount } from 'svelte';
     import Variable from '../../createVariable.svelte';
     import { execute, func } from '../store';
-    // import Upload from './uploadVariables.svelte';
+    import UploadVariables from './uploadVariables.svelte';
     import {
         Table,
         TableBody,
@@ -36,7 +36,7 @@
     const functionId = $page.params.function;
     let showDelete = false;
     let selectedVar: Models.Variable = null;
-    // let showVariablesUpload = false;
+    let showVariablesUpload = false;
     let showVariablesModal = false;
     let showVariablesDropdown = [];
     let timeout: number = null;
@@ -369,10 +369,10 @@
                     <span class="icon-download" />
                     <span class="text">Download .env file</span>
                 </Button>
-                <!-- <Button secondary on:click={() => (showVariablesUpload = true)}>
+                <Button secondary on:click={() => (showVariablesUpload = true)}>
                     <span class="icon-upload" />
                     <span class="text">Import .env file</span>
-                </Button> -->
+                </Button>
             </div>
             {#if data.variables.total}
                 <div class="u-flex u-flex-vertical u-gap-16">
@@ -446,8 +446,9 @@
                     </Button>
                 </div>
             {:else}
-                <Empty on:click={() => (showVariablesModal = !showVariablesModal)}
-                    >Create a variable to get started</Empty>
+                <Empty on:click={() => (showVariablesModal = !showVariablesModal)}>
+                    Create a variable to get started
+                </Empty>
             {/if}
         </svelte:fragment>
     </CardGrid>
@@ -505,3 +506,6 @@
         on:created={handleVariableCreated}
         on:updated={handleVariableUpdated} />
 {/if}
+{#if showVariablesUpload}
+    <UploadVariables bind:show={showVariablesUpload} />
+{/if}

src/routes/console/project-[project]/functions/function-[function]/settings/store.ts

@@ -0,0 +1,8 @@
+import { page } from '$app/stores';
+import { derived } from 'svelte/store';
+import type { Models } from '@aw-labs/appwrite-console';
+
+export const variables = derived(
+    page,
+    ($page) => $page.data.variables.variables as Models.Variable[]
+);

src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte

@@ -6,69 +6,66 @@
     import { Button, InputFile } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
+    import { parse } from 'dotenv';
+    import { variables } from './store';
 
     export let show = false;
 
-    const dispatch = createEventDispatcher();
-
     const functionId = $page.params.function;
+
     let files: FileList;
+    let error: string;
 
-    const handleSubmit = async () => {
-        if (files?.length) {
-            const variables = await parseFile(files[0]);
-            for (const variable of variables) {
-                try {
-                    await sdk.forProject.functions.createVariable(
-                        functionId,
-                        variable.key,
-                        variable.value
-                    );
-                    invalidate(Dependencies.VARIABLES);
-                    addNotification({
-                        type: 'success',
-                        message: 'Variable uploaded'
-                    });
-                } catch (error) {
-                    addNotification({
-                        type: 'error',
-                        message: error.message
-                    });
-                }
+    async function handleSubmit() {
+        try {
+            if (!files?.length) {
+                throw new Error('No file selected');
             }
-            dispatch('uploaded', variables);
-        } else {
-            addNotification({
-                type: 'error',
-                message: 'No file uploaded'
-            });
-        }
-    };
 
-    async function parseFile(file: File) {
-        if (file) {
-            let variables = [];
-            let text = await file.text();
-            text.split('\n').forEach((line) => {
-                const [key, value] = line.split('=');
-                variables.push({ key, value });
+            const uploaded = parse(await files[0].text());
+
+            if (!Object.keys(uploaded).length) {
+                throw new Error('No variables found');
+            }
+
+            await Promise.all(
+                Object.entries(uploaded)
+                    .filter(([, value]) => !!value)
+                    .map(([key, value]) => {
+                        const found = $variables.find((variable) => variable.key === key);
+                        return found
+                            ? sdk.forProject.functions.updateVariable(
+                                  functionId,
+                                  found.$id,
+                                  key,
+                                  value
+                              )
+                            : sdk.forProject.functions.createVariable(functionId, key, value);
+                    })
+            );
+
+            invalidate(Dependencies.VARIABLES);
+            addNotification({
+                type: 'success',
+                message: 'Variables uploaded'
             });
-            return variables;
+            show = false;
+        } catch (e) {
+            error = e.message;
         }
     }
 </script>
 
-<Modal bind:show onSubmit={handleSubmit}>
+<Modal bind:show onSubmit={handleSubmit} bind:error>
     <svelte:fragment slot="header">Upload Variables</svelte:fragment>
     <p>
         Upload multiple variables via a .env file that will be passed to your function at runtime.
     </p>
 
-    <InputFile bind:files label="Attach a file" />
+    <InputFile maxSize={100000} bind:files label="Attach a file" />
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button submit>Create</Button>
+        <Button submit>Upload</Button>
     </svelte:fragment>
 </Modal>