Skip to content

Commit

Permalink
Update create function cover for case where VCS is not enabled
Browse files Browse the repository at this point in the history
  • Loading branch information
@stnguyen90
stnguyen90 committed Sep 13, 2023
1 parent 91df9e0 commit d6def22
Showing 1 changed file with 199 additions and 132 deletions.
331 changes: 199 additions & 132 deletions src/lib/wizards/functions/cover.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@

<script lang="ts">
import { base } from '$app/paths';
import { AvatarGroup, Box, Heading } from '$lib/components';
import { AvatarGroup, Box, CardGrid, 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 All @@ -43,7 +43,10 @@
import CreateManual from './createManual.svelte';
import CreateGit from './createGit.svelte';
import { tooltip } from '$lib/actions/tooltip';
import { isSelfHosted } from '$lib/system';
import { consoleVariables } from '$routes/console/store';
const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
let hasInstallations: boolean;
let selectedRepository: string;
Expand All @@ -62,10 +65,56 @@
<WizardCover>
<svelte:fragment slot="title">Create Function</svelte:fragment>
<div class="wizard-container container">
<div class="grid-1-1 u-gap-24">
<div>
{#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}>
<div
class:u-hide={!isSelfHosted || isVcsEnabled}
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/configuration#git"
target="_blank"
rel="noopener noreferrer"
class="link">documentation</a
>.
</p>
</div>
</div>
<div class="grid-1-1 u-gap-24">
<div class="card u-cross-child-start u-height-100-percent">
<Heading size="6" tag="h2">Connect Git repository</Heading>
<Heading size="6" tag="h6">Connect Git repository</Heading>
<p class="u-margin-block-start-8">
Create and deploy a function with a connected git repository.
</p>
Expand All @@ -81,146 +130,164 @@
on:connect={connect} />
</div>
</div>
</div>
<div class="card u-height-100-percent">
<section class="common-section">
<h2 class="heading-level-6">Quick start</h2>
<p class="u-margin-block-start-8">Use a starter template.</p>
<ul
class="grid-box u-margin-block-start-16"
style:--grid-item-size="8rem"
style:--grid-item-size-small-screens="9rem"
style:--grid-gap=".5rem">
{#await $runtimesList}
{#each Array(6) as _i}
<li>
<button
disabled
class="box u-width-full-line u-flex u-cross-center u-main-center"
style:--box-padding="1rem"
style:--box-border-radius="var(--border-radius-small)">
<div class="avatar is-size-small">
<div class="loader u-margin-16" />
</div>
</button>
</li>
{/each}
{:then response}
{@const runtimes = new Map(response.runtimes.map((r) => [r.$id, r]))}
{@const templates = quickStart.runtimes.filter((_template) =>
runtimes.has(_template.name)
)}
{#each templates.slice(0, 6) as template}
{@const runtimeDetail = runtimes.get(template.name)}
<li>
<div class="card u-height-100-percent">
<section class="common-section">
<Heading size="6" tag="h6">Quick start</Heading>
<p class="u-margin-block-start-8">Use a starter template.</p>
<ul
class="grid-box u-margin-block-start-16"
style:--grid-item-size="8rem"
style:--grid-item-size-small-screens="9rem"
style:--grid-gap=".5rem">
{#await $runtimesList}
{#each Array(6) as _i}
<li>
<button
disabled
class="box u-width-full-line u-flex u-cross-center u-main-center"
style:--box-padding="1rem"
style:--box-border-radius="var(--border-radius-small)">
<div class="avatar is-size-small">
<div class="loader u-margin-16" />
</div>
</button>
</li>
{/each}
{:then response}
{@const runtimes = new Map(
response.runtimes.map((r) => [r.$id, r])
)}
{@const templates = quickStart.runtimes.filter((_template) =>
runtimes.has(_template.name)
)}
{#each templates.slice(0, 6) as template}
{@const runtimeDetail = runtimes.get(template.name)}
<li>
<button
on:click={() => {
trackEvent('click_connect_template', {
from: 'cover',
template: quickStart.id,
runtime: template.name
});
}}
on:click={() =>
connectTemplate(quickStart, template.name)}
class="box u-width-full-line u-flex u-cross-center u-gap-8"
style:--box-padding="1rem"
style:--box-border-radius="var(--border-radius-small)">
<div class="avatar is-size-small">
<img
style:--p-text-size="1.25rem"
src={`${base}/icons/${$app.themeInUse}/color/${
template.name.split('-')[0]
}.svg`}
alt={template.name} />
</div>
<div class="body-text-2">
{runtimeDetail.name}
</div>
</button>
</li>
{/each}

{#if templates.length < 6}
<li
use:tooltip={{
content: 'More runtimes coming soon'
}}>
<Box
class="u-width-full-line u-flex u-cross-center u-gap-8"
padding={16}
radius="small">
<AvatarGroup
icons={['dotnet', 'deno']}
total={4}
avatarSize="small"
color="u-color-text-gray"
bordered />
</Box>
</li>
{/if}
{/await}
</ul>
</section>
<div class="u-sep-block-start common-section" />
<section class="common-section">
<Heading size="6" tag="h6">Templates</Heading>
<p class="text u-margin-block-start-8">
Find the right template for your use case.
</p>

<ul class="clickable-list u-margin-block-start-16">
{#each templates as template}
<li class="clickable-list-item">
<button
type="button"
on:click={() => {
trackEvent('click_connect_template', {
from: 'cover',
template: quickStart.id,
runtime: template.name
template: template.id
});
}}
on:click={() => connectTemplate(quickStart, template.name)}
class="box u-width-full-line u-flex u-cross-center u-gap-8"
style:--box-padding="1rem"
style:--box-border-radius="var(--border-radius-small)">
<div class="avatar is-size-small">
<img
style:--p-text-size="1.25rem"
src={`${base}/icons/${$app.themeInUse}/color/${
template.name.split('-')[0]
}.svg`}
alt={template.name} />
on:click={() => connectTemplate(template)}
class="clickable-list-button u-width-full-line u-flex u-gap-12">
<div
class="avatar is-size-small"
style:--p-text-size="1.25rem">
<span class={template.icon} />
</div>
<div class="body-text-2">
{runtimeDetail.name}
<div class="u-flex u-flex-vertical u-gap-4">
<div class="body-text-2 u-bold u-trim">
{template.name}
</div>
<div class="u-trim-1 u-color-text-gray">
{template.tagline}
</div>
</div>
</button>
</li>
{/each}

{#if templates.length < 6}
<li
use:tooltip={{
content: 'More runtimes coming soon'
}}>
<Box
class="u-width-full-line u-flex u-cross-center u-gap-8"
padding={16}
radius="small">
<AvatarGroup
icons={['dotnet', 'deno']}
total={4}
avatarSize="small"
color="u-color-text-gray"
bordered />
</Box>
</li>
{/if}
{/await}
</ul>
</section>
<div class="u-sep-block-start common-section" />
<section class="common-section">
<h2 class="heading-level-6">Templates</h2>
<p class="text u-margin-block-start-8">
Find the right template for your use case.
</p>

<ul class="clickable-list u-margin-block-start-16">
{#each templates as template}
<li class="clickable-list-item">
<button
type="button"
on:click={() => {
trackEvent('click_connect_template', {
from: 'cover',
template: template.id
});
}}
on:click={() => connectTemplate(template)}
class="clickable-list-button u-width-full-line u-flex u-gap-12">
<div class="avatar is-size-small" style:--p-text-size="1.25rem">
<span class={template.icon} />
</div>
<div class="u-flex u-flex-vertical u-gap-4">
<div class="body-text-2 u-bold u-trim">{template.name}</div>
<div class="u-trim-1 u-color-text-gray">
{template.tagline}
</div>
</div>
</button>
</li>
{/each}
</ul>
</section>
<Button
text
noMargin
class="u-margin-inline-start-auto u-margin-block-start-16"
href={`${base}/console/project-${$page.params.project}/functions/templates`}>
<span> All templates </span>
<span class="icon-cheveron-right" aria-hidden="true" />
</Button>
</ul>
</section>
<Button
text
noMargin
class="u-margin-inline-start-auto u-margin-block-start-16"
href={`${base}/console/project-${$page.params.project}/functions/templates`}>
<span> All templates </span>
<span class="icon-cheveron-right" aria-hidden="true" />
</Button>
</div>
</div>
<p class="u-margin-block-start-16">
You can also create a function <button
class="link"
on:click={() => {
trackEvent('click_create_function_manual', {
from: 'cover'
});
}}
on:click={() => wizard.start(CreateManual)}>manually</button>
or using the CLI.
<a
href="https://appwrite.io/docs/functions-deploy"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more</a
>.
</p>
</div>
<p class="u-margin-block-start-16">
You can also create a function <button
class="link"
on:click={() => {
trackEvent('click_create_function_manual', {
from: 'cover'
});
}}
on:click={() => wizard.start(CreateManual)}>manually</button>
or using the CLI.
<a
href="https://appwrite.io/docs/functions-deploy"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more</a
>.
</p>
</div>
</WizardCover>

<style>
.git-container .overlay {
background: linear-gradient(
0,
#fcfcff 18.49%,
#fcfcff 68.91%,
rgba(252, 252, 255, 0.5) 95.8%
);
}
</style>

0 comments on commit d6def22

Please sign in to comment.