From ad04910931019bba6bdbcc71e149b6909a5a4785 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 13 Aug 2024 18:00:52 +0200
Subject: [PATCH] fix: selfhosted function creation

---
 src/lib/layout/containerButton.svelte         |  4 +-
 src/lib/wizards/functions/cover.svelte        | 77 +++++++------------
 .../functions/steps/templateDeployment.svelte | 19 ++++-
 .../template-[template]/+page.svelte          | 34 ++------
 4 files changed, 51 insertions(+), 83 deletions(-)

diff --git a/src/lib/layout/containerButton.svelte b/src/lib/layout/containerButton.svelte
index facdf58c56..e0b0512d35 100644
--- a/src/lib/layout/containerButton.svelte
+++ b/src/lib/layout/containerButton.svelte
@@ -7,10 +7,10 @@
 
     export let title: string;
     export let tooltipContent =
-        $organization.billingPlan === BillingPlan.FREE
+        $organization?.billingPlan === BillingPlan.FREE
             ? `Upgrade to add more ${title.toLocaleLowerCase()}`
             : `You've reached the ${title.toLocaleLowerCase()} limit for the ${
-                  tierToPlan($organization.billingPlan).name
+                  tierToPlan($organization?.billingPlan)?.name
               } plan`;
     export let disabled: boolean;
     export let buttonText: string;
diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index 27409c2c87..c212b6b474 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -24,7 +24,7 @@
 
 <script lang="ts">
     import { base } from '$app/paths';
-    import { AvatarGroup, Box, CardGrid, Heading } from '$lib/components';
+    import { AvatarGroup, Box, Heading } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { wizard } from '$lib/stores/wizard';
     import { repository, templateConfig, template as templateStore } from './store';
@@ -61,55 +61,7 @@
 <WizardCover>
     <svelte:fragment slot="title">Create Function</svelte:fragment>
     <div class="wizard-container container">
-        {#if isSelfHosted && !isVcsEnabled}
-            <div class="u-flex-vertical u-text-center">
-                <Heading tag="h5" size="5">Choose your source</Heading>
-                <p>
-                    Connect your function to a Git repository or use a template to get started. You
-                    can also create a function manually.
-                </p>
-            </div>
-            <CardGrid>
-                <Heading tag="h6" size="6">Create manually</Heading>
-                <p class="text">Create and deploy your function manually.</p>
-                <svelte:fragment slot="aside">
-                    <div class="u-flex u-height-100-percent u-main-end u-cross-center">
-                        <Button
-                            secondary
-                            on:click={() => {
-                                trackEvent('click_create_function_manual', {
-                                    from: 'cover'
-                                });
-                            }}
-                            on:click={() => wizard.start(CreateManual)}>Create function</Button>
-                    </div>
-                </svelte:fragment>
-            </CardGrid>
-        {/if}
-        <div
-            class="git-container u-position-relative"
-            class:u-margin-block-start-24={isSelfHosted && !isVcsEnabled}>
-            {#if isSelfHosted && !isVcsEnabled}
-                <div
-                    class="overlay u-flex-vertical u-position-absolute u-height-100-percent u-width-full-line u-z-index-1 card u-text-center">
-                    <div
-                        class="u-flex-vertical u-height-100-percent u-main-center u-cross-center u-gap-16">
-                        <Heading size="7" tag="h6">
-                            Configure your self-hosted instance to connect to Git
-                        </Heading>
-                        <p>
-                            Connect your function to a Git repository or use a pre-made template<br />after
-                            configuring your self-hosted instance. Learn more in our
-                            <a
-                                href="https://appwrite.io/docs/advanced/self-hosting/functions#git"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                class="link">documentation</a
-                            >.
-                        </p>
-                    </div>
-                </div>
-            {/if}
+        <div class="git-container u-position-relative">
             <div class="grid-1-1 u-gap-24">
                 <div class="card u-cross-child-start u-height-100-percent">
                     <Heading size="6" tag="h6">Connect Git repository</Heading>
@@ -127,7 +79,30 @@
                             }}
                             on:connect={connect} />
                     </div>
+                    {#if isSelfHosted && isVcsEnabled}
+                        <div
+                            class="overlay u-flex-vertical u-position-absolute u-height-100-percent u-width-full-line u-z-index-1 u-text-center u-inset-0"
+                            style="border-radius: var(--border-radius-medium)">
+                            <div
+                                class="u-flex-vertical u-height-100-percent u-main-center u-cross-center u-gap-16 u-padding-inline-24">
+                                <Heading size="7" tag="h6" trimmed={false}>
+                                    Connect your self-hosted instance to Git
+                                </Heading>
+                                <p>
+                                    Configure your self-hosted instance to connect your function to
+                                    a Git repository.
+                                    <a
+                                        href="https://appwrite.io/docs/advanced/self-hosting/functions#git"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        class="link">Learn more</a
+                                    >.
+                                </p>
+                            </div>
+                        </div>
+                    {/if}
                 </div>
+
                 <div class="card u-height-100-percent">
                     <section class="common-section">
                         <Heading size="6" tag="h6">Quick start</Heading>
@@ -291,7 +266,7 @@
         background: linear-gradient(
             0,
             hsl(var(--p-card-bg-color)) 68.91%,
-            hsl(var(--p-card-bg-color) / 0.5) 95.8%
+            hsl(var(--p-card-bg-color) / 0.5) 92.8%
         );
     }
 </style>
