mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
feat: more work on create flow
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
+9
-6
@@ -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>
|
||||
|
||||
+16
-20
@@ -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">
|
||||
|
||||
+3
-2
@@ -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
|
||||
};
|
||||
};
|
||||
|
||||
+1
-1
@@ -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(() => {
|
||||
|
||||
+1
-17
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user