From b4b3cf27df71be30cade7ce2c73b1152423c6f0e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 12 Apr 2024 14:24:12 +0200
Subject: [PATCH] feat: initial commit testing

---
 src/lib/layout/index.ts                       |  3 +
 src/lib/layout/wizard.svelte                  | 27 ++-----
 src/lib/layout/wizardHeader.svelte            | 33 ++++++++
 src/lib/layout/wizardMainWrapper.svelte       |  6 ++
 src/lib/layout/wizardPage.svelte              | 11 +++
 .../wiz/(1)/first/+layout.ts                  |  5 ++
 .../wiz/(1)/first/+page.svelte                |  1 +
 .../wiz/(1)/first/header.svelte               |  5 ++
 .../wiz/+layout@.svelte                       | 38 +++++++++
 .../create-file/(1)/upload/+page.svelte       | 77 +++++++++++++++++++
 .../(2)/set-permissions/+page.svelte          | 39 ++++++++++
 .../bucket-[bucket]/create-file/+layout.ts    | 17 ++++
 .../create-file/+layout@.svelte               | 28 +++++++
 13 files changed, 270 insertions(+), 20 deletions(-)
 create mode 100644 src/lib/layout/wizardHeader.svelte
 create mode 100644 src/lib/layout/wizardMainWrapper.svelte
 create mode 100644 src/lib/layout/wizardPage.svelte
 create mode 100644 src/routes/console/organization-[organization]/wiz/(1)/first/+layout.ts
 create mode 100644 src/routes/console/organization-[organization]/wiz/(1)/first/+page.svelte
 create mode 100644 src/routes/console/organization-[organization]/wiz/(1)/first/header.svelte
 create mode 100644 src/routes/console/organization-[organization]/wiz/+layout@.svelte
 create mode 100644 src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/(1)/upload/+page.svelte
 create mode 100644 src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/(2)/set-permissions/+page.svelte
 create mode 100644 src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/+layout.ts
 create mode 100644 src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/+layout@.svelte

diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index cf1bd6e4b..21818a761 100644
--- a/src/lib/layout/index.ts
+++ b/src/lib/layout/index.ts
@@ -10,6 +10,9 @@ export { default as Shell } from './shell.svelte';
 export { default as Logs } from './logs.svelte';
 export { default as Wizard } from './wizard.svelte';
 export { default as WizardStep } from './wizardStep.svelte';
+export { default as WizardHeader } from './wizardHeader.svelte';
+export { default as WizardPage } from './wizardPage.svelte';
+export { default as WizardMainWrapper } from './wizardMainWrapper.svelte';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
 export { default as Unauthenticated } from './unauthenticated.svelte';
 export { default as Usage, type UsagePeriods } from './usage.svelte';
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index b55c4ff3c..dd8f19a40 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -3,7 +3,8 @@
         number,
         {
             label: string;
-            component: typeof SvelteComponent<unknown>;
+            component?: typeof SvelteComponent<unknown>;
+            href?: string;
             optional?: boolean;
             disabled?: boolean;
         }
@@ -19,6 +20,8 @@
     import { wizard } from '$lib/stores/wizard';
     import { createEventDispatcher, type SvelteComponent } from 'svelte';
     import WizardExitModal from './wizardExitModal.svelte';
+    import WizardHeader from './wizardHeader.svelte';
+    import WizardMainWrapper from './wizardMainWrapper.svelte';
 
     export let title: string;
     export let steps: WizardStepsType;
@@ -132,24 +135,8 @@
 
 <svelte:window on:keydown={handleKeydown} />
 
-<section class="wizard">
-    <div class="wizard-header-strip" />
-    <div class="wizard-start-bg" />
-    <div class="wizard-end-bg" />
-
-    <header class="wizard-header">
-        <div class="body-text-1 u-bold">{title}</div>
-
-        <slot name="header" />
-        <button
-            class="button is-text is-only-icon u-margin-inline-start-auto"
-            style="--button-size:1.5rem;"
-            aria-label="close wizard"
-            on:click={handleExit}>
-            <span class="icon-x" aria-hidden="true" />
-        </button>
-    </header>
-
+<WizardMainWrapper>
+    <WizardHeader {title} on:click={handleExit} />
     <aside class="wizard-side">
         <slot name="aside">
             <Steps
@@ -195,7 +182,7 @@
             </div>
         </Form>
     </div>
