Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: selfhosted function creation #1290

Merged
merged 1 commit into from
Aug 14, 2024
Merged

fix: selfhosted function creation #1290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/lib/layout/containerButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
77 changes: 26 additions & 51 deletions src/lib/wizards/functions/cover.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
19 changes: 17 additions & 2 deletions src/lib/wizards/functions/steps/templateDeployment.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.');
Expand All @@ -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>
Expand Down
34 changes: 6 additions & 28 deletions src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -101,7 +79,7 @@
</Button>
<ContainerButton
title="functions"
disabled={buttonDisabled || (isSelfHosted && !isVcsEnabled)}
disabled={buttonDisabled}
buttonMethod={() => connectTemplate($template)}
showIcon={false}
buttonText="Create function"
Expand Down
Loading