Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feat-pink-v2' of https://github.com/appwrite/console into feat-pink-v2-legacy-fixes

Browse Source
This commit is contained in:
Torsten Dittmann
2025-01-28 22:46:56 +01:00
parent 3049d285e5 a5a34ca7b6
commit c8ce3a48bb
25 changed files with 4379 additions and 5332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/searchQuery.svelte
+6 -3
View File
@@ -4,8 +4,8 @@
import { trackEvent } from '$lib/actions/analytics';
import { onMount } from 'svelte';
import { onDestroy } from 'svelte';
import { Input } from '@appwrite.io/pink-svelte';
import { IconX } from '@appwrite.io/pink-icons-svelte';
import { Icon, Input } from '@appwrite.io/pink-svelte';
import { IconSearch, IconX } from '@appwrite.io/pink-icons-svelte';
export let search = '';
export let placeholder = '';
@@ -58,8 +58,11 @@
}
</script>
<div style:max-width="260px" style:width="100%">
<div style:max-width="360px" style:width="100%">
<Input.Text {placeholder} {disabled} {required} type="search" bind:value={search}>
<svelte:fragment slot="start">
<Icon icon={IconSearch} />
</svelte:fragment>
<svelte:fragment slot="end">
{#if search}
<Input.Action icon={IconX} on:click={() => (search = '')} />
src/lib/components/svgIcon.svelte
+5 -4
View File
@@ -9,10 +9,11 @@
export { className as class };
enum iconSizes {
small = '--icon-size-small',
medium = '--icon-size-medium',
large = '--icon-size-large',
xlarge = '--icon-size-extra-large'
xs = '--icon-size-xs',
small = '--icon-size-s',
medium = '--icon-size-m',
large = '--icon-size-l',
xlarge = '--icon-size-xl'
}
</script>
src/lib/elements/forms/inputSelect.svelte
+1
View File
@@ -13,6 +13,7 @@
label: string;
disabled?: boolean;
leadingIcon?: ComponentType;
leadingHtml?: string;
}[];
let element: HTMLSelectElement;
src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
+6 -2
View File
@@ -52,7 +52,9 @@
color="--color-fgcolor-neutral-tertiary">
Deployed
</Typography.Text>
<DeploymentCreatedBy {deployment} />
<Typography.Text variant="m-400">
<DeploymentCreatedBy {deployment} />
</Typography.Text>
</Layout.Stack>
{/if}
</Layout.Stack>
@@ -110,7 +112,9 @@
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
Source
</Typography.Text>
<DeploymentSource {deployment} />
<Typography.Text variant="m-400">
<DeploymentSource {deployment} />
</Typography.Text>
</Layout.Stack>
</Layout.Stack>
</Layout.Stack>
src/routes/(console)/project-[project]/sites/+page.svelte
+9 -1
View File
@@ -1,6 +1,12 @@
<script lang="ts">
import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
import {
Empty,
EmptySearch,
PaginationWithLimit,
SearchQuery,
ViewSelector
} from '$lib/components';
import { Container } from '$lib/layout';
import { isServiceLimited } from '$lib/stores/billing';
import { organization } from '$lib/stores/organization';
@@ -70,6 +76,8 @@
limit={data.limit}
offset={data.offset}
total={data.siteList.total} />
{:else if data.search}
<EmptySearch target="sites" />
{:else}
<Empty
single
src/routes/(console)/project-[project]/sites/create-site/aside.svelte
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Card } from '$lib/components';
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 { consoleVariables } from '$routes/(console)/store';
@@ -24,7 +24,7 @@
<Typography.Caption variant="400">Framework</Typography.Caption>
<Layout.Stack gap="xs" alignItems="center" direction="row">
{#if frameworkIcon}
<Icon size="s" icon={frameworkIcon}></Icon>
<SvgIcon name={frameworkIcon} />
{/if}
<Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
{framework.name}
src/routes/(console)/project-[project]/sites/create-site/details.svelte
+2
View File
@@ -16,6 +16,8 @@
}[] = [];
let showCustomId = false;
$: console.log(options);
</script>
<Fieldset legend="Details">
src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
+99 -75
View File
@@ -3,7 +3,7 @@
import { page } from '$app/stores';
import Card from '$lib/components/card.svelte';
import { Wizard } from '$lib/layout';
import { Layout, Typography, Icon } from '@appwrite.io/pink-svelte';
import { Layout, Typography, Icon, Lights, Step } from '@appwrite.io/pink-svelte';
import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
import Check from './(components)/check.svelte';
import type { PageData } from './$types';
@@ -34,85 +34,109 @@
title="Create a site"
hideAside={true}
href={`${base}/project-${$page.params.project}/sites/site-${data.site.$id}`}>
<Layout.Stack gap="l">
<!-- Creating a new stack -->
<div style:position="relative" style="z-index: 1;">
<Layout.Stack gap="xxl">
<Layout.Stack gap="l" direction="column" alignItems="center">
<Check />
<Layout.Stack gap="s" direction="column" alignItems="center">
<Typography.Text variant="l-400">Congratulations!</Typography.Text>
<Typography.Text variant="m-400"
>You deployed your Site successfully.</Typography.Text>
<Layout.Stack gap="xxl">
<Layout.Stack gap="l" direction="column" alignItems="center">
<Check />
<Layout.Stack gap="s" direction="column" alignItems="center">
<Typography.Text variant="l-400">Congratulations!</Typography.Text>
<Typography.Text variant="m-400"
>You deployed your Site successfully.</Typography.Text>
</Layout.Stack>
</Layout.Stack>
<Lights style="top: -100px; height:200px; width: 50%" />
<SiteCard deployment={data.deployment} />
</Layout.Stack>
<SiteCard deployment={data.deployment} />
</Layout.Stack>
{#if !data.deployment.providerCommitHash}
<Layout.Stack direction="row">
{#if !data.site.installationId && !data.site.providerRepositoryId}
<Card isTile radius="s" isButton on:click={() => (showConnectRepositry = true)}>
<Layout.Stack gap="s">
<Layout.Stack
direction="row"
justifyContent="space-between"
alignItems="center">
<Typography.Title size="s">Connect to repository</Typography.Title>
<Icon icon={IconArrowSmRight} />
</Layout.Stack>
<Typography.Text variant="m-400">
Connect to a new repository or an existing one.
</Typography.Text>
<Step.List>
<Step.Item state="current" shortLine={true}>
{#if !data.deployment.providerCommitHash}
<Layout.Stack direction="row">
{#if !data.site.installationId && !data.site.providerRepositoryId}
<Card
isTile
radius="s"
isButton
on:click={() => (showConnectRepositry = true)}>
<Layout.Stack gap="s">
<Layout.Stack
direction="row"
justifyContent="space-between"
alignItems="center">
<Typography.Title size="s"
>Connect to repository</Typography.Title>
<Icon icon={IconArrowSmRight} />
</Layout.Stack>
<Typography.Text variant="m-400">
Connect to a new repository or an existing one.
</Typography.Text>
</Layout.Stack>
</Card>
{/if}
<Card
isTile
radius="s"
href={`${base}/project-${$page.params.project}/sites/site-${data.site.$id}/domains`}>
<Layout.Stack gap="s">
<Layout.Stack
direction="row"
justifyContent="space-between"
alignItems="center">
<Typography.Title size="s">Add domain</Typography.Title>
<Icon icon={IconArrowSmRight} />
</Layout.Stack>
<Typography.Text variant="m-400">
Connect to an existing domain or purchase a new one.
</Typography.Text>
</Layout.Stack>
</Card>
<Card
isTile
radius="s"
isButton
on:click={() => (showInviteCollaborator = true)}>
<Layout.Stack gap="s">
<Layout.Stack
direction="row"
justifyContent="space-between"
alignItems="center">
<Typography.Title size="s"
>Add collaborators</Typography.Title>
<Icon icon={IconArrowSmRight} />
</Layout.Stack>
<Typography.Text variant="m-400">
Share your progress and start collaborating with your team.
</Typography.Text>
</Layout.Stack>
</Card>
<Card
isTile
radius="s"
isButton
on:click={() => (showOpenOnMobile = true)}>
<Layout.Stack gap="s">
<Layout.Stack
direction="row"
justifyContent="space-between"
alignItems="center">
<Typography.Title size="s">Open on mobile</Typography.Title>
<Icon icon={IconArrowSmRight} />
</Layout.Stack>
<Typography.Text variant="m-400">
Open the preview of your site on any mobile or tablet
device.
</Typography.Text>
</Layout.Stack>
</Card>
</Layout.Stack>
</Card>
{/if}
<Card
isTile
radius="s"
href={`${base}/project-${$page.params.project}/sites/site-${data.site.$id}/domains`}>
<Layout.Stack gap="s">
<Layout.Stack
direction="row"
justifyContent="space-between"
alignItems="center">
<Typography.Title size="s">Add domain</Typography.Title>
<Icon icon={IconArrowSmRight} />
</Layout.Stack>
<Typography.Text variant="m-400">
Connect to an existing domain or purchase a new one.
</Typography.Text>
</Layout.Stack>
</Card>
<Card isTile radius="s" isButton on:click={() => (showInviteCollaborator = true)}>
<Layout.Stack gap="s">
<Layout.Stack
direction="row"
justifyContent="space-between"
alignItems="center">
<Typography.Title size="s">Add collaborators</Typography.Title>
<Icon icon={IconArrowSmRight} />
</Layout.Stack>
<Typography.Text variant="m-400">
Share your progress and start collaborating with your team.
</Typography.Text>
</Layout.Stack>
</Card>
<Card isTile radius="s" isButton on:click={() => (showOpenOnMobile = true)}>
<Layout.Stack gap="s">
<Layout.Stack
direction="row"
justifyContent="space-between"
alignItems="center">
<Typography.Title size="s">Open on mobile</Typography.Title>
<Icon icon={IconArrowSmRight} />
</Layout.Stack>
<Typography.Text variant="m-400">
Open the preview of your site on any mobile or tablet device.
</Typography.Text>
</Layout.Stack>
</Card>
</Layout.Stack>
{/if}
</Layout.Stack>
{/if}
</Step.Item>
</Step.List>
</Layout.Stack>
</div>
<svelte:fragment slot="footer">
<Button
size="s"
src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/configuration.svelte
+2 -1
View File
@@ -25,6 +25,7 @@
import ImportSiteVariablesModal from '../../importSiteVariablesModal.svelte';
import type { Models } from '@appwrite.io/console';
import { getFrameworkIcon } from '../../../store';
import { iconPath } from '$lib/stores/app';
export let frameworks: Models.Framework[];
export let selectedFramework: Models.Framework;
@@ -61,7 +62,7 @@
options={frameworks.map((framework) => ({
value: framework.key,
label: framework.name,
leadingIcon: getFrameworkIcon(framework.key)
leadingHtml: `<img src='${$iconPath(getFrameworkIcon(framework.key), 'color')}' style='inline-size: var(--icon-size-m)' />`
}))}
on:change={() => {
selectedFramework = frameworks.find((framework) => framework.key === frameworkId);
src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
+3 -2
View File
@@ -3,7 +3,7 @@
import { base } from '$app/paths';
import { page } from '$app/stores';
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
import { Card } from '$lib/components';
import { Card, SvgIcon } from '$lib/components';
import { Button, Form } from '$lib/elements/forms';
import { Wizard } from '$lib/layout';
import { addNotification } from '$lib/stores/notifications';
@@ -30,6 +30,7 @@
import Domain from '../../domain.svelte';
import { NewRepository, Repositories, RepositoryBehaviour } from '$lib/components/git';
import { getFrameworkIcon } from '../../../store';
import { iconPath } from '$lib/stores/app';
export let data;
@@ -225,7 +226,7 @@
return {
value: framework.name,
label: framework.name,
leadingIcon: getFrameworkIcon(framework.key)
leadingHtml: `<img src='${$iconPath(getFrameworkIcon(framework.key), 'color')}' style='inline-size: var(--icon-size-m)' />`
};
})}
<Layout.Stack gap="xxl">
src/routes/(console)/project-[project]/sites/grid.svelte
+2 -1
View File
@@ -13,6 +13,7 @@
import { ActionMenu, Card, Icon, Popover } from '@appwrite.io/pink-svelte';
import RedeployModal from './redeployModal.svelte';
import { getFrameworkIcon } from './store';
import { SvgIcon } from '$lib/components';
export let siteList: Models.SiteList;
@@ -33,7 +34,7 @@
alt={site.name}
avatar>
<svelte:fragment slot="avatar">
<Icon icon={getFrameworkIcon(site.framework)} />
<SvgIcon name={getFrameworkIcon(site.framework)} />
</svelte:fragment>
<Popover placement="bottom-end" let:toggle>
<Button
src/routes/(console)/project-[project]/sites/redeployModal.svelte
+1 -1
View File
@@ -15,7 +15,7 @@
async function redeploy() {
try {
await sdk.forProject.sites.updateDeploymentBuild(site.$id, selectedDeploymentId);
await sdk.forProject.sites.createBuild(site.$id, selectedDeploymentId);
addNotification({
type: 'success',
message: `Redeploying ${site.name}`
src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.svelte
+4 -6
View File
@@ -2,7 +2,7 @@
import { base } from '$app/paths';
import { page } from '$app/stores';
import { EmptySearch, PaginationWithLimit } from '$lib/components/index.js';
import { Button, InputSearch } from '$lib/elements/forms';
import { Button } from '$lib/elements/forms';
import Link from '$lib/elements/link.svelte';
import { toLocaleDateTime } from '$lib/helpers/date';
import Container from '$lib/layout/container.svelte';
@@ -28,10 +28,10 @@
import RetryDomainModal from './retryDomainModal.svelte';
import { queries } from '$lib/components/filters';
import Card from '$lib/components/card.svelte';
import SearchQuery from '$lib/components/searchQuery.svelte';
export let data;
let search = '';
let showDelete = false;
let showRetry = false;
let selectedDomain: Models.ProxyRule = null;
@@ -41,9 +41,7 @@
<Container>
<Layout.Stack direction="row" justifyContent="space-between">
<div>
<InputSearch placeholder="Search domains" bind:value={search} />
</div>
<SearchQuery search={data.search} placeholder="Search sites" />
<Button
href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/domains/add-domain`}>
<Icon icon={IconPlus} size="s" />
@@ -133,7 +131,7 @@
offset={data.offset}
total={data.domains.total} />
{:else if data?.query}
<EmptySearch hidePages bind:search>
<EmptySearch hidePages bind:search={data.search} target="domains">
<svelte:fragment slot="actions">
<Button
secondary
src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.ts
+14 -9
View File
@@ -1,6 +1,6 @@
import { Query, ResourceType } from '@appwrite.io/console';
import { sdk } from '$lib/stores/sdk';
import { getLimit, getPage, getQuery, pageToOffset } from '$lib/helpers/load';
import { getLimit, getPage, getQuery, getSearch, pageToOffset } from '$lib/helpers/load';
import { Dependencies, PAGE_LIMIT } from '$lib/constants';
import { queries, queryParamToMap } from '$lib/components/filters';
@@ -10,6 +10,7 @@ export const load = async ({ params, depends, url, route }) => {
const limit = getLimit(url, route, PAGE_LIMIT);
const offset = pageToOffset(page, limit);
const query = getQuery(url);
const search = getSearch(url);
const parsedQueries = queryParamToMap(query || '[]');
queries.set(parsedQueries);
@@ -18,13 +19,17 @@ export const load = async ({ params, depends, url, route }) => {
offset,
limit,
query,
domains: await sdk.forProject.proxy.listRules([
Query.equal('resourceType', ResourceType.Site),
Query.equal('resourceId', params.site),
Query.limit(limit),
Query.offset(offset),
Query.orderDesc(''),
...parsedQueries.values()
])
search,
domains: await sdk.forProject.proxy.listRules(
[
Query.equal('resourceType', ResourceType.Site),
Query.equal('resourceId', params.site),
Query.limit(limit),
Query.offset(offset),
Query.orderDesc(''),
...parsedQueries.values()
],
search || undefined
)
};
};
src/routes/(console)/project-[project]/sites/store.ts
+10 -14
View File
@@ -1,12 +1,6 @@
import type { Column } from '$lib/helpers/types';
import { Framework, type Models } from '@appwrite.io/console';
import {
IconAngular,
IconNuxt,
IconReact,
IconSvelte,
IconVue
} from '@appwrite.io/pink-icons-svelte';
import { writable } from 'svelte/store';
export function getEnumFromModel(model: Models.Framework): Framework {
@@ -23,19 +17,21 @@ export const columns = writable<Column[]>([
export function getFrameworkIcon(framework: string) {
switch (true) {
case framework.toLocaleLowerCase().includes('sveltekit'):
return IconSvelte;
return 'svelte';
case framework.toLocaleLowerCase().includes('nuxt'):
return IconNuxt;
return 'nuxt';
case framework.toLocaleLowerCase().includes('vue'):
return IconVue;
return 'vue';
case framework.toLocaleLowerCase().includes('react'):
return IconReact;
return 'react';
case framework.toLocaleLowerCase().includes('angular'):
return IconAngular;
return 'angular';
case framework.toLocaleLowerCase().includes('svelte'):
return IconSvelte;
return 'svelte';
case framework.toLocaleLowerCase().includes('next'):
return IconReact; //TODO: add next icon
return 'nextjs';
case framework.toLocaleLowerCase().includes('astro'):
return 'astro';
default:
return undefined;