Feat vcs

package.json

@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/console": "0.1.0",
+        "@appwrite.io/console": "npm:khushboo-console-vcs@0.0.23",
         "@appwrite.io/pink": "^0.0.6-rc.10",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",

src/lib/actions/analytics.ts

@@ -173,6 +173,8 @@ export enum Submit {
     FunctionUpdateSchedule = 'submit_function_update_schedule',
     FunctionUpdateTimeout = 'submit_function_update_timeout',
     FunctionUpdateEvents = 'submit_function_update_events',
+    FunctionUpdateVcs = 'submit_function_update_vcs',
+    InstallationDelete = 'submit_installation_delete',
     DeploymentCreate = 'submit_deployment_create',
     DeploymentDelete = 'submit_deployment_delete',
     DeploymentUpdate = 'submit_deployment_update',

src/lib/constants.ts

@@ -32,6 +32,7 @@ export enum Dependencies {
     KEY = 'dependency:key',
     KEYS = 'dependency:keys',
     DOMAINS = 'dependency:domains',
+    INSTALLATIONS = 'dependency:installations',
     WEBHOOK = 'dependency:webhook',
     WEBHOOKS = 'dependency:webhooks'
 }

src/lib/stores/sdk.ts

@@ -12,7 +12,8 @@ import {
     Projects,
     Storage,
     Teams,
-    Users
+    Users,
+    Vcs
 } from '@appwrite.io/console';
 
 const endpoint = VARS.APPWRITE_ENDPOINT ?? `${globalThis?.location?.origin}/v1`;
@@ -33,7 +34,8 @@ const sdkForProject = {
     project: new Project(clientProject),
     storage: new Storage(clientProject),
     teams: new Teams(clientProject),
-    users: new Users(clientProject)
+    users: new Users(clientProject),
+    vcs: new Vcs(clientProject)
 };
 
 export const sdk = {

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

@@ -28,6 +28,7 @@
     import Variable from '../../createVariable.svelte';
     import { execute, func } from '../store';
     import UploadVariables from './uploadVariables.svelte';
+    import GitConnection from './gitConnection.svelte';
     import {
         Table,
         TableBody,
@@ -45,6 +46,7 @@
     const functionId = $page.params.function;
     let showDelete = false;
     let selectedVar: Models.Variable = null;
+    let showGitConnection = false;
     let showVariablesUpload = false;
     let showVariablesModal = false;
     let showVariablesDropdown = [];
@@ -71,7 +73,9 @@
                 $func.events || undefined,
                 $func.schedule || undefined,
                 $func.timeout || undefined,
-                $func.enabled
+                $func.enabled,
+                $func.vcsInstallationId || undefined,
+                $func.repositoryId || undefined
             );
             await invalidate(Dependencies.FUNCTION);
             addNotification({
@@ -97,7 +101,9 @@
                 $func.events || undefined,
                 $func.schedule || undefined,
                 $func.timeout || undefined,
-                $func.enabled
+                $func.enabled,
+                $func.vcsInstallationId || undefined,
+                $func.repositoryId || undefined
             );
             await invalidate(Dependencies.FUNCTION);
             addNotification({
@@ -123,7 +129,9 @@
                 $func.events || undefined,
                 functionSchedule,
                 $func.timeout || undefined,
-                $func.enabled
+                $func.enabled,
+                $func.vcsInstallationId || undefined,
+                $func.repositoryId || undefined
             );
             await invalidate(Dependencies.FUNCTION);
             addNotification({
@@ -149,7 +157,9 @@
                 $func.events || undefined,
                 $func.schedule || undefined,
                 timeout,
-                $func.enabled
+                $func.enabled,
+                $func.vcsInstallationId || undefined,
+                $func.repositoryId || undefined
             );
             await invalidate(Dependencies.FUNCTION);
             addNotification({
@@ -166,6 +176,35 @@
         }
     }
 
+    async function disconnectVcs() {
+        try {
+            await sdk.forProject.functions.update(
+                functionId,
+                $func.name,
+                $func.execute || undefined,
+                $func.events || undefined,
+                $func.schedule || undefined,
+                timeout,
+                $func.enabled,
+                '',
+                '',
+                ''
+            );
+            await invalidate(Dependencies.FUNCTION);
+            addNotification({
+                type: 'success',
+                message: 'Git has been disconnected'
+            });
+            trackEvent(Submit.FunctionUpdateVcs);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.FunctionUpdateVcs);
+        }
+    }
+
     async function handleVariableCreated(event: CustomEvent<Models.Variable>) {
         const variable = event.detail;
 
@@ -286,7 +325,14 @@
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
-            <Button secondary on:click={() => ($execute = $func)}>Execute now</Button>
+            <div class="u-flex u-gap-16 u-main-end">
+                {#if $func.vcsInstallationId}
+                    <Button danger on:click={disconnectVcs}>Disconnect Git</Button>
+                {:else}
+                    <Button on:click={() => (showGitConnection = true)}>Connect Git</Button>
+                {/if}
+                <Button secondary on:click={() => ($execute = $func)}>Execute now</Button>
+            </div>
         </svelte:fragment>
     </CardGrid>
 
@@ -518,3 +564,6 @@
 {#if showVariablesUpload}
     <UploadVariables bind:show={showVariablesUpload} />
 {/if}
+{#if showGitConnection}
+    <GitConnection installations={data.installations} bind:show={showGitConnection} />
+{/if}

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

@@ -6,6 +6,7 @@ export const load: PageLoad = async ({ params, depends }) => {
     depends(Dependencies.VARIABLES);
 
     return {
-        variables: await sdk.forProject.functions.listVariables(params.function)
+        variables: await sdk.forProject.functions.listVariables(params.function),
+        installations: await sdk.forProject.vcs.listInstallations()
     };
 };

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

@@ -0,0 +1,174 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Empty, Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
+
+    export let installations: Models.InstallationList;
+    export let show = false;
+
+    const functionId = $page.params.function;
+
+    let selectedInstallation: Models.Installation = null;
+    let repositories: Models.RepositoryList = null;
+
+    let error: string;
+
+    async function selectInstallation(installation: Models.Installation) {
+        try {
+            selectedInstallation = installation;
+        } catch (e) {
+            error = e.message;
+        }
+    }
+
+    async function searchRepositories(searchQuery: string) {
+        repositories = await sdk.forProject.vcs.listRepositories(
+            selectedInstallation.$id,
+            searchQuery || undefined
+        );
+    }
+
+    $: if (selectedInstallation) {
+        searchRepositories(inputValue);
+    }
+
+    async function connectRepository(repository: Models.Repository) {
+        try {
+            await sdk.forProject.functions.update(
+                functionId,
+                $page.data.function.name,
+                $page.data.function.execute,
+                $page.data.function.events || undefined,
+                $page.data.function.schedule || undefined,
+                $page.data.function.timeout || undefined,
+                $page.data.function.enabled,
+                selectedInstallation.$id,
+                `${repository.id}`,
+                `${repository.owner.login}`
+            );
+
+            show = false;
+
+            await invalidate(Dependencies.FUNCTIONS);
+
+            goto(
+                `${base}/console/project-${$page.params.project}/functions/function-${functionId}`
+            );
+        } catch (e) {
+            error = e.message;
+        }
+    }
+    let inputValue = '';
+</script>
+
+<Modal size="big" bind:show onSubmit={() => {}} bind:error>
+    <svelte:fragment slot="header">Connect Git</svelte:fragment>
+
+    {#if selectedInstallation === null}
+        <p>1. Select installation:</p>
+        {#if installations.installations.length > 0}
+            <div class="table-wrapper">
+                <table class="table is-table-layout-auto is-remove-outer-styles">
+                    <tbody class="table-tbody">
+                        {#each installations.installations as installation (installation.$id)}
+                            <tr class="table-row">
+                                <td class="table-col" data-title="Installation">
+                                    <label
+                                        class="u-flex u-cross-center u-gap-8"
+                                        for={installation.$id}>
+                                        <div class="avatar is-size-small">
+                                            <span class="icon-github" aria-hidden="true" />
+                                        </div>
+                                        <div class="u-line-height-1-5">
+                                            <div class="body-text-2 u-bold">
+                                                {installation.organization}
+                                            </div>
+                                        </div>
+                                    </label>
+                                </td>
+
+                                <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                                    <Button on:click={() => selectInstallation(installation)}
+                                        >Select</Button>
+                                </td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
+        {:else}
+            <Empty
+                single
+                on:click={() =>
+                    goto(
+                        `${base}/console/project-${$page.params.project}/settings/git-installations`
+                    )}>
+                <div class="u-flex u-flex-vertical u-cross-center">
+                    <div class="common-section">
+                        <p>No installation found. Create one to continue.</p>
+                    </div>
+                </div>
+            </Empty>
+        {/if}
+    {:else}
+        <p>
+            2. Select repository:
+
+            <input type="text" bind:value={inputValue} placeholder="Enter a string" />
+            {#if repositories === null}
+                <p>Loading...</p>
+            {:else if repositories.repositories.length > 0}
+                <div class="table-wrapper">
+                    <table class="table is-table-layout-auto is-remove-outer-styles">
+                        <tbody class="table-tbody">
+                            {#each repositories.repositories as repository (repository.id)}
+                                <tr class="table-row">
+                                    <td class="table-col" data-title="Installation">
+                                        <label
+                                            class="u-flex u-cross-center u-gap-8"
+                                            for={`${repository.id}`}>
+                                            <div class="avatar is-size-small">
+                                                <span class="icon-github" aria-hidden="true" />
+                                            </div>
+                                            <div class="u-line-height-1-5">
+                                                <div class="body-text-2 u-bold">
+                                                    {repository.name}
+                                                </div>
+                                            </div>
+                                        </label>
+                                    </td>
+
+                                    <td
+                                        class="table-col"
+                                        data-title="Enabled"
+                                        style="--p-col-width:40">
+                                        <Button on:click={() => connectRepository(repository)}
+                                            >Connect</Button>
+                                    </td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+            {:else}
+                <Empty single on:click={() => {}}>
+                    <div class="u-flex u-flex-vertical u-cross-center">
+                        <div class="common-section">
+                            <p>
+                                No repository found. You might be missing permissions on your Git
+                                provider.
+                            </p>
+                        </div>
+                    </div>
+                </Empty>
+            {/if}
+        </p>
+    {/if}
+
+    <svelte:fragment slot="footer" />
+</Modal>