feat: create variable

src/routes/(console)/project-[project]/createVariable.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, InputChoice, InputPassword } from '$lib/elements/forms';
+    import { Button, InputPassword } from '$lib/elements/forms';
     import { Modal } from '$lib/components';
     import { InputText } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
@@ -7,7 +7,7 @@
     import Alert from '$lib/components/alert.svelte';
     import { project } from './store';
     import { base } from '$app/paths';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Selector } from '@appwrite.io/pink-svelte';
 
     export let isGlobal: boolean;
     export let product: 'function' | 'site' = 'function';
@@ -81,8 +81,11 @@
             placeholder="Enter value"
             bind:value={pair.value}
             minlength={0} />
-        <InputChoice id="secret" label="Secret" bind:value={pair.secret}>
-            If selected, you and your team won't be able to read the values after creation.</InputChoice>
+        <Selector.Checkbox
+            id="secret"
+            label="Secret"
+            bind:checked={pair.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 secondary on:click={close}>Cancel</Button>

src/routes/(console)/project-[project]/sites/create-site/configuration.svelte

@@ -21,12 +21,13 @@
         IconEyeOff,
         IconPencil
     } from '@appwrite.io/pink-icons-svelte';
-    import SecretVariableModal from '../../secretVariableModal.svelte';
-    import ImportSiteVariablesModal from '../../importSiteVariablesModal.svelte';
     import type { Models } from '@appwrite.io/console';
-    import { getFrameworkIcon } from '../../../store';
+    import { getFrameworkIcon } from '../store';
     import { iconPath } from '$lib/stores/app';
-    import VariableEditorModal from '../../variableEditorModal.svelte';
+    import VariableEditorModal from './variableEditorModal.svelte';
+    import SecretVariableModal from './secretVariableModal.svelte';
+    import ImportSiteVariablesModal from './importSiteVariablesModal.svelte';
+    import CreateVariable from './createVariable.svelte';
 
     export let frameworks: Models.Framework[];
     export let selectedFramework: Models.Framework;
@@ -39,6 +40,7 @@
     let showEditorModal = false;
     let showImportModal = false;
     let showSecretModal = false;
+    let showCreate = false;
 
     let currentVariable: Partial<Models.Variable>;
     let frameworkId = selectedFramework.key;
@@ -184,7 +186,8 @@
                                 {/each}
                             </Table.Root>
                         {:else}
-                            <Empty>Create variables to get started</Empty>
+                            <Empty on:click={() => (showCreate = true)}
+                                >Create variables to get started</Empty>
                         {/if}
                     </Layout.Stack>
                     <Layout.Stack direction="row">
@@ -202,7 +205,7 @@
                                 <Icon icon={IconUpload} /> Import .env
                             </Button>
                         </Layout.Stack>
-                        <Button secondary size="s" on:mousedown={() => (showImportModal = true)}>
+                        <Button secondary size="s" on:mousedown={() => (showCreate = true)}>
                             <Icon icon={IconPlus} /> Create variable
                         </Button>
                     </Layout.Stack>
