feat: connect repo

2026-06-06 19:27:48 +00:00 · 2024-11-11 14:41:48 +01:00
parent 6541079109
commit 83516cb557
3 changed files with 299 additions and 72 deletions
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { Alert, ModalWrapper } from '$lib/components';
+    import { Alert } from '$lib/components';
    import { trackEvent } from '$lib/actions/analytics';
    import { Form } from '$lib/elements/forms';
    import { disableCommands } from '$lib/commandCenter';
    import { beforeNavigate } from '$app/navigation';
-    import { Modal } from '@appwrite.io/pink-svelte';
+    import { Layout, Modal } from '@appwrite.io/pink-svelte';

    export let show = false;
    export let size: 'small' | 'big' | 'huge' = null;
@@ -33,7 +33,7 @@
    }
 </script>

-<Modal {title} bind:open={show} description="test">
+<Modal {title} {description} bind:open={show}>
    <Form isModal {onSubmit}>
        {#if error}
            <div bind:this={alert}>
@@ -50,6 +50,8 @@
        <slot />
    </Form>
    <svelte:fragment slot="footer">
-        <slot name="footer" />
+        <Layout.Stack direction="row" justifyContent="flex-end">
+            <slot name="footer" />
+        </Layout.Stack>
    </svelte:fragment>
 </Modal>
@@ -0,0 +1,160 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, InputChoice, InputRadio, InputSelect, InputText } from '$lib/elements/forms';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import Repositories from '$lib/components/repositories.svelte';
+    import { installation, repository } from '$lib/stores/vcs';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { onMount } from 'svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
+    import { Link } from '$lib/elements';
+
+    export let show = false;
+    export let site: Models.Site;
+
+    let installations = { installations: [], total: 0 };
+    let hasInstallations = !!installations?.total;
+
+    let repositoryBehaviour: 'new' | 'existing' = 'new';
+    let repositoryName = '';
+    let repositoryPrivate = true;
+    let selectedInstallationId = '';
+    let selectedRepository = '';
+
+    async function connectRepo() {
+        try {
+            if (repositoryBehaviour === 'new') {
+                const repo = await sdk.forProject.vcs.createRepository(
+                    $installation.$id,
+                    repositoryName,
+                    repositoryPrivate
+                );
+                repository.set(repo);
+                selectedRepository = repo.id;
+            }
+            await sdk.forProject.sites.update(
+                site.$id,
+                site.name,
+                site.framework,
+                site.enabled,
+                site.timeout,
+                site.installCommand,
+                site.buildCommand,
+                site.outputDirectory,
+                site.buildRuntime,
+                site.serveRuntime,
+                selectedInstallationId,
+                selectedRepository
+            );
+            show = false;
+            addNotification({
+                type: 'success',
+                message: 'Repository connected successfully'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    onMount(async () => {
+        installations = await sdk.forProject.vcs.listInstallations();
+        if (!$installation?.$id && installations?.total) {
+            console.log('test');
+            $installation = installations.installations[0];
+        }
+        selectedInstallationId = installations.total ? installations.installations[0]?.$id : '';
+
+        console.log(selectedInstallationId);
+    });
+</script>
+
+<Modal title="Create site" description="Connect to a new repository or an existing one." bind:show>
+    <Layout.Stack gap="xl">
+        <Layout.Stack direction="row" gap="xl">
+            <InputRadio
+                size="s"
+                label="Create new repository"
+                bind:group={repositoryBehaviour}
+                value="new"
+                id="new"
+                name="new" />
+            <InputRadio
+                size="s"
+                label="Connect existing repository"
+                bind:group={repositoryBehaviour}
+                value="existing"
+                id="existing"
+                name="existing" />
+        </Layout.Stack>
+        {#if repositoryBehaviour === 'new'}
+            <Layout.Stack gap="l">
+                {#key selectedInstallationId}
+                    <InputSelect
+                        id="installation"
+                        label="Git organization"
+                        options={installations.installations.map((entry) => {
+                            return {
+                                label: entry.organization,
+                                value: entry.$id
+                            };
+                        })}
+                        on:change={() => {
+                            $installation = installations.installations.find(
+                                (entry) => entry.$id === selectedInstallationId
+                            );
+                        }}
+                        bind:value={selectedInstallationId} />
+                {/key}
+                <InputText
+                    id="repositoryName"
+                    label="Repository name"
+                    placeholder="my-repository"
+                    bind:value={repositoryName} />
+                <InputChoice
+                    id="repositoryPrivate"
+                    label="Keep repository private"
+                    bind:value={repositoryPrivate} />
+            </Layout.Stack>
+        {:else}
+            <Repositories
+                bind:hasInstallations
+                bind:selectedRepository
+                action="button"
+                callbackState={{
+                    from: 'github',
+                    to: 'cover'
+                }}
+                on:connect={(e) => {
+                    trackEvent('click_connect_repository', {
+                        from: 'cover'
+                    });
+                    repository.set(e.detail);
+                    repositoryName = e.detail.name;
+                    selectedRepository = e.detail.id;
+                }} />
+        {/if}
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        {#if repositoryBehaviour === 'existing'}
+            <Layout.Stack>
+                <Link variant="quiet" href="#/">
+                    Missing a repository? check your permissions <Icon icon={IconArrowSmRight} />
+                </Link>
+            </Layout.Stack>
+        {:else if repositoryBehaviour === 'new'}
+            <Button text size="s" on:click={() => (show = false)}>Cancel</Button>
+            <Button
+                size="s"
+                on:click={connectRepo}
+                disabled={!repositoryName || !$installation?.$id}>
+                Create
+            </Button>
+        {/if}
+    </svelte:fragment>
+</Modal>
@@ -3,7 +3,8 @@
    import { page } from '$app/stores';
    import Card from '$lib/components/card.svelte';
    import { Wizard } from '$lib/layout';
-    import { Layout, Typography, Image } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography, Image, Icon } from '@appwrite.io/pink-svelte';
+    import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
    import Check from './(components)/check.svelte';
    import { timeFromNow } from '$lib/helpers/date';
    import type { PageData } from './$types';
@@ -11,10 +12,12 @@
    import Link from '$lib/elements/link.svelte';
    import { humanFileSize } from '$lib/helpers/sizeConvertion';
    import { calculateTime } from '$lib/helpers/timeConversion';
-    import { deployment } from '$routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/store';
+    import ConnectRepoModal from './(components)/connectRepoModal.svelte';

    export let data: PageData;

+    let showConnectRepositry = false;
+
    $: size = humanFileSize(data.deployment.buildSize);
 </script>

@@ -23,80 +26,139 @@
    hideAside={true}
    href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}`}>
    <Layout.Stack gap="l">
-        <Layout.Stack gap="l" direction="column" alignItems="center">
-            <Check />
-            <Layout.Stack gap="s" direction="column" alignItems="center">
-                <Typography.Text variant="l-400">Congratulations!</Typography.Text>
-                <Typography.Text variant="m-400"
-                    >You deployed your Site successfully.</Typography.Text>
+        <Layout.Stack gap="xxl">
+            <Layout.Stack gap="l" direction="column" alignItems="center">
+                <Check />
+                <Layout.Stack gap="s" direction="column" alignItems="center">
+                    <Typography.Text variant="l-400">Congratulations!</Typography.Text>
+                    <Typography.Text variant="m-400"
+                        >You deployed your Site successfully.</Typography.Text>
+                </Layout.Stack>
            </Layout.Stack>
-        </Layout.Stack>
-        <Card padding="xs">
-            <Layout.Stack gap="m" direction="row">
-                <Image
-                    width={445}
-                    height={280}
-                    src="https://f002.backblazeb2.com/file/meldiron-public/Desktop+-+2.png"
-                    alt="Screenshot" />
-                <Layout.Stack justifyContent="center">
-                    <Layout.Stack gap="xs">
-                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
-                            Deployed
-                        </Typography.Text>
-                        {#if data.deployment.providerCommitAuthor}
-                            <Typography.Text variant="m-400">
-                                {timeFromNow(data.deployment.$updatedAt)} ago by {data.deployment
-                                    .providerCommitAuthor}
-                            </Typography.Text>
-                        {:else}
-                            <Typography.Text variant="m-400">
-                                {timeFromNow(data.deployment.$updatedAt)}
-                            </Typography.Text>
-                        {/if}
-                    </Layout.Stack>
-                    <Layout.Stack gap="xs">
-                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary"
-                            >Domains</Typography.Text>
-                        <Link href="https://{data.rule.domain}">{data.rule.domain}</Link>
-                    </Layout.Stack>
-                    <Layout.Stack gap="xl" direction="row">
-                        <Layout.Stack gap="xs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary"
-                                >Build time</Typography.Text>
-                            <Typography.Text variant="m-400"
-                                >{calculateTime(data.deployment.buildTime)}</Typography.Text>
-                        </Layout.Stack>
-                        <Layout.Stack gap="xs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary"
-                                >Total size</Typography.Text>
-                            <Typography.Text variant="m-400"
-                                >{size.value}{size.unit}</Typography.Text>
-                        </Layout.Stack>
-                    </Layout.Stack>
-                    {#if data.deployment.providerCommitHash}
+            <Card padding="xs">
+                <Layout.Stack gap="m" direction="row">
+                    <Image
+                        width={445}
+                        height={280}
+                        src="https://f002.backblazeb2.com/file/meldiron-public/Desktop+-+2.png"
+                        alt="Screenshot" />
+                    <Layout.Stack justifyContent="center">
                        <Layout.Stack gap="xs">
                            <Typography.Text
                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary">Source</Typography.Text>
-                            <Typography.Text variant="m-400"
-                                >{data.deployment.providerBranch} branch</Typography.Text>
-                            <Typography.Text variant="m-400"
-                                >{data.deployment.providerCommitHash} initial commit</Typography.Text>
+                                color="--color-fgcolor-neutral-tertiary">
+                                Deployed
+                            </Typography.Text>
+                            {#if data.deployment.providerCommitAuthor}
+                                <Typography.Text variant="m-400">
+                                    {timeFromNow(data.deployment.$updatedAt)} ago by {data
+                                        .deployment.providerCommitAuthor}
+                                </Typography.Text>
+                            {:else}
+                                <Typography.Text variant="m-400">
+                                    {timeFromNow(data.deployment.$updatedAt)}
+                                </Typography.Text>
+                            {/if}
                        </Layout.Stack>
-                    {/if}
+                        <Layout.Stack gap="xs">
+                            <Typography.Text
+                                variant="m-400"
+                                color="--color-fgcolor-neutral-tertiary">Domains</Typography.Text>
+                            <Link href="https://{data.rule.domain}">{data.rule.domain}</Link>
+                        </Layout.Stack>
+                        <Layout.Stack gap="xl" direction="row">
+                            <Layout.Stack gap="xs" inline>
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--color-fgcolor-neutral-tertiary"
+                                    >Build time</Typography.Text>
+                                <Typography.Text variant="m-400"
+                                    >{calculateTime(data.deployment.buildTime)}</Typography.Text>
+                            </Layout.Stack>
+                            <Layout.Stack gap="xs" inline>
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--color-fgcolor-neutral-tertiary"
+                                    >Total size</Typography.Text>
+                                <Typography.Text variant="m-400"
+                                    >{size.value}{size.unit}</Typography.Text>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                        {#if data.deployment.providerCommitHash}
+                            <Layout.Stack gap="xs">
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--color-fgcolor-neutral-tertiary"
+                                    >Source</Typography.Text>
+                                <Typography.Text variant="m-400"
+                                    >{data.deployment.providerBranch} branch</Typography.Text>
+                                <Typography.Text variant="m-400"
+                                    >{data.deployment.providerCommitHash} initial commit</Typography.Text>
+                            </Layout.Stack>
+                        {/if}
+                    </Layout.Stack>
                </Layout.Stack>
-            </Layout.Stack>
-        </Card>
+            </Card>
+        </Layout.Stack>

        {#if !data.deployment.providerCommitHash}
            <Layout.Stack direction="row">
-                <Card isTile>asdsads</Card>
-                <Card isTile>asdsads</Card>
-                <Card isTile>asdsads</Card>
+                <Card isTile radius="s" isButton on:click={() => (showConnectRepositry = true)}>
+                    <Layout.Stack gap="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center">
+                            <Typography.Title size="s">Connect to repository</Typography.Title>
+                            <Icon icon={IconArrowSmRight} />
+                        </Layout.Stack>
+                        <Typography.Text variant="m-400">
+                            Connect to a new repository or an existing one.
+                        </Typography.Text>
+                    </Layout.Stack>
+                </Card>
+                <Card isTile radius="s" isButton>
+                    <Layout.Stack gap="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center">
+                            <Typography.Title size="s">Add domain</Typography.Title>
+                            <Icon icon={IconArrowSmRight} />
+                        </Layout.Stack>
+                        <Typography.Text variant="m-400">
+                            Connect to an existing domain or purchase a new one.
+                        </Typography.Text>
+                    </Layout.Stack>
+                </Card>
+                <Card isTile radius="s" isButton>
+                    <Layout.Stack gap="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center">
+                            <Typography.Title size="s">Add collaborators</Typography.Title>
+                            <Icon icon={IconArrowSmRight} />
+                        </Layout.Stack>
+                        <Typography.Text variant="m-400">
+                            Share your progress and start collaborating with your team.
+                        </Typography.Text>
+                    </Layout.Stack>
+                </Card>
+                <Card isTile radius="s" isButton>
+                    <Layout.Stack gap="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center">
+                            <Typography.Title size="s">Open on mobile</Typography.Title>
+                            <Icon icon={IconArrowSmRight} />
+                        </Layout.Stack>
+                        <Typography.Text variant="m-400">
+                            Open the preview of your site on any mobile or tablet device.
+                        </Typography.Text>
+                    </Layout.Stack>
+                </Card>
            </Layout.Stack>
        {/if}
    </Layout.Stack>
@@ -104,8 +166,11 @@
        <Button
            size="s"
            fullWidthMobile
-            secondary
            href="{`${base}/project-${$page.params.project}/sites/site-${$page.params.site}`}}"
            >Close</Button>
    </svelte:fragment>
 </Wizard>
+
+{#if showConnectRepositry}
+    <ConnectRepoModal bind:show={showConnectRepositry} site={data.site} />
+{/if}