console/src/lib/components/variables/importVariablesModal.svelte at 9c5725b6bdbe255bfa6d0ac3e24f70dc27b7c59d · appwrite/console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<script lang="ts">
    import { Modal } from '$lib/components';
    import { Alert } from '@appwrite.io/pink-svelte';
    import { Button } from '$lib/elements/forms';
    import type { Models } from '@appwrite.io/console';
    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
    import { Icon, Layout, Selector, Tooltip, Typography, Upload } from '@appwrite.io/pink-svelte';
    import { parse } from '$lib/helpers/envfile';
    import { removeFile } from '$lib/helpers/files';

    export let show = false;
    export let variables: Partial<Models.Variable>[];

    let files: FileList;
    let error: string;
    let secret = false;
    $: filesList = files?.length
        ? Array.from(files).map((file) => ({
              ...file,
              name: file.name,
              size: file.size,
              extension: file.type,
              removable: true
          }))
        : [];

    async function handleSubmit() {
        try {
            if (!files?.length) {
                throw new Error('No file selected');
            }

            const uploaded = parse(await files[0].text());

            if (!Object.keys(uploaded).length) {
                throw new Error('No variables found');
            }
            const entries = Object.entries(uploaded);

            for (const [key, value] of entries) {
                if (value.length > 8192) {
                    throw new Error(`Variable ${key} is longer than 8192 allowed characters`);
                }
            }

            entries
                .filter(([, value]) => !!value)
                .forEach(([key, value]) => {
                    variables.push({ key, value, secret });
                });

            show = false;
        } catch (e) {
            error = e.message;
        }
    }
</script>

<Modal title="Import variables" bind:show onSubmit={handleSubmit} bind:error>
    <span slot="description"> Import new environment variables from .env file. </span>
    <Layout.Stack gap="xxl">
        <Layout.Stack>
            <Upload.Dropzone bind:files>
                <Layout.Stack alignItems="center" gap="s">
                    <Layout.Stack alignItems="center" justifyContent="center" inline>
                        <Typography.Text variant="l-500" align="center" inline>
                            Drag and drop a file here or click to upload
                            <Layout.Stack
                                style="display: inline-flex; vertical-align: middle;"
                                inline
                                alignItems="center"
                                justifyContent="center">
                                <Tooltip>
                                    <Icon icon={IconInfo} size="s" />
                                    <svelte:fragment slot="tooltip"
                                        >Only .env files allowed</svelte:fragment>
                                </Tooltip>
                            </Layout.Stack>
                        </Typography.Text>
                    </Layout.Stack>
                    <Typography.Caption variant="400" align="center">
                        Up to 100 variables allowed
                    </Typography.Caption>
                </Layout.Stack>
            </Upload.Dropzone>
            {#if files?.length}
                <Upload.List
                    bind:files={filesList}
                    on:remove={(e) => (files = removeFile(e.detail, files))} />
            {/if}
            {#if variables?.length > 0}
                <Alert.Inline status="info" dismissible>
                    This action can create and update variables but can not delete them.
                </Alert.Inline>
            {/if}
        </Layout.Stack>
        <Selector.Checkbox
            size="s"
            id="secret"
            label="Secret"
            bind:checked={secret}
            description="If selected, you and your team won't be able to read the values after creation." />
    </Layout.Stack>
    <svelte:fragment slot="footer">
        <Button text on:click={() => (show = false)}>Cancel</Button>
        <Button submit disabled={!files?.length}>Import</Button>
    </svelte:fragment>
</Modal>