feat: more work on create flow

This commit is contained in:
Arman
2025-03-07 13:12:43 +01:00
parent 88d77fc26f
commit 22414d6b3f
7 changed files with 53 additions and 63 deletions
+5 -17
View File
@@ -1,29 +1,14 @@
<script lang="ts">
import { page } from '$app/stores';
import Button from '$lib/elements/forms/button.svelte';
import { sdk } from '$lib/stores/sdk';
import { consoleVariables } from '$routes/(console)/store';
import { IconGithub } from '@appwrite.io/pink-icons-svelte';
import { Alert, Card, Empty, Icon, Layout } from '@appwrite.io/pink-svelte';
import { isSelfHosted } from '$lib/system';
import { connectGitHub } from '$lib/stores/git';
export let callbackState: Record<string, string> = null;
let isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
function connectGitHub() {
const redirect = new URL($page.url);
if (callbackState) {
Object.keys(callbackState).forEach((key) => {
redirect.searchParams.append(key, callbackState[key]);
});
}
const target = new URL(`${sdk.forProject.client.config.endpoint}/vcs/github/authorize`);
target.searchParams.set('project', $page.params.project);
target.searchParams.set('success', redirect.toString());
target.searchParams.set('failure', redirect.toString());
target.searchParams.set('mode', 'admin');
return target;
}
</script>
<Layout.Stack>
@@ -46,7 +31,10 @@
title="No installation was added to the project yet"
description="Add an installation to connect repositories">
<svelte:fragment slot="actions">
<Button secondary href={connectGitHub().toString()} disabled={!isVcsEnabled}>
<Button
secondary
href={connectGitHub(callbackState).toString()}
disabled={!isVcsEnabled}>
<Icon slot="start" icon={IconGithub} />
Connect to GitHub
</Button>
+18
View File
@@ -0,0 +1,18 @@
import { page } from '$app/stores';
import { get } from 'svelte/store';
import { sdk } from './sdk';
export function connectGitHub(callbackState: Record<string, string> = null) {
const redirect = new URL(get(page).url);
if (callbackState) {
Object.keys(callbackState).forEach((key) => {
redirect.searchParams.append(key, callbackState[key]);
});
}
const target = new URL(`${sdk.forProject.client.config.endpoint}/vcs/github/authorize`);
target.searchParams.set('project', gat(page).params.project);
target.searchParams.set('success', redirect.toString());
target.searchParams.set('failure', redirect.toString());
target.searchParams.set('mode', 'admin');
return target;
}
@@ -2,29 +2,32 @@
import { Card, SvgIcon } from '$lib/components';
import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
import { IconGithub, IconGitBranch } from '@appwrite.io/pink-icons-svelte';
import type { Models } from '@appwrite.io/console';
import type { Models, Runtime } from '@appwrite.io/console';
export let runtime: Partial<Models.Runtime>;
export let runtime: Runtime;
export let repositoryName: string;
export let branch: string;
export let rootDir: string;
export let domain: string = '';
export let showGitData = true;
export let runtimes: Models.RuntimeList;
$: selectedRuntime = runtimes?.runtimes.find((r) => r.$id === runtime);
</script>
<Card padding="s" radius="s">
<Layout.Stack gap="xl">
<slot />
<Layout.Stack gap="l">
{#if runtime?.name}
{#if selectedRuntime?.name}
<Layout.Stack gap="xxxs">
<Typography.Caption variant="400">Runtime</Typography.Caption>
<Layout.Stack gap="xxs" alignItems="center" direction="row">
{#if runtime?.key}
<SvgIcon iconSize="small" size={16} name={runtime.key} />
{#if selectedRuntime?.key}
<SvgIcon iconSize="small" size={16} name={selectedRuntime.key} />
{/if}
<Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
{runtime.name}
{selectedRuntime.name}
</Typography.Text>
</Layout.Stack>
</Layout.Stack>
@@ -24,6 +24,7 @@
import { iconPath } from '$lib/stores/app';
import { getIconFromRuntime } from '../../store';
import Permissions from './permissions.svelte';
import { connectGitHub } from '$lib/stores/git';
export let data;
@@ -36,7 +37,7 @@
let name = data.template.name;
let id = ID.unique();
let runtime: string;
let runtime: Runtime;
let branch = 'main';
let rootDir = './';
let connectBehaviour: 'now' | 'later' = 'now';
@@ -56,24 +57,21 @@
$installation = data.installations.installations[0];
}
selectedInstallationId = $installation?.$id;
});
if (data.template.runtimes && data.template.runtimes.length > 0) {
const targetRuntime = data.template.runtimes[0].name;
const matchingRuntimes = Object.values(Runtime).filter((r) =>
r.startsWith(targetRuntime.split('-')[0])
);
let callbackState: Record<string, string> = null;
function connectGitHub() {
const redirect = new URL($page.url);
if (callbackState) {
Object.keys(callbackState).forEach((key) => {
redirect.searchParams.append(key, callbackState[key]);
matchingRuntimes.sort((a, b) => {
const versionA = a.split('-')[1];
const versionB = b.split('-')[1];
return versionB.localeCompare(versionA, undefined, { numeric: true });
});
runtime = matchingRuntimes[0];
}
const target = new URL(`${sdk.forProject.client.config.endpoint}/vcs/github/authorize`);
target.searchParams.set('project', $page.params.project);
target.searchParams.set('success', redirect.toString());
target.searchParams.set('failure', redirect.toString());
target.searchParams.set('mode', 'admin');
return target;
}
console.log(runtime);
});
async function createRepository() {
try {
@@ -185,7 +183,7 @@
}
$: if (repositoryBehaviour === 'new') {
selectedInstallationId = $installation?.$id;
selectedInstallationId ??= $installation?.$id;
repositoryName ??= name.split(' ').join('-').toLowerCase();
}
@@ -193,8 +191,6 @@
selectedRepository = null;
}
$: console.log(repositoryName);
$: console.log(data.template);
$: console.log(variables);
</script>
@@ -339,7 +335,7 @@
</Layout.Stack>
</Form>
<svelte:fragment slot="aside">
<Aside {runtime} {repositoryName} {branch} {rootDir} />
<Aside {runtime} {repositoryName} {branch} {rootDir} runtimes={data.runtimesList} />
</svelte:fragment>
<svelte:fragment slot="footer">
@@ -1,11 +1,12 @@
import { sdk } from '$lib/stores/sdk';
export const load = async ({ parent, params }) => {
let { installations } = await parent();
let { installations, runtimesList } = await parent();
const template = await sdk.forProject.functions.getTemplate(params.template);
return {
installations,
template
template,
runtimesList
};
};
@@ -2,7 +2,7 @@
import { scopes } from '$lib/constants';
import { Fieldset, Layout, Selector } from '@appwrite.io/pink-svelte';
export let templateScopes = [];
export let templateScopes: string[];
let execute = false;
// onMount(() => {
@@ -34,6 +34,7 @@
import { project } from '$routes/(console)/project-[project]/store';
import { buildVerboseDomain } from '../../store';
import { organization } from '$lib/stores/organization';
import { connectGitHub } from '$lib/stores/git';
export let data;
@@ -68,23 +69,6 @@
selectedInstallationId = $installation?.$id;
});
let callbackState: Record<string, string> = null;
function connectGitHub() {
const redirect = new URL($page.url);
if (callbackState) {
Object.keys(callbackState).forEach((key) => {
redirect.searchParams.append(key, callbackState[key]);
});
}
const target = new URL(`${sdk.forProject.client.config.endpoint}/vcs/github/authorize`);
target.searchParams.set('project', $page.params.project);
target.searchParams.set('success', redirect.toString());
target.searchParams.set('failure', redirect.toString());
target.searchParams.set('mode', 'admin');
return target;
}
async function createRepository() {
try {
isCreatingRepository = true;