-</section>
+</WizardMainWrapper>
 
 {#if showExitModal}
     <WizardExitModal
diff --git a/src/lib/layout/wizardHeader.svelte b/src/lib/layout/wizardHeader.svelte
new file mode 100644
index 000000000..d993137eb
--- /dev/null
+++ b/src/lib/layout/wizardHeader.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    export let title: string;
+    export let header: string = '';
+    export let href: string = null;
+</script>
+
+<header class="wizard-header">
+    <div class="body-text-1 u-bold">{title}</div>
+
+    {#if header}
+        {header}
+    {:else}
+        <slot name="header" />
+    {/if}
+
+    {#if href}
+        <a
+            class="button is-text is-only-icon u-margin-inline-start-auto"
+            style="--button-size:1.5rem;"
+            {href}
+            aria-label="close wizard">
+            <span class="icon-x" aria-hidden="true" />
+        </a>
+    {:else}
+        <button
+            class="button is-text is-only-icon u-margin-inline-start-auto"
+            style="--button-size:1.5rem;"
+            aria-label="close wizard"
+            on:click>
+            <span class="icon-x" aria-hidden="true" />
+        </button>
+    {/if}
+</header>
diff --git a/src/lib/layout/wizardMainWrapper.svelte b/src/lib/layout/wizardMainWrapper.svelte
new file mode 100644
index 000000000..013912612
--- /dev/null
+++ b/src/lib/layout/wizardMainWrapper.svelte
@@ -0,0 +1,6 @@
+<section class="wizard">
+    <div class="wizard-header-strip" />
+    <div class="wizard-start-bg" />
+    <div class="wizard-end-bg" />
+    <slot />
+</section>
diff --git a/src/lib/layout/wizardPage.svelte b/src/lib/layout/wizardPage.svelte
new file mode 100644
index 000000000..6019b4623
--- /dev/null
+++ b/src/lib/layout/wizardPage.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { Form } from '$lib/elements/forms';
+
+    export let submit: (e: Event) => void | Promise<void>;
+</script>
+
+<div class="wizard-main">
+    <Form noStyle onSubmit={submit}>
+        <slot />
+    </Form>
+</div>
diff --git a/src/routes/console/organization-[organization]/wiz/(1)/first/+layout.ts b/src/routes/console/organization-[organization]/wiz/(1)/first/+layout.ts
new file mode 100644
index 000000000..24df18fd6
--- /dev/null
+++ b/src/routes/console/organization-[organization]/wiz/(1)/first/+layout.ts
@@ -0,0 +1,5 @@
+export async function load() {
+    return {
+        wizardTitle: 'page 1'
+    };
+}
diff --git a/src/routes/console/organization-[organization]/wiz/(1)/first/+page.svelte b/src/routes/console/organization-[organization]/wiz/(1)/first/+page.svelte
new file mode 100644
index 000000000..9daeafb98
--- /dev/null
+++ b/src/routes/console/organization-[organization]/wiz/(1)/first/+page.svelte
@@ -0,0 +1 @@
+test
diff --git a/src/routes/console/organization-[organization]/wiz/(1)/first/header.svelte b/src/routes/console/organization-[organization]/wiz/(1)/first/header.svelte
new file mode 100644
index 000000000..9699366d1
--- /dev/null
+++ b/src/routes/console/organization-[organization]/wiz/(1)/first/header.svelte
@@ -0,0 +1,5 @@
+<script>
+    import WizardHeader from '$lib/layout/wizardHeader.svelte';
+</script>
+
+<WizardHeader title="test" on:exit={handleExit} />
diff --git a/src/routes/console/organization-[organization]/wiz/+layout@.svelte b/src/routes/console/organization-[organization]/wiz/+layout@.svelte
new file mode 100644
index 000000000..25abd5afa
--- /dev/null
+++ b/src/routes/console/organization-[organization]/wiz/+layout@.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { afterNavigate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { WizardHeader, WizardMainWrapper } from '$lib/layout';
+
+    function handleExit() {
+        console.log('test');
+    }
+
+    let previousPage: string = base;
+    afterNavigate(({ from }) => {
+        previousPage = from?.url?.pathname || previousPage;
+    });
+
+    $: console.log(previousPage);
+</script>
+
+<WizardMainWrapper>
+    <WizardHeader title={$page.data.wizardTitle} on:click={handleExit} />
+
+    <!-- <aside class="wizard-side">
+        <slot name="aside">
+            <Steps
+                on:step={handleStepClick}
+                steps={sortedSteps.map(([, { label, optional, disabled }]) => ({
+                    text: label,
+                    optional,
+                    disabled
+                }))}
+                currentStep={$wizard.step} />
+        </slot>
+    </aside> -->
+
+    <div class="wizard-main">
+        <slot />
+    </div>
+</WizardMainWrapper>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/(1)/upload/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/(1)/upload/+page.svelte
new file mode 100644
index 000000000..4a9e98f93
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/(1)/upload/+page.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { Alert, CustomId } from '$lib/components';
+    import { BillingPlan } from '$lib/constants';
+    import { Pill } from '$lib/elements';
+    import { Button, FormList, InputFile } from '$lib/elements/forms';
+    import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
+    import WizardStep from '$lib/layout/wizardStep.svelte';
+    import { getServiceLimit, tierToPlan } from '$lib/stores/billing';
+    import { organization } from '$lib/stores/organization';
+    import { wizard } from '$lib/stores/wizard';
+    import { isCloud } from '$lib/system';
+    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import { bucket } from '../../../store';
+    import { createFile } from '../../store';
+
+    let showCustomId = false;
+    const service = getServiceLimit('fileSize');
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Create file</svelte:fragment>
+    <svelte:fragment slot="subtitle">Upload a file to add it to your bucket.</svelte:fragment>
+
+    {#if isCloud}
+        {@const size = humanFileSize(sizeToBytes(service, 'MB', 1000))}
+        {@const plan = tierToPlan($organization?.billingPlan)}
+        <Alert type="info">
+            <p class="text">
+                The {plan.name} plan has a maximum upload file size limit of {Math.floor(
+                    parseInt(size.value)
+                )}{size.unit}.
+                {#if $organization?.billingPlan === BillingPlan.STARTER}
+                    Upgrade to allow files of a larger size.
+                {/if}
+            </p>
+            <svelte:fragment slot="action">
+                {#if $organization?.billingPlan === BillingPlan.STARTER}
+                    <div class="alert-buttons u-flex">
+                        <Button text on:click={() => wizard.start(ChangeOrganizationTierCloud)}>
+                            Upgrade plan
+                        </Button>
+                    </div>
+                {/if}
+            </svelte:fragment>
+        </Alert>
+    {/if}
+
+    <FormList class="u-margin-block-start-24">
+        <div class="u-width-full-line u-overflow-hidden">
+            <InputFile
+                required
+                bind:files={$createFile.files}
+                allowedFileExtensions={$bucket.allowedFileExtensions}
+                maxSize={$bucket.maximumFileSize} />
+        </div>
+
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}>
+                    <span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        File ID
+                    </span>
+                </Pill>
+            </div>
+        {:else}
+            <div class="custom-id-wrapper">
+                <CustomId bind:show={showCustomId} name="File" bind:id={$createFile.id} />
+            </div>
+        {/if}
+    </FormList>
+</WizardStep>
+
+<style lang="scss">
+    .custom-id-wrapper :global(.is-inner-modal) {
+        inline-size: auto;
+    }
+</style>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/(2)/set-permissions/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/(2)/set-permissions/+page.svelte
new file mode 100644
index 000000000..f80e98214
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/(2)/set-permissions/+page.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+    import Alert from '$lib/components/alert.svelte';
+    import Permissions from '$lib/components/permissions/permissions.svelte';
+    import WizardStep from '$lib/layout/wizardStep.svelte';
+    import { bucket } from '../../../store';
+    import { createFile } from '../../store';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Update Permissions</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Choose who can access your buckets and files. For more information, check out the
+        <a
+            href="https://appwrite.io/docs/advanced/platform/permissions"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">
+            Permissions Guide
+        </a>.</svelte:fragment>
+
+    {#if $bucket.fileSecurity}
+        <div class="common-section">
+            <Alert type="info">
+                <svelte:fragment slot="title">File security enabled</svelte:fragment>
+                Users will be able to access this file if they have been granted
+                <b>either File or Bucket permissions</b>.
+            </Alert>
+        </div>
+        <div class="common-section">
+            <Permissions bind:permissions={$createFile.permissions} />
+        </div>
+    {:else}
+        <Alert type="info">
+            <svelte:fragment slot="title">File security disabled</svelte:fragment>
+            If you want to assign file permissions, navigate to Bucket settings and enable file security.
+            Otherwise, only Bucket permissions will be used.
+        </Alert>
+    {/if}
+</WizardStep>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/+layout.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/+layout.ts
new file mode 100644
index 000000000..9e1d6def0
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/+layout.ts
@@ -0,0 +1,17 @@
+import { get } from 'svelte/store';
+import { sdk } from '$lib/stores/sdk';
+import { page } from '$app/stores';
+
+export async function load({ params }) {
+    const bucket = get(page)?.data?.bucket;
+
+    if (!bucket) {
+        return {
+            bucket: await sdk.forProject.storage.getBucket(params.bucket)
+        };
+    } else {
+        return {
+            bucket
+        };
+    }
+}
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/+layout@.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/+layout@.svelte
new file mode 100644
index 000000000..f9428f17d
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/+layout@.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { WizardHeader, WizardMainWrapper } from '$lib/layout';
+</script>
+
+<WizardMainWrapper>
+    <WizardHeader
+        title="Create File"
+        href={`${base}/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}`} />
+
+    <!-- <aside class="wizard-side">
+        <slot name="aside">
+            <Steps
+                on:step={handleStepClick}
+                steps={sortedSteps.map(([, { label, optional, disabled }]) => ({
+                    text: label,
+                    optional,
+                    disabled
+                }))}
+                currentStep={$wizard.step} />
+        </slot>
+    </aside> -->
+
+    <div class="wizard-main">
+        <slot />
+    </div>
+</WizardMainWrapper>