feat: deployment screens

This commit is contained in:
Arman
2025-02-13 11:00:33 +01:00
parent c593500b01
commit ec2e2db5a5
7 changed files with 31 additions and 28 deletions
+1 -1
View File
@@ -23,7 +23,7 @@
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@513bf8e",
"@appwrite.io/pink-legacy": "^1.0.0",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@513bf8e",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b",
"@popperjs/core": "^2.11.8",
"@sentry/sveltekit": "^8.38.0",
"@stripe/stripe-js": "^3.5.0",
+9 -9
View File
@@ -21,8 +21,8 @@ importers:
specifier: ^1.0.0
version: 1.0.0
'@appwrite.io/pink-svelte':
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@513bf8e
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@513bf8e(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
'@popperjs/core':
specifier: ^2.11.8
version: 2.11.8
@@ -221,8 +221,8 @@ packages:
peerDependencies:
svelte: ^4.0.0
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@513bf8eb06b89a8dab14e1532ca1d3a91d3cef18':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@513bf8eb06b89a8dab14e1532ca1d3a91d3cef18}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f4dce2bd27ae2f1eacaf6abdb61c1a359a7c869c':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f4dce2bd27ae2f1eacaf6abdb61c1a359a7c869c}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
'@appwrite.io/pink-legacy@1.0.0':
resolution: {integrity: sha512-EZk/wX8oDhIsCXf2A0oQjdNOaHvh5MnWbLQI4pAiGrdy5qQGPoU19AK6iVX6z3QoOq7geoEu0zVwAowBy5hZbQ==}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@513bf8e':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@513bf8e}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b}
version: 1.0.0-next.85
peerDependencies:
react-dom: ^18.0.0
@@ -4090,7 +4090,7 @@ snapshots:
dependencies:
svelte: 4.2.19
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@513bf8eb06b89a8dab14e1532ca1d3a91d3cef18(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f4dce2bd27ae2f1eacaf6abdb61c1a359a7c869c(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
@@ -4103,9 +4103,9 @@ snapshots:
'@appwrite.io/pink-icons': 1.0.0
the-new-css-reset: 1.11.3
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@513bf8e(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
dependencies:
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@513bf8eb06b89a8dab14e1532ca1d3a91d3cef18(svelte@4.2.19)
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f4dce2bd27ae2f1eacaf6abdb61c1a359a7c869c(svelte@4.2.19)
'@floating-ui/dom': 1.6.13
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
'@melt-ui/svelte': 0.86.2(svelte@4.2.19)
+10 -6
View File
@@ -7,23 +7,25 @@
type $$Props =
| {
title: string;
title?: string;
confirmExit: boolean;
showExitModal: boolean;
href?: string;
invertColumns?: boolean;
hideAside?: boolean;
hideFooter?: boolean;
column?: boolean;
columnSize?: 's' | 'm';
onExit?: () => void;
}
| {
title: string;
title?: string;
href: string;
confirmExit?: boolean;
showExitModal?: boolean;
invertColumns?: boolean;
hideAside?: boolean;
hideFooter?: boolean;
column?: boolean;
columnSize?: 's' | 'm';
onExit?: () => void;
};
@@ -32,8 +34,9 @@
export let href: $$Props['href'] = '';
export let showExitModal: $$Props['showExitModal'] = false;
export let invertColumns: $$Props['invertColumns'] = false;
export let hideAside = false;
export let hideFooter = false;
export let column: $$Props['column'] = false;
export let columnSize: $$Props['columnSize'] = 'm';
export let onExit: $$Props['onExit'] = undefined;
function handleKeydown(event: KeyboardEvent) {
@@ -58,7 +61,8 @@
<Layout.Wizard
{title}
{invertColumns}
{hideAside}
{column}
{columnSize}
{hideFooter}
href={confirmExit ? null : href}
buttonMethod={() => {
@@ -6,7 +6,7 @@
import { Dependencies } from '$lib/constants';
import { Button } from '$lib/elements/forms';
import { capitalize } from '$lib/helpers/string';
import { calculateTime, formatTimeDetailed } from '$lib/helpers/timeConversion';
import { formatTimeDetailed } from '$lib/helpers/timeConversion';
import { addNotification } from '$lib/stores/notifications';
import { sdk } from '$lib/stores/sdk';
import type { Models } from '@appwrite.io/console';
@@ -44,6 +44,7 @@
async function cancelDeployment() {
try {
await sdk.forProject.sites.updateDeploymentBuild(deployment.resourceId, deployment.$id);
await invalidate(Dependencies.DEPLOYMENTS);
addNotification({
type: 'success',
@@ -90,7 +91,7 @@
<Typography.Code color="--color-fgcolor-neutral-secondary">
<Layout.Stack direction="row" alignItems="center" inline>
<p use:timer={{ start: deployment.$createdAt }} />
<Spinner />
<Spinner size="s" />
</Layout.Stack>
</Typography.Code>
{:else}
@@ -47,7 +47,7 @@
</svelte:fragment>
<svelte:fragment slot="footer">
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
{#if ['processing', 'building', 'failed'].includes(data.deployment.status)}
{#if ['processing', 'building'].includes(data.deployment.status)}
<Typography.Text variant="m-400" color="--color-fgColor-neutral-tertiary">
Deployment will continue in the background
</Typography.Text>
@@ -30,20 +30,18 @@
});
</script>
<Wizard
title="Create a site"
hideAside={true}
href={`${base}/project-${$page.params.project}/sites/site-${data.site.$id}`}>
<Wizard column href={`${base}/project-${$page.params.project}/sites/site-${data.site.$id}`}>
<!-- Creating a new stack -->
<div style:position="relative" style="z-index: 1;">
<Layout.Stack gap="xxl">
<Layout.Stack gap="xxl">
<Layout.Stack gap="xxxl">
<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>
<Typography.Title size="l">Congratulations!</Typography.Title>
<Typography.Text variant="m-400">
You deployed your Site successfully.
</Typography.Text>
</Layout.Stack>
</Layout.Stack>
<Lights style="top: -100px; height:200px; width: 50%" />
@@ -11,7 +11,7 @@
import type { Models } from '@appwrite.io/console';
import { Fieldset, Layout, Popover, Icon, Accordion } from '@appwrite.io/pink-svelte';
import { IconInfo } from '@appwrite.io/pink-icons-svelte';
import { onMount, type SvelteComponent } from 'svelte';
import { type SvelteComponent } from 'svelte';
import { getApiEndpoint } from '$lib/stores/sdk';
import { page } from '$app/stores';
import { project } from '$routes/(console)/project-[project]/store';