diff --git a/src/lib/wizards/functions/steps/templateDeployment.svelte b/src/lib/wizards/functions/steps/templateDeployment.svelte
index 7a830b5fff..0b631bd8f2 100644
--- a/src/lib/wizards/functions/steps/templateDeployment.svelte
+++ b/src/lib/wizards/functions/steps/templateDeployment.svelte
@@ -2,8 +2,18 @@
     import { LabelCard } from '$lib/components';
     import { FormList } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { onMount } from 'svelte';
     import { templateConfig, templateStepsComponents } from '../store';
 
+    const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
+
+    onMount(() => {
+        if (!isVcsEnabled) {
+            $templateConfig.repositoryBehaviour = 'manual';
+        }
+    });
+
     async function beforeSubmit() {
         if (!$templateConfig.repositoryBehaviour) {
             throw new Error('Please select repository behaviour.');
@@ -30,14 +40,19 @@
 
     <h3>Automatic with Git <span class="inline-code">Recommended</span></h3>
     <FormList gap={16} class="u-margin-block-start-8">
-        <LabelCard name="behaviour" value="new" bind:group={$templateConfig.repositoryBehaviour}>
+        <LabelCard
+            name="behaviour"
+            value="new"
+            bind:group={$templateConfig.repositoryBehaviour}
+            disabled={!isVcsEnabled}>
             <svelte:fragment slot="title">Create a new repository</svelte:fragment>
             Clone the template to a newly created repository in your organization.
         </LabelCard>
         <LabelCard
             name="behaviour"
             value="existing"
-            bind:group={$templateConfig.repositoryBehaviour}>
+            bind:group={$templateConfig.repositoryBehaviour}
+            disabled={!isVcsEnabled}>
             <svelte:fragment slot="title">Add to existing repository</svelte:fragment>
             Clone the template to an existing repository in your organization.
         </LabelCard>
diff --git a/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte
index 0c8da22c0c..ea3334d61e 100644
--- a/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte
@@ -1,26 +1,20 @@
 <script lang="ts">
-    import { Alert, Card, Collapsible, Heading } from '$lib/components';
+    import { Card, Collapsible, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container, ContainerButton } from '$lib/layout';
-    import { isSelfHosted } from '$lib/system';
+    import { isCloud } from '$lib/system';
     import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
     import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
     import { connectTemplate } from '$lib/wizards/functions/cover.svelte';
-    import { consoleVariables } from '$routes/(console)/store';
     import { template } from './store';
     import { app } from '$lib/stores/app';
     import { isServiceLimited } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { functionsList } from '../../store';
 
-    const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
-
-    $: buttonDisabled = isServiceLimited(
-        'functions',
-        $organization?.billingPlan,
-        $functionsList?.total
-    );
+    $: buttonDisabled =
+        isCloud && isServiceLimited('functions', $organization?.billingPlan, $functionsList?.total);
 </script>
 
 <Container>
@@ -74,23 +68,7 @@
                     </span>
                 </Heading>
                 <p class="u-margin-block-start-24">{$template.tagline}</p>
-                {#if isSelfHosted && !isVcsEnabled}
-                    <Alert class="u-margin-block-start-24" type="info">
-                        <svelte:fragment slot="title">
-                            Cloning templates to a self-hosted instance
-                        </svelte:fragment>
-                        In order to clone a template to a locally hosted Appwrite project, you must set
-                        up a Git integration and configure your environment variables.
-                        <svelte:fragment slot="buttons">
-                            <Button
-                                href="https://appwrite.io/docs/advanced/self-hosting/functions"
-                                external
-                                text>
-                                Learn more
-                            </Button>
-                        </svelte:fragment>
-                    </Alert>
-                {/if}
+
                 <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24 u-flex-wrap">
                     <Button
                         text
@@ -101,7 +79,7 @@
                     </Button>
                     <ContainerButton
                         title="functions"
-                        disabled={buttonDisabled || (isSelfHosted && !isVcsEnabled)}
+                        disabled={buttonDisabled}
                         buttonMethod={() => connectTemplate($template)}
                         showIcon={false}
                         buttonText="Create function"