@@ -223,3 +226,7 @@
 {#if showImportModal}
     <ImportSiteVariablesModal bind:show={showImportModal} bind:variables />
 {/if}
+
+{#if showCreate}
+    <CreateVariable bind:show={showCreate} bind:variables />
+{/if}

src/routes/(console)/project-[project]/sites/create-site/createVariable.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { Button, InputPassword } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { InputText } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import { base } from '$app/paths';
+    import { Layout, Selector } from '@appwrite.io/pink-svelte';
+    import { Link } from '$lib/elements';
+    import { page } from '$app/stores';
+
+    export let show = false;
+    export let selectedVar: Partial<Models.Variable> = null;
+    export let variables: Partial<Models.Variable>[];
+
+    let pair = {
+        $id: selectedVar?.$id,
+        key: selectedVar?.key,
+        value: selectedVar?.value,
+        secret: selectedVar?.secret
+    };
+
+    function handleVariable() {
+        if (selectedVar) {
+            variables = variables.map((variable) => {
+                if (variable.$id === selectedVar.$id) {
+                    return pair;
+                }
+                return variable;
+            });
+        } else {
+            variables = [...variables, pair];
+        }
+        show = false;
+    }
+
+    $: if (!show) {
+        selectedVar = null;
+    }
+</script>
+
+<Modal bind:show onSubmit={handleVariable} title={`${selectedVar ? 'Update' : 'Create'} variables`}>
+    <span slot="description">
+        Set the environment variables or secret that will be passed to your site. Global variables
+        can be set in <Link
+            variant="muted"
+            href={`${base}/project-${$page.params.project}/settings`}>project settings</Link
+        >.
+    </span>
+    <Layout.Stack>
+        <InputText
+            id="key"
+            label="Key"
+            placeholder="ENTER_KEY"
+            bind:value={pair.key}
+            required
+            autofocus
+            autocomplete={false} />
+        <InputPassword
+            id="value"
+            label="Value"
+            placeholder="Enter value"
+            bind:value={pair.value}
+            minlength={0} />
+        <Selector.Checkbox
+            id="secret"
+            label="Secret"
+            bind:checked={pair.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 secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>{selectedVar ? 'Update' : 'Create'}</Button>
+    </svelte:fragment>
+</Modal>

src/routes/(console)/project-[project]/sites/create-site/manual/+page.svelte

@@ -11,12 +11,12 @@
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import { writable } from 'svelte/store';
     import Details from '../details.svelte';
-    import Configuration from './configuration.svelte';
     import Aside from './aside.svelte';
     import { BuildRuntime, Framework, ID, Query } from '@appwrite.io/console';
     import type { Models } from '@appwrite.io/console';
     import { processFileList } from '$lib/helpers/files';
     import { createTarGzip } from 'nanotar';
+    import Configuration from '../configuration.svelte';
 
     export let data;
     let showExitModal = false;

src/routes/(console)/project-[project]/sites/create-site/manual/configuration.svelte

@@ -1,219 +0,0 @@
-<script lang="ts">
-    import { Empty } from '$lib/components';
-    import { Button, InputSelect, InputText } from '$lib/elements/forms';
-    import {
-        Fieldset,
-        Layout,
-        Popover,
-        Icon,
-        Table,
-        Badge,
-        HiddenText,
-        ActionMenu,
-        Accordion
-    } from '@appwrite.io/pink-svelte';
-    import {
-        IconDotsHorizontal,
-        IconCode,
-        IconUpload,
-        IconPlus,
-        IconTrash,
-        IconEyeOff,
-        IconPencil
-    } from '@appwrite.io/pink-icons-svelte';
-    import SecretVariableModal from '../secretVariableModal.svelte';
-    import ImportSiteVariablesModal from '../importSiteVariablesModal.svelte';
-    import type { Models } from '@appwrite.io/console';
-    import VariableEditorModal from '../variableEditorModal.svelte';
-
-    export let frameworks: Models.Framework[];
-    export let selectedFramework: Models.Framework;
-
-    export let variables: Partial<Models.Variable>[] = [];
-    export let installCommand = '';
-    export let buildCommand = '';
-    export let outputDirectory = '';
-
-    let showEditorModal = false;
-    let showImportModal = false;
-    let showSecretModal = false;
-
-    let currentVariable: Partial<Models.Variable>;
-    let frameworkId = selectedFramework.key;
-
-    function markAsSecret() {
-        let variable = variables.find((v) => v.key === currentVariable.key);
-        if (variable) {
-            variable.secret = true;
-        }
-    }
-
-    $: frameworkData = frameworks.find((framework) => framework.key === selectedFramework.key);
-</script>
-
-<Fieldset legend="Configuration">
-    <Layout.Stack gap="l">
-        <InputSelect
-            id="framework"
-            label="Framework"
-            placeholder="Select framework"
-            bind:value={frameworkId}
-            options={frameworks.map((framework) => ({
-                value: framework.key,
-                label: framework.name
-            }))}
-            on:change={() => {
-                selectedFramework = frameworks.find((framework) => framework.key === frameworkId);
-            }} />
-
-        <Layout.Stack>
-            <Accordion title="Build settings" badge="Optional">
-                <Layout.Stack>
-                    Set up how your project is built and where the output files are stored.
-                    <Layout.Stack gap="s" direction="row" alignItems="flex-end">
-                        <InputText
-                            id="installCommand"
-                            label="Install command"
-                            bind:value={installCommand}
-                            placeholder={frameworkData?.defaultInstallCommand} />
-                        <Button secondary size="s" on:click={() => (installCommand = '')}>
-                            Reset
-                        </Button>
-                    </Layout.Stack>
-                    <Layout.Stack gap="s" direction="row" alignItems="flex-end">
-                        <InputText
-                            id="buildCommand"
-                            label="Build command"
-                            bind:value={buildCommand}
-                            placeholder={frameworkData?.defaultBuildCommand} />
-                        <Button secondary size="s" on:click={() => (buildCommand = '')}>
-                            Reset
-                        </Button>
-                    </Layout.Stack>
-                    <Layout.Stack gap="s" direction="row" alignItems="flex-end">
-                        <InputText
-                            id="outputDirectory"
-                            label="Output directory"
-                            bind:value={outputDirectory}
-                            placeholder={frameworkData?.defaultOutputDirectory} />
-                        <Button secondary size="s" on:click={() => (outputDirectory = '')}>
-                            Reset
-                        </Button>
-                    </Layout.Stack>
-                </Layout.Stack>
-            </Accordion>
-
-            <Accordion title="Environment variables" badge="Optional" hideDivider>
-                <Layout.Stack gap="l">
-                    <Layout.Stack gap="xl">
-                        Set up environment variables to securely manage keys and settings for your
-                        project.
-
-                        {#if variables?.length}
-                            <Table.Root>
-                                <svelte:fragment slot="header">
-                                    <Table.Header.Cell width="200px">Key</Table.Header.Cell>
-                                    <Table.Header.Cell>Value</Table.Header.Cell>
-                                    <Table.Header.Cell width="10px"></Table.Header.Cell>
-                                </svelte:fragment>
-                                {#each variables as variable}
-                                    <Table.Row>
-                                        <Table.Cell>{variable.key}</Table.Cell>
-                                        <Table.Cell>
-                                            <!-- TODO: fix max width -->
-                                            <div style="max-width: 20rem">
-                                                {#if variable.secret}
-                                                    <Badge content="Secret" variant="secondary" />
-                                                {:else}
-                                                    <HiddenText
-                                                        isVisible={false}
-                                                        text={variable.value} />
-                                                {/if}
-                                            </div>
-                                        </Table.Cell>
-                                        <Table.Cell>
-                                            <div style="margin-inline-start: auto">
-                                                <Popover placement="bottom-end" let:toggle>
-                                                    <Button
-                                                        text
-                                                        icon
-                                                        on:click={(e) => {
-                                                            e.preventDefault();
-                                                            toggle(e);
-                                                        }}>
-                                                        <Icon size="s" icon={IconDotsHorizontal} />
-                                                    </Button>
-                                                    <svelte:fragment slot="tooltip">
-                                                        <ActionMenu.Root>
-                                                            <ActionMenu.Item.Button
-                                                                trailingIcon={IconPencil}
-                                                                on:click={() => {
-                                                                    showEditorModal = true;
-                                                                }}>
-                                                                Edit
-                                                            </ActionMenu.Item.Button>
-                                                            {#if !variable?.secret}
-                                                                <ActionMenu.Item.Button
-                                                                    trailingIcon={IconEyeOff}
-                                                                    on:click={() => {
-                                                                        currentVariable = variable;
-                                                                        showSecretModal = true;
-                                                                    }}>
-                                                                    Secret
-                                                                </ActionMenu.Item.Button>
-                                                            {/if}
-                                                            <ActionMenu.Item.Button
-                                                                trailingIcon={IconTrash}
-                                                                on:click={() => {
-                                                                    showImportModal = true;
-                                                                }}>
-                                                                Delete
-                                                            </ActionMenu.Item.Button>
-                                                        </ActionMenu.Root>
-                                                    </svelte:fragment>
-                                                </Popover>
-                                            </div>
-                                        </Table.Cell>
-                                    </Table.Row>
-                                {/each}
-                            </Table.Root>
-                        {:else}
-                            <Empty>Create variables to get started</Empty>
-                        {/if}
-                    </Layout.Stack>
-                    <Layout.Stack direction="row">
-                        <Layout.Stack direction="row">
-                            <Button
-                                secondary
-                                size="s"
-                                on:mousedown={() => (showEditorModal = true)}>
-                                <Icon icon={IconCode} /> Editor
-                            </Button>
-                            <Button
-                                secondary
-                                size="s"
-                                on:mousedown={() => (showImportModal = true)}>
-                                <Icon icon={IconUpload} /> Import .env
-                            </Button>
-                        </Layout.Stack>
-                        <Button secondary size="s" on:mousedown={() => (showImportModal = true)}>
-                            <Icon icon={IconPlus} /> Create variable
-                        </Button>
-                    </Layout.Stack>
-                </Layout.Stack>
-            </Accordion>
-        </Layout.Stack>
-    </Layout.Stack>
-</Fieldset>
-
-{#if showEditorModal}
-    <VariableEditorModal bind:variables bind:showEditor={showEditorModal} />
-{/if}
-
-{#if showSecretModal}
-    <SecretVariableModal bind:show={showSecretModal} on:click={markAsSecret} />
-{/if}
-
-{#if showImportModal}
-    <ImportSiteVariablesModal bind:show={showImportModal} bind:variables />
-{/if}

src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte

@@ -14,11 +14,11 @@
     import { writable } from 'svelte/store';
     import Details from '../../details.svelte';
     import ProductionBranch from '../../productionBranch.svelte';
-    import Configuration from './configuration.svelte';
     import Aside from '../../aside.svelte';
     import { BuildRuntime, Framework, ID, Query } from '@appwrite.io/console';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
+    import Configuration from '../../configuration.svelte';
 
     export let data;
     let showExitModal = false;
@@ -103,7 +103,6 @@
             const { deployments } = await sdk.forProject.sites.listDeployments(site.$id, [
                 Query.limit(1)
             ]);
-            console.log(deployments);
             const deployment = deployments[0];
             await goto(
                 `${base}/project-${$page.params.project}/sites/create-site/deploying?site=${site.$id}&deployment=${deployment.$id}`
@@ -116,8 +115,6 @@
             trackError(e, Submit.SiteCreate);
         }
     }
-
-    $: console.log(variables);
 </script>
 
 <svelte:head>