mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
chore: port repositories to svelte 5 add option to add new installations
This commit is contained in:
@@ -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">
|
||||
|
||||
+4
-4
@@ -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}
|
||||
|
||||
+4
-4
@@ -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}
|
||||
|
||||
+2
-2
@@ -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">
|
||||
|
||||
+4
-4
@@ -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}
|
||||
|
||||
+2
-2
@@ -214,8 +214,8 @@
|
||||
callbackState={{
|
||||
createDeployment: 'true'
|
||||
}}
|
||||
on:connect={(e) => {
|
||||
repository.set(e.detail);
|
||||
connect={(e) => {
|
||||
repository.set(e);
|
||||
hasRepository = true;
|
||||
}} />
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user