feat: function setting git repo (WIP)

2026-06-06 19:27:48 +00:00 · 2023-06-07 17:42:38 +02:00
parent b8e229d6d7
commit 64eb85e409
7 changed files with 131 additions and 47 deletions
@@ -37,7 +37,7 @@
 <Container>
    <ExecuteFunction />
    <UpdateName />
-    <UpdateConfiguration />
+    <UpdateConfiguration installations={data.installations} />
    <UpdateLogging />
    <UpdatePermissions />
    <UpdateEvents />
@@ -1,6 +1,7 @@
 import { sdk } from '$lib/stores/sdk';
 import { Dependencies } from '$lib/constants';
 import type { PageLoad } from './$types';
+import { Query } from '@appwrite.io/console';

 export const load: PageLoad = async ({ params, depends }) => {
    depends(Dependencies.VARIABLES);
@@ -28,6 +29,7 @@ export const load: PageLoad = async ({ params, depends }) => {

    return {
        variables,
-        globalVariables
+        globalVariables,
+        installations: await sdk.forProject.vcs.listInstallations([Query.limit(10)])
    };
 };
@@ -1,37 +0,0 @@
-<script lang="ts">
-    import Modal from '$lib/components/modal.svelte';
-    import Button from '$lib/elements/forms/button.svelte';
-    import { sdk } from '$lib/stores/sdk';
-
-    export let show: boolean;
-
-    function connectGitHub() {
-        sdk.forProject.vcs.createGitHubInstallation(
-            window.location.href + '?alert=installation-created'
-        );
-    }
-</script>
-
-<Modal headerDivider={false} bind:show size="big">
-    <svelte:fragment slot="header">Connect to Git</svelte:fragment>
-    <p>Select a provider to import an existing git repositories.</p>
-
-    <div class="u-flex u-cross-center u-flex-vertical u-gap-16">
-        <Button on:click={() => connectGitHub()} fullWidth secondary>
-            <span class="icon-github" aria-hidden="true" />
-            <span class="text">Continue with GitHub</span>
-        </Button>
-        <Button disabled fullWidth secondary>
-            <span class="icon-gitlab" aria-hidden="true" />
-            <span class="text">GitLab (coming soon)</span>
-        </Button>
-        <Button disabled fullWidth secondary>
-            <span class="icon-bitBucket" aria-hidden="true" />
-            <span class="text">BitBucket (comong soon)</span>
-        </Button>
-    </div>
-
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (show = false)}>Cancel</Button>
-    </svelte:fragment>
-</Modal>
@@ -0,0 +1,112 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { EmptySearch, PaginationInline } from '$lib/components';
+    import Modal from '$lib/components/modal.svelte';
+    import { InputSearch, InputSelect } from '$lib/elements/forms';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { app } from '$lib/stores/app';
+    import { sdk } from '$lib/stores/sdk';
+    import { type Models } from '@appwrite.io/console';
+
+    export let show: boolean;
+    export let installations: Models.InstallationList;
+
+    let step = 1;
+    let installation: string;
+    let search: string;
+    let repositories: Models.RepositoryList;
+    let offset = 0;
+
+    let options = installations.installations.map((installation) => {
+        return {
+            value: installation.$id,
+            label: installation.provider
+        };
+    });
+
+    async function request() {
+        if (!show) return;
+        repositories = await sdk.forProject.vcs.listRepositories(installation, search);
+    }
+
+    $: if (search !== null) {
+        offset = 0;
+        request();
+    }
+</script>
+
+<Modal headerDivider={false} bind:show size="big">
+    <svelte:fragment slot="header">Git configuration</svelte:fragment>
+    <p class="text">
+        Configure a Git repository that will trigger your function deployments when updated.
+    </p>
+
+    <InputSelect
+        {options}
+        id="installations"
+        label="installation"
+        showLabel={false}
+        bind:value={installation} />
+    <InputSearch placeholder="Search repositories" bind:value={search} />
+
+    <p class="text">
+        Manage organization configuration in your <a
+            class="link"
+            href={`${base}/console/project-${$page.params.project}/settings`}>project settings</a
+        >.
+    </p>
+    {#if repositories?.total}
+        {#each repositories.repositories as repo}
+            <div class="u-flex u-gap-16 u-cross-center">
+                <!-- <div class="avatar is-medium">
+                                <img
+                                    src={`${base}/icons/${$app.themeInUse}/color/${
+                                        repo.runtime.split('-')[0]
+                                    }.svg`}
+                                    alt="technology" />
+                            </div> -->
+                <span class="text">{repo.name}</span>
+            </div>
+        {/each}
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {repositories?.total}</p>
+            <PaginationInline limit={5} bind:offset sum={repositories?.total} hidePages />
+        </div>
+    {:else if search}
+        <EmptySearch hidePages>
+            <div class="common-section">
+                <div class="u-text-center common-section">
+                    <b class="body-text-2 u-bold">Sorry we couldn't find "{search}"</b>
+                    <p>There are no repositories that match your search.</p>
+                </div>
+                <div class="u-flex u-gap-16 common-section u-main-center">
+                    <Button external href="https://appwrite.io/docs/client/teams" text
+                        >Documentation</Button>
+                    <Button secondary on:click={() => (search = '')}>Clear search</Button>
+                </div>
+            </div>
+        </EmptySearch>
+    {:else}
+        <EmptySearch hidePages>
+            <div class="common-section">
+                <div class="u-text-center common-section">
+                    <p class="text u-line-height-1-5">You have no repositories.</p>
+                    <p class="text u-line-height-1-5">
+                        Need a hand? Learn more in our <a
+                            href="https://appwrite.io/docs/client/teams"
+                            target="_blank"
+                            rel="noopener noreferrer">
+                            documentation</a
+                        >.
+                    </p>
+                </div>
+            </div>
+        </EmptySearch>
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary on:click={() => step++}>Next</Button>
+    </svelte:fragment>
+</Modal>
@@ -7,15 +7,18 @@
    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
    import { addNotification } from '$lib/stores/notifications';
    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
    import { func } from '../store';
-    import ConnectGitModal from './connectGitModal.svelte';
+    import GitInstallationModal from '$routes/console/project-[project]/settings/GitInstallationModal.svelte';
+    import GitConfigurationModal from './gitConfigurationModal.svelte';

+    export let installations: Models.InstallationList;
    const functionId = $page.params.function;

    let entrypoint: string;
    let installCmd: string;
    let buildCmd: string;
-    let showGitConnect = false;
+    let showGit = false;

    async function updateConfiguration() {
        try {
@@ -78,7 +81,7 @@
                                <Button
                                    secondary
                                    on:click={() => {
-                                        showGitConnect = true;
+                                        showGit = true;
                                    }}>
                                    <span class="text">Connect Git</span>
                                </Button>
@@ -108,4 +111,8 @@
    </CardGrid>
 </Form>

-<ConnectGitModal bind:show={showGitConnect} />
+{#if !installations.total && showGit}
+    <GitInstallationModal bind:showGitInstall={showGit} />
+{:else}
+    <GitConfigurationModal bind:show={showGit} {installations} />
+{/if}
@@ -413,7 +413,7 @@
 <Delete bind:showDelete />

 {#if showGitIstall}
-    <GitInstallationModal bind:showGitIstall />
+    <GitInstallationModal bind:showGitInstall={showGitIstall} />
 {/if}

 {#if showGitDisconnect}
@@ -3,7 +3,7 @@
    import Button from '$lib/elements/forms/button.svelte';
    import { sdk } from '$lib/stores/sdk';

-    export let showGitIstall: boolean;
+    export let showGitInstall: boolean;

    function connectGitHub() {
        sdk.forProject.vcs.createGitHubInstallation(
@@ -12,7 +12,7 @@
    }
 </script>

-<Modal headerDivider={false} bind:show={showGitIstall} size="big">
+<Modal headerDivider={false} bind:show={showGitInstall} size="big">
    <svelte:fragment slot="header">Connect to Git</svelte:fragment>
    <p>Select a provider to import an existing git repositories.</p>

@@ -32,6 +32,6 @@
    </div>

    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showGitIstall = false)}>Cancel</Button>
+        <Button secondary on:click={() => (showGitInstall = false)}>Cancel</Button>
    </svelte:fragment>
 </Modal>