chore: port repositories to svelte 5 add option to add new installations

This commit is contained in:
Arman
2025-04-09 15:26:15 +02:00
parent af80c701fd
commit 83441b50ca
9 changed files with 72 additions and 58 deletions
+39 -24
View File
@@ -5,7 +5,6 @@
import { sdk } from '$lib/stores/sdk';
import { repositories } from '$routes/(console)/project-[project]/functions/function-[function]/store';
import { installation, installations, repository } from '$lib/stores/vcs';
import { createEventDispatcher } from 'svelte';
import {
Layout,
Table,
@@ -15,27 +14,33 @@
Skeleton,
Button as PinkButton
} from '@appwrite.io/pink-svelte';
import { IconLockClosed } from '@appwrite.io/pink-icons-svelte';
import { IconLockClosed, IconPlus } from '@appwrite.io/pink-icons-svelte';
import ConnectGit from './connectGit.svelte';
import SvgIcon from '../svgIcon.svelte';
import { VCSDetectionType, type Models } from '@appwrite.io/console';
import { getFrameworkIcon } from '$lib/stores/sites';
import { connectGitHub } from '$lib/stores/git';
const dispatch = createEventDispatcher();
let {
action = $bindable('select'),
selectedRepository = $bindable(null),
installationList = $bindable($installations),
hasInstallations = $bindable($installations?.total > 0),
product = 'functions',
callbackState = null,
connect = () => {}
}: {
action?: 'button' | 'select';
selectedRepository?: string;
installationList?: Models.InstallationList;
hasInstallations?: boolean;
product?: 'functions' | 'sites';
callbackState?: Record<string, string> | null;
connect?: (repository: Models.ProviderRepository) => void;
} = $props();
export let callbackState: Record<string, string> = null;
export let selectedRepository: string = null;
export let hasInstallations = false;
export let action: 'button' | 'select' = 'select';
export let installationList = $installations;
export let product: 'functions' | 'sites' = 'functions';
let search = '';
let selectedInstallation = null;
$: {
hasInstallations = installationList?.total > 0;
}
let search = $state('');
let selectedInstallation = $state(null);
async function loadInstallations() {
if (installationList) {
@@ -117,13 +122,23 @@
<Layout.Stack direction="row">
<InputSelect
id="installation"
options={installations.map((entry) => {
return {
label: entry.organization,
value: entry.$id
};
})}
options={[
...installations.map((entry) => {
return {
label: entry.organization,
value: entry.$id
};
}),
{
label: 'Add installation',
leadingIcon: IconPlus,
value: 'new'
}
]}
on:change={() => {
if (selectedInstallation === 'new') {
window.location.href = connectGitHub(callbackState).toString();
}
search = '';
installation.set(
installations.find((entry) => entry.$id === selectedInstallation)
@@ -170,7 +185,7 @@
type="radio"
name="repositories"
bind:group={selectedRepository}
on:change={() => repository.set(repo)}
onchange={() => repository.set(repo)}
value={repo.id} />
{/if}
{#if product === 'sites'}
@@ -222,7 +237,7 @@
<PinkButton.Button
size="xs"
variant="secondary"
on:click={() => dispatch('connect', repo)}>
on:click={() => connect(repo)}>
Connect
</PinkButton.Button>
</Layout.Stack>
@@ -57,12 +57,10 @@
baseRuntimesList.some((base) => base.$id === r.name)
);
function connect(e: CustomEvent<Models.ProviderRepository>) {
function connect(e: Models.ProviderRepository) {
trackEvent(Click.ConnectRepositoryClick, { from: 'cover' });
repository.set(e.detail);
goto(
`${wizardBase}/create-function/repository-${e.detail.id}?installation=${$installation.$id}`
);
repository.set(e);
goto(`${wizardBase}/create-function/repository-${e.id}?installation=${$installation.$id}`);
}
</script>
@@ -110,7 +108,7 @@
from: 'github',
to: 'cover'
}}
on:connect={connect} />
{connect} />
</Layout.Stack>
{#if hasInstallations}
<Layout.Stack gap="l">
@@ -288,13 +288,13 @@
bind:hasInstallations
bind:selectedRepository
action="button"
on:connect={(e) => {
connect={(e) => {
trackEvent(Click.ConnectRepositoryClick, {
from: 'template-wizard'
});
repository.set(e.detail);
repositoryName = e.detail.name;
selectedRepository = e.detail.id;
repository.set(e);
repositoryName = e.name;
selectedRepository = e.id;
showConfig = true;
}} />
{/if}
@@ -114,13 +114,13 @@
bind:selectedRepository
action="button"
{callbackState}
on:connect={(e) => {
connect={(e) => {
trackEvent(Click.ConnectRepositoryClick, {
from: 'functions'
});
repository.set(e.detail);
repositoryName = e.detail.name;
selectedRepository = e.detail.id;
repository.set(e);
repositoryName = e.name;
selectedRepository = e.id;
connectRepo();
}} />
{/if}
@@ -209,8 +209,8 @@
callbackState={{
createDeployment: 'true'
}}
on:connect={(e) => {
repository.set(e.detail);
connect={(e) => {
repository.set(e);
hasRepository = true;
}} />
{/if}
@@ -117,13 +117,13 @@
product="sites"
action="button"
{callbackState}
on:connect={(e) => {
connect={(e) => {
trackEvent(Click.ConnectRepositoryClick, {
from: 'sites'
});
repository.set(e.detail);
repositoryName = e.detail.name;
selectedRepository = e.detail.id;
repository.set(e);
repositoryName = e.name;
selectedRepository = e.id;
connectRepo();
}} />
{/if}
@@ -11,16 +11,17 @@
import type { Models } from '@appwrite.io/console';
import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
export let data;
let hasInstallations = !!data?.installations?.total;
let selectedRepository: string = null;
let { data } = $props();
function onConnect(e: CustomEvent<Models.ProviderRepository>) {
let hasInstallations = $derived(!!data?.installations?.total);
let selectedRepository: string = $state(null);
function onConnect(e: Models.ProviderRepository) {
trackEvent(Click.ConnectRepositoryClick, {
from: 'cover'
});
repository.set(e.detail);
const target = `${base}/project-${page.params.project}/sites/create-site/repositories/repository-${e.detail.id}?installation=${$installation.$id}`;
repository.set(e);
const target = `${base}/project-${page.params.project}/sites/create-site/repositories/repository-${e.id}?installation=${$installation.$id}`;
goto(target);
}
</script>
@@ -33,7 +34,7 @@
bind:selectedRepository
product="sites"
action="button"
on:connect={onConnect} />
connect={onConnect} />
</Fieldset>
{:else}
<Repositories
@@ -41,7 +42,7 @@
bind:selectedRepository
product="sites"
action="button"
on:connect={onConnect} />
connect={onConnect} />
{/if}
<svelte:fragment slot="aside">
@@ -282,13 +282,13 @@
bind:selectedRepository
product="sites"
action="button"
on:connect={(e) => {
connect={(e) => {
trackEvent(Click.ConnectRepositoryClick, {
from: 'template-wizard'
});
repository.set(e.detail);
repositoryName = e.detail.name;
selectedRepository = e.detail.id;
repository.set(e);
repositoryName = e.name;
selectedRepository = e.id;
showSiteConfig = true;
}} />
{/if}
@@ -214,8 +214,8 @@
callbackState={{
createDeployment: 'true'
}}
on:connect={(e) => {
repository.set(e.detail);
connect={(e) => {
repository.set(e);
hasRepository = true;
}} />
{